/* ============================================================
   OTOLECZ TRANSZPORTBETON KFT. — beton-brutalista stylesheet
   Palette: lime #84cc16 / charcoal #1d1d1f / cement greys / white
   ============================================================ */

:root {
  --green: #84cc16;
  --green-dark: #6ba50f;
  --charcoal: #1d1d1f;
  --charcoal-2: #2b2b2e;
  --cement: #ececE9;
  --cement-2: #d6d6d2;
  --cement-3: #f5f5f3;
  --white: #ffffff;
  --line: #c9c9c4;
  --shadow: 0 10px 30px rgba(29,29,31,.12);
  --shadow-slab: 0 24px 60px -18px rgba(29,29,31,.55);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, "Roboto Mono", Menlo, Consolas, monospace;
  --maxw: 1240px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--charcoal);
  background: var(--cement-3);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Hide the native scrollbar everywhere (Lenis smooth scroll + the green progress bar replace it).
   Robust across engines: scrollbar-width (FF/Safari 18.2+), -ms-overflow-style (old Edge),
   ::-webkit-scrollbar (Chrome/Safari). Applied to html AND body. */
/* overflow-x: clip (NOT hidden) — prevents horizontal scroll WITHOUT creating a scroll
   container, so position:sticky on the nav keeps working */
html, body { overflow-x: clip; scrollbar-width: none !important; -ms-overflow-style: none !important; }
html::-webkit-scrollbar, body::-webkit-scrollbar, ::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; background: transparent !important; }

/* slim scroll-progress bar (replaces the gaudy native scrollbar) */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--green); z-index: 99990; pointer-events: none;
  box-shadow: 0 0 12px rgba(132,204,22,.55); transition: width .08s linear;
}

/* ===== Page transitions — DISABLED. The cross-document View Transition (with a 44px
   slide-in over ~1s) made navigation feel like the page "loads twice" when moving
   between subpages. Plain instant navigation is cleaner/faster. ===== */

/* Lenis smooth-scroll required styles */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ===== Award intro loader ===== */
.loader {
  position: fixed; inset: 0; z-index: 99999;
  background:
    radial-gradient(120% 90% at 50% 40%, #1d1e22 0%, #141519 70%),
    #141519;
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
}
.loader__inner { text-align: center; }
/* Giant concrete %-counter (counts 0->100, textured like cast concrete) */
.loader__count { display: block; line-height: 1; white-space: nowrap; }
.loader__pct {
  display: inline-block; line-height: 1;
  /* padding so the background-clip:text paint box fully contains the heavy
     condensed glyphs — without it the box is smaller than the digits and the
     top/bottom/side edges get clipped (no background = transparent). */
  padding: 0.16em 0.12em 0.18em;
  font-weight: 900; font-stretch: condensed; letter-spacing: -0.05em;
  font-size: clamp(150px, 40vw, 380px);
  color: transparent;
  background: url("concrete-face.jpg") center / 130% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.10);
  font-variant-numeric: tabular-nums;
}
.loader__sign {
  font-weight: 900; font-size: clamp(40px, 9vw, 96px); color: var(--green);
  vertical-align: top; margin-left: .03em; text-shadow: 0 0 22px rgba(132,204,22,.4);
}
.loader__sub {
  display: block; margin-top: 10px; font-family: var(--mono); font-weight: 800;
  font-size: clamp(12px, 2.1vw, 19px); letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
}
.loader__sub b { color: var(--green); margin: 0 .35em; font-weight: 800; }
.no-js .loader { display: none; }
@media (prefers-reduced-motion: reduce) { .loader { display: none; } }

/* Custom cursor accent (desktop pointer only). The NATIVE cursor stays VISIBLE —
   the green square trails it with smoothing as an accent (NOT a replacement). */
.cursor {                 /* small SOLID square — fits the concrete/brutalist vibe */
  position: fixed; top: 0; left: 0; width: 13px; height: 13px;
  background: var(--green); border-radius: 0;
  pointer-events: none; z-index: 9999; opacity: .95;
  transition: width .22s ease, height .22s ease, background-color .22s ease, opacity .3s ease;
}
.cursor.is-hover { width: 30px; height: 30px; background-color: rgba(132,204,22,.55); }
/* native cursor intentionally NOT hidden — the green square only trails it */
/* The custom cursor element is only created by JS when a real mouse/trackpad is
   present (incl. iPad + trackpad), so no coarse-pointer override is needed —
   pure touch devices never get .cursor or .cursor-active. */

/* thin, integrated, branded scrollbar (no wide grey band) */
html { scrollbar-width: thin; scrollbar-color: rgba(60,60,60,.5) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(45,45,45,.45); border-radius: 8px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--green-dark); }

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ============================================================
   REAL CONCRETE PHOTO TEXTURES (CC0 architectural concrete files)
   The brutalist/monumental feel comes from genuine concrete photos,
   not fake CSS. A tonal gradient overlay (::before) keeps white text
   fully legible over the photo. Subtle parallax via background-position.
   ============================================================ */
.concrete-photo {
  position: relative; isolation: isolate;
  background-color: #4a4a48;          /* fallback while photo loads */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: scroll;       /* scroll (not fixed) = smooth scrolling */
  color: var(--white);
}
/* tonal/dark gradient overlay for text legibility over the photo */
.concrete-photo::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,20,22,.62) 0%, rgba(20,20,22,.52) 45%, rgba(20,20,22,.74) 100%);
}

/* architectural concrete PANEL wall (form-tie holes + panel seams) —
   the brutalist signature. Monument band + closing CTA band. */
.concrete-photo--wall  { background-image: url("concrete-wall.jpg"); }
/* board-formed raw concrete (horizontal grain) — stat band. */
.concrete-photo--board { background-image: url("concrete-board.jpg"); }
/* general concrete floor — subtle bg where useful. */
.concrete-photo--floorbg { background-image: url("concrete-floor.jpg"); }

/* darker overlay variant for the charcoal closing band (max legibility) */
.concrete-photo--dark::before {
  background: linear-gradient(180deg, rgba(15,15,16,.80) 0%, rgba(15,15,16,.72) 45%, rgba(15,15,16,.88) 100%);
}
/* the closing band carries .section--charcoal (defined later, would reset the
   bg shorthand) — re-assert the concrete photo with higher specificity */
.section--charcoal.concrete-photo--wall {
  background-color: #2a2a28;
  background-image: url("concrete-wall.jpg");
  background-size: cover; background-position: center;
}

/* SUBTLE concrete accent on a LIGHT section: a faint board-formed wash on
   one side only, so the section stays cement-light & body text stays dark. */
.concrete-photo--floor-soft { position: relative; isolation: isolate; }
.concrete-photo--floor-soft::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("concrete-floor.jpg");
  background-size: cover; background-position: center;
  opacity: .10; mix-blend-mode: multiply;
}

/* ============================================================
   NO DIVIDER BANDS.
   Sections flow fluidly — tone / texture / spacing + each section's
   own concrete treatment define the boundary. No explicit divider
   element exists (client request: dividers removed).
   ============================================================ */

/* ============================================================
   SCROLL PARALLAX (set via inline transform by JS; CSS keeps it smooth)
   ============================================================ */
.js [data-parallax] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .js [data-parallax] { transform: none !important; }
}

/* ---- Typographic system: heavy MONUMENTAL brutalist ---- */
h1, h2, h3, h4 {
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-transform: uppercase;
  font-stretch: condensed;
}
h1, h2 { letter-spacing: -0.045em; }

/* Big stencil/mono section index numbers */
.bignum {
  display: block; font-family: var(--mono);
  font-weight: 800; line-height: .82; letter-spacing: -0.04em;
  font-size: clamp(64px, 12vw, 168px);
  color: transparent;
  -webkit-text-stroke: 2px var(--charcoal);
  opacity: .14; margin-bottom: -8px; pointer-events: none; user-select: none;
}
.section--charcoal .bignum, .concrete-photo .bignum { -webkit-text-stroke-color: var(--white); opacity: .2; }
.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-dark);
  border-left: 4px solid var(--green);
  padding-left: 12px;
  margin-bottom: 18px;
}
.section { padding: 100px 0; }
.section--cement { background: var(--cement); }
.section--charcoal { background: var(--charcoal); color: var(--white); position: relative; overflow: hidden; }
.section--charcoal .wrap { position: relative; z-index: 1; }
.section--cement-2 { background: var(--cement-2); }

/* ============================================================
   CINEMATIC SCROLL-REVEAL
   .no-js fallback: everything visible (for static screenshots / no JS)
   .js: hidden until IntersectionObserver adds .is-in
   ============================================================ */
.js .reveal {
  opacity: 0;
  transform: translateY(44px) scale(.985);
  transition: opacity 1.05s cubic-bezier(.16,.84,.24,1), transform 1.05s cubic-bezier(.16,.84,.24,1);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Staggered children: each direct child animates in sequence as the
   container reveals. --i is set per child by JS (fallback nth-child below). */
.js .stagger > * {
  opacity: 0; transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.16,.84,.24,1), transform .8s cubic-bezier(.16,.84,.24,1);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: opacity, transform;
}
.js .stagger.is-in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .stagger > * { opacity: 1 !important; transform: none !important; transition: none; }
  .hero__scroll span { animation: none; }
}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 1000;
  background: var(--white);
  border-bottom: 3px solid var(--charcoal);
  /* NOTE: do NOT put transform / will-change here — the mobile menu (.nav__menu) is
     position:fixed, and a transform on this ancestor would become its containing block,
     collapsing the menu overlay. (Plain sticky; the minor iOS repaint flash is fine.) */
}
.nav__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; height: 82px; gap: 18px;
}
/* --- LOGO FIX: clean aspect ratio, vertically centered, crisp --- */
.nav__logo {
  display: flex; align-items: center; height: 100%;
  flex-shrink: 0; margin-right: 8px;
}
.nav__logo img {
  display: block;
  height: 46px; width: auto; max-width: 220px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

.nav__menu {
  display: flex; align-items: center; list-style: none; gap: 1px;
  height: 100%;
}
.nav__menu > li { position: relative; height: 100%; display: flex; align-items: center; }
.nav__menu > li > a,
.nav__menu > li > .nav__drop-toggle {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.01em; color: var(--charcoal); white-space: nowrap;
  padding: 0 6px; height: 100%;
  border: none; background: none; cursor: pointer; font-family: var(--font);
  border-bottom: 3px solid transparent; margin-bottom: -3px;
}
.nav__menu > li > a:hover,
.nav__menu > li > .nav__drop-toggle:hover,
.nav__menu > li.open > .nav__drop-toggle {
  color: var(--green-dark);
  border-bottom-color: var(--green);
}
.caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }

/* Dropdown */
.nav__dropdown {
  position: absolute; top: 100%; left: 0;
  background: var(--charcoal); min-width: 290px;
  border-top: 3px solid var(--green);
  list-style: none; padding: 6px 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s, transform .18s, visibility .18s;
  box-shadow: var(--shadow);
}
.nav__menu > li:hover .nav__dropdown,
.nav__menu > li.open .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__dropdown li a {
  display: block; padding: 12px 20px;
  font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--cement); border-left: 3px solid transparent;
}
.nav__dropdown li a:hover { background: var(--charcoal-2); color: var(--green); border-left-color: var(--green); }

/* CTA in nav */
.nav__cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green); color: var(--charcoal);
  font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em;
  font-size: 13px; padding: 12px 16px; white-space: nowrap;
  border: 3px solid var(--charcoal);
  transition: background .15s, transform .1s;
}
.nav__cta:hover { background: var(--charcoal); color: var(--green); }

/* Hamburger */
.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav__burger span { width: 28px; height: 3px; background: var(--charcoal); display: block; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 15px; padding: 16px 28px; cursor: pointer;
  border: 3px solid var(--charcoal); transition: all .15s; font-family: var(--font);
}
.btn--green { background: var(--green); color: var(--charcoal); }
.btn--green:hover { background: var(--charcoal); color: var(--green); }
.btn--ghost { background: transparent; color: var(--white); border-color: var(--white); }
.btn--ghost:hover { background: var(--white); color: var(--charcoal); }
.btn--dark { background: var(--charcoal); color: var(--white); }
.btn--dark:hover { background: var(--green); color: var(--charcoal); border-color: var(--green); }

/* ============================================================
   HERO — fixed parallax background
   ============================================================ */
.hero {
  position: relative;
  min-height: 94vh;
  display: flex; align-items: center;
  overflow: hidden;            /* clip the oversized parallax bg layer */
  color: var(--white);
}
/* Parallax background LAYER (so it can drift on scroll = depth).
   Crisp B&W of the real Otolecz plant: light veil up top (dramatic dark sky
   + bright silos), stronger at the bottom-left for headline/CTA legibility. */
.hero__bg {
  position: absolute; inset: -10% 0; z-index: 0; will-change: transform;
  background-image:
    linear-gradient(180deg, rgba(14,15,18,.20) 0%, rgba(14,15,18,.16) 40%, rgba(14,15,18,.50) 76%, rgba(14,15,18,.78) 100%),
    radial-gradient(130% 92% at 20% 84%, rgba(14,15,18,.48) 0%, rgba(14,15,18,0) 56%),
    url('hero-plant-bw-hd.jpg');
  background-size: cover, cover, cover;
  background-position: center, center, center 38%;
}
/* faint concrete grain over the hero photo for cohesion */
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.013' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.18'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3C/svg%3E");
  background-size: 400px 400px; mix-blend-mode: overlay; opacity: .5;
}
.hero .wrap { position: relative; z-index: 1; }
.hero__content { max-width: 880px; padding: 60px 0; }
.hero__kicker {
  display: inline-block; font-family: var(--mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--green);
  border-left: 4px solid var(--green); padding: 7px 16px; margin-bottom: 22px;
  background: rgba(18,18,18,.62); text-shadow: 0 1px 6px rgba(0,0,0,.75);
}
.hero h1 {
  font-size: clamp(48px, 9vw, 124px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-shadow: 0 6px 48px rgba(0,0,0,.65), 0 1px 2px rgba(0,0,0,.6);
}
.hero h1 .accent {
  display: block;                /* always its own line (no width-dependent reflow) */
  color: var(--green);
  text-shadow: 0 4px 32px rgba(132,204,22,.35), 0 6px 48px rgba(0,0,0,.55);
}
.hero h1 .htail { display: block; }   /* "SZÍVÉBŐL" always on its own line */
/* 3D CONCRETE hero word "BETON" — a real composited concrete render
   (face + extruded sides + cast shadow), placed inline with the headline.
   Sized in em so it scales with the h1; the extrusion/shadow hang below the
   baseline naturally. */
.hero h1 .hero-word {            /* own line; holds the PNG (fallback) + the live 3D canvas */
  display: block; position: relative;
  width: max-content; max-width: 100%;
  margin: 0 0 .14em -.04em;
}
.hero h1 .concrete-word-img {
  height: 1.06em; width: auto; display: block;
  filter: drop-shadow(7px 11px 13px rgba(0,0,0,.55));  /* lifts the slab off the hero */
}
/* Tier-3 live 3D: when WebGL kicks in, hide the PNG pixels (keep its box for size) */
.hero h1 .hero-word.is-3d .concrete-word-img { visibility: hidden; }
.hero h1 .hero-word__3d {   /* JS sizes/positions it larger than the box so rotation isn't clipped */
  position: absolute; pointer-events: none; opacity: 0; transition: opacity .7s ease;
}
.hero h1 .hero-word.is-3d .hero-word__3d { opacity: 1; }
.hero h1 .dash { display: none; }          /* dash not needed once BETON is its own block */
@media (max-width: 560px) {
  .hero h1 .concrete-word-img { height: .96em; }
}
.hero__sub {
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 500; text-transform: none; letter-spacing: 0;
  margin: 24px 0 36px; max-width: 560px;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.hero__btns { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__badge {
  position: absolute; top: 32px; right: 24px; z-index: 2;
  background: var(--green); color: var(--charcoal);
  font-weight: 900; text-transform: uppercase; font-size: 13px; letter-spacing: 0.05em;
  padding: 10px 16px; border: 3px solid var(--charcoal);
}

/* cinematic scroll cue at hero base */
.hero__scroll {
  position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%);  /* above the band overlap */
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.6);
  border-radius: 14px; z-index: 2;
}
.hero__scroll span {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  width: 4px; height: 8px; background: var(--green); border-radius: 2px;
  animation: heroScroll 1.7s ease-in-out infinite;
}
@keyframes heroScroll {
  0% { opacity: 0; transform: translate(-50%, 0); }
  35% { opacity: 1; }
  70% { opacity: 1; transform: translate(-50%, 14px); }
  100% { opacity: 0; transform: translate(-50%, 16px); }
}

/* ============================================================
   TRUST STRIP — stat band
   ============================================================ */
/* CONCRETE SLAB band — REAL Blender-rendered concrete (same material/look as
   the 3D letters: grazing light + relief + bug-holes) */
.trust {
  position: relative; color: var(--white);
  /* overlap the hero and ALPHA-fade the band's own texture in over it -> the panels
     literally emerge from the photo (no colour bridge = no dark stripe, no hard line) */
  margin-top: -54px; z-index: 2;   /* gentle overlap; the band texture alpha-fades in over the hero bottom */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 50px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 50px);
  background: #2b2b2a url('bandP1-clean.jpg') center/cover;   /* sharp 4K concrete (de-striped: no form-board seam) */
}
.trust::before {       /* slab-shade so the off-white numbers + green pop */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.20) 50%, rgba(0,0,0,.40) 100%);
}
.trust__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
/* score-cut seams between cells (engraved into the slab) */
.trust__item {
  padding: 52px 24px; text-align: center; position: relative;
  box-shadow:
    inset -1px 0 0 rgba(0,0,0,.34),
    inset 1px 0 0 rgba(255,255,255,.10);
}
.trust__item:last-child { box-shadow: inset 1px 0 0 rgba(255,255,255,.10); }
.trust__num {
  font-size: clamp(36px, 4.3vw, 62px); font-weight: 900; color: #ece9e1;  /* warm off-white, not flat */
  line-height: 1; letter-spacing: -0.045em;
  text-shadow: 0 1px 0 rgba(0,0,0,.5), 0 2px 22px rgba(0,0,0,.55);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.trust__num .u {       /* the UNIT (+ / %) is the precise green accent — not the whole number */
  color: var(--green); margin-left: .04em;
  text-shadow: 0 0 18px rgba(132,204,22,.45);
}
/* a thin green index line — disciplined accent */
.trust__num::after {
  content: ''; display: block; width: 26px; height: 2px; border-radius: 2px;
  background: var(--green); margin: 18px auto 0; opacity: .9;
}
.trust__label { margin-top: 14px; font-family: var(--mono); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--cement-2); }

/* ============================================================
   STORY — pinned "betontól a kész építményig" scroll-scrub
   ============================================================ */
.story { background: var(--charcoal); }  /* backstop: iOS svh<lvh resnel a sticky pin ALATT charcoal latsszon, ne feher body (a "feher csik" fix) */
.story__pin {
  min-height: 100vh; display: flex; align-items: center;
  background: var(--charcoal); color: var(--white); overflow: hidden;
}
.story__top { margin-bottom: 46px; }
.story__top .eyebrow { color: var(--green); }
.story__top h2 { font-size: clamp(34px, 5vw, 66px); color: #fff; }
.story__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.story__media { position: relative; aspect-ratio: 4/3; overflow: hidden; box-shadow: 0 30px 70px -30px rgba(0,0,0,.8); }
.story__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.06); z-index: 1;
  clip-path: inset(0 0 0 100%);            /* hidden, clipped from the right */
  transform: scale(1.09);
  transition: clip-path .55s cubic-bezier(.72,0,.16,1), transform .85s cubic-bezier(.16,.84,.24,1);
}
.story__img.is-active {                     /* wipes IN over the previous (premium reveal) */
  clip-path: inset(0 0 0 0%); transform: scale(1); z-index: 2;
}
.story__steps { position: relative; min-height: 240px; }
.story__step {
  position: absolute; inset: 0; opacity: 0; transform: translateY(26px);
  transition: opacity .38s ease, transform .42s cubic-bezier(.16,.84,.24,1);
  pointer-events: none;
}
.story__step.is-active { opacity: 1; transform: none; }
.story__n {
  display: block; font-family: var(--mono); font-weight: 800; font-size: clamp(48px, 6vw, 84px);
  line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--green); margin-bottom: 16px;
}
.story__step h3 { font-size: clamp(26px, 3.2vw, 44px); color: #fff; margin-bottom: 16px; }
.story__step p { font-size: 18px; line-height: 1.6; color: var(--cement-2); text-transform: none; font-weight: 400; max-width: 480px; }
.story__progress { margin-top: 48px; height: 2px; background: rgba(255,255,255,.13); }
.story__bar { display: block; height: 100%; width: 0; background: var(--green); box-shadow: 0 0 14px rgba(132,204,22,.4); }
/* fallback (no GSAP pin): show as a clean static list */
.story:not(.story--live) .story__steps { min-height: 0; }
.story:not(.story--live) .story__step { position: static; opacity: 1; transform: none; margin-bottom: 30px; }
.story:not(.story--live) .story__img:not([data-i="0"]) { display: none; }
@media (max-width: 760px) {
  .story__grid { grid-template-columns: 1fr; gap: 32px; }
  .story__steps { min-height: 200px; }
}
/* Phone PINNED story — compact so the whole thing fits one viewport (no clip).
   100svh accounts for the iOS address bar; image is capped and type tightened. */
@media (max-width: 760px) {
  .story--live .story__pin { min-height: 100svh; padding: 84px 0 22px; align-items: center; }
  .story--live .story__top { margin-bottom: 18px; }
  .story--live .story__top h2 { font-size: clamp(25px, 7.2vw, 36px); line-height: 1.05; }
  .story--live .story__grid { grid-template-columns: 1fr; gap: 16px; }
  .story--live .story__media { aspect-ratio: auto; height: 29svh; }
  .story--live .story__steps { min-height: 138px; }
  .story--live .story__n { font-size: 38px; margin-bottom: 6px; }
  .story--live .story__step h3 { font-size: 23px; margin-bottom: 8px; }
  .story--live .story__step p { font-size: 15px; line-height: 1.5; }
  .story--live .story__progress { margin-top: 18px; }
}
/* TOUCH (phone + tablet/iPad, ANY orientation): the sticky pin must hold regardless of
   viewport width. .story--sticky is added by JS only on touch devices, so gate the pin
   mechanics on the CLASS — NOT a width media query. iPad is wider than the phone
   breakpoint (768–1366px), so width-gating let it scroll straight through the section. */
.story--sticky { height: 360vh; }
.story--sticky .story__pin {
  position: sticky; top: 0; height: 100svh; min-height: 0;
  padding: 84px 0 22px; align-items: center;
}
.story--sticky .story__top { margin-bottom: 18px; }
.story--sticky .story__top h2 { font-size: clamp(28px, 5.4vw, 48px); line-height: 1.05; }
.story--sticky .story__grid { grid-template-columns: 1fr; gap: 18px; align-items: center; }
.story--sticky .story__media { aspect-ratio: auto; height: 30svh; }
.story--sticky .story__steps { min-height: 132px; }
.story--sticky .story__n { font-size: 40px; margin-bottom: 6px; }
.story--sticky .story__step h3 { font-size: 24px; margin-bottom: 8px; }
.story--sticky .story__step p { font-size: 15.5px; line-height: 1.5; }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.shead { max-width: 820px; margin-bottom: 58px; position: relative; }
.shead h2 { font-size: clamp(34px, 5.6vw, 68px); line-height: 1.2; }
.shead p { margin-top: 18px; font-size: 17px; color: #555; text-transform: none; font-weight: 400; letter-spacing: 0; }
.section--charcoal .shead p, .concrete-photo .shead p { color: var(--cement-2); }

/* ============================================================
   WHY US — 3 points
   ============================================================ */
/* Separate self-contained cards (not a shared frame) so each lifts cleanly on hover */
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.why__card {
  padding: 40px 32px; background: var(--white);
  border: 3px solid var(--charcoal);
  position: relative;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), background .35s ease, box-shadow .4s ease;
}
.why__card::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 5px;
  background: var(--green); transition: width .4s cubic-bezier(.2,.8,.2,1);
}
.why__card:hover { background: var(--cement-3); transform: translateY(-6px); box-shadow: 0 26px 52px -22px rgba(29,29,31,.55); z-index: 2; }
.why__card:hover::after { width: 100%; }
.why__card:hover .why__icon { transform: translateY(-2px) rotate(-3deg); }
.why__icon { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.why__icon {
  width: 56px; height: 56px; background: var(--green); margin-bottom: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 900; color: var(--charcoal);
  border: 3px solid var(--charcoal);
}
.why__card h3 { font-size: 21px; margin-bottom: 14px; }
.why__card p { font-size: 15px; color: #555; text-transform: none; font-weight: 400; line-height: 1.65; }

/* ============================================================
   SERVICES GRID
   ============================================================ */
/* Separate self-contained cards (not a shared frame) so each lifts cleanly on hover */
.svc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc__card {
  background: var(--cement-3); padding: 36px 30px;
  display: flex; flex-direction: column; min-height: 230px;
  border: 3px solid var(--charcoal);
  transition: background .35s ease, color .35s ease, transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
  position: relative;
}
.svc__card:hover { background: var(--green); transform: translateY(-6px); z-index: 2; box-shadow: 0 26px 52px -24px rgba(29,29,31,.6); }
.svc__num {
  font-family: var(--mono); font-size: 30px; font-weight: 800;
  color: transparent; -webkit-text-stroke: 1.5px var(--green-dark);
  letter-spacing: -0.02em; line-height: 1; margin-bottom: 20px;
}
.svc__card:hover .svc__num { color: var(--charcoal); -webkit-text-stroke-color: var(--charcoal); }
.svc__card h3 { font-size: 23px; margin-bottom: 12px; }
.svc__card p { font-size: 14.5px; color: #555; text-transform: none; font-weight: 400; line-height: 1.6; flex-grow: 1; }
.svc__card:hover p { color: var(--charcoal); }
.svc__arrow { margin-top: 18px; font-weight: 900; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--green-dark); }
.svc__card:hover .svc__arrow { color: var(--charcoal); }
/* card icon tile + head row — matches the szaktanácsadás .proc craft (lime SVG in charcoal tile) */
.svc__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.svc__head .svc__num { margin-bottom: 0; }
.svc__icon { flex: none; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: var(--charcoal); color: var(--green); border: 3px solid var(--charcoal); transition: background-color .35s ease, color .35s ease, transform .45s cubic-bezier(.16,.84,.24,1); }
.svc__icon svg { width: 24px; height: 24px; display: block; }
.svc__card:hover .svc__icon { transform: translateY(-3px) rotate(-4deg); }

/* ============================================================
   CALCULATOR
   ============================================================ */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 4px solid var(--charcoal); background: var(--white); box-shadow: var(--shadow-slab); }
.calc__form { padding: 48px 44px; }
.calc__form h3 { font-size: 26px; margin-bottom: 8px; }
.calc__form .note { font-size: 13px; color: #888; text-transform: none; font-weight: 400; margin-bottom: 28px; }
.calc__row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.calc__row label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.calc__row input {
  padding: 14px 16px; font-size: 17px; font-family: var(--font);
  border: 3px solid var(--charcoal); background: var(--cement-3); width: 100%;
}
.calc__row input:focus { outline: none; border-color: var(--green-dark); background: var(--white); }
.calc__result {
  background: var(--charcoal); color: var(--white);
  padding: 48px 44px; display: flex; flex-direction: column; justify-content: center;
}
.calc__result-label { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cement-2); }
.calc__result-num { font-family: var(--mono); font-size: clamp(56px, 8vw, 92px); font-weight: 800; color: #ece9e1; line-height: 1; margin: 8px 0 6px; letter-spacing: -0.04em; }
.calc__result-num span:last-child { font-size: 30px; color: var(--green); margin-left: .06em; }  /* unit = precise green accent */
.calc__result-hint { font-size: 14px; color: var(--cement-2); text-transform: none; font-weight: 400; margin-bottom: 28px; }

/* ============================================================
   REFERENCES GALLERY
   ============================================================ */
.refs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: var(--charcoal); border: 4px solid var(--charcoal); box-shadow: var(--shadow-slab); }
.ref {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
}
.ref img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ref:hover img { transform: scale(1.07); }
.ref__cap {
  position: absolute; left: 0; bottom: 0; right: 0;
  background: linear-gradient(0deg, rgba(29,29,31,.92), transparent);
  color: var(--white); padding: 28px 18px 16px;
  font-weight: 900; text-transform: uppercase; font-size: 15px; letter-spacing: 0.02em;
}
.ref__cap::before { content: ''; display: block; width: 28px; height: 3px; background: var(--green); margin-bottom: 8px; }

/* ============================================================
   CERT STRIP
   ============================================================ */
.cert__inner { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; justify-content: space-between; }
.cert__badge {
  display: flex; align-items: center; gap: 18px;
}
.cert__seal {
  width: 70px; height: 70px; flex-shrink: 0;
  background: var(--green); color: var(--charcoal);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 12px; text-align: center; line-height: 1.1;
  border: 3px solid var(--charcoal);
}
.cert__text h4 { font-size: 18px; }
.cert__text p { font-size: 14px; color: #555; text-transform: none; font-weight: 400; max-width: 360px; }

/* ============================================================
   MONUMENT BAND — brutalist "1989" concrete slab statement
   ============================================================ */
.monument {
  position: relative; overflow: hidden;
  padding: 104px 0 96px;
}
.monument .wrap { position: relative; z-index: 1; }
.monument__inner {
  display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center;
}
/* ---- CONCRETE-TEXTURED LETTERS: the giant "1989" is FILLED with a real
   concrete photo (background-clip: text). A green outline + drop-shadow keep
   the carved-concrete numeral legible against the wall-photo backdrop. ---- */
.monument__year {
  display: flex; position: relative;          /* anchor for the live 3D canvas overlay */
  font-family: var(--mono); font-weight: 800; line-height: .82;
  font-size: clamp(96px, 18vw, 240px); letter-spacing: -0.05em;
  perspective: 620px;        /* gives the digit cast-up reveal real 3D depth (fallback) */
  filter: drop-shadow(0 12px 34px rgba(0,0,0,.7));
}
/* live 3D concrete "1989" (Three.js) — same render/motion as BETON; digits = fallback */
.monument__year-3d { position: absolute; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.monument__year.is-3d .monument__year-3d { opacity: 1; }
.monument__year.is-3d .d { visibility: hidden; }
.monument__year .d {        /* concrete-textured "1989" — mobile / no-WebGL fallback for the 3D version
                               (light concrete to match the desktop 3D look; NO green outline) */
  display: inline-block;
  background-image: url("concrete-face.jpg"); background-size: 280% auto; background-position: center;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.16);
  text-shadow: 0 4px 16px rgba(0,0,0,.55), 0 2px 0 rgba(0,0,0,.4);   /* carved depth */
  will-change: transform, opacity;
}
.monument__txt h2 { font-size: clamp(28px, 4.6vw, 56px); color: var(--white); margin-bottom: 16px; }
.monument__txt p { font-size: 18px; color: var(--cement-2); text-transform: none; font-weight: 400; max-width: 560px; }
.monument__tags { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.monument__tags span {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--charcoal); background: var(--green);
  padding: 8px 14px; border: 3px solid var(--charcoal);
}

/* ============================================================
   CLOSING CTA + CONTACT
   ============================================================ */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.contact__info h2 { font-size: clamp(30px, 4.4vw, 50px); margin-bottom: 24px; }
.contact__info .lead { font-size: 17px; text-transform: none; font-weight: 400; color: var(--cement-2); margin-bottom: 32px; }
.contact__list { list-style: none; }
.contact__list li { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.14); align-items: baseline; }
.contact__list .k { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--green); min-width: 110px; }
.contact__list .v { font-size: 17px; font-weight: 600; }
.contact__list .v a:hover { color: var(--green); }

.form { background: var(--white); color: var(--charcoal); padding: 40px 36px; border: 3px solid var(--green); }
.form h3 { font-size: 22px; margin-bottom: 22px; }
.form__row { margin-bottom: 16px; }
.form__row label { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.form__row input, .form__row textarea {
  width: 100%; padding: 13px 15px; font-size: 16px; font-family: var(--font);
  border: 2px solid var(--charcoal); background: var(--cement-3);
}
.form__row input:focus, .form__row textarea:focus { outline: none; border-color: var(--green-dark); }
.form__row textarea { resize: vertical; min-height: 100px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--charcoal); color: var(--cement-2); padding: 64px 0 28px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
.footer__logo { display: inline-block; background: #fff; padding: 11px 16px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 10px 26px -16px rgba(0,0,0,.5); }
.footer__logo img { height: 38px; display: block; }
.footer__about { font-size: 14px; line-height: 1.7; max-width: 380px; }
.footer h4 { font-size: 14px; color: var(--white); margin-bottom: 18px; letter-spacing: 0.08em; }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 10px; font-size: 14px; }
.footer ul li a:hover { color: var(--green); }
.footer__bottom {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 12.5px; color: #8b8b88;
}
.footer__credit { display: inline-flex; align-items: center; gap: 9px; }
.footer__mipolip { display: inline-flex; align-items: center; background: #fff; padding: 6px 11px; border-radius: 7px; box-shadow: 0 8px 22px -14px rgba(0,0,0,.5); transition: transform .18s ease; }
.footer__mipolip:hover { transform: translateY(-2px); }
.footer__mipolip img { height: 22px; display: block; }
/* VÉNA védjegy — animated maker's mark (transparent, no chip), links to the new domain */
.footer__vena { display: inline-flex; align-items: center; line-height: 0; transition: transform .18s ease; }
.footer__vena:hover { transform: translateY(-2px); }
.footer__vena-anim { pointer-events: none; border: 0; width: 176px; height: 62px; display: block; background: transparent; }

/* ============================================================
   SUBPAGE "COMING SOON" SHELL
   ============================================================ */
.coming {
  min-height: 70vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 80px 24px;
  background: var(--cement);
  background-image: linear-gradient(rgba(236,236,233,.93), rgba(236,236,233,.93)), url('../assets/uzem-h1.jpg');
  background-size: cover; background-position: center;
}
.coming__box { max-width: 620px; }
.coming__tag { display: inline-block; background: var(--green); color: var(--charcoal); font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; padding: 10px 18px; border: 3px solid var(--charcoal); margin-bottom: 28px; }
.coming h1 { font-size: clamp(34px, 6vw, 64px); margin-bottom: 20px; }
.coming p { font-size: 18px; color: #555; text-transform: none; font-weight: 400; margin-bottom: 34px; }

/* subpage hero strip (small) */
.pagehead { background: var(--charcoal); color: var(--white); padding: 54px 0; border-bottom: 3px solid var(--green); }
.pagehead .crumb { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--green); margin-bottom: 10px; }
.pagehead h1 { font-size: clamp(30px, 5vw, 56px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px) {
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .trust__item {
    box-shadow:
      inset -1px 0 0 rgba(0,0,0,.34), inset 1px 0 0 rgba(255,255,255,.07),
      inset 0 -1px 0 rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .why__grid { grid-template-columns: 1fr; }
  /* (removed leftover connected-frame override that stripped the right border on mobile) */
  .svc__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1240px) {
  /* burger nav — switch before the full desktop nav can overflow / clip the CTA */
  .nav__inner { height: 70px; padding: 0 18px; }
  .nav__logo img { height: 34px; max-width: 170px; }
  .nav__burger { display: flex; }
  .nav__menu {
    position: fixed; top: 70px; left: 0; right: 0; bottom: 0;
    background: var(--white); flex-direction: column; align-items: stretch;
    height: auto; max-height: calc(100vh - 70px); overflow-y: auto;
    gap: 0; padding: 12px 0; display: none;
    border-top: 3px solid var(--green);
  }
  .nav__menu.open { display: flex; }
  .nav__menu > li { height: auto; flex-direction: column; align-items: stretch; }
  .nav__menu > li > a,
  .nav__menu > li > .nav__drop-toggle {
    height: auto; padding: 16px 24px; justify-content: space-between;
    border-bottom: 1px solid var(--line); margin-bottom: 0; width: 100%;
  }
  .nav__dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; box-shadow: none; border-top: none; background: var(--cement);
    max-height: 0; overflow: hidden; padding: 0; transition: max-height .25s;
  }
  .nav__menu > li.open .nav__dropdown { max-height: 600px; padding: 4px 0; }
  .nav__menu > li:hover .nav__dropdown { opacity: 1; } /* no hover-open on mobile */
  .nav__dropdown li a { color: var(--charcoal); padding: 12px 36px; }
  .nav__dropdown li a:hover { background: var(--cement-2); color: var(--green-dark); }
  .nav__cta { margin: 14px 24px; justify-content: center; }
  .nav__menu > li.open .caret { transform: rotate(-135deg) translateY(0); }
}

@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .monument { padding: 56px 0; }
  .monument__inner { grid-template-columns: 1fr; gap: 8px; }
  .monument__year { -webkit-text-stroke-width: 2px; }
  .bignum { font-size: clamp(56px, 20vw, 96px); }
  /* iOS doesn't support fixed bg-attachment reliably — scroll the photos */
  .hero, .concrete-photo { background-attachment: scroll; }
  .hero { min-height: 78vh; } /* iOS fixed-bg fallback */
  .hero h1 { font-size: clamp(40px, 12.5vw, 72px); }
  .svc__grid { grid-template-columns: 1fr; }
  .calc { grid-template-columns: 1fr; }
  .refs__grid { grid-template-columns: repeat(2, 1fr); }
  .contact__grid { grid-template-columns: 1fr; gap: 36px; }
  .cert__inner { flex-direction: column; align-items: flex-start; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .hero__btns .btn { flex: 1; justify-content: center; }
}

@media (max-width: 560px) {
  /* nav CTA in the bar: tighten so logo + burger + CTA fit cleanly */
  .nav__cta { font-size: 12px; padding: 10px 12px; border-width: 2px; }
  .nav__inner { gap: 10px; }
}

@media (max-width: 460px) {
  .refs__grid { grid-template-columns: 1fr; }
  .wrap { padding: 0 18px; }
  .nav__cta { padding: 9px 10px; letter-spacing: 0.01em; }
  .nav__logo img { height: 32px; max-width: 150px; }
}

/* ============================================================
   BEMUTATKOZÁS (About) — story + service area + team
   ============================================================ */
.about-intro__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.about-intro__text p { font-size: 17px; line-height: 1.75; color: #4a4a48; text-transform: none; font-weight: 400; margin-bottom: 20px; }
.about-intro__text p strong { color: var(--charcoal); font-weight: 700; }
.about-intro__text .lead { font-size: 19px; color: var(--charcoal); }
.about-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.about-stats span {
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--charcoal); background: #fff; border: 1px solid #e2ded5; padding: 9px 14px; border-radius: 2px;
}
.about-stats span b { color: var(--green); }

/* service-area "radar" coverage panel (on-brand, no external map) */
.coverage { position: relative; aspect-ratio: 1/1; width: 100%; max-width: 460px; margin: 0 auto;
  background: var(--charcoal); border: 3px solid var(--charcoal); border-radius: 4px; overflow: hidden;
  box-shadow: 0 30px 70px -34px rgba(0,0,0,.7); }
.coverage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.coverage__legend { position: absolute; left: 16px; bottom: 14px; right: 16px; display: flex; gap: 8px; flex-wrap: wrap; z-index: 2; }
.coverage__legend span { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--white); background: rgba(132,204,22,.16); border: 1px solid rgba(132,204,22,.5); padding: 5px 9px; }
.coverage__title { position: absolute; top: 16px; left: 18px; z-index: 2; font-family: var(--mono);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); }

/* TEAM cards */
.team__head { max-width: 760px; margin-bottom: 52px; }
.team__head p { margin-top: 18px; font-size: 17px; line-height: 1.7; color: #4a4a48; text-transform: none; font-weight: 400; }
.team__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.team__card { background: #fff; border: 1px solid #e7e4dd; border-radius: 4px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 18px 40px -28px rgba(0,0,0,.4);
  transition: transform .4s cubic-bezier(.16,.84,.24,1), box-shadow .4s; }
.team__card:hover { transform: translateY(-6px); box-shadow: 0 32px 60px -30px rgba(0,0,0,.5); }
.team__photo { aspect-ratio: 4/5; overflow: hidden; background: #ece9e1; position: relative; }
.team__photo::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--green);
  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.16,.84,.24,1); }
.team__card:hover .team__photo::after { transform: scaleX(1); }
.team__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16,.84,.24,1); }
.team__card:hover .team__photo img { transform: scale(1.05); }
.team__body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex-grow: 1; }
.team__name { font-size: 22px; font-weight: 800; color: var(--charcoal); letter-spacing: -0.01em; }
.team__role { font-family: var(--mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--green); margin: 7px 0 18px; }
.team__quote { font-size: 15px; line-height: 1.7; color: #555; text-transform: none; font-weight: 400; font-style: italic;
  position: relative; padding-left: 18px; border-left: 3px solid var(--green); }

/* closing CTA band */
.about-cta { background: var(--charcoal); color: var(--white); text-align: center; }
.about-cta .eyebrow { color: var(--green); }
.about-cta h2 { font-size: clamp(30px, 4.6vw, 56px); line-height: 1.2; margin: 12px 0 14px; }
.about-cta p { font-size: 18px; color: var(--cement-2); text-transform: none; font-weight: 400; max-width: 560px; margin: 0 auto 32px; }
.about-cta .hero__btns { justify-content: center; }

@media (max-width: 900px) {
  .about-intro__grid { grid-template-columns: 1fr; gap: 38px; }
  .team__grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}

/* About heading emphasis + animated radar sweep */
.about-title { font-size: clamp(36px, 5.4vw, 64px); line-height: 1.2; letter-spacing: -0.03em; margin: 14px 0 24px; }
.about-title .hl { color: var(--green); }
.coverage__sweep {
  position: absolute; top: 50%; left: 50%; width: 92.5%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%); border-radius: 50%; z-index: 1; pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(132,204,22,0) 0deg, rgba(132,204,22,0) 280deg,
    rgba(132,204,22,.08) 330deg, rgba(132,204,22,.30) 356deg, rgba(132,204,22,.6) 360deg);
  animation: radar-sweep 4.5s linear infinite;
}
@keyframes radar-sweep {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}
/* gentle pulse on the Kaposvár centre */
.coverage__ping {
  position: absolute; top: 50%; left: 50%; width: 8.5%; aspect-ratio: 1/1;
  transform: translate(-50%,-50%); border-radius: 50%; z-index: 1; pointer-events: none;
  border: 1.5px solid rgba(132,204,22,.7); animation: radar-ping 2.6s ease-out infinite;
}
@keyframes radar-ping {
  0% { transform: translate(-50%,-50%) scale(.4); opacity: .9; }
  80%,100% { transform: translate(-50%,-50%) scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .coverage__sweep, .coverage__ping { animation: none; } }

/* ============================================================
   REFERENCIÁK — filterable project portfolio
   ============================================================ */
.portfolio__head { max-width: 760px; margin-bottom: 36px; }
.portfolio__head p { margin-top: 18px; font-size: 17px; line-height: 1.7; color: #4a4a48; text-transform: none; font-weight: 400; }
.portfolio__filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.pfilter {
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--charcoal); background: #fff; border: 1px solid #ddd9d0; padding: 10px 18px; border-radius: 2px;
  cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.pfilter:hover { border-color: var(--green); color: var(--green-dark); }
.pfilter.is-active { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.pfilter.is-active b { color: var(--green); }

.portfolio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pcard {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; display: block;
  background: #d8d5cd; box-shadow: 0 18px 40px -28px rgba(0,0,0,.5);
  transition: transform .45s cubic-bezier(.16,.84,.24,1), box-shadow .45s, opacity .4s, scale .4s;
}
.pcard img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,.84,.24,1); }
.pcard:hover { transform: translateY(-5px); box-shadow: 0 34px 60px -30px rgba(0,0,0,.6); }
.pcard:hover img { transform: scale(1.07); }
.pcard__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px;
  background: linear-gradient(to top, rgba(14,14,16,.88) 0%, rgba(14,14,16,.30) 46%, rgba(14,14,16,0) 72%);
}
.pcard__cat {
  align-self: flex-start; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--charcoal); background: var(--green); padding: 4px 9px; margin-bottom: 12px;
}
.pcard__title { color: #fff; font-size: 19px; font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; }
.pcard__loc { display: inline-flex; align-items: center; gap: 6px; color: var(--cement-2); font-size: 13px; margin-top: 6px; }
.pcard__loc::before { content: ''; width: 14px; height: 2px; background: var(--green); }
/* filtered-out cards collapse smoothly */
.pcard.is-hidden { display: none; }

@media (max-width: 900px) { .portfolio__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 560px) { .portfolio__grid { grid-template-columns: 1fr; } }

/* ============================================================
   PÁLYÁZATOK — EU grant mandatory-publicity cards
   ============================================================ */
.grants { display: flex; flex-direction: column; gap: 26px; }
.grant {
  display: grid; grid-template-columns: 0.92fr 1.08fr;
  background: #fff; border: 1px solid #e7e4dd; border-radius: 4px; overflow: hidden;
  box-shadow: 0 18px 44px -30px rgba(0,0,0,.4);
}
/* ---- Unified SMOOTH hover-lift across EVERY card panel (one consistent easing) ---- */
.why__card, .svc__card, .pcard, .team__card, .del-vehicle, .del-region, .pump-opt,
.blk-size, .bt-card, .adv-card, .lab-card, .bulk-card, .acel-spacer,
.grant, .bg-pillar, .bg-cert {
  position: relative;
  transition: transform .5s cubic-bezier(.16,.84,.24,1), box-shadow .5s cubic-bezier(.16,.84,.24,1),
              background-color .4s ease, border-color .4s ease, color .35s ease !important;
}
/* add the lift to the panels that didn't have one */
.grant:hover, .bg-cert:hover { transform: translateY(-8px); box-shadow: 0 34px 62px -30px rgba(0,0,0,.5); z-index: 2; }
.bg-pillar:hover { transform: translateY(-8px); box-shadow: 0 34px 62px -28px rgba(0,0,0,.75); z-index: 2; }
/* Touch devices: NO hover effects — :hover sticks after a tap on mobile and left cards
   stuck "lifted" with the green bar showing. Reset every card-hover state on touch. */
@media (hover: none) {
  .why__card:hover, .svc__card:hover, .pcard:hover, .team__card:hover, .del-vehicle:hover,
  .del-region:hover, .pump-opt:hover, .blk-size:hover, .bt-card:hover, .adv-card:hover,
  .lab-card:hover, .bulk-card:hover, .acel-spacer:hover, .grant:hover, .bg-pillar:hover, .bg-cert:hover {
    transform: none !important; box-shadow: none !important; z-index: auto !important;
  }
  .why__card:hover { background: var(--white) !important; }
  .svc__card:hover { background: var(--cement-3) !important; }
  .why__card:hover::after, .svc__card:hover::after, .bt-card:hover .bt-card__head::after,
  .adv-card:hover::after, .lab-card:hover::after { width: 0 !important; transform: scaleX(0) !important; }
  .svc__card:hover .svc__num { color: transparent !important; -webkit-text-stroke-color: var(--green-dark) !important; }
  .svc__card:hover p, .svc__card:hover .svc__arrow { color: inherit !important; }
}
.grant__banner { background: #fff; display: flex; align-items: center; justify-content: center; padding: 30px; border-right: 1px solid #eee; }
.grant__banner img { max-width: 100%; max-height: 230px; width: auto; height: auto; object-fit: contain; }
.grant__body { padding: 32px 34px; display: flex; flex-direction: column; }
.grant__id { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--green-dark); }
.grant__title { font-size: clamp(19px, 2.1vw, 24px); line-height: 1.2; margin: 9px 0 18px; color: var(--charcoal); }
.grant__meta { display: flex; flex-wrap: wrap; gap: 16px 30px; padding: 16px 0; margin-bottom: 18px; border-top: 1px solid #ececea; border-bottom: 1px solid #ececea; }
.grant__meta > div { display: flex; flex-direction: column; }
.grant__meta span { font-family: var(--mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #8a8a86; }
.grant__meta b { font-size: 18px; font-weight: 800; color: var(--charcoal); margin-top: 4px; letter-spacing: -0.01em; }
.grant__meta b.green { color: var(--green-dark); }
.grant__desc { font-size: 15px; line-height: 1.72; color: #555; text-transform: none; font-weight: 400; }
.palyazat-intro { max-width: 780px; margin-bottom: 44px; }
.palyazat-intro p { margin-top: 18px; font-size: 17px; line-height: 1.7; color: #4a4a48; text-transform: none; font-weight: 400; }
@media (max-width: 820px) {
  .grant { grid-template-columns: 1fr; }
  .grant__banner { border-right: none; border-bottom: 1px solid #eee; padding: 24px; }
  .grant__banner img { max-width: 340px; }
}

/* discreet EU-grant publicity strip in the footer (links to /pályázatok) */
.footer__eu { display: flex; justify-content: center; padding: 26px 0 8px; border-top: 1px solid rgba(255,255,255,.08); margin-top: 36px; }
.footer__eu a { display: inline-flex; align-items: center; gap: 14px; opacity: .82; transition: opacity .2s; flex-wrap: wrap; justify-content: center; }
.footer__eu a:hover { opacity: 1; }
.footer__eu img { height: 34px; width: auto; background: #fff; padding: 5px 9px; border-radius: 3px; }
.footer__eu span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em; color: var(--cement-2); }

/* ===== MOBILE POLISH (real-device testing) ===== */
/* the "1989 óta · 35+ év" badge overlaps the hero kicker on narrow screens — hide it there
   (the heritage is already in the kicker "Transzportbeton · 1989 óta · Kaposvár") */
@media (max-width: 880px) { .hero__badge { display: none; } }

/* ============================================================
   ÁRLISTA — quote-based pricing page
   ============================================================ */
.pricing-intro { max-width: 780px; margin-bottom: 46px; }
.pricing-intro p { margin-top: 18px; font-size: 17px; line-height: 1.7; color: #4a4a48; text-transform: none; font-weight: 400; }
.pricing__cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 64px; }
.pcat {
  background: #fff; border: 1px solid #e7e4dd; border-radius: 4px; padding: 28px 24px; display: flex; flex-direction: column;
  box-shadow: 0 16px 36px -28px rgba(0,0,0,.35); transition: transform .35s cubic-bezier(.16,.84,.24,1), box-shadow .35s, border-color .35s;
}
.pcat:hover { transform: translateY(-5px); box-shadow: 0 30px 56px -30px rgba(0,0,0,.45); border-color: var(--green); }
.pcat__icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: var(--charcoal); color: var(--green); font-size: 22px; border-radius: 3px; margin-bottom: 18px; }
.pcat h3 { font-size: 19px; color: var(--charcoal); margin-bottom: 10px; letter-spacing: -0.01em; }
.pcat p { font-size: 14.5px; line-height: 1.6; color: #555; text-transform: none; font-weight: 400; flex-grow: 1; }
.pcat__link { margin-top: 18px; font-family: var(--mono); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--green-dark); }
.pcat__link:hover { color: var(--charcoal); }

.pricing__factors-head { max-width: 760px; margin-bottom: 34px; }
.pricing__factors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #e2ded5; border: 1px solid #e2ded5; border-radius: 4px; overflow: hidden; }
.pfactor { background: var(--cement-3); padding: 28px 24px; }
.pfactor__n { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--green-dark); letter-spacing: 0.05em; }
.pfactor h4 { font-size: 17px; color: var(--charcoal); margin: 8px 0 10px; }
.pfactor p { font-size: 14px; line-height: 1.6; color: #555; text-transform: none; font-weight: 400; }

@media (max-width: 900px) {
  .pricing__cats { grid-template-columns: repeat(2, 1fr); }
  .pricing__factors { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .pricing__cats { grid-template-columns: 1fr; }
  .pricing__factors { grid-template-columns: 1fr; }
}

/* ============================================================
   ÁRLISTA — real price tables
   ============================================================ */
.pricing-block { margin-bottom: 54px; }
.pricing-block .blk-eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--green-dark); }
.pricing-block h2 { font-size: clamp(24px, 3.2vw, 38px); margin: 8px 0 6px; }
.pricing-block .pb-note { font-size: 14.5px; color: #777; margin-bottom: 22px; text-transform: none; font-weight: 400; line-height: 1.6; }
.ptable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #e7e4dd; border-radius: 4px; }
.ptable { width: 100%; border-collapse: collapse; font-size: 14.5px; background: #fff; min-width: 420px; }
.ptable th { text-align: left; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; background: var(--charcoal); font-weight: 700; padding: 13px 16px; white-space: nowrap; }
.ptable th.num, .ptable td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); white-space: nowrap; }
.ptable td { padding: 11px 16px; border-bottom: 1px solid #eeece8; color: #3a3a38; }
.ptable td.q { font-weight: 600; color: var(--charcoal); white-space: nowrap; }
.ptable tbody tr:last-child td { border-bottom: none; }
.ptable tbody tr:nth-child(even) { background: #faf9f6; }
.ptable tbody tr:hover { background: #f1f4ea; }
.ptable tr.grp td { background: #ecebe6; color: var(--charcoal); font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; padding: 9px 16px; }
.ptable td.free { color: var(--green-dark); font-weight: 700; }
.ptable td.net { color: var(--green-dark); font-weight: 700; }
.price-notebox { background: #fff; border: 1px solid #e7e4dd; border-left: 4px solid var(--green); border-radius: 4px; padding: 18px 22px; margin: 0 0 30px; font-size: 14.5px; line-height: 1.7; color: #555; text-transform: none; font-weight: 400; }
.price-notebox strong { color: var(--charcoal); }
.price-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.price-download { display: inline-flex; align-items: center; gap: 10px; background: var(--charcoal); color: #fff; font-family: var(--mono); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 14px 22px; border-radius: 3px; transition: background .2s; }
.price-download:hover { background: var(--green); color: var(--charcoal); }
@media (max-width: 760px) { .price-cols { grid-template-columns: 1fr; } }
/* Beton árlista — a nyomtatott árjegyzék szerkezete (4-oszlopos beton-tábla + 2-zónás felár-elrendezés) */
.bgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: start; }
.bgrid .ptable-wrap { overflow: visible; }
.bgrid .ptable { min-width: 0; font-size: 12px; }
.bgrid .ptable th { padding: 8px 8px; font-size: 9px; }
.bgrid .ptable td { padding: 6px 8px; }
.zone2 { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; align-items: start; margin-top: 8px; }
.zone2-right .pricing-block { margin-bottom: 22px; }
.zone2-right .price-cols { grid-template-columns: 1fr; }
@media (max-width: 1000px) { .bgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .zone2 { grid-template-columns: 1fr; } }
@media (max-width: 560px)  { .bgrid { grid-template-columns: 1fr; } }

/* ---- Árlista alfülek (tabs) ---- */
.ptabs { margin: 0 0 44px; }
.ptabs__nav {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 40px;
}
.ptab-btn {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--charcoal);
  background: #fff; border: 1.5px solid #ddd9cf; border-radius: 7px;
  padding: 15px 22px; cursor: pointer; white-space: nowrap;
  transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ptab-btn .ptab-btn__idx { font-size: 13px; font-weight: 800; color: var(--green-dark); }
@media (hover: hover) { .ptab-btn:hover { border-color: var(--green); background: #f1f4ea; transform: translateY(-2px); } }
.ptab-btn.is-active {
  color: var(--charcoal); background: var(--green); border-color: var(--green);
  box-shadow: 0 10px 22px -10px rgba(132,204,22,.7);
}
.ptab-btn.is-active .ptab-btn__idx { color: var(--charcoal); }
.ptab-panel { display: none; }
.ptab-panel.is-active { display: block; animation: ptab-fade .45s ease both; }
@keyframes ptab-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ptab-panel__intro { max-width: 760px; margin-bottom: 30px; }
.ptab-panel__intro .blk-eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--green-dark); }
.ptab-panel__intro h2 { font-size: clamp(26px, 3.4vw, 40px); margin: 8px 0 12px; }
.ptab-panel__intro p { font-size: 16px; line-height: 1.7; color: #4a4a48; text-transform: none; font-weight: 400; }
/* "hamarosan / adatfeltöltés alatt" üres állapot */
.ptab-soon {
  border: 1px dashed #d2cfc7; border-radius: 4px; background: #faf9f6;
  padding: 48px 34px; text-align: center;
}
.ptab-soon__tag { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--green-dark); background: #eef4e2; border: 1px solid #d8e7bd; border-radius: 999px; padding: 6px 14px; margin-bottom: 18px; }
.ptab-soon h3 { font-size: clamp(20px, 2.6vw, 28px); margin: 0 0 12px; }
.ptab-soon p { max-width: 540px; margin: 0 auto 24px; font-size: 15.5px; line-height: 1.7; color: #6a6a66; text-transform: none; font-weight: 400; }
@media (max-width: 600px) {
  .ptabs__nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 8px; padding-bottom: 4px; }
  .ptab-btn { padding: 13px 16px; font-size: 13px; }
  .ptab-soon { padding: 36px 20px; }
}

/* ---- Dokumentumok (letölthető doksik) ---- */
.docs-intro { max-width: 760px; margin-bottom: 46px; }
.docs-intro p { margin-top: 16px; font-size: 16px; line-height: 1.7; color: #4a4a48; text-transform: none; font-weight: 400; }
.docs-group { margin-bottom: 52px; }
.docs-group__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.docs-group__head .blk-eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--green-dark); }
.docs-group__head h2 { font-size: clamp(22px, 3vw, 32px); margin: 0; }
.docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.doc-card {
  display: flex; align-items: flex-start; gap: 16px;
  background: #fff; border: 1px solid #e7e4dd; border-radius: 6px; padding: 20px 22px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
@media (hover: hover) { .doc-card:hover { border-color: var(--green); box-shadow: 0 16px 40px -26px rgba(0,0,0,.4); transform: translateY(-3px); } }
.doc-card__icon {
  flex: none; width: 46px; height: 46px; border-radius: 6px; display: grid; place-items: center;
  background: var(--charcoal); color: #fff; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
}
.doc-card__icon svg { width: 22px; height: 22px; }
.doc-card__body { flex: 1; min-width: 0; }
.doc-card__title { font-size: 16px; font-weight: 700; color: var(--charcoal); margin: 0 0 4px; line-height: 1.35; }
.doc-card__meta { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #999; margin-bottom: 14px; }
.doc-dl {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--charcoal);
  background: #f1f4ea; border: 1px solid #d8e7bd; border-radius: 4px; padding: 9px 15px; transition: background .18s ease, color .18s ease;
}
.doc-dl svg { width: 15px; height: 15px; }
@media (hover: hover) { .doc-dl:hover { background: var(--green); color: var(--charcoal); } }
.doc-dl--soon { background: #f3f1ec; border-color: #e2dfd8; color: #a9a69f; cursor: default; pointer-events: none; }
@media (max-width: 480px) { .docs-grid { grid-template-columns: 1fr; } }

/* ===== A mi történetünk (story / timeline) ===== */
.story-intro { max-width: 780px; margin-bottom: 8px; }
.story-intro p { margin-top: 16px; font-size: 17px; line-height: 1.75; color: #4a4a48; text-transform: none; font-weight: 400; }
/* archív fotó-galéria (vintage, sepia) */
.story-gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin: 40px 0 10px; }
@media (max-width: 900px) { .story-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .story-gallery { grid-template-columns: repeat(2, 1fr); } }
.archiv { background: #fff; padding: 9px 9px 6px; border: 1px solid #e4ded2; box-shadow: 0 18px 34px -20px rgba(0,0,0,.5); transition: transform .35s ease, box-shadow .35s ease; }
.archiv:nth-child(odd) { transform: rotate(-1.4deg); }
.archiv:nth-child(even) { transform: rotate(1.1deg); }
@media (hover: hover) { .archiv:hover { transform: rotate(0) scale(1.04); box-shadow: 0 26px 48px -22px rgba(0,0,0,.6); z-index: 2; position: relative; } }
.archiv img { width: 100%; display: block; }
.archiv figcaption { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #948b7c; padding: 8px 2px 2px; text-align: center; line-height: 1.3; }
/* timeline */
.timeline { position: relative; margin: 52px 0 0; }
.timeline::before { content: ""; position: absolute; left: 122px; top: 8px; bottom: 26px; width: 2px; background: linear-gradient(var(--green) 0%, #d6d2c8 100%); }
@media (max-width: 620px) { .timeline::before { left: 62px; } }
.tl-item { position: relative; display: grid; grid-template-columns: 104px 1fr; gap: 40px; padding-bottom: 36px; }
@media (max-width: 620px) { .tl-item { grid-template-columns: 50px 1fr; gap: 24px; } }
.tl-year { font-family: var(--mono); font-weight: 800; font-size: 19px; color: var(--green-dark); text-align: right; padding-top: 1px; padding-right: 16px; white-space: nowrap; }
@media (max-width: 620px) { .tl-year { font-size: 13px; padding-right: 12px; } }
.tl-dot { position: absolute; left: 115px; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--green); border: 3px solid var(--white, #faf9f6); box-shadow: 0 0 0 1px #cfd8b9; }
@media (max-width: 620px) { .tl-dot { left: 55px; } }
.tl-body { padding-left: 34px; }
@media (max-width: 620px) { .tl-body { padding-left: 22px; } }
.tl-body h3 { font-size: clamp(18px, 2.4vw, 23px); color: var(--charcoal); margin-bottom: 7px; line-height: 1.2; }
.tl-body p { font-size: 15.5px; line-height: 1.7; color: #54524e; text-transform: none; font-weight: 400; }
.tl-item--now .tl-year { color: var(--charcoal); background: var(--green); padding: 2px 8px; border-radius: 3px; display: inline-block; }
/* "today" plant block */
.story-now { margin: 18px 0 0; border-radius: 4px; overflow: hidden; position: relative; box-shadow: 0 26px 60px -34px rgba(0,0,0,.7); }
.story-now img { width: 100%; display: block; }
.story-now figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 26px 20px; color: #fff; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(transparent, rgba(18,18,18,.82)); }
.story-tech { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
@media (max-width: 760px) { .story-tech { grid-template-columns: 1fr; } }
.story-tech .tcard { background: #fff; border: 1px solid #e7e4dd; border-left: 4px solid var(--green); border-radius: 4px; padding: 20px 22px; }
.story-tech .tcard .ty { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--green-dark); letter-spacing: .06em; }
.story-tech .tcard h4 { font-size: 16px; color: var(--charcoal); margin: 5px 0 7px; }
.story-tech .tcard p { font-size: 14px; line-height: 1.6; color: #5a5852; text-transform: none; font-weight: 400; }
.story-cert { margin-top: 22px; font-size: 14px; color: #6a6a66; text-transform: none; }
.story-cert b { color: var(--charcoal); }

/* ===== before/after image-compare slider (betonacél) ===== */
.compare-wrap { margin: 0; }
.compare-wrap .blk-eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--green-dark); }
.compare-wrap h2 { font-size: clamp(24px, 3.2vw, 36px); margin: 8px 0 6px; }
.compare-wrap .pb-note { font-size: 15px; color: #777; margin-bottom: 22px; text-transform: none; font-weight: 400; line-height: 1.6; max-width: 680px; }
.compare { position: relative; width: 100%; aspect-ratio: 16/10; border-radius: 4px; overflow: hidden; box-shadow: 0 28px 64px -34px rgba(0,0,0,.7); user-select: none; -webkit-user-select: none; touch-action: none; cursor: ew-resize; background: var(--charcoal); }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.compare__top { clip-path: inset(0 50% 0 0); will-change: clip-path; }
.compare__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--green); transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.compare__knob { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; border-radius: 50%; background: var(--green); border: 3px solid #fff; transform: translate(-50%,-50%); pointer-events: none; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.compare__knob svg { width: 26px; height: 26px; color: var(--charcoal); }
.compare__tag { position: absolute; bottom: 16px; font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #fff; background: rgba(18,18,18,.72); padding: 7px 13px; border-radius: 3px; pointer-events: none; }
.compare__tag b { color: var(--green); display: block; font-size: 9.5px; letter-spacing: .12em; margin-bottom: 1px; }
.compare__tag--l { left: 16px; }
.compare__tag--r { right: 16px; text-align: right; }
.compare__hint { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: #fff; background: rgba(132,204,22,.9); color: var(--charcoal); padding: 5px 12px; border-radius: 999px; pointer-events: none; transition: opacity .4s; }
.compare.is-touched .compare__hint { opacity: 0; }

/* ===== Vélemények / Rólunk mondták (testimonials) ===== */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; align-items: stretch; }
@media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; max-width: 640px; margin-left: auto; margin-right: auto; } }
.testi { position: relative; background: #fff; border: 1px solid #e7e4dd; border-left: 4px solid var(--green); border-radius: 6px; padding: 30px 28px 26px; display: flex; flex-direction: column; box-shadow: 0 22px 50px -34px rgba(0,0,0,.45); }
.section--cement .testi { background: #fff; }
.testi__mark { font-family: Georgia, "Times New Roman", serif; font-size: 64px; line-height: .6; color: var(--green); opacity: .35; margin-bottom: 6px; }
.testi__quote { font-size: 15.5px; line-height: 1.72; color: #3d3b38; text-transform: none; font-weight: 400; flex: 1; }
.testi__author { margin-top: 22px; padding-top: 18px; border-top: 1px solid #eeece8; }
.testi__name { font-weight: 800; color: var(--charcoal); font-size: 15px; }
.testi__role { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: #888; margin-top: 3px; }
.testi__role b { color: var(--green-dark); font-weight: 700; }

/* ===== Kapcsolat (contact info + map box, 2-col) ===== */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 44px; align-items: stretch; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 30px; } }
.contact-info h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 10px 0 22px; }
.cinfo { list-style: none; margin: 0; }
.cinfo li { padding: 15px 0; border-bottom: 1px solid #ebe8e2; font-size: 16px; color: var(--charcoal); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.cinfo li:first-child { padding-top: 0; }
.cinfo__l { font-family: var(--mono); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--green-dark); min-width: 116px; }
.cinfo a { color: var(--charcoal); border-bottom: 1px solid var(--green); }
.cinfo a:hover { color: var(--green-dark); }
.map-embed { border-radius: 6px; overflow: hidden; border: 1px solid #e7e4dd; box-shadow: 0 24px 56px -34px rgba(0,0,0,.5); min-height: 400px; background: #e9e6df; }
@media (max-width: 860px) { .map-embed { aspect-ratio: 4/3; min-height: 0; } }
.map-embed { position: relative; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.18) contrast(1.02); }
.map-consent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 24px; background: repeating-linear-gradient(45deg, #ebe8e1, #ebe8e1 14px, #e4e1da 14px, #e4e1da 28px); }
.map-consent p { font-size: 15px; color: #5a5852; max-width: 320px; text-transform: none; }

/* ===== Ajánlatkérés form ===== */
.qform { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 48px; align-items: start; margin-top: 40px; }
@media (max-width: 880px) { .qform { grid-template-columns: 1fr; gap: 34px; } }
.qform__box { background: #fff; border: 1px solid #e7e4dd; border-radius: 8px; padding: 34px 34px 30px; box-shadow: 0 26px 60px -38px rgba(0,0,0,.5); }
@media (max-width: 520px) { .qform__box { padding: 26px 22px; } }
.field { margin-bottom: 18px; }
.field > label { display: block; font-family: var(--mono); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--charcoal); margin-bottom: 7px; }
.field .req { color: var(--green-dark); }
.field input, .field select, .field textarea { width: 100%; padding: 13px 15px; border: 1.5px solid #ddd9cf; border-radius: 6px; font-size: 15px; font-family: inherit; background: #faf9f6; color: var(--charcoal); transition: border-color .15s, background .15s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); background: #fff; }
.field textarea { min-height: 116px; resize: vertical; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .field--row { grid-template-columns: 1fr; gap: 0; } }
.consent { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; color: #565650; margin: 8px 0 20px; text-transform: none; }
.consent input { width: 19px; height: 19px; margin: 2px 0 0; flex: none; accent-color: var(--green); }
.consent a { color: var(--green-dark); border-bottom: 1px solid var(--green); }
.qform__box .btn { width: 100%; justify-content: center; }
.qform__err { display: none; color: #b3261e; font-size: 13.5px; margin-top: 12px; text-transform: none; }
.qform__ok { display: none; text-align: center; padding: 30px 10px; }
.qform__ok.show { display: block; }
.qform__ok .tick { width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: var(--charcoal); display: grid; place-items: center; margin: 0 auto 18px; font-size: 32px; }
.qform__ok h3 { font-size: 24px; margin-bottom: 8px; }
.qform__ok p { color: var(--muted, #666); text-transform: none; }
.qside__card { background: var(--charcoal); color: #fff; border-radius: 8px; padding: 28px 26px; }
.qside__card h3 { font-size: 19px; margin-bottom: 14px; color: #fff; }
.qside__card ul { list-style: none; margin: 0; }
.qside__card li { padding: 9px 0 9px 26px; position: relative; font-size: 14.5px; color: #d4d2cc; text-transform: none; }
.qside__card li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
.qside__contact { margin-top: 20px; padding: 22px 24px; background: #f1f4ea; border-radius: 8px; }
.qside__contact p { font-size: 14.5px; color: #4a4a48; text-transform: none; margin-bottom: 8px; }
.qside__contact a { font-weight: 700; color: var(--green-dark); }

/* ===== Legal page (adatkezelési) ===== */
.legal { max-width: 820px; }
.legal__lead { font-size: 17px; line-height: 1.72; color: #45433f; text-transform: none; font-weight: 400; margin-bottom: 30px; }
.legal h2 { font-size: 21px; margin: 32px 0 12px; color: var(--charcoal); }
.legal p, .legal li { font-size: 15.5px; line-height: 1.75; color: #4a4843; text-transform: none; font-weight: 400; }
.legal p { margin-bottom: 12px; }
.legal ul { margin: 10px 0 18px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal strong { color: var(--charcoal); }
.legal__note { margin-top: 32px; padding: 18px 22px; background: #f1f4ea; border-left: 4px solid var(--green); border-radius: 4px; font-size: 14px; color: #55534e; }

/* ===== Cookie bar ===== */
.cookiebar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 99980; max-width: 760px; margin: 0 auto;
  background: var(--charcoal); color: #eee; border-radius: 8px; box-shadow: 0 22px 54px -18px rgba(0,0,0,.55);
  padding: 18px 22px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  transform: translateY(160%); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.cookiebar.show { transform: none; }
.cookiebar p { font-size: 13.5px; line-height: 1.5; color: #d4d2cc; text-transform: none; font-weight: 400; margin: 0; flex: 1; min-width: 230px; }
.cookiebar a { color: var(--green); border-bottom: 1px solid var(--green); }
.cookiebar__btns { display: flex; gap: 10px; }
.cookiebar .btn { padding: 10px 18px; font-size: 13px; }
.cookiebar__decline { background: transparent; color: #cfcfca; border: 1.5px solid rgba(255,255,255,.3); border-radius: 6px; padding: 10px 16px; font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.cookiebar__decline:hover { border-color: #fff; color: #fff; }
@media (max-width: 540px) { .cookiebar { flex-direction: column; align-items: stretch; text-align: left; } .cookiebar__btns { justify-content: flex-end; } }

/* print / PDF styles for the price list */
@media print {
  #site-header, #site-footer, .about-cta, .cursor, .scroll-progress, .price-download, .pricing-intro .eyebrow { display: none !important; }
  body { background: #fff; }
  .pagehead { background: #fff !important; color: #111 !important; border: none; padding: 0 0 8px; }
  .pagehead .crumb { color: #6ba50f; }
  .pagehead h1 { color: #111; }
  .ptable-wrap { overflow: visible; border: 1px solid #ccc; page-break-inside: auto; }
  .ptable th { background: #1d1d1f !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pricing-block { page-break-inside: avoid; margin-bottom: 22px; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .section { padding: 0 !important; }
  .ptabs__nav { display: none !important; }
  .ptab-panel { display: block !important; animation: none !important; }
  .ptab-soon { display: none !important; }
}

/* service-detail optional photo */
.svcd__photo { margin: 0 0 40px; border-radius: 4px; overflow: hidden; aspect-ratio: 21/9; box-shadow: 0 24px 60px -34px rgba(0,0,0,.6); }
.svcd__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   BETONGYÁRTÁS — unique industrial/technical page
   ============================================================ */
.bg-hero { position: relative; min-height: 74vh; display: flex; align-items: flex-end; color: #fff; overflow: hidden;
  background: #1a1a1c url('betongyartas-hero.jpg') center/cover; }
.bg-hero::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,15,17,.5) 0%, rgba(15,15,17,.32) 38%, rgba(15,15,17,.92) 100%); }
.bg-hero .wrap { position: relative; z-index: 1; padding: 80px 0 56px; }
.bg-hero .eyebrow { color: var(--green); }
.bg-hero h1 { font-size: clamp(34px, 6.4vw, 78px); line-height: 1.18; letter-spacing: -0.035em; margin: 16px 0 20px; max-width: 15ch;
  text-shadow: 0 6px 40px rgba(0,0,0,.5); }
.bg-hero__sub { font-size: clamp(17px, 2vw, 21px); color: #e2e0da; max-width: 52ch; line-height: 1.55; }
.bg-hero__stat { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 28px;
  background: rgba(132,204,22,.14); border: 1px solid rgba(132,204,22,.55); padding: 13px 22px; backdrop-filter: blur(4px); }
.bg-hero__stat b { font-family: var(--mono); font-size: 30px; font-weight: 800; color: var(--green); line-height: 1; white-space: nowrap; }
.bg-hero__stat span { font-size: 12.5px; color: #fff; text-transform: uppercase; letter-spacing: .1em; font-family: var(--mono); }
/* MOBILE: full-width band, ~30% the "90 m³" stat / ~70% the label (m³ stays beside 90) */
@media (max-width: 640px) {
  .bg-hero__stat { display: flex; width: 100%; align-items: stretch; gap: 0; padding: 0; margin-top: 24px; }
  .bg-hero__stat b { flex: 0 0 30%; display: flex; align-items: center; justify-content: center; padding: 14px 8px; font-size: 24px; border-right: 1px solid rgba(132,204,22,.55); }
  .bg-hero__stat span { flex: 1; display: flex; align-items: center; padding: 14px 16px; line-height: 1.35; }
}

.bg-intro__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; }
.bg-intro p { font-size: 18px; line-height: 1.75; color: #4a4a48; text-transform: none; font-weight: 400; margin-bottom: 18px; }
.bg-intro p .em { color: var(--charcoal); font-weight: 600; }
.bg-standards { display: flex; flex-direction: column; gap: 12px; background: var(--cement-3); border: 1px solid #e7e4dd; border-radius: 4px; padding: 26px; }
.bg-standards .sh { font-family: var(--mono); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--green-dark); margin-bottom: 6px; }
.bg-standards span { font-size: 15px; color: var(--charcoal); padding: 8px 0; border-bottom: 1px solid #e7e4dd; }
.bg-standards span:last-child { border-bottom: none; }

.bg-pillars { background: var(--charcoal); color: #fff; }
.bg-pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; }
.bg-pillar { background: var(--charcoal); padding: 38px 30px; }
.bg-pillar__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(132,204,22,.14); color: var(--green); font-size: 22px; border-radius: 3px; margin-bottom: 20px; }
.bg-pillar h3 { font-size: 21px; color: #fff; margin-bottom: 12px; }
.bg-pillar p { font-size: 15px; line-height: 1.65; color: var(--cement-2); text-transform: none; font-weight: 400; }
.bg-pillar__big { font-family: var(--mono); font-weight: 800; color: var(--green); font-size: 30px; margin: 4px 0 10px; letter-spacing: -.02em; }

.bg-types__grid { display: grid; grid-template-columns: 1fr .9fr; gap: 50px; align-items: center; }
.bg-type { padding: 22px 0; border-bottom: 1px solid #e2ded5; }
.bg-type:first-child { padding-top: 0; }
.bg-type:last-child { border-bottom: none; }
.bg-type h3 { font-size: clamp(22px, 2.6vw, 28px); color: var(--green-dark); margin-bottom: 8px; }
.bg-type p { font-size: 15.5px; line-height: 1.6; color: #555; text-transform: none; font-weight: 400; }
.bg-types__img { aspect-ratio: 4/5; border-radius: 4px; overflow: hidden; box-shadow: 0 30px 70px -34px rgba(0,0,0,.6); }
.bg-types__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---- 3D concrete cube (replaces the flat panel; pure CSS, GPU-composited, cheap) ----
   Corner-on isometric view so 3 faces (top + 2 sides) are ALWAYS visible; gentle rock
   (never drops to 2 faces). Strong face contrast + green rim + glow = it pops. */
.bg-types__cube { position: relative; perspective: 1300px; display: flex; align-items: center; justify-content: center; min-height: 480px; }
.bg-types__cube::before {                /* soft neutral ambient behind the cube (no green) */
  content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,.10), rgba(0,0,0,0) 64%);
  filter: blur(12px); z-index: 0; pointer-events: none;
}
.bg-types__cube::after {                 /* grounding shadow */
  content: ''; position: absolute; bottom: 10%; left: 50%; width: 54%; height: 30px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.44), rgba(0,0,0,0) 70%);
  filter: blur(9px); z-index: 0; pointer-events: none;
}
.cube3d {
  --s: 150px; position: relative; z-index: 1;
  width: calc(var(--s) * 2); height: calc(var(--s) * 2);
  transform-style: preserve-3d;
  transform: rotateX(-25deg) rotateY(-45deg);
  animation: cube3d-rock 9s ease-in-out infinite;
}
@keyframes cube3d-rock {
  0%,100% { transform: rotateX(-25deg) rotateY(-38deg); }
  50%     { transform: rotateX(-24deg) rotateY(-54deg); }
}
.cube3d__face {
  position: absolute; inset: 0;
  background: #b1aea5 url("concrete-wall.jpg") center / cover;
  box-shadow: inset 0 0 85px rgba(0,0,0,.48), inset 0 0 0 1px rgba(0,0,0,.28);
  backface-visibility: hidden;
}
.cube3d__face--front  { transform: translateZ(var(--s)); filter: brightness(1.06); }     /* lit side */
.cube3d__face--left   { transform: rotateY(-90deg) translateZ(var(--s)); filter: brightness(.6); }  /* shadowed side */
.cube3d__face--right  { transform: rotateY(90deg)  translateZ(var(--s)); filter: brightness(.6); }
.cube3d__face--back   { transform: rotateY(180deg) translateZ(var(--s)); }
.cube3d__face--top    { transform: rotateX(90deg)  translateZ(var(--s)); filter: brightness(1.34); } /* lit top */
.cube3d__face--bottom { transform: rotateX(-90deg) translateZ(var(--s)); filter: brightness(.4); }
@media (prefers-reduced-motion: reduce) { .cube3d { animation: none; } }
@media (max-width: 760px) { .bg-types__cube { min-height: 340px; } .cube3d { --s: 116px; } }

.bg-certs__grid { display: grid; grid-template-columns: 1fr 220px 1fr; gap: 26px; align-items: stretch; }
.bg-cert { background: #fff; border: 1px solid #e7e4dd; border-radius: 4px; padding: 30px; display: flex; flex-direction: column; }
.bg-cert h3 { font-size: 20px; color: var(--charcoal); margin-bottom: 12px; line-height: 1.2; }
.bg-cert p { font-size: 14.5px; line-height: 1.65; color: #555; text-transform: none; font-weight: 400; flex-grow: 1; }
.bg-cert__dl { margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: #fff; background: var(--charcoal); padding: 11px 18px; border-radius: 3px; transition: background .2s; }
.bg-cert__dl:hover { background: var(--green); color: var(--charcoal); }
.bg-cert-logo { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #e7e4dd; border-radius: 4px; padding: 22px; }
.bg-cert-logo img { max-width: 100%; height: auto; }

@media (max-width: 900px) {
  .bg-intro__grid, .bg-types__grid { grid-template-columns: 1fr; gap: 32px; }
  .bg-pillars__grid { grid-template-columns: 1fr; }
  .bg-certs__grid { grid-template-columns: 1fr; }
  .bg-cert-logo { order: -1; max-width: 260px; margin: 0 auto; }
}

/* ============================================================
   BETONSZÁLLÍTÁS — unique logistics/delivery page
   ============================================================ */
.del-hero { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 64vh; }
.del-hero__text { background: var(--charcoal); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 60px clamp(28px,5vw,82px); }
.del-hero__text .eyebrow { color: var(--green); }
.del-hero__text h1 { font-size: clamp(32px,4.6vw,62px); line-height: 1.18; letter-spacing: -0.03em; margin: 16px 0 18px; }
.del-hero__text p { font-size: clamp(16px,1.7vw,19px); color: var(--cement-2); line-height: 1.55; max-width: 42ch; }
.del-hero__photo { background: #1a1a1c center/cover; position: relative; min-height: 320px; }
.del-hero__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(29,29,31,.55) 0%, rgba(29,29,31,0) 26%); }

.del-lead { max-width: 780px; font-size: 18px; line-height: 1.75; color: #4a4a48; text-transform: none; font-weight: 400; }
.del-lead .em { color: var(--charcoal); font-weight: 600; }

.del-fleet { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.del-vehicle { background: #fff; border: 1px solid #e7e4dd; border-radius: 4px; padding: 38px 34px; position: relative;
  box-shadow: 0 18px 44px -30px rgba(0,0,0,.4); transition: transform .35s cubic-bezier(.16,.84,.24,1), box-shadow .35s; }
.del-vehicle:hover { transform: translateY(-5px); box-shadow: 0 32px 58px -30px rgba(0,0,0,.5); }
.del-vehicle__tag { position: absolute; top: 24px; right: 28px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #c9c6be; text-transform: uppercase; }
.del-vehicle__icon { margin-bottom: 18px; line-height: 1; }
.del-vehicle__icon svg { width: 84px; height: auto; display: block; }
.del-vehicle h3 { font-size: 24px; color: var(--charcoal); margin-bottom: 12px; }
.del-vehicle p { font-size: 15.5px; line-height: 1.65; color: #555; text-transform: none; font-weight: 400; }

.del-coverage { background: var(--charcoal); color: #fff; }
.del-regions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.del-region { border: 1px solid rgba(255,255,255,.12); border-radius: 4px; padding: 34px 30px; transition: border-color .3s, background .3s, transform .3s; }
.del-region:hover { border-color: var(--green); background: rgba(132,204,22,.06); transform: translateY(-4px); }
.del-region__n { font-family: var(--mono); font-size: 12px; color: var(--green); letter-spacing: .14em; display: inline-flex; align-items: center; gap: 8px; }
.del-region__n::before { content: ''; width: 8px; height: 8px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(132,204,22,.18); }
.del-region h3 { font-size: 26px; color: #fff; margin: 12px 0 8px; letter-spacing: -0.02em; }
.del-region p { font-size: 15px; color: var(--cement-2); text-transform: none; font-weight: 400; }

.del-pickup { background: var(--cement-3); border-top: 3px solid var(--green); }
.del-pickup__grid { display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center; }
.del-pickup__big { font-family: var(--mono); font-weight: 800; font-size: clamp(40px,6.4vw,72px); line-height: .9; letter-spacing: -0.04em; color: var(--green-dark); white-space: nowrap; }
.del-pickup__big small { display: block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--charcoal); margin-top: 12px; }
.del-pickup__text h2 { font-size: clamp(24px,3vw,40px); margin-bottom: 12px; color: var(--charcoal); }
.del-pickup__text p { font-size: 16.5px; line-height: 1.7; color: #555; text-transform: none; font-weight: 400; max-width: 60ch; }

@media (max-width: 860px) {
  .del-hero { grid-template-columns: 1fr; }
  .del-hero__photo { min-height: 280px; order: -1; }
  .del-hero__photo::after { background: linear-gradient(0deg, rgba(29,29,31,.4) 0%, rgba(29,29,31,0) 30%); }
  .del-fleet, .del-regions { grid-template-columns: 1fr; }
  .del-pickup__grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================================
   BETONSZIVATTYÚZÁS — unique "reach/height" page
   ============================================================ */
.pump-hero { background: var(--charcoal); color: #fff; position: relative; overflow: hidden; }
.pump-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 85% 10%, rgba(132,204,22,.10), transparent 55%); }
.pump-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; min-height: 58vh; padding: 70px 0; position: relative; z-index: 1; }
.pump-hero__text .eyebrow { color: var(--green); }
.pump-hero__text h1 { font-size: clamp(34px,5.2vw,70px); line-height: .98; letter-spacing: -0.035em; margin: 16px 0 18px; }
.pump-hero__text p { font-size: clamp(16px,1.8vw,20px); color: var(--cement-2); line-height: 1.55; max-width: 44ch; }

.pump-scale { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; align-items: end; height: 360px;
  border-bottom: 2px solid rgba(255,255,255,.22); position: relative; }
.pump-scale::after { content: 'TALAJSZINT'; position: absolute; left: 0; bottom: -22px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: rgba(255,255,255,.4); }
/* 3D-extruded reach columns — isometric top + side faces (pure CSS, GPU-cheap) */
.pump-bar { --d: 16px; height: var(--h);
  background: linear-gradient(180deg, rgba(150,214,58,.96) 0%, rgba(108,168,30,.62) 100%);
  border: none; border-radius: 2px 2px 0 0;
  display: flex; flex-direction: column; align-items: center; padding-top: 16px; position: relative;
  transform-origin: bottom; box-shadow: 0 26px 44px -24px rgba(132,204,22,.5); }
.pump-bar::before {                         /* TOP face (lit) */
  content: ''; position: absolute; left: 0; top: calc(-1 * var(--d)); width: 100%; height: var(--d);
  background: rgba(178,230,98,.97);
  transform: skewX(-45deg); transform-origin: bottom left;
}
.pump-bar::after {                          /* RIGHT side face (shaded) */
  content: ''; position: absolute; right: calc(-1 * var(--d)); top: 0; width: var(--d); height: 100%;
  background: linear-gradient(180deg, rgba(96,150,26,.98), rgba(68,108,16,.72));
  transform: skewY(-45deg); transform-origin: top left;
}
.pump-bar__m, .pump-bar__t { position: relative; z-index: 2; }
.pump-bar__m { font-family: var(--mono); font-size: clamp(22px,2.8vw,38px); font-weight: 800; color: #fff; line-height: 1; }
.pump-bar__m small { font-size: .48em; opacity: .85; }
.pump-bar__t { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.72); margin-top: 8px; text-align: center; padding: 0 6px; }

.pump-reach { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 40px; }
.pump-opt { background: #fff; border: 1px solid #e7e4dd; border-radius: 4px; padding: 30px 28px; transition: transform .35s, box-shadow .35s, border-color .35s; }
.pump-opt:hover { transform: translateY(-5px); box-shadow: 0 30px 56px -32px rgba(0,0,0,.45); border-color: var(--green); }
.pump-opt__m { font-family: var(--mono); font-size: 34px; font-weight: 800; color: var(--green-dark); line-height: 1; }
.pump-opt__m small { font-size: .45em; }
.pump-opt h3 { font-size: 18px; color: var(--charcoal); margin: 12px 0 8px; }
.pump-opt p { font-size: 14.5px; line-height: 1.6; color: #555; text-transform: none; font-weight: 400; }

.pump-specs { display: grid; grid-template-columns: repeat(2,1fr); gap: 0; background: var(--cement-3); border: 1px solid #e7e4dd; border-radius: 4px; overflow: hidden; }
.pump-spec { padding: 26px 28px; border-bottom: 1px solid #e7e4dd; border-right: 1px solid #e7e4dd; }
.pump-spec:nth-child(2n) { border-right: none; }
.pump-spec:nth-last-child(-n+2) { border-bottom: none; }
.pump-spec__label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #8a8a86; }
.pump-spec__val { font-size: 19px; font-weight: 700; color: var(--charcoal); margin-top: 6px; }
.pump-spec__val .g { color: var(--green-dark); }

@media (max-width: 860px) {
  .pump-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .pump-scale { height: 280px; }
  .pump-reach, .pump-specs { grid-template-columns: 1fr; }
  .pump-spec { border-right: none; }
  .pump-spec:nth-last-child(2) { border-bottom: 1px solid #e7e4dd; }
}

/* ============================================================
   BETONBLOKK — unique modular-product page
   ============================================================ */
.blk-hero { background: var(--cement-3); border-bottom: 1px solid #e7e4dd; }
.blk-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; padding: 60px 0; }
.blk-hero__text .eyebrow { color: var(--green-dark); }
.blk-hero__text h1 { font-size: clamp(32px,4.6vw,60px); line-height: 1.18; letter-spacing: -0.03em; margin: 14px 0 18px; }
.blk-hero__text p { font-size: clamp(16px,1.8vw,19px); color: #4a4a48; line-height: 1.6; max-width: 46ch; }
.blk-hero__media { border-radius: 4px; overflow: hidden; box-shadow: 0 30px 70px -34px rgba(0,0,0,.55); border: 1px solid #e2ded5; }
.blk-hero__media img { width: 100%; height: auto; display: block; }

.blk-sizes { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.blk-size { background: #fff; border: 1px solid #e7e4dd; border-radius: 4px; padding: 34px 28px 32px; text-align: center;
  box-shadow: 0 16px 38px -28px rgba(0,0,0,.4); transition: transform .35s cubic-bezier(.16,.84,.24,1), box-shadow .35s, border-color .35s; }
.blk-size:hover { transform: translateY(-6px); box-shadow: 0 32px 58px -30px rgba(0,0,0,.5); border-color: var(--green); }
.blk-size__viz { height: 86px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 22px; }
.blk-size__block { height: 56px; background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, #d9d6cf, #c4c1b8);
  border: 1px solid #b3b0a7; border-radius: 3px; position: relative; box-shadow: inset 0 2px 0 rgba(255,255,255,.5); }
.blk-size__block::before { content: ''; position: absolute; top: -6px; left: 8px; right: 8px; height: 6px;
  background: repeating-linear-gradient(90deg, #c4c1b8 0 8px, transparent 8px 18px); border-radius: 2px 2px 0 0; }
.blk-size__dim { font-family: var(--mono); font-size: 19px; font-weight: 800; color: var(--charcoal); letter-spacing: -0.01em; }
.blk-size__weight { font-family: var(--mono); font-size: 13px; color: #8a8a86; margin: 7px 0 20px; text-transform: uppercase; letter-spacing: .06em; }
.blk-size__price { font-family: var(--mono); font-size: 30px; font-weight: 800; color: var(--green-dark); line-height: 1; }
.blk-size__price small { display: block; font-size: 12px; color: #8a8a86; font-weight: 700; margin-top: 7px; letter-spacing: .04em; }

.blk-benefits { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.blk-benefit { background: var(--charcoal); color: #fff; border-radius: 4px; padding: 28px 24px; }
.blk-benefit__icon { color: var(--green); font-size: 24px; margin-bottom: 14px; }
.blk-benefit h3 { font-size: 17px; color: #fff; margin-bottom: 8px; }
.blk-benefit p { font-size: 14px; line-height: 1.55; color: var(--cement-2); text-transform: none; font-weight: 400; }

.blk-uses__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.blk-uses__list { list-style: none; }
.blk-uses__list li { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0; border-bottom: 1px solid #e7e4dd; font-size: 18px; color: var(--charcoal); }
.blk-uses__list li:last-child { border-bottom: none; }
.blk-uses__list li::before { content: ''; flex-shrink: 0; width: 10px; height: 10px; margin-top: 8px; background: var(--green); transform: rotate(45deg); }
.blk-uses__photo { border-radius: 4px; overflow: hidden; box-shadow: 0 30px 70px -34px rgba(0,0,0,.55); }
.blk-uses__photo img { width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
  .blk-hero__grid, .blk-uses__grid { grid-template-columns: 1fr; gap: 34px; }
  .blk-sizes { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .blk-benefits { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .blk-benefits { grid-template-columns: 1fr; } }

/* "Hamarosan" (coming soon) label on product cards */
.svc__arrow--soon { color: #a8a59d !important; font-style: italic; }
.svc__card:not(a) { cursor: default; }

/* ============================================================
   BETONTERMÉKEK — bold product boxes
   ============================================================ */
.bt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.bt-card { background: #fff; border: 1px solid #e7e4dd; border-radius: 5px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 18px 44px -30px rgba(0,0,0,.42); transition: transform .4s cubic-bezier(.16,.84,.24,1), box-shadow .4s; }
.bt-card:hover { transform: translateY(-7px); box-shadow: 0 38px 66px -32px rgba(0,0,0,.55); }
.bt-card__head { background: var(--charcoal); color: #fff; padding: 28px 32px; position: relative; }
.bt-card__head::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px;
  background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.16,.84,.24,1); }
.bt-card:hover .bt-card__head::after { transform: scaleX(1); }
.bt-card__n { font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; color: var(--green); }
.bt-card__name { font-size: clamp(23px,2.6vw,30px); color: #fff; margin-top: 8px; letter-spacing: -0.02em; line-height: 1.06; }
.bt-card__body { padding: 26px 32px 30px; display: flex; flex-direction: column; flex-grow: 1; }
.bt-card__desc { font-size: 15.5px; line-height: 1.7; color: #555; text-transform: none; font-weight: 400; flex-grow: 1; }
.bt-sizes { margin-top: 24px; }
.bt-sizes__label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: #8a8a86; display: block; margin-bottom: 12px; }
.bt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-chip { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--charcoal); background: var(--cement-3);
  border: 1px solid #ddd9d0; padding: 8px 13px; border-radius: 3px; }
.bt-chip b { color: var(--green-dark); }
.bt-chip--lead { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
@media (max-width: 820px) { .bt-grid { grid-template-columns: 1fr; } }

/* ============================================================
   BETONADALÉKSZER — funky animated additive cards
   ============================================================ */
.adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.adv-card { background: #fff; border: 1px solid #e7e4dd; border-radius: 12px; padding: 34px 28px 32px; text-align: center;
  position: relative; overflow: hidden; box-shadow: 0 18px 44px -30px rgba(0,0,0,.4);
  transition: transform .4s cubic-bezier(.16,.84,.24,1), box-shadow .4s; }
.adv-card:hover { transform: translateY(-8px); box-shadow: 0 38px 66px -32px rgba(0,0,0,.5); }
.adv-card::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--green); transform: scaleX(0); transform-origin: center; transition: transform .45s cubic-bezier(.16,.84,.24,1); }
.adv-card:hover::after { transform: scaleX(1); }
.adv-viz { width: 88px; height: 88px; margin: 0 auto 22px; position: relative; }
.adv-card h3 { font-size: 21px; color: var(--charcoal); margin-bottom: 10px; }
.adv-card p { font-size: 14.5px; line-height: 1.62; color: #555; text-transform: none; font-weight: 400; }

/* 1 — FOLYÓSÍTÓ: green liquid with a live wavy surface (improved flowability) */
.adv-flow { border-radius: 50%; background: #ecebe5; border: 2px solid var(--charcoal); overflow: hidden; }
.adv-flow::after { content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 3; pointer-events: none;
  box-shadow: inset 0 7px 12px rgba(255,255,255,.4), inset 0 -10px 16px rgba(0,0,0,.12); }
.adv-flow i { position: absolute; left: -52%; width: 204%; height: 204%; }
.adv-flow i:nth-child(1){ bottom: -150%; background: var(--charcoal); opacity: .92; border-radius: 43% 45% 47% 42%; animation: adv-wave 6s linear infinite; }
.adv-flow i:nth-child(2){ bottom: -150%; background: rgba(132,204,22,.5); border-radius: 46% 42% 44% 47%; animation: adv-wave 9s linear infinite reverse; }  /* green accent crest */
@keyframes adv-wave { to { transform: rotate(360deg); } }
@keyframes adv-spin { to { transform: rotate(360deg); } }

/* 2 — FAGYÁSGÁTLÓ: slow-turning snowflake with a frost shimmer */
.adv-frost { display: flex; align-items: center; justify-content: center; }
.adv-frost svg { width: 64px; height: 64px; animation: adv-frost-turn 24s linear infinite, adv-frost-glow 3.6s ease-in-out infinite; }
@keyframes adv-frost-turn { to { transform: rotate(360deg); } }
@keyframes adv-frost-glow { 0%,100% { opacity: .78; filter: drop-shadow(0 0 3px rgba(132,204,22,.25)); } 50% { opacity: 1; filter: drop-shadow(0 0 8px rgba(132,204,22,.55)); } }

/* 3 — LÉGPÓRUSKÉPZŐ: hollow air bubbles drifting up */
.adv-bub { border-radius: 50%; background: #ecebe5; border: 2px solid var(--charcoal); overflow: hidden; }
.adv-bub span { position: absolute; bottom: -16px; border-radius: 50%; background: rgba(0,0,0,.05); border: 1.5px solid var(--charcoal); opacity: 0; animation: adv-bubble 3.6s ease-in infinite; }
.adv-bub span:nth-child(1){ left: 24%; width: 12px; height: 12px; animation-delay: 0s; }
.adv-bub span:nth-child(2){ left: 48%; width: 16px; height: 16px; animation-delay: .9s; border-color: var(--green); }  /* one green accent bubble */
.adv-bub span:nth-child(3){ left: 66%; width: 9px;  height: 9px;  animation-delay: 1.7s; }
.adv-bub span:nth-child(4){ left: 38%; width: 11px; height: 11px; animation-delay: 2.5s; }
@keyframes adv-bubble { 0% { transform: translate(0,0) scale(.6); opacity: 0; } 16% { opacity: .95; } 55% { transform: translate(4px,-50px) scale(1); } 100% { transform: translate(-3px,-104px) scale(1.05); opacity: 0; } }

/* 4 — KÖTÉSKÉSLELTETŐ: clock with hour ticks + a slow, creeping hand (delayed set) */
.adv-clock { border-radius: 50%; border: 3px solid var(--charcoal); background: #fff; }
.adv-clock i { position: absolute; left: 50%; top: 50%; transform-origin: bottom center; border-radius: 3px; }
.adv-clock i.m { width: 3px; height: 24px; margin: -24px 0 0 -1.5px; background: var(--charcoal); animation: adv-spin 16s linear infinite; }
.adv-clock i.s { width: 2.5px; height: 17px; margin: -17px 0 0 -1.25px; background: var(--green); animation: adv-spin 5s linear infinite; }
.adv-clock::before { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--green); border-radius: 50%; z-index: 2; }
.adv-clock::after { content: ''; position: absolute; top: 6px; left: 50%; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--charcoal);
  box-shadow: 38px 38px 0 var(--charcoal), -38px 38px 0 var(--charcoal), 0 76px 0 var(--charcoal); }

/* 5 — PÁRAZÁRÓ: a droplet falls, the sealed surface repels it (ripple) */
.adv-drop i.d { position: absolute; top: 4px; left: 50%; width: 24px; height: 30px; margin-left: -12px;
  background: linear-gradient(150deg, #44444b, var(--charcoal));
  clip-path: polygon(50% 0, 60% 14%, 78% 38%, 87% 62%, 84% 80%, 70% 93%, 50% 100%, 30% 93%, 16% 80%, 13% 62%, 22% 38%, 40% 14%);
  animation: adv-droplet 2.8s cubic-bezier(.5,.1,.5,1) infinite; }
.adv-drop i.seal { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); width: 56px; height: 5px; background: var(--charcoal); border-radius: 3px; }
.adv-drop i.ripple { position: absolute; bottom: 19px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border: 2px solid var(--green); border-radius: 50%; opacity: 0; animation: adv-ripple 2.8s ease-out infinite; }
@keyframes adv-droplet { 0% { transform: translateY(-4px) scale(.9); opacity: 0; } 14% { opacity: 1; } 44% { transform: translateY(40px) scale(1); opacity: 1; } 50% { transform: translateY(40px) scale(1.12,.82); opacity: .55; } 56%,100% { transform: translateY(42px) scale(1); opacity: 0; } }
@keyframes adv-ripple { 0%,44% { transform: scale(.3); opacity: 0; } 52% { opacity: .9; } 100% { transform: scale(3.6); opacity: 0; } }

/* 6 — …ÉS MÉG TÖBB: a web of structural fibres (replaces the steel mesh) */
.adv-fiber { display: flex; align-items: center; justify-content: center; }
.adv-fiber i { position: absolute; left: 50%; top: 50%; width: 80px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--charcoal) 22%, var(--charcoal) 78%, transparent); animation: adv-fiber-glow 3.6s ease-in-out infinite; }
.adv-fiber i:nth-child(1){ transform: translate(-50%,-50%) rotate(22deg); animation-delay: 0s; }
.adv-fiber i:nth-child(2){ transform: translate(-50%,-50%) rotate(-34deg); animation-delay: .5s;
  background: linear-gradient(90deg, transparent, var(--green) 22%, var(--green) 78%, transparent); }  /* one green accent fibre */
.adv-fiber i:nth-child(3){ transform: translate(-50%,-50%) rotate(72deg); animation-delay: 1s; }
.adv-fiber i:nth-child(4){ transform: translate(-50%,-50%) rotate(-78deg); animation-delay: 1.5s; }
@keyframes adv-fiber-glow { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) { .adv-flow i, .adv-frost svg, .adv-bub span, .adv-clock i, .adv-drop i, .adv-fiber i { animation: none !important; } }
@media (max-width: 880px) { .adv-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .adv-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; } }

/* ============================================================
   BETONACÉL, BETONHÁLÓ ÉS SEGÉDANYAGOK — steel/grid page
   ============================================================ */
.acel-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; margin-bottom: 12px; }
.acel-feat__media { border-radius: 4px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 30px 70px -34px rgba(0,0,0,.55); }
.acel-feat__media img { width: 100%; height: 100%; object-fit: cover; }
.acel-feat--rev .acel-feat__media { order: -1; }
.acel-feat .eyebrow { color: var(--green-dark); }
.acel-feat h2 { font-size: clamp(26px,3.4vw,40px); margin: 10px 0 16px; }
.acel-feat p { font-size: 16.5px; line-height: 1.7; color: #4a4a48; text-transform: none; font-weight: 400; }
.acel-feat p a { color: var(--green-dark); font-weight: 600; }
.acel-spec { display: inline-block; font-family: var(--mono); font-size: 13px; color: #777; background: var(--cement-3); border: 1px solid #e2ded5; padding: 8px 13px; border-radius: 3px; margin-top: 18px; }
.acel-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.acel-chip { font-family: var(--mono); font-size: 15px; font-weight: 800; color: var(--charcoal); background: #fff; border: 1.5px solid var(--charcoal); padding: 9px 15px; border-radius: 3px; }
.acel-chip b { color: var(--green-dark); }

.acel-spacers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.acel-spacer { background: #fff; border: 1px solid #e7e4dd; border-radius: 4px; padding: 32px 28px; text-align: center;
  box-shadow: 0 16px 38px -28px rgba(0,0,0,.38); transition: transform .35s, box-shadow .35s, border-color .35s; }
.acel-spacer:hover { transform: translateY(-6px); box-shadow: 0 30px 56px -30px rgba(0,0,0,.48); border-color: var(--green); }
.acel-spacer__icon { width: 66px; height: 46px; margin: 0 auto 18px; }
.acel-spacer__icon svg { width: 100%; height: 100%; }
.acel-spacer h3 { font-size: 19px; color: var(--charcoal); margin-bottom: 9px; }
.acel-spacer p { font-size: 14.5px; line-height: 1.6; color: #555; text-transform: none; font-weight: 400; }

@media (max-width: 880px) {
  .acel-feat { grid-template-columns: 1fr; gap: 30px; }
  .acel-feat--rev .acel-feat__media { order: 0; }
  .acel-spacers { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
}

/* ============================================================
   BETONLABOR — animated lab-test visualizations
   ============================================================ */
.lab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.lab-card { background: #fff; border: 1px solid #e7e4dd; border-radius: 12px; padding: 36px 30px 34px; text-align: center;
  position: relative; overflow: hidden; box-shadow: 0 20px 48px -30px rgba(0,0,0,.42);
  transition: transform .4s cubic-bezier(.16,.84,.24,1), box-shadow .4s; }
.lab-card:hover { transform: translateY(-8px); box-shadow: 0 40px 70px -32px rgba(0,0,0,.5); }
.lab-card::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--green); transform: scaleX(0); transition: transform .45s cubic-bezier(.16,.84,.24,1); }
.lab-card:hover::after { transform: scaleX(1); }
.lab-viz { width: 150px; height: 128px; margin: 0 auto 26px; position: relative; }
.lab-card h3 { font-size: 21px; color: var(--charcoal); margin-bottom: 10px; }
.lab-card p { font-size: 14.5px; line-height: 1.62; color: #555; text-transform: none; font-weight: 400; }

/* 1 — KOCKA TÖRÉS: steel platens compress a 2.5D concrete cube → fracture at peak load */
.lab-cube { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lab-cube i.plate { width: 100px; height: 14px; flex-shrink: 0; border-radius: 2px;
  background: linear-gradient(180deg, #43434a 0%, #1c1c20 55%, #0e0e10 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 6px rgba(0,0,0,.4); }
.lab-cube i.plate.top { animation: lab-press 3.2s cubic-bezier(.5,0,.25,1) infinite; }
.lab-cube i.cube { width: 64px; height: 56px; margin: 6px 0; position: relative; transform-origin: center bottom;
  background: linear-gradient(155deg, #cdcabf 0%, #aaa79d 58%, #918e85 100%);
  box-shadow: inset 0 0 16px rgba(0,0,0,.3); animation: lab-squash 3.2s cubic-bezier(.5,0,.25,1) infinite; }
.lab-cube i.cube::before {     /* top face → 3D depth */
  content: ''; position: absolute; top: -9px; left: 0; width: 100%; height: 9px;
  background: linear-gradient(90deg, #dbd8cf, #c0bdb4); transform: skewX(-50deg); transform-origin: bottom left; }
.lab-cube i.cube::after {      /* jagged shear fracture (lightning), flashes at peak */
  content: ''; position: absolute; top: 0; left: 50%; width: 24px; height: 100%; background: #232120;
  transform: translateX(-50%) rotate(8deg); opacity: 0;
  clip-path: polygon(54% 0,62% 0,38% 34%,56% 38%,30% 70%,46% 74%,24% 100%,16% 100%,38% 72%,22% 68%,48% 36%,30% 32%);
  animation: lab-crack 3.2s ease-in-out infinite; }
@keyframes lab-press  { 0%,20%,100% { transform: translateY(0); } 47%,61% { transform: translateY(12px); } }
@keyframes lab-squash { 0%,20%,100% { transform: scaleY(1) translateX(0); }
  47%,57% { transform: scaleY(.82) translateX(0); } 60% { transform: scaleY(.83) translateX(1.5px); } 62% { transform: scaleY(.83) translateX(-1.5px); } }
@keyframes lab-crack  { 0%,44% { opacity: 0; } 54%,72% { opacity: .92; } 88%,100% { opacity: 0; } }

/* 2 — TERÜLÉSMÉRÉS: the mould lifts away, the fresh concrete slumps & spreads */
.lab-slump { display: flex; align-items: flex-end; justify-content: center; }
.lab-slump i.mass { position: absolute; bottom: 25px; left: 50%; width: 74px; height: 70px; transform: translateX(-50%);
  background: linear-gradient(180deg, #c4c1b8, #9b988f); box-shadow: inset 0 -6px 10px rgba(0,0,0,.18);
  clip-path: polygon(32% 0,68% 0,100% 100%,0 100%); animation: lab-mass 3.8s cubic-bezier(.5,0,.3,1) infinite; }
.lab-slump i.cone { position: absolute; bottom: 25px; left: 50%; width: 80px; height: 76px; transform: translateX(-50%);
  border: 3px solid #6b6962; border-bottom: none; background: rgba(120,118,110,.12);
  clip-path: polygon(30% 0,70% 0,100% 100%,0 100%); animation: lab-cone 3.8s ease-in-out infinite; }
.lab-slump i.base { position: absolute; bottom: 22px; width: 104px; height: 3px; background: var(--charcoal); border-radius: 2px; }
.lab-slump::after { content: ''; position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%);
  width: 84px; border-top: 2px dashed rgba(132,204,22,.85); opacity: 0; animation: lab-measure 3.8s ease-in-out infinite; }
@keyframes lab-mass { 0%,20% { clip-path: polygon(32% 0,68% 0,100% 100%,0 100%); }
  56%,82% { clip-path: polygon(3% 52%,97% 52%,100% 100%,0 100%); } 100% { clip-path: polygon(32% 0,68% 0,100% 100%,0 100%); } }
@keyframes lab-cone { 0%,16% { transform: translateX(-50%) translateY(0); opacity: .95; }
  40%,100% { transform: translateX(-50%) translateY(-52px); opacity: 0; } }
@keyframes lab-measure { 0%,52% { opacity: 0; } 60%,82% { opacity: 1; } 92%,100% { opacity: 0; } }

/* 3 — EGYÉB (húzó-hajlító): a load ram bends a concrete beam on two supports → tension crack */
.lab-beam { display: flex; align-items: center; justify-content: center; }
.lab-beam i.beam { width: 116px; height: 26px; position: relative; border-radius: 2px;
  background: linear-gradient(180deg, #c6c3ba, #a09d94); box-shadow: inset 0 0 12px rgba(0,0,0,.26);
  animation: lab-beam-sag 3.4s cubic-bezier(.5,0,.3,1) infinite; }
.lab-beam i.beam::before {    /* top face depth */
  content: ''; position: absolute; top: -7px; left: 0; width: 100%; height: 7px;
  background: linear-gradient(90deg, #d4d1c8, #bcb9b0); transform: skewX(-50deg); transform-origin: bottom left; }
.lab-beam i.beam::after {     /* tension crack rising from the bottom-centre */
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 9px; height: 0;
  background: #232120; clip-path: polygon(50% 100%, 0 0, 100% 0); animation: lab-beam-crack 3.4s ease-in-out infinite; }
.lab-beam i.ram { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 20px; height: 26px; z-index: 3;
  background: linear-gradient(180deg, #43434a, #161618); border-radius: 2px 2px 1px 1px;
  box-shadow: 0 2px 5px rgba(0,0,0,.4); animation: lab-beam-ram 3.4s cubic-bezier(.5,0,.25,1) infinite; }
.lab-beam i.sup { position: absolute; bottom: 22px; width: 0; height: 0;
  border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 15px solid var(--charcoal); }
.lab-beam i.sup.l { left: 24px; } .lab-beam i.sup.r { right: 24px; }
@keyframes lab-beam-ram { 0%,18%,100% { transform: translateX(-50%) translateY(0); } 48%,66% { transform: translateX(-50%) translateY(11px); } }
@keyframes lab-beam-sag { 0%,18%,100% { transform: translateY(0) scaleY(1); border-radius: 2px; }
  48%,66% { transform: translateY(4px) scaleY(.94); border-radius: 2px 2px 14px 14px / 2px 2px 7px 7px; } }
@keyframes lab-beam-crack { 0%,42% { height: 0; opacity: 0; } 52% { opacity: 1; } 62%,76% { height: 19px; opacity: 1; } 90%,100% { height: 0; opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .lab-cube i, .lab-slump i, .lab-slump::after, .lab-beam i { animation: none !important; } }
@media (max-width: 860px) { .lab-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; } }

/* ============================================================
   ÖMLESZTETT ANYAG — aggregates with granular swatches
   ============================================================ */
.bulk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.bulk-card { background: #fff; border: 1px solid #e7e4dd; border-radius: 6px; overflow: hidden;
  box-shadow: 0 16px 38px -28px rgba(0,0,0,.38); transition: transform .35s cubic-bezier(.16,.84,.24,1), box-shadow .35s, border-color .35s; }
.bulk-card:hover { transform: translateY(-6px); box-shadow: 0 30px 56px -30px rgba(0,0,0,.48); border-color: var(--green); }
.bulk-swatch { height: 150px; position: relative; border-bottom: 1px solid #e7e4dd; overflow: hidden; }
.bulk-swatch__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bulk-card:hover .bulk-swatch__img { transform: scale(1.04); }
.bulk-swatch__img { transition: transform .5s ease; }
.bulk-swatch--fine   { background-color: #d8c7a0; background-image: radial-gradient(circle, rgba(96,76,42,.4) .8px, transparent 1.2px), radial-gradient(circle, rgba(96,76,42,.28) .8px, transparent 1.2px); background-size: 6px 6px, 6px 6px; background-position: 0 0, 3px 3px; }
.bulk-swatch--med    { background-color: #c3bdb0; background-image: radial-gradient(circle, rgba(58,52,44,.42) 1.9px, transparent 2.6px); background-size: 13px 13px; }
.bulk-swatch--coarse { background-color: #b6b2a8; background-image: radial-gradient(circle, rgba(46,44,40,.46) 3.4px, transparent 4.4px), radial-gradient(circle, rgba(46,44,40,.3) 2.4px, transparent 3.2px); background-size: 22px 22px, 22px 22px; background-position: 0 0, 11px 11px; }
.bulk-swatch--beton  { background-color: #b0ada5; background-image: linear-gradient(135deg, rgba(70,68,64,.25) 25%, transparent 25%), linear-gradient(225deg, rgba(70,68,64,.25) 25%, transparent 25%); background-size: 16px 16px; }
.bulk-swatch__tag { position: absolute; top: 12px; left: 12px; font-family: var(--mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #fff; background: rgba(29,29,31,.7); padding: 4px 8px; border-radius: 2px; }
.bulk-body { padding: 20px 22px 24px; }
.bulk-body h3 { font-size: 18px; color: var(--charcoal); margin-bottom: 14px; line-height: 1.15; }
.bulk-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.bulk-chip { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--charcoal); background: var(--cement-3); border: 1px solid #ddd9d0; padding: 6px 10px; border-radius: 3px; }
.bulk-chip--note { color: #777; font-weight: 400; font-style: italic; }
@media (max-width: 980px) { .bulk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .bulk-grid { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; } }

/* ============================================================
   SZAKTANÁCSADÁS — numbered process steps (01–04)
   brutalist beton-industrial: outlined mono numerals, charcoal slab
   cards, lime accent, a connecting rail spine between steps.
   ============================================================ */
.proc {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.proc__step {
  position: relative;
  background: var(--white);
  border: 3px solid var(--charcoal);
  padding: 34px 28px 36px;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.16,.84,.24,1),
              box-shadow .5s cubic-bezier(.16,.84,.24,1),
              background-color .4s ease;
}
/* lime fill-up accent at the base (consistent with .why__card / .svc__card) */
.proc__step::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 5px;
  background: var(--green); transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
/* the connector rail — a horizontal beton-spine threading the steps together */
.proc__rail {
  position: absolute; top: 51px; right: -25px; width: 28px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--charcoal) 0 6px, transparent 6px 11px);
  z-index: 3;
}
.proc__step:last-child .proc__rail { display: none; }
.proc__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 24px;
}
.proc__num {
  font-family: var(--mono); font-weight: 800; font-size: clamp(40px, 4vw, 56px);
  line-height: 1; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.6px var(--charcoal);
  transition: -webkit-text-stroke-color .4s ease, color .4s ease, transform .5s cubic-bezier(.16,.84,.24,1);
}
.proc__icon {
  flex: none; width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  background: var(--charcoal); color: var(--green);
  border: 3px solid var(--charcoal);
  transition: background-color .4s ease, color .4s ease, transform .5s cubic-bezier(.16,.84,.24,1);
}
.proc__icon svg { width: 24px; height: 24px; display: block; }
.proc__step h3 { font-size: 20px; line-height: 1.25; margin-bottom: 12px; }
.proc__step p {
  font-size: 14.5px; color: #555; line-height: 1.65;
  text-transform: none; font-weight: 400; margin-top: auto;
}
/* the one tasteful momentum: lift + the numeral floods solid green, icon flips to lime */
@media (hover: hover) {
  .proc__step:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 58px -26px rgba(29,29,31,.55);
    background: var(--cement-3); z-index: 4;
  }
  .proc__step:hover::after { transform: scaleX(1); }
  .proc__step:hover .proc__num {
    color: var(--green-dark); -webkit-text-stroke-color: var(--green-dark);
    transform: translateY(-2px);
  }
  .proc__step:hover .proc__icon {
    background: var(--green); color: var(--charcoal);
    transform: translateY(-2px) rotate(-3deg);
  }
}
@media (max-width: 1040px) {
  .proc { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  /* rail only spans within a row; hide on the right-edge cards of each pair */
  .proc__step:nth-child(2n) .proc__rail { display: none; }
}
@media (max-width: 560px) {
  .proc { grid-template-columns: 1fr; gap: 16px; }
  .proc__step { padding: 28px 24px 30px; }
  .proc__rail { display: none !important; }
  .proc__head { margin-bottom: 18px; justify-content: flex-start; gap: 18px; }
  .proc__num { font-size: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .proc__step, .proc__num, .proc__icon, .proc__step::after { transition: none; }
}

/* ===== TRANSZPORTBETON — spec rail (strength / consistency / grain) ===== */
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.spec-col {
  background: #fff; border: 1px solid #e7e4dd; border-radius: 4px;
  padding: 30px 28px 32px; position: relative; overflow: hidden;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s cubic-bezier(.2,.8,.2,1);
}
.spec-col::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--green); transform: scaleY(0); transform-origin: top;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.spec-col__sh { font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--green-dark); }
.spec-col__lead { font-size: 14.5px; color: #666; text-transform: none; font-weight: 400; line-height: 1.6; margin: 8px 0 20px; }
.spec-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.spec-chip {
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--charcoal);
  background: var(--cement-3); border: 1px solid #e2ded5; border-radius: 3px;
  padding: 8px 12px; letter-spacing: .01em; transition: background .25s, color .25s, border-color .25s;
}
.spec-chip--alt { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.spec-scale { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.spec-scale__row { display: flex; align-items: baseline; gap: 12px; }
.spec-scale__k { font-family: var(--mono); font-size: 13px; font-weight: 800; color: var(--green-dark); min-width: 30px; }
.spec-scale__v { font-size: 14.5px; color: #555; text-transform: none; font-weight: 400; }
@media (hover: hover) {
  .spec-col:hover { transform: translateY(-6px); box-shadow: 0 26px 52px -24px rgba(29,29,31,.5); z-index: 2; }
  .spec-col:hover::before { transform: scaleY(1); }
  .spec-col:hover .spec-chip { border-color: #d7d3ca; }
}
.spec-note { margin-top: 26px; font-size: 14.5px; color: #777; text-transform: none; font-weight: 400; }
.spec-note a { color: var(--green-dark); font-weight: 600; }
@media (max-width: 880px) { .spec-grid { grid-template-columns: 1fr; gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .spec-col, .spec-col::before { transition: none; } }

/* ===== TRANSZPORTBETON — delivery cross-link cards ===== */
.tb-delivery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.tb-deliv {
  display: flex; flex-direction: column; background: #fff; border: 1px solid #e7e4dd;
  border-radius: 4px; padding: 32px 30px 30px; text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s cubic-bezier(.2,.8,.2,1);
}
.tb-deliv::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: var(--green); transition: width .45s cubic-bezier(.2,.8,.2,1);
}
.tb-deliv__icon { color: var(--green-dark); margin-bottom: 18px; }
.tb-deliv__icon svg { width: 30px; height: 30px; display: block; }
.tb-deliv h3 { font-size: 21px; margin-bottom: 10px; }
.tb-deliv p { font-size: 14.5px; color: #555; text-transform: none; font-weight: 400; line-height: 1.6; flex-grow: 1; }
.tb-deliv__arrow { margin-top: 18px; font-family: var(--mono); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--green-dark); }
@media (hover: hover) {
  .tb-deliv:hover { transform: translateY(-6px); box-shadow: 0 26px 52px -24px rgba(29,29,31,.55); z-index: 2; }
  .tb-deliv:hover::after { width: 100%; }
}
@media (max-width: 700px) { .tb-delivery { grid-template-columns: 1fr; gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .tb-deliv, .tb-deliv::after { transition: none; } }

/* MOBIL hero (csak mobil): a desktoppal AZONOS cover-frame -> felul tiszta sotet eg
   (nincs vilagos apron-sav), csak a silokra pozicionalva. A korabbi 150% szelesseg-zoom
   nem fedte a portret -> a default repeat TILE-olt -> AZ volt a vilagos felso sav. (2026-06-22) */
@media (max-width: 720px) {
  .hero__bg {
    background-image:
      linear-gradient(180deg,
        rgba(14,15,18,.30) 0%,
        rgba(14,15,18,.20) 40%,
        rgba(14,15,18,.55) 74%,
        rgba(29,29,30,.99) 100%),
      url('hero-plant-bw-hd.jpg') !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center, 16% 50% !important;
    background-size: cover, cover !important;
  }
}