/* ══════════════════════════════════════════════════════════════════════════
   ALPIN TECHNOLÓGIA — site.css
   Hand-written, no build step. Both business branches share every component;
   only the theme tokens (--ag*) swap, via [data-ag] on a page or a section.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- fonts (self-hosted, Hungarian accents in the -ext subset) ---- */
@font-face {
  font-family: 'Oswald'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/oswald-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/oswald-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ------------------------------------------------------ */
:root {
  --piros: #C71515;  --piros-vil: #E0332B;  --piros-melly: #8E1A18;
  --kek:   #075198;  --kek-vil:   #3A87D7;  --kek-melly:   #10233F;

  --sotet: #1B1F24;  --sotet-2: #0D1116;  --grafit: #2B2E35;
  --szoveg: #3E3F41; --halvany: #6E7278;  --vonal: #E2E2E4;
  --hatter: #F7F7F7; --kartya: #F2F2F2;   --feher: #FFFFFF;

  /* branch theme — overridden per page or section by [data-ag] */
  --ag: var(--kek); --ag-vil: var(--kek-vil); --ag-melly: var(--kek-melly);

  --fej: 78px;
  --sav: clamp(1.25rem, 4vw, 4rem);
  --max: 1440px;
  --konny: cubic-bezier(.22, .61, .36, 1);
  --elenk: cubic-bezier(.16, .84, .3, 1);      /* snappier: fast start, soft landing */
  --ruganyos: cubic-bezier(.34, 1.5, .58, 1);
}
[data-ag="piros"] { --ag: var(--piros); --ag-vil: var(--piros-vil); --ag-melly: var(--piros-melly); }
[data-ag="kek"]   { --ag: var(--kek);   --ag-vil: var(--kek-vil);   --ag-melly: var(--kek-melly); }

/* ---------- reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* the page must never slide sideways on a phone */
  overflow-x: hidden; overscroll-behavior-x: none;
}
body {
  margin: 0; background: var(--hatter); color: var(--szoveg);
  font: 400 16px/1.65 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  overflow-x: hidden; overscroll-behavior-x: none; width: 100%;
}
@supports (overflow: clip) {
  /* clip beats hidden: no scroll container, so nothing can be dragged sideways */
  html, body { overflow-x: clip; }
}
/* grid and flex children default to min-content width — without this a long
   word or a wide image can push the whole layout wider than the screen */
.hasab > *, .usp li, .stat li, .kartya, .ertekek li, .ref-ugyfel,
.lablec .hasab > *, .cta .hasab > * { min-width: 0; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  margin: 0; font-family: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  font-weight: 700; line-height: 1.05; text-transform: uppercase;
}
p { margin: 0; }
:focus-visible { outline: 3px solid var(--ag-vil); outline-offset: 3px; }

.rejtett {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hasab { width: min(100% - 2 * var(--sav), var(--max)); margin-inline: auto; }

/* ---------- shared type ------------------------------------------------- */
.kicker {
  display: block; font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: .82rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ag); margin-bottom: .8rem;
}
.cim { text-align: center; margin-bottom: clamp(2.4rem, 4vw, 3.6rem); }
.cim h2 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); color: var(--grafit); }
.szakasz--sotet .cim h2 { color: #fff; }
.huzas {
  width: 64px; height: 3px; background: var(--ag); margin: 1.2rem auto 0;
  transform: scaleX(0); transform-origin: center;
  transition: transform .8s var(--konny) .15s;
}
.lathato .huzas { transform: scaleX(1); }

.szakasz { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.szakasz--sotet {
  position: relative; color: rgba(255, 255, 255, .78);
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.028' stroke-width='1.3'%3E%3Cpath d='M28 .8 55.2 16.5v31.4L28 63.6.8 47.9V16.5z'/%3E%3Cpath d='M56 48.8 83.2 64.5v31.4L56 111.6l-27.2-15.7V64.5z'/%3E%3Cpath d='M0 48.8 27.2 64.5v31.4L0 111.6l-27.2-15.7V64.5z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 56px 97px,
    radial-gradient(64% 92% at 82% 12%, color-mix(in srgb, var(--ag) 26%, transparent), transparent 68%),
    linear-gradient(160deg, #262B33 0%, #1D222A 54%, #171B21 100%);
}
.szakasz--kartya { background: var(--kartya); }
.szakasz--szoros { padding: 0; }

/* ---------- buttons ----------------------------------------------------- */
.gomb {
  position: relative; display: inline-flex; align-items: center; gap: .85rem;
  padding: 1rem 2rem; background: var(--ag); color: #fff; isolation: isolate;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .92rem;
  letter-spacing: .12em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  transition: transform .3s var(--konny), box-shadow .3s var(--konny);
}
.gomb::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ag-vil);
  transform: scaleX(0); transform-origin: left; transition: transform .42s var(--konny);
}
.gomb:hover { transform: translateX(6px) translateY(-2px); box-shadow: 0 16px 30px -12px var(--ag); }
.gomb:hover::before { transform: scaleX(1); }
.gomb svg { width: 22px; height: 12px; flex: 0 0 22px; transition: transform .3s var(--konny); }
.gomb:hover svg { transform: translateX(4px); }

.gomb--vonal {
  background: transparent; border: 2px solid var(--ag-vil); color: #fff; clip-path: none;
}
.gomb--vonal::before { background: var(--ag-vil); }

/* ---------- header ------------------------------------------------------ */
.fejlec {
  position: fixed; inset: 0 0 auto; z-index: 90; height: var(--fej);
  display: flex; align-items: center;
  /* mostly white, with the faintest warm-to-cool wash of the two branches */
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--piros) 4%, #fff) 0%,
      #fff 34%, #fff 66%,
      color-mix(in srgb, var(--kek) 5%, #fff) 100%);
  transition: height .3s var(--konny), box-shadow .3s;
}
.fejlec[data-tomor="1"] { height: 62px; box-shadow: 0 8px 26px -16px rgba(16, 20, 26, .55); }
.fejlec .hasab { display: flex; align-items: center; gap: 1.5rem; height: 100%; }

/* the bottom edge doubles as the scroll indicator: a light track, a branch
   coloured fill, and a glow that rides its leading edge */
.halado {
  position: absolute; inset: auto 0 0; height: 3px; overflow: hidden;
  background: linear-gradient(90deg, #E6E7EA, #DFE1E5 50%, #E6E7EA);
}
.halado span {
  position: absolute; inset: 0;
  /* graphite midpoint on purpose — a straight red-to-blue blend goes muddy */
  background: linear-gradient(90deg, var(--piros) 0%, var(--piros-vil) 18%,
    #3A3F49 50%, var(--kek-vil) 82%, var(--kek) 100%);
  clip-path: inset(0 calc(100% - var(--h, 0) * 100%) 0 0);
}
body[data-ag] .halado span {
  background: linear-gradient(90deg, var(--ag-melly) 0%, var(--ag) 46%, var(--ag-vil) 100%);
}
.halado i {
  position: absolute; top: 50%; left: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  pointer-events: none;
  transform: translateX(calc(var(--h, 0) * 100vw));
  opacity: calc(var(--h, 0) * 3);          /* fades in as soon as you move */
}
/* the pulse lives on a child so it can animate opacity while the parent keeps
   the position transform — still only transform and opacity on the whole site */
.halado i::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 60%);
  animation: lukteto 2.3s ease-in-out infinite;
}
@keyframes lukteto {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}

.fejlec-logo { display: flex; align-items: center; gap: .75rem; margin-right: auto; }
.fejlec-logo img { height: 44px; width: auto; transition: height .3s var(--konny); }
.fejlec[data-tomor="1"] .fejlec-logo img { height: 34px; }
.fejlec-nev b {
  display: block; font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 1.08rem; letter-spacing: .07em; color: var(--grafit); line-height: 1;
}
.fejlec-nev span {
  display: block; font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: .6rem; letter-spacing: .34em; color: var(--halvany); margin-top: 2px;
}

.nav { display: flex; align-items: center; gap: clamp(.8rem, 1.4vw, 1.55rem); flex: 0 1 auto; min-width: 0; }
.nav > a { flex: 0 0 auto; }
.nav a {
  position: relative; padding: .5rem 0; white-space: nowrap;
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: .84rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--grafit);
  transition: color .25s;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--ag), var(--ag-vil));
  transition: right .3s var(--konny);
}
.nav a:hover { color: var(--ag); }
.nav a:hover::after, .nav a[aria-current]::after { right: 0; }

/* A katalógus a piros ág belépője, és a bemutatóterem megnyitása óta sokan
   kifejezetten emiatt érkeznek — ezért egyedül ez a menüpont kap saját
   jelölést. A ferde jobb él az oldal saját formanyelve (ugyanaz, mint a
   gomboké). Statikus: semmi nem animál folyamatosan, csak hoverre vált. */
.nav .kiemelt {
  padding: .46rem 1.05rem .46rem .82rem;
  color: var(--piros); font-weight: 600;
  background: color-mix(in srgb, var(--piros) 9%, transparent);
  box-shadow: inset 2px 0 0 var(--piros);
  clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  transition: background .28s var(--konny), color .28s;
}
.nav .kiemelt::after { display: none; }        /* saját jelölése van */
.nav .kiemelt:hover,
.nav .kiemelt:focus-visible,
.nav .kiemelt[aria-current] { background: var(--piros); color: #fff; }

/* the angled "back to the homepage" button on the branch pages.
   Selector is .nav .vissza on purpose: plain .vissza loses to .nav a. */
.nav .vissza {
  display: inline-flex; align-items: center; gap: .6rem; align-self: stretch;
  flex: 0 0 auto;
  margin: 0 calc(-1 * var(--sav)) 0 .5rem;
  padding: 0 clamp(1rem, 2vw, 1.7rem) 0 clamp(1.7rem, 3vw, 2.6rem);
  background: linear-gradient(100deg, var(--ag) 0%, var(--ag-melly) 100%); color: #fff;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  clip-path: polygon(26px 0, 100% 0, 100% 100%, 0 100%);
  transition: filter .3s;
}
.nav .vissza:hover { filter: brightness(1.18); color: #fff; }
.nav .vissza::after { display: none; }
.nav .vissza svg { width: 20px; height: 12px; flex: 0 0 20px; transition: transform .3s var(--konny); }
.nav .vissza:hover svg { transform: translateX(-4px); }

.menugomb { display: none; width: 46px; height: 46px; position: relative; }
.menugomb i {
  position: absolute; left: 11px; right: 11px; height: 2px; background: var(--grafit);
  transition: transform .32s var(--konny), opacity .2s;
}
.menugomb i:nth-child(1) { top: 16px; }
.menugomb i:nth-child(2) { top: 22px; }
.menugomb i:nth-child(3) { top: 28px; }
.menugomb[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menugomb[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.menugomb[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════════════════════════
   HOME — decision hero: three regions cut by TWO parallel diagonals —
   the red branch, a white centre carrying the brand, the blue branch.
   They share their edges exactly, so there are no gaps and no floating blocks.
   The white centre is the same light surface the rest of the page uses.
   ══════════════════════════════════════════════════════════════════════════ */
.dontes {
  --dolt: 5.5vw;               /* half the horizontal run of a diagonal */
  --fel: 14vw;                 /* half the width of the white centre */
  position: relative; min-height: 100svh; padding-top: var(--fej);
  overflow: hidden; isolation: isolate;
  /* light, not black: this is what shows while the halves slide in, and what a
     hovered half reveals as it eases outward — it reads as the white plate */
  background: linear-gradient(180deg, #FBFBFC 0%, #F4F5F7 55%, #EBECEF 100%);
}

.ag {
  position: absolute; top: 0; bottom: 0; z-index: 2;
  width: calc(50% - var(--fel) + var(--dolt));
  display: grid; place-items: center; color: #fff; overflow: hidden;
  transition: transform .55s var(--elenk), filter .45s var(--elenk);
}
/* drifting hexagon mesh — a slow, GPU-cheap transform, not a repaint */
.ag::before {
  content: ''; position: absolute; inset: -20% -30%; z-index: 0; pointer-events: none;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.028' stroke-width='1.3'%3E%3Cpath d='M28 .8 55.2 16.5v31.4L28 63.6.8 47.9V16.5z'/%3E%3Cpath d='M56 48.8 83.2 64.5v31.4L56 111.6l-27.2-15.7V64.5z'/%3E%3Cpath d='M0 48.8 27.2 64.5v31.4L0 111.6l-27.2-15.7V64.5z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 56px 97px;
  animation: halo 96s linear infinite;
}
.ag--kek::before { animation-direction: reverse; animation-duration: 118s; }
/* the branch glow breathes, so the surface is never quite still */
.ag::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 46% at var(--fx, 20%) 26%,
    color-mix(in srgb, var(--ag-vil) 42%, transparent), transparent 70%);
  will-change: opacity;                 /* its own layer: opacity is then free */
  animation: lelegzik 26s ease-in-out infinite;
}
.ag--kek::after { --fx: 80%; animation-duration: 31s; animation-delay: -11s; }
.ag-doboz { position: relative; z-index: 1; }
@keyframes halo { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(56px, 97px, 0); } }
/* opacity only — scaling a full-bleed gradient re-rasterises it every frame */
@keyframes lelegzik {
  0%, 100% { opacity: .55; }
  50%      { opacity: .9; }
}
.ag--piros {
  --ag: var(--piros); --ag-vil: var(--piros-vil); --ag-melly: var(--piros-melly);
  left: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 2 * var(--dolt)) 100%, 0 100%);
  padding: var(--fej) calc(2.4 * var(--dolt)) 0 var(--sav);
  background:
    linear-gradient(118deg, transparent 39.7%, rgba(255, 255, 255, .1) 39.7%, rgba(255, 255, 255, .1) 40.1%, transparent 40.1%),
    linear-gradient(118deg, transparent 43%, rgba(255, 255, 255, .04) 43%, rgba(255, 255, 255, .04) 43.9%, transparent 43.9%),
    radial-gradient(96% 78% at 12% 14%, color-mix(in srgb, var(--piros) 82%, transparent), transparent 74%),
    radial-gradient(120% 110% at 30% 100%, rgba(0, 0, 0, .55), transparent 68%),
    linear-gradient(152deg, #5E3034 0%, #3C2529 44%, #241A1D 100%);
}
.ag--kek {
  --ag: var(--kek); --ag-vil: var(--kek-vil); --ag-melly: var(--kek-melly);
  right: 0; clip-path: polygon(calc(2 * var(--dolt)) 0, 100% 0, 100% 100%, 0 100%);
  padding: var(--fej) var(--sav) 0 calc(2.4 * var(--dolt));
  background:
    linear-gradient(118deg, transparent 59.9%, rgba(255, 255, 255, .1) 59.9%, rgba(255, 255, 255, .1) 60.3%, transparent 60.3%),
    linear-gradient(118deg, transparent 56%, rgba(255, 255, 255, .04) 56%, rgba(255, 255, 255, .04) 56.9%, transparent 56.9%),
    radial-gradient(96% 78% at 88% 14%, color-mix(in srgb, var(--kek-vil) 72%, transparent), transparent 74%),
    radial-gradient(120% 110% at 70% 100%, rgba(0, 0, 0, .58), transparent 68%),
    linear-gradient(208deg, #27486B 0%, #1C3048 44%, #141C26 100%);
}
/* the whole half is the link; on hover it eases outward off the white centre */
.ag:hover, .ag:focus-visible { filter: brightness(1.1) saturate(1.06); }
.ag--piros:hover, .ag--piros:focus-visible { transform: translateX(-14px); }
.ag--kek:hover,   .ag--kek:focus-visible   { transform: translateX(14px); }

.ag-doboz {
  width: min(100%, 24rem); text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.ag-ikon { width: 54px; height: 54px; margin-bottom: 1.25rem; color: var(--ag-vil); }
.ag h2 { font-size: clamp(1.35rem, 2.1vw, 2.05rem); color: #fff; }
.ag h2 em { display: block; font-style: normal; color: var(--ag-vil); }
.ag-vonal { width: 74px; height: 3px; margin: 1.15rem 0 1.25rem; background: var(--ag-vil); }
.ag-szoveg {
  display: block; color: rgba(255, 255, 255, .84);
  font-size: clamp(.94rem, 1.05vw, 1.02rem); line-height: 1.75;
}
.ag .gomb { margin-top: 1.9rem; pointer-events: none; }
.ag:hover .gomb { transform: translateX(6px) translateY(-2px); box-shadow: 0 16px 30px -12px var(--ag); }
.ag:hover .gomb::before { transform: scaleX(1); }

/* ---- the white centre: the brand, the 30+ claim, a scroll hint ---- */
.ek {
  position: absolute; top: 0; bottom: 0; z-index: 3;
  left: calc(50% - var(--fel) - var(--dolt));
  width: calc(2 * var(--fel) + 2 * var(--dolt));
  clip-path: polygon(calc(2 * var(--dolt)) 0, 100% 0, calc(100% - 2 * var(--dolt)) 100%, 0 100%);
  /* drop-shadow follows the clip path (box-shadow would not), so the plate
     really casts onto the two coloured halves instead of looking cut out */
  filter: drop-shadow(0 0 26px rgba(0, 0, 0, .85)) drop-shadow(0 0 90px rgba(0, 0, 0, .5));
  background:
    radial-gradient(120% 70% at 50% 0%, #fff 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, #FBFBFC 0%, #F4F5F7 55%, #EBECEF 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1.1rem, 2.2vw, 1.7rem); text-align: center;
  padding: calc(var(--fej) + 1rem) calc(2 * var(--dolt)) 1.5rem;
}
/* a hairline under the brand, so the centre has structure rather than float */
.ek-szoveg::before {
  content: ''; display: block; width: 46px; height: 2px; margin: 0 auto 1.1rem;
  background: linear-gradient(90deg, var(--piros), var(--kek));
}
/* No texture and no sweep here: the white plate is the calm surface of the
   composition — and both were animated layers inside a filtered element,
   which forced the browser to re-render four blurs on every single frame. */
.ek > * { position: relative; z-index: 1; }
.ek-logo { width: min(100%, 200px); }
.ek-szam {
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: .86; color: var(--grafit);
}
.ek-eve {
  display: block; font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: clamp(.76rem, 1.05vw, .95rem); letter-spacing: .2em;
  text-transform: uppercase; color: var(--piros); margin-top: .45rem;
}
.ek-alcim {
  font-family: 'Oswald', sans-serif; font-weight: 500;
  font-size: clamp(.74rem, 1vw, .92rem); letter-spacing: .1em;
  text-transform: uppercase; color: var(--szoveg); line-height: 1.4; margin-top: .3rem;
}
.ek-nyil { width: 28px; color: var(--halvany); animation: le 2.4s infinite; }
@keyframes le {
  0%, 100% { transform: translateY(0); opacity: .45; }
  50%      { transform: translateY(8px); opacity: 1; }
}

/* ---------- USP row ----------------------------------------------------- */
.usp {
  display: grid; gap: 1px; background: var(--vonal); grid-template-columns: repeat(6, 1fr);
  /* the strip is one instrument panel — it lifts as a whole, never per cell */
  box-shadow: 0 -20px 40px -24px rgba(0, 0, 0, .8), 0 22px 40px -24px rgba(0, 0, 0, .6);
  position: relative; z-index: 3;
}
.usp li {
  background: var(--feher); padding: 1.9rem 1.6rem;
  display: flex; gap: 1.1rem; align-items: flex-start;
  transition: background .3s, transform .35s var(--konny);
}
.usp li:hover { background: #fbfbfc; transform: translateY(-4px); }
.usp svg { flex: 0 0 36px; width: 36px; height: 36px; margin-top: .1rem; transition: transform .45s var(--ruganyos); }
.usp li:hover svg { transform: scale(1.14) rotate(-5deg); }
.usp li:nth-child(-n+3) svg { color: var(--piros); }
.usp li:nth-child(n+4)  svg { color: var(--kek); }
.usp h3 { font-size: 1rem; letter-spacing: .05em; color: var(--grafit); margin-bottom: .35rem; line-height: 1.15; }
.usp p { font-size: .875rem; line-height: 1.5; color: var(--halvany); }

/* ---------- stats ------------------------------------------------------- */
.stat { display: grid; gap: 2rem 1rem; grid-template-columns: repeat(5, 1fr); align-items: center; }
.stat li { display: flex; gap: 1rem; align-items: center; justify-content: center; padding: .4rem 0; }
.stat li + li { border-left: 1px solid var(--vonal); }
.stat svg { flex: 0 0 46px; width: 46px; height: 46px; color: var(--piros); opacity: .9; }
.stat li:nth-child(n+3) svg { color: var(--kek); }
.stat b {
  display: block; font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1; color: var(--grafit);
}
.stat span {
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: .74rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--halvany); line-height: 1.4;
}
.stat li:last-child b { color: var(--piros); font-size: clamp(1rem, 1.5vw, 1.15rem); letter-spacing: .1em; }

/* ---------- about strip ------------------------------------------------- */
.rolunk {
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.rolunk-kep { position: relative; isolation: isolate; }
.rolunk-kep img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  box-shadow: 0 26px 54px -24px rgba(23, 27, 33, .8);
}
.rolunk-kep::after {
  content: ''; position: absolute; inset: 16px -16px -16px 16px; z-index: -1;
  border: 2px solid var(--piros);
}
.rolunk h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--grafit); margin-bottom: 1.2rem; }
.rolunk p + p { margin-top: 1rem; }
.telephely { display: grid; gap: 1rem; margin-top: 1.9rem; grid-template-columns: repeat(2, 1fr); }
.telephely li {
  padding: 1rem 1.15rem; background: var(--feher); border-left: 3px solid var(--piros);
  box-shadow: 0 3px 6px rgba(23, 27, 33, .07), 0 18px 32px -18px rgba(23, 27, 33, .6);
  transition: transform .3s var(--konny), box-shadow .3s;
}
.telephely li:nth-child(2) { border-left-color: var(--kek); }
.telephely li:hover { transform: translateX(4px); box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .5); }
.telephely b {
  display: block; font-family: 'Oswald', sans-serif; font-size: .84rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--grafit);
}
.telephely span { font-size: .875rem; color: var(--halvany); }

/* ══════════════════════════════════════════════════════════════════════════
   BRANCH PAGES
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- dark hero with the branch chevron --------------------------- */
.hero {
  position: relative; margin-top: var(--fej); min-height: min(76svh, 640px);
  display: grid; grid-template-columns: 1fr 1fr; background: var(--sotet-2); overflow: hidden;
}
.hero-kep, .hero-graf { position: absolute; inset: 0 0 0 30%; }
.hero-kep img { width: 100%; height: 100%; object-fit: cover; animation: lassuNagyitas 30s ease-in-out infinite alternate; }
.hero-kep::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--sotet-2) 4%, rgba(13, 17, 22, .3) 44%, rgba(13, 17, 22, .05) 100%);
}
/* The industrial surface that stands in for a photograph. Layer order matters:
   texture on top, then the branch glow, then the tinted base underneath. */
.hero-graf {
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.028' stroke-width='1.4'%3E%3Cpath d='M28 .8 55.2 16.5v31.4L28 63.6.8 47.9V16.5z'/%3E%3Cpath d='M56 48.8 83.2 64.5v31.4L56 111.6l-27.2-15.7V64.5z'/%3E%3Cpath d='M0 48.8 27.2 64.5v31.4L0 111.6l-27.2-15.7V64.5z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 56px 97px,
    linear-gradient(118deg, transparent 51.8%, rgba(255, 255, 255, .11) 51.8%, rgba(255, 255, 255, .11) 52.3%, transparent 52.3%),
    linear-gradient(118deg, transparent 56%, rgba(255, 255, 255, .045) 56%, rgba(255, 255, 255, .045) 57%, transparent 57%),
    radial-gradient(98% 82% at 76% 20%, color-mix(in srgb, var(--ag) 78%, transparent), transparent 74%),
    radial-gradient(120% 110% at 60% 100%, rgba(0, 0, 0, .5), transparent 66%),
    linear-gradient(208deg, color-mix(in srgb, var(--ag-melly) 82%, #3A4150) 0%, #2A303A 50%, #1E242C 100%);
}
.hero-graf::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(15, 19, 25, .92) 4%, rgba(15, 19, 25, .34) 48%, transparent 100%);
}
/* the coloured arrow that stabs into the photo, as in the design */
.hero-ek {
  position: absolute; inset: 0 auto 0 0; width: 48%; z-index: 2; pointer-events: none;
  background: var(--sotet-2);
  clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
}
.hero-ek::after {
  content: ''; position: absolute; inset: 0; background: var(--ag);
  clip-path: polygon(76% 0, 80% 0, 100% 50%, 80% 100%, 76% 100%, 96% 50%);
}
.hero-doboz {
  position: relative; z-index: 3; grid-column: 1; align-self: center; max-width: 40rem;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4.5rem) var(--sav);
}
.hero h1 { font-size: clamp(1.8rem, 3.5vw, 2.9rem); color: #fff; }
.hero h1 em { display: block; font-style: normal; color: var(--ag-vil); }
.hero .huzas { margin: 1.4rem 0 1.5rem; background: var(--ag-vil); transform: none; }
.hero p { color: rgba(255, 255, 255, .8); font-size: clamp(1rem, 1.2vw, 1.1rem); max-width: 32rem; }
.hero .kicker { color: var(--ag-vil); }

/* ---------- service / activity cards ------------------------------------ */
.kartyak { display: grid; gap: 1.4rem; grid-template-columns: repeat(5, 1fr); }
.kartya {
  position: relative; background: var(--feher); padding: 2.4rem 1.6rem 2rem;
  text-align: center; overflow: hidden; border: 1px solid var(--vonal);
  box-shadow: 0 3px 6px rgba(23, 27, 33, .07), 0 22px 42px -20px rgba(23, 27, 33, .55);
  transition: transform .4s var(--elenk), box-shadow .4s var(--elenk), border-color .3s;
}
.kartya::before {
  content: ''; position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--ag); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--konny);
}
.kartya:hover {
  transform: translateY(-13px); border-color: color-mix(in srgb, var(--ag) 45%, var(--vonal));
  box-shadow: 0 30px 54px -26px color-mix(in srgb, var(--ag) 78%, transparent);
}
.kartya:hover::before { transform: scaleX(1); }
.kartya svg {
  width: 58px; height: 58px; margin: 0 auto 1.5rem; color: var(--ag);
  transition: transform .5s var(--ruganyos);
}
.kartya:hover svg { transform: translateY(-6px) scale(1.13); }
.kartya h3 { font-size: 1.02rem; letter-spacing: .045em; color: var(--grafit); line-height: 1.2; }
.kartya p { margin-top: .9rem; font-size: .875rem; line-height: 1.6; color: var(--halvany); }
.kartya .zaro { width: 34px; height: 2px; background: var(--ag); margin: 1.4rem auto 0; transition: width .4s var(--konny); }
.kartya:hover .zaro { width: 58px; }

/* ---------- premises block (red page) ----------------------------------- */
.telephelyek { position: relative; display: grid; gap: clamp(1.6rem, 4vw, 3.4rem); grid-template-columns: 1fr 1fr; }
.telephelyek figure { margin: 0; }
.telephelyek h3 { color: var(--ag-vil); font-size: .92rem; letter-spacing: .2em; margin-bottom: 1.1rem; }
.telephely-kep { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--grafit); }
.telephely-kep img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--konny); }
.telephelyek figure:hover .telephely-kep img { transform: scale(1.07); }
.telephely-kep--ures {
  display: grid; place-content: center; justify-items: center; gap: .8rem;
  color: rgba(255, 255, 255, .36);
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.028' stroke-width='1.4'%3E%3Cpath d='M28 .8 55.2 16.5v31.4L28 63.6.8 47.9V16.5z'/%3E%3C/g%3E%3C/svg%3E");
}
.telephely-kep--ures svg { width: 34px; height: 34px; }
.telephely-kep--ures span { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; }
.telephelyek figcaption { margin-top: 1.2rem; }
.telephelyek .cim-sor {
  display: flex; align-items: center; gap: .6rem;
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 1.02rem; color: #fff;
}
.telephelyek .cim-sor svg { width: 20px; height: 20px; color: var(--ag-vil); flex: 0 0 20px; }
.telephelyek figcaption p { margin-top: .7rem; font-size: .9rem; line-height: 1.6; color: rgba(255, 255, 255, .68); }

.jelveny {
  position: absolute; left: 50%; top: 33%; transform: translate(-50%, -50%); z-index: 4;
  width: 120px; height: 136px; display: grid; place-content: center; justify-items: center;
  gap: .35rem; text-align: center; background: var(--ag); color: #fff;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  animation: lebeg 4.5s ease-in-out infinite;
}
.jelveny svg { width: 26px; height: 26px; }
.jelveny span {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.25;
}
@keyframes lebeg {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, calc(-50% - 8px)); }
}

/* ---------- reference list (blue page) ---------------------------------
   Partners' sites may not be photographed, so the references are a list —
   grouped by client, one card each, years as tags. Columns, not a grid: the
   cards are uneven in height and should pack like a wall. */
.ref-racs { columns: 3; column-gap: 1.25rem; }
.ref-ugyfel {
  position: relative; break-inside: avoid; margin: 0 0 1.25rem;
  padding: 1.45rem 1.6rem 1.35rem 1.75rem;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .11);
  transition: transform .45s var(--konny), border-color .35s, background .35s;
}
.ref-ugyfel::before {
  content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px;
  background: linear-gradient(180deg, var(--ag-vil), var(--ag));
}
.ref-ugyfel:hover {
  transform: translateY(-4px); background: rgba(255, 255, 255, .065);
  border-color: rgba(255, 255, 255, .24);
}
.ref-fej {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: 1rem; padding-bottom: .85rem; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.ref-fej h3 { font-size: 1.02rem; letter-spacing: .06em; line-height: 1.25; color: #fff; }
.ref-db {
  flex: 0 0 auto; padding: .3rem .7rem; font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ag-vil);
  border: 1px solid color-mix(in srgb, var(--ag-vil) 55%, transparent);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.ref-lista { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.ref-lista li {
  display: grid; grid-template-columns: 12px 1fr auto; gap: .35rem .75rem; align-items: start;
  font-size: .9rem; line-height: 1.5; color: rgba(255, 255, 255, .8);
}
.ref-lista li.ref-nincsev { grid-template-columns: 12px 1fr; }
.ref-lista li::before {
  content: ''; width: 10px; height: 10px; margin-top: .45rem; background: var(--ag-vil);
  clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%);
}
.ref-ev {
  padding-top: .18rem; font-family: 'Oswald', sans-serif; font-size: .74rem;
  letter-spacing: .1em; white-space: nowrap; color: rgba(255, 255, 255, .5);
}
.ref-ugyfel--tobb .ref-lista li { grid-template-columns: 12px 1fr auto; }
.ref-ugyfel--tobb .ref-lista li b { grid-column: 2 / 4; font-weight: 600; color: #fff; }
.ref-ugyfel--tobb .ref-lista li b + span { grid-column: 2; }
.ref-ugyfel--tobb .ref-lista li .ref-ev { grid-column: 3; grid-row: 2; }
.ref-ugyfel--tobb .ref-lista li::before { grid-row: 1; }
.ref-ugyfel--tobb .ref-lista li.ref-nincsev b + span { grid-column: 2 / 4; }
.galeria-gomb { display: flex; justify-content: center; margin-top: 2.4rem; }

/* ---------- value row --------------------------------------------------- */
.ertekek { display: grid; gap: 2.4rem 1.6rem; grid-template-columns: repeat(6, 1fr); text-align: center; }
.ertekek--negy { grid-template-columns: repeat(4, 1fr); }
.ertekek li { padding: 0 .6rem; }
.ertekek svg { width: 44px; height: 44px; margin: 0 auto 1.1rem; color: var(--ag); transition: transform .45s var(--ruganyos); }
.ertekek li:hover svg { transform: translateY(-5px) scale(1.08); }
.ertekek h3 { font-size: .92rem; letter-spacing: .07em; color: var(--grafit); margin-bottom: .6rem; line-height: 1.25; }
.ertekek p { font-size: .85rem; line-height: 1.6; color: var(--halvany); }

/* ══════════════════════════════════════════════════════════════════════════
   CTA — one branch colour per page, cut by diagonals. No red↔blue blend.
   ══════════════════════════════════════════════════════════════════════════ */
.cta {
  position: relative; overflow: hidden; color: #fff;
  padding: clamp(3rem, 6vw, 4.6rem) 0;
  background:
    linear-gradient(104deg, var(--ag-melly) 0%, var(--ag) 62%, var(--ag-vil) 132%);
}
.cta::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(104deg, transparent 38%, rgba(255, 255, 255, .1) 38%, rgba(255, 255, 255, .1) 45%, transparent 45%),
    linear-gradient(104deg, transparent 51%, rgba(0, 0, 0, .13) 51%, rgba(0, 0, 0, .13) 60%, transparent 60%);
}
.cta::after { content: ''; position: absolute; inset: auto 0 0 0; height: 5px; background: rgba(0, 0, 0, .22); }
.cta .hasab {
  position: relative; z-index: 2; display: grid; gap: 2.2rem; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
}
.cta h2 { font-size: clamp(1.4rem, 2.8vw, 2.15rem); }
.cta p { color: rgba(255, 255, 255, .88); margin-top: .9rem; max-width: 34rem; }
.elerhetoseg { display: flex; flex-wrap: wrap; gap: 1rem; }
.elerhetoseg a {
  display: inline-flex; align-items: center; gap: .8rem; padding: 1rem 1.5rem;
  border: 2px solid rgba(255, 255, 255, .5); font-family: 'Oswald', sans-serif;
  font-weight: 500; font-size: .95rem; letter-spacing: .04em; line-height: 1.3;
  transition: background .3s, border-color .3s, transform .3s var(--konny);
}
.elerhetoseg a:hover { background: rgba(255, 255, 255, .17); border-color: #fff; transform: translateY(-4px); }
.elerhetoseg svg { width: 21px; height: 21px; flex: 0 0 21px; }
/* branch label under the address — the homepage serves both business lines */
.elerhetoseg a { flex-wrap: wrap; }
.elerhetoseg small { flex-basis: 100%; margin-top: .15rem;
  padding-left: calc(21px + .8rem); font-family: 'Inter', sans-serif;
  font-weight: 400; font-size: .72rem; letter-spacing: .03em;
  text-transform: none; opacity: .7; }

/* home CTA: dark, with the two branch colours as sharp diagonal edges */
.cta--fo {
  background:
    radial-gradient(72% 130% at 5% 18%, color-mix(in srgb, var(--piros) 40%, transparent), transparent 66%),
    radial-gradient(72% 130% at 95% 84%, color-mix(in srgb, var(--kek-vil) 36%, transparent), transparent 66%),
    linear-gradient(120deg, #2C313A 0%, #1F242C 50%, #171B22 100%);
}
.cta--fo::before {
  background:
    linear-gradient(104deg, var(--piros) 0%, var(--piros) 4.6%, transparent 4.6%),
    linear-gradient(104deg, transparent 6%, color-mix(in srgb, var(--piros) 32%, transparent) 6%,
      color-mix(in srgb, var(--piros) 32%, transparent) 7.3%, transparent 7.3%),
    linear-gradient(284deg, var(--kek) 0%, var(--kek) 4.6%, transparent 4.6%),
    linear-gradient(284deg, transparent 6%, color-mix(in srgb, var(--kek-vil) 34%, transparent) 6%,
      color-mix(in srgb, var(--kek-vil) 34%, transparent) 7.3%, transparent 7.3%);
}
.cta--fo::after { background: linear-gradient(90deg, var(--piros), var(--kek)); height: 3px; }

/* ---------- footer ------------------------------------------------------ */
.lablec {
  color: rgba(255, 255, 255, .6); padding: 3.4rem 0 2rem; font-size: .875rem;
  background:
    linear-gradient(160deg, #22272F 0%, #191E25 60%, #13171D 100%);
}
.lablec .hasab { display: grid; gap: 2rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lablec img { height: 60px; width: auto; margin-bottom: 1rem; }
.lablec h3 { font-size: .82rem; letter-spacing: .16em; color: #fff; margin-bottom: 1rem; }
.lablec ul { display: grid; gap: .5rem; }
.lablec a { display: inline-block; transition: color .25s, transform .25s var(--konny); }
.lablec a:hover { color: #fff; transform: translateX(3px); }
.lablec-alj {
  margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .8rem; color: rgba(255, 255, 255, .45);
}
.szerkeszt { color: rgba(255, 255, 255, .5); border-bottom: 1px dotted rgba(255, 255, 255, .3); }

/* ══════════════════════════════════════════════════════════════════════════
   MOTION
   ══════════════════════════════════════════════════════════════════════════ */
/* Scoped to .js: without scripting nothing would ever add .lathato and the
   whole page would stay invisible. The <html class="js"> flag is set inline. */
.js .fel {
  opacity: 0; transform: translateY(38px);
  transition: opacity .62s var(--elenk), transform .68s var(--elenk);
  transition-delay: var(--k, 0s);
}
.js .fel[data-fel="bal"]    { transform: translateX(-58px); }
.js .fel[data-fel="jobb"]   { transform: translateX(58px); }
.js .fel[data-fel="nagyit"] { transform: scale(.9); }
.js .fel[data-fel="also"]   { transform: translateY(64px); }
.js .fel.lathato { opacity: 1; transform: none; }

/* Once the hero is off screen every ambient animation stops — no compositor
   work at all while the visitor reads the rest of the page. */
.js .dontes[data-be="0"] .ag::before,
.js .dontes[data-be="0"] .ag::after,
.js .dontes[data-be="0"] .ek-nyil { animation-play-state: paused; }

/* The two halves slide in from their own side and the white centre settles in
   between them; scrolling away and back replays it. Scoped to .js, and the
   markup ships visible, so nothing can leave the hero blank. */
.js .dontes[data-be="0"] .ag--piros { transform: translateX(-104%); opacity: 0; }
.js .dontes[data-be="0"] .ag--kek   { transform: translateX(104%);  opacity: 0; }
.js .ek { transition: opacity .8s var(--elenk) .3s, transform .8s var(--elenk) .3s; }
.js .dontes[data-be="0"] .ek { opacity: 0; transform: scaleY(.9); }
.js .ek > * { transition: opacity .7s var(--elenk) .5s, transform .7s var(--elenk) .5s; }
.js .dontes[data-be="0"] .ek > * { opacity: 0; transform: translateY(20px); }

/* the branch pages keep their own short entrance */
.hero-doboz > * { animation: bevonul .8s var(--elenk) both; }
.hero-doboz > *:nth-child(1) { animation-delay: .14s; }
.hero-doboz > *:nth-child(2) { animation-delay: .24s; }
.hero-doboz > *:nth-child(3) { animation-delay: .34s; }
.hero-doboz > *:nth-child(4) { animation-delay: .44s; }
.hero-doboz > *:nth-child(5) { animation-delay: .54s; }
@keyframes bevonul { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }

/* Branch transition. A deep→bright gradient panel sweeps across, led by a hot
   accent tail so the move reads as speed rather than a flat colour block. */
.atmenet {
  position: fixed; inset: 0; z-index: 200; pointer-events: none; visibility: hidden;
  transform: translateX(-101%);
  background:
    radial-gradient(85% 130% at 16% 24%, rgba(255, 255, 255, .22), transparent 58%),
    linear-gradient(112deg, transparent 28%, rgba(255, 255, 255, .14) 28%,
      rgba(255, 255, 255, .14) 30.2%, transparent 30.2%),
    linear-gradient(112deg, transparent 35%, rgba(255, 255, 255, .07) 35%,
      rgba(255, 255, 255, .07) 41%, transparent 41%),
    linear-gradient(112deg, transparent 63%, rgba(255, 255, 255, .09) 63%,
      rgba(255, 255, 255, .09) 64.4%, transparent 64.4%),
    linear-gradient(112deg,
      color-mix(in srgb, var(--ag-melly) 80%, #000) 0%,
      var(--ag-melly) 20%,
      var(--ag) 52%,
      var(--ag-vil) 84%,
      color-mix(in srgb, var(--ag-vil) 78%, #fff) 100%);
}
/* the bright tail that runs ahead of the panel */
.atmenet::after {
  content: ''; position: absolute; inset: 0 auto 0 100%; width: 34vw;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--ag-vil) 55%, #fff) 0%,
    var(--ag-vil) 20%,
    color-mix(in srgb, var(--ag-vil) 42%, transparent) 54%,
    transparent 100%);
}
/* the hot leading edge itself */
.atmenet::before {
  content: ''; position: absolute; inset: 0 auto 0 100%; width: 2px; z-index: 2;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 0 34px 10px color-mix(in srgb, var(--ag-vil) 62%, transparent);
}
.atmenet[data-irany="jobb"] { transform: translateX(101%); }
.atmenet[data-irany="jobb"]::after {
  inset: 0 100% 0 auto;
  background: linear-gradient(260deg,
    color-mix(in srgb, var(--ag-vil) 55%, #fff) 0%,
    var(--ag-vil) 20%,
    color-mix(in srgb, var(--ag-vil) 42%, transparent) 54%,
    transparent 100%);
}
.atmenet[data-irany="jobb"]::before { inset: 0 100% 0 auto; }

.atmenet.be { visibility: visible; animation: takar .62s cubic-bezier(.76, 0, .24, 1) forwards; }
.atmenet.ki { visibility: visible; animation: feltar .8s cubic-bezier(.6, 0, .18, 1) forwards; }
.atmenet[data-irany="jobb"].ki { animation-name: feltarBal; }
@keyframes takar     { to { transform: translateX(0); } }
@keyframes feltar    { from { transform: translateX(0); } to { transform: translateX(101%); } }
@keyframes feltarBal { from { transform: translateX(0); } to { transform: translateX(-101%); } }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1340px) {
  .usp, .kartyak, .ertekek, .stat { grid-template-columns: repeat(3, 1fr); }
  .ref-racs { columns: 2; }
  .ertekek--negy { grid-template-columns: repeat(2, 1fr); }
  .stat li + li { border-left: 0; }
}
@media (max-width: 1080px) {
  .nav a { font-size: .78rem; }
  .nav .kiemelt { clip-path: none; margin: .25rem 0; padding: .7rem .9rem; }
  .lablec .hasab { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --fej: 64px; }
  .menugomb { display: block; }
  .nav {
    position: fixed; inset: var(--fej) 0 auto; flex-direction: column; align-items: stretch;
    gap: 0; padding: .5rem var(--sav) 1.5rem; background: #fff;
    border-bottom: 1px solid var(--vonal); transform: translateY(-140%);
    transition: transform .4s var(--konny); box-shadow: 0 22px 40px rgba(0, 0, 0, .12);
  }
  .nav[data-nyitva="1"] { transform: none; }
  .nav a { padding: .95rem 0; border-bottom: 1px solid var(--vonal); font-size: .95rem; }
  .nav a::after { display: none; }
  .nav .vissza {
    margin: 1rem 0 0; padding: .95rem 1.4rem; align-self: auto;
    justify-content: center; clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%);
  }

  /* sideways reveals would poke past the screen edge on a phone */
  .js .fel[data-fel="bal"], .js .fel[data-fel="jobb"] { transform: translateY(38px); }

  /* Home hero on a phone: the same two diagonals, turned horizontal, so the
     WHOLE composition fits one screen — red band, white brand band, blue band. */
  .dontes {
    --lejt: 2.4rem; min-height: 100svh; padding-bottom: 0;
    display: flex; flex-direction: column;
  }
  .ag, .ek {
    position: relative; width: 100%; left: auto; right: auto; top: auto; bottom: auto;
  }
  .ag--piros { order: 1; flex: 1 1 0; }
  .ek        { order: 2; flex: 0 0 auto; }
  .ag--kek   { order: 3; flex: 1 1 0; }

  .ag {
    display: grid; place-items: center; position: relative;
    padding: clamp(.7rem, 1.7svh, 1.4rem) var(--sav);
    background-position: 0 0, 0 0, 0 0, 0 0, 0 -30%, 0 0;
  }
  .ag--piros {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--lejt)), 0 100%);
    padding-top: clamp(.8rem, 2svh, 1.5rem);
    padding-bottom: calc(clamp(.7rem, 1.7svh, 1.2rem) + var(--lejt) * .6);
  }
  .ag--kek {
    margin-top: calc(-1 * var(--lejt));
    clip-path: polygon(0 var(--lejt), 100% 0, 100% 100%, 0 100%);
    padding-top: calc(clamp(.7rem, 1.7svh, 1.2rem) + var(--lejt));
    padding-bottom: clamp(.9rem, 2.2svh, 1.6rem);
  }
  .ag--piros:hover, .ag--kek:hover { transform: none; }   /* no hover on touch */
  .js .dontes[data-be="0"] .ag--piros { transform: translateX(-14%); }
  .js .dontes[data-be="0"] .ag--kek   { transform: translateX(14%); }
  .js .dontes[data-be="0"] .ek { transform: none; }

  /* the white brand band lies between them, on the same diagonal */
  .ek {
    margin-top: calc(-1 * var(--lejt));
    clip-path: polygon(0 var(--lejt), 100% 0, 100% calc(100% - var(--lejt)), 0 100%);
    flex-direction: row; justify-content: center; align-items: center;
    gap: clamp(.8rem, 3.2vw, 1.4rem);
    padding: calc(clamp(.5rem, 1.3svh, 1rem) + var(--lejt)) var(--sav)
             calc(clamp(.5rem, 1.3svh, 1rem) + var(--lejt) * .6);
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, .8)) drop-shadow(0 0 60px rgba(0, 0, 0, .5));
  }
  .ek-logo { width: clamp(56px, 9.2svh, 92px); }
  .ek-szoveg { text-align: left; }
  .ek-szoveg::before { margin: 0 0 clamp(.3rem, .8svh, .55rem); width: 34px; }
  .ek-szam { font-size: clamp(1.45rem, 4.2svh, 2.3rem); }
  .ek-eve { margin-top: .12rem; font-size: clamp(.6rem, 1.25svh, .74rem); }
  .ek-alcim { margin-top: .08rem; font-size: clamp(.58rem, 1.2svh, .72rem); line-height: 1.3; }
  .ek-nyil { display: none; }

  /* Everything in the phone hero is sized in svh, so the whole composition
     scales to the screen instead of overflowing on a shorter one. */
  .ag-doboz { width: 100%; max-width: 22rem; }
  .ag-ikon {
    width: clamp(26px, 4.4svh, 40px); height: clamp(26px, 4.4svh, 40px);
    margin-bottom: clamp(.3rem, .9svh, .7rem);
  }
  .ag h2 { font-size: clamp(.95rem, 2.4svh, 1.45rem); }
  .ag-vonal {
    width: clamp(40px, 7vw, 58px); height: 2px;
    margin: clamp(.35rem, .9svh, .7rem) 0 clamp(.4rem, 1svh, .8rem);
  }
  .ag-szoveg { font-size: clamp(.74rem, 1.7svh, .92rem); line-height: 1.5; }
  .ag-szoveg br { display: none; }        /* let it wrap: saves a line */
  .ag .gomb {
    margin-top: clamp(.55rem, 1.5svh, 1.1rem);
    padding: clamp(.5rem, 1.2svh, .8rem) clamp(.9rem, 3.4vw, 1.4rem);
    font-size: clamp(.68rem, 1.45svh, .82rem);
  }
  .ag .gomb svg { width: 18px; flex-basis: 18px; }

  /* very short screens: the descriptions go, the decision stays */
  @media (max-height: 680px) {
    .dontes { --lejt: 1.7rem; }
    .ag-szoveg { display: none; }
    .ag-ikon { width: 34px; height: 34px; margin-bottom: .5rem; }
    .ag-vonal { margin: .55rem 0 .6rem; }
    .ag .gomb { margin-top: .9rem; }
    .ek-logo { width: 66px; }
    .ek-szam { font-size: 1.7rem; }
  }

  /* branch hero stacks */
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-kep, .hero-graf { position: relative; inset: auto; height: 42svh; grid-row: 1; }
  .hero-kep::after, .hero-graf::after {
    background: linear-gradient(to bottom, rgba(13, 17, 22, .3), var(--sotet-2));
  }
  .hero-ek { display: none; }
  .hero-doboz { grid-row: 2; padding: 2.4rem var(--sav) 3rem; max-width: none; }

  .telephelyek { grid-template-columns: 1fr; }
  .jelveny { position: relative; left: auto; top: auto; transform: none; margin: -1.4rem auto -1.4rem; }
  @keyframes lebeg { 0%, 100% { transform: none; } 50% { transform: translateY(-8px); } }

  .rolunk { grid-template-columns: 1fr; }
  .rolunk-kep::after { inset: 10px -10px -10px 10px; }
  .cta .hasab { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .usp, .kartyak, .ertekek, .ertekek--negy, .stat { grid-template-columns: repeat(2, 1fr); }
  .ref-racs { columns: 1; }
  .telephely { grid-template-columns: 1fr; }
}
@media (max-width: 470px) {
  .usp, .kartyak, .stat { grid-template-columns: 1fr; }
  .fejlec-nev span { display: none; }
  .elerhetoseg { width: 100%; }
  .elerhetoseg a { flex: 1 1 100%; justify-content: center; }
  .hatszog-belso { padding: 2rem 1.5rem; }
  .hatszog { --vag: polygon(4% 0, 96% 0, 100% 50%, 96% 100%, 4% 100%, 0 50%); }
}

/* ---------- motion off -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .fel { opacity: 1; transform: none; }
  .huzas { transform: scaleX(1); }
  .js .dontes[data-be="0"] .ag, .js .dontes[data-be="0"] .ek,
  .js .dontes[data-be="0"] .ek > * { opacity: 1; transform: none; }
  .dontes .hatszog, .dontes .csempek, .dontes .ag-cimke, .dontes .ek-logo,
  .dontes .ek-szam, .dontes .ek-alcim, .dontes .ek-nyil, .hero-doboz > * { opacity: 1; }
  .atmenet { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PICTURE SIZING — <picture> is a plain inline box, so it needs the size
   its <img> is meant to fill.
   ══════════════════════════════════════════════════════════════════════════ */
.ag-foto picture, .hero-kep picture, .csempe picture,
.telephely-kep picture { display: block; width: 100%; height: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   INTRO — a Claude Designban készült nyitóanimáció, a főoldalra portolva.
   A felirat balról jobbra "íródik" egy fénylő tollhegy mögött, a jel élesre
   fókuszál fölötte, majd a két sötét függöny szétnyílik és feltárja az oldalt.
   Munkamenetenként egyszer fut, mozgásmentes módban egyáltalán nem.
   ══════════════════════════════════════════════════════════════════════════ */
.intro {
  --k: .51;                      /* the whole composition scales off this */
  position: fixed; inset: 0; z-index: 300; overflow: hidden; pointer-events: none;
  font-family: 'Oswald', sans-serif;
}
@media (min-width: 1500px) { .intro { --k: .60; } }
@media (max-width: 620px)  { .intro { --k: .44; } }
body.intro-fut { overflow: hidden; }
.intro.zar { animation: introZar .42s ease forwards; }
@keyframes introZar { to { opacity: 0; visibility: hidden; } }

.intro-fuggony { position: absolute; left: 0; right: 0; height: calc(50% + 1px); z-index: 2; will-change: transform; }
.intro-fuggony--fent {
  top: 0; background: radial-gradient(120% 190% at 50% 100%, #151D26 0%, #07090C 62%);
  animation: introFuggonyFel 1.05s 3.6s both cubic-bezier(.76, 0, .24, 1);
}
.intro-fuggony--lent {
  bottom: 0; background: radial-gradient(120% 190% at 50% 0%, #151D26 0%, #07090C 62%);
  animation: introFuggonyLe 1.05s 3.6s both cubic-bezier(.76, 0, .24, 1);
}

/* The red laser sits on the two curtains' inner edges: one line while it
   draws in (the curtains overlap by 2px, so only the lower one shows), then
   it splits in two and rides the edges apart as the reveal opens. */
.intro-fuggony::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px; opacity: 0;
  background: linear-gradient(90deg, rgba(194, 32, 38, 0), #C22026 22%, #E8535B 50%, #C22026 78%, rgba(194, 32, 38, 0));
  animation: introVonal 1.5s 3.25s both cubic-bezier(.22, 1, .36, 1);
}
.intro-fuggony--fent::after { bottom: 0; }
.intro-fuggony--lent::after { top: 0; }
.intro-villanas {
  position: absolute; top: 44%; left: 50%; width: 760px; height: 760px; z-index: 3;
  border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(194, 32, 38, .3) 0%, rgba(194, 32, 38, 0) 62%);
  animation: introVillanas 1.2s 2.3s both;
}

.intro-jel {
  position: absolute; top: 0; left: 0; width: 111px; z-index: 5;
  transform-origin: 0 0; opacity: 0; will-change: transform;
  animation: introJel 2.25s 2s both;
}
.intro-felirat {
  position: absolute; top: 0; left: 0; width: 660px; z-index: 5;
  transform-origin: 0 0; will-change: transform;
  animation: introFelirat 3.9s .35s both;
}
.intro-jel img, .intro-felirat img { display: block; width: 100%; height: auto; }
.intro-felirat img { animation: introIras 1.75s .35s both cubic-bezier(.6, .02, .3, 1); }
.intro-toll {
  position: absolute; top: -14px; left: 0; width: 2px; height: calc(100% + 28px); opacity: 0;
  background: linear-gradient(180deg, rgba(232, 83, 91, 0), #E8535B 22%, #FFFFFF 50%, #E8535B 78%, rgba(232, 83, 91, 0));
  box-shadow: 0 0 26px 7px rgba(194, 32, 38, .5);
  animation: introToll 1.75s .35s both cubic-bezier(.6, .02, .3, 1);
}

@keyframes introIras { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes introToll {
  0%   { opacity: 0; transform: translateX(0); }
  6%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(686px); }
}
@keyframes introFelirat {
  0%   { opacity: 1; transform: translate(calc(50vw - 330px * var(--k)), calc(50vh - 7.7px * var(--k))) scale(var(--k)); animation-timing-function: linear; }
  75%  { opacity: 1; transform: translate(calc(50vw - 330px * var(--k)), calc(50vh - 7.7px * var(--k))) scale(var(--k)); animation-timing-function: cubic-bezier(.72, 0, .18, 1); }
  100% { opacity: 0; transform: translate(calc(50vw - 345px * var(--k)), calc(50vh - 13px * var(--k))) scale(calc(var(--k) * 1.045)); }
}
@keyframes introJel {
  0%   { opacity: 0; filter: blur(10px); transform: translate(calc(50vw - 55.5px * var(--k)), calc(50vh - 197px * var(--k))) scale(calc(var(--k) * .86)); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  33%  { opacity: 1; filter: blur(0); transform: translate(calc(50vw - 55.5px * var(--k)), calc(50vh - 221.7px * var(--k))) scale(var(--k)); }
  57%  { opacity: 1; filter: blur(0); transform: translate(calc(50vw - 55.5px * var(--k)), calc(50vh - 221.7px * var(--k))) scale(var(--k)); animation-timing-function: cubic-bezier(.72, 0, .18, 1); }
  100% { opacity: 0; filter: blur(0); transform: translate(calc(50vw - 58px * var(--k)), calc(50vh - 231px * var(--k))) scale(calc(var(--k) * 1.045)); }
}
@keyframes introVillanas {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
  28%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}
@keyframes introVonal {
  0%   { opacity: 0; transform: scaleX(0); }
  26%  { opacity: 1; transform: scaleX(1); }   /* drawn just as the curtains start */
  78%  { opacity: 1; transform: scaleX(1); }   /* rides the edges outward */
  100% { opacity: 0; transform: scaleX(1); }
}
@keyframes introFuggonyFel { to { transform: translateY(-100%); } }
@keyframes introFuggonyLe  { to { transform: translateY(100%); } }

@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   TERMÉKKATALÓGUS
   Mindhárom ág a PIROS téma alatt fut — a katalógus az Alpin arculata, nem a
   gyártóké. A --marka token az egyetlen engedmény: a JCB oldalakon ez színezi
   a kickert, a kategóriacsempe élét és a kártya kiemelését. A keret nem változik.
   ══════════════════════════════════════════════════════════════════════════ */
/* --marka must be declared where --ag is, not only on :root: a custom property
   substitutes at computed-value time, so "--marka: var(--ag)" on :root would
   freeze the ROOT's --ag (blue) for the whole document. */
:root, [data-ag] { --marka: var(--ag); --marka-szoveg: #fff; }
[data-marka="jcb"] { --marka: #F5B01A; --marka-szoveg: #1B1F24; }

/* ── hero fotó nélkül ─────────────────────────────────────────────────── */
.hero--kat { grid-template-columns: 1fr; min-height: min(56svh, 440px); }
.hero--rovid { min-height: min(38svh, 300px); }
.hero--kat .hero-doboz { grid-column: 1; max-width: 46rem; }
.hero--kat .hero-ek { width: 100%; opacity: .55;
  background: linear-gradient(105deg, var(--sotet-2) 46%, transparent 88%); }
.hero--kat h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.hero--kat .kicker { color: var(--marka); }

/* ── morzsa ───────────────────────────────────────────────────────────── */
/* a termékoldal hero nélkül indul: a morzsának magának kell kikerülnie a fix fejlécet */
main > .morzsa:first-child { margin-top: var(--fej); }
.morzsa { background: var(--feher); border-bottom: 1px solid var(--vonal); }
.morzsa ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  list-style: none; padding: .85rem 0; margin: 0; font-size: .84rem; }
.morzsa li + li::before { content: "/"; color: var(--vonal); margin-right: .5rem; }
.morzsa a { color: var(--halvany); }
.morzsa a:hover { color: var(--ag); }
.morzsa [aria-current] { color: var(--szoveg); font-weight: 600; }

/* ── kereső ───────────────────────────────────────────────────────────── */
.szakasz--kereso { padding-block: clamp(1.6rem, 3vw, 2.4rem); background: var(--feher); }
.kereso { position: relative; max-width: 44rem; margin-inline: auto; }
.kereso-mez { display: flex; align-items: center; gap: .8rem; padding: .1rem 1.2rem;
  background: var(--feher); border: 2px solid var(--vonal);
  box-shadow: 0 12px 30px rgba(20, 24, 30, .07); transition: border-color .25s, box-shadow .25s; }
.kereso-mez:focus-within { border-color: var(--ag); box-shadow: 0 16px 38px rgba(20, 24, 30, .13); }
.kereso-mez svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--halvany); }
.kereso-mez input { flex: 1; border: 0; outline: 0; background: none; padding: 1.05rem 0;
  font: inherit; font-size: 1.02rem; color: var(--szoveg); min-width: 0; }

.kereso-talalat { position: absolute; z-index: 40; inset: calc(100% + .5rem) 0 auto;
  max-height: min(60vh, 30rem); overflow-y: auto; background: var(--feher);
  border: 1px solid var(--vonal); box-shadow: 0 26px 60px rgba(20, 24, 30, .18); }
.kereso-tetel { display: flex; align-items: baseline; gap: .9rem; padding: .75rem 1.2rem;
  border-bottom: 1px solid var(--kartya); color: var(--szoveg); }
.kereso-tetel:last-child { border-bottom: 0; }
.kereso-tetel:hover, .kereso-tetel.kivalasztva { background: var(--kartya); }
.kereso-ag { flex: 0 0 auto; font-family: "Oswald", sans-serif; font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; color: #fff; background: var(--ag);
  padding: .18rem .5rem; }
.kereso-nev { font-size: .94rem; }
.kereso-ures { padding: 1.1rem 1.2rem; margin: 0; font-size: .92rem; color: var(--halvany); }

/* ── ág-csempék a katalógus főoldalán ─────────────────────────────────── */
.ag-racs { display: grid; gap: 1.6rem; grid-template-columns: repeat(3, 1fr); }
.ag-csempe { position: relative; display: flex; flex-direction: column; gap: .55rem;
  padding: 2.2rem 1.9rem 1.6rem; background: var(--feher); color: var(--szoveg);
  border-top: 4px solid var(--marka);
  box-shadow: 0 18px 44px rgba(20, 24, 30, .1);
  transition: transform .32s var(--konny), box-shadow .32s var(--konny); }
.ag-csempe[data-marka="jcb"] { --marka: #F5B01A; }
.ag-csempe:hover { transform: translateY(-8px); box-shadow: 0 30px 66px rgba(20, 24, 30, .17); }
.ag-csempe-ikon { display: grid; place-items: center; width: 54px; height: 54px;
  background: var(--kartya); color: var(--marka); margin-bottom: .5rem; }
.ag-csempe-ikon svg { width: 28px; height: 28px; }
.ag-csempe h2 { font-size: 1.3rem; letter-spacing: .04em; }
.ag-motto { font-family: "Oswald", sans-serif; font-size: .82rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--halvany); }
.ag-csempe > p { font-size: .93rem; line-height: 1.65; }
.ag-csempe-db { margin-top: auto; padding-top: 1.1rem; font-size: .82rem; color: var(--halvany); }
.ag-csempe-tovabb { display: inline-flex; align-items: center; gap: .6rem; margin-top: .6rem;
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: .86rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ag); }
.ag-csempe-tovabb svg { width: 20px; height: 11px; transition: transform .3s var(--konny); }
.ag-csempe:hover .ag-csempe-tovabb svg { transform: translateX(5px); }

/* ── kategória-csempék ────────────────────────────────────────────────── */
.kat-racs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.kat-csempe { display: flex; align-items: center; gap: .9rem; padding: 1.15rem 1.3rem;
  background: var(--feher); color: var(--szoveg); border-left: 3px solid var(--marka);
  box-shadow: 0 8px 22px rgba(20, 24, 30, .07);
  transition: transform .28s var(--konny), box-shadow .28s var(--konny); }
.kat-csempe:hover { transform: translateX(6px); box-shadow: 0 14px 34px rgba(20, 24, 30, .13); }
.kat-csempe h3 { flex: 1; font-size: .98rem; line-height: 1.3; letter-spacing: .02em; }
.kat-csempe-db { font-size: .8rem; color: var(--halvany); white-space: nowrap; }
.kat-csempe-nyil svg { width: 20px; height: 11px; color: var(--ag);
  transition: transform .28s var(--konny); }
.kat-csempe:hover .kat-csempe-nyil svg { transform: translateX(4px); }

/* ── termékkártya ─────────────────────────────────────────────────────── */
.termek-racs { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.termek-kartya { position: relative; display: flex; flex-direction: column;
  background: var(--feher); box-shadow: 0 14px 34px rgba(20, 24, 30, .09);
  transition: transform .3s var(--konny), box-shadow .3s var(--konny); }
.termek-kartya:hover { transform: translateY(-6px); box-shadow: 0 26px 56px rgba(20, 24, 30, .16); }
.termek-kartya--kiemelt { outline: 2px solid var(--marka); outline-offset: -2px; }
.jelzo { position: absolute; z-index: 2; top: 0; left: 0; padding: .3rem .8rem;
  background: var(--marka); color: var(--marka-szoveg); font-family: "Oswald", sans-serif;
  font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.termek-kep { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--kartya); }
.termek-kep img { width: 100%; height: 100%; object-fit: contain; padding: 1rem;
  transition: transform .5s var(--konny); }
.termek-kartya:hover .termek-kep img { transform: scale(1.05); }
.termek-kep--ures svg { width: 42px; height: 42px; color: #C8CACD; }
.termek-torzs { display: flex; flex-direction: column; gap: .4rem; padding: 1.1rem 1.2rem .3rem; }
.termek-torzs h3 { font-size: 1rem; line-height: 1.32; letter-spacing: .01em; }
.termek-torzs h3 a { color: var(--sotet); }
.termek-torzs h3 a:hover { color: var(--ag); }
.termek-alcim { font-size: .86rem; color: var(--halvany); }
.cikkszam { font-size: .78rem; color: var(--halvany); letter-spacing: .04em; }
.valtozat-jel { font-size: .8rem; color: var(--ag); }
.termek-lab { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto;
  padding: 1rem 1.2rem 1.2rem; }
.termek-lab .gomb { flex: 1 1 auto; justify-content: center; padding: .72rem 1rem;
  font-size: .78rem; letter-spacing: .1em; }
.termek-lab .gomb--vonal { border-color: var(--vonal); color: var(--szoveg); }
.termek-lab .gomb--vonal:hover { border-color: var(--ag); color: var(--ag); }

/* ── ár és készlet ────────────────────────────────────────────────────── */
.ar { display: flex; flex-direction: column; gap: .1rem; margin-top: .2rem; }
.ar b { font-family: "Oswald", sans-serif; font-size: 1.12rem; font-weight: 600;
  letter-spacing: .02em; color: var(--sotet); }
.ar span { font-size: .78rem; color: var(--halvany); }
.ar--nagy b { font-size: 1.75rem; }
.ar--nagy span { font-size: .88rem; }

.keszlet { display: inline-block; padding: .24rem .7rem; font-family: "Oswald", sans-serif;
  font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid currentColor; white-space: nowrap; }
.keszlet--raktaron { color: #1B7A3D; }
.keszlet--kozponti { color: #B26A00; }
.keszlet--rendelesre { color: var(--halvany); }

.ar-tajekoztato { margin-top: 2.2rem; padding: 1rem 1.2rem; background: var(--feher);
  border-left: 3px solid var(--vonal); font-size: .84rem; line-height: 1.65;
  color: var(--halvany); }

/* ── méret- és műszaki táblázat ───────────────────────────────────────── */
.tabla-keret { overflow-x: auto; background: var(--feher);
  box-shadow: 0 14px 34px rgba(20, 24, 30, .09); }
.meret-tabla, .muszaki-tabla { width: 100%; border-collapse: collapse; min-width: 34rem; }
.meret-tabla th, .meret-tabla td, .muszaki-tabla th, .muszaki-tabla td {
  padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--vonal); }
.meret-tabla thead th { font-family: "Oswald", sans-serif; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--sotet);
  border-bottom: 0; }
.meret-tabla tbody tr:hover { background: var(--kartya); }
.meret-tabla tbody th { font-family: "Oswald", sans-serif; font-size: .98rem; font-weight: 600;
  color: var(--sotet); white-space: nowrap; }
.meret-tabla .szam { font-family: "Oswald", sans-serif; font-size: .96rem; white-space: nowrap; }
.meret-tabla .halvany { color: var(--halvany); font-size: .84rem; }
.meret-tabla .jobbra { text-align: right; }
.meret-tabla .gomb { padding: .55rem 1rem; font-size: .72rem; letter-spacing: .1em;
  border-color: var(--vonal); color: var(--szoveg); }
.meret-tabla .gomb:hover { border-color: var(--ag); color: var(--ag); }
.muszaki-tabla th { width: 38%; color: var(--halvany); font-weight: 500; }
.muszaki-tabla td { font-weight: 600; color: var(--sotet); }

/* ── acél kiegészítők ─────────────────────────────────────────────────── */
.acel-leiras { max-width: 60ch; margin-bottom: 1.4rem; }
.acel-leiras p { margin-bottom: .8rem; }
.acel-megjegyzes { margin-bottom: 1.2rem; font-size: .93rem; color: var(--halvany); }
.acel-tipusok, .acel-szolgaltatas { margin-top: 2rem; }
.acel-tipusok h3, .acel-szolgaltatas h3 { font-size: 1.05rem; margin-bottom: .8rem; }
.acel-tipusok ul { list-style: none; padding: 0; display: grid; gap: .4rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); font-size: .9rem; }
.acel-tipusok li { padding: .55rem .9rem; background: var(--feher); border-left: 2px solid var(--vonal); }
.acel-szolgaltatas ul { list-style: none; padding: 0; display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.acel-szolgaltatas li { display: flex; align-items: center; gap: .6rem; font-size: .92rem; }
.acel-szolgaltatas svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--ag); }

/* ── betonacél-megmunkálás kiemelés ───────────────────────────────────── */
.megmunkalas { background: var(--sotet-2); color: rgba(255, 255, 255, .8); }
.megmunkalas-doboz { max-width: 54rem; }
.megmunkalas h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.12; }
.megmunkalas h2 em { display: block; font-style: normal; color: var(--ag-vil); }
.megmunkalas-doboz > p { margin: 1.2rem 0 1.6rem; max-width: 44rem; }
.megmunkalas-lista { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.megmunkalas-lista li { display: flex; align-items: center; gap: .7rem; font-size: .94rem; }
.megmunkalas-lista svg { width: 19px; height: 19px; flex: 0 0 19px; color: var(--ag-vil); }

/* ── termékadatlap ────────────────────────────────────────────────────── */
.adatlap { padding-top: clamp(2rem, 4vw, 3rem); }
.adatlap-racs { display: grid; gap: clamp(1.6rem, 4vw, 3rem); grid-template-columns: 1fr 1fr;
  align-items: start; }
.adatlap-racs--nincskep { grid-template-columns: 1fr; max-width: 48rem; }
.adatlap-kep .termek-kep { aspect-ratio: 1; background: var(--feher);
  box-shadow: 0 18px 44px rgba(20, 24, 30, .1); }
.adatlap-fo { position: relative; }
.adatlap-fo h1 { font-size: clamp(1.5rem, 3vw, 2.15rem); line-height: 1.15; }
.adatlap-alcim { margin-top: .5rem; color: var(--halvany); }
.adatlap-fo .huzas { margin-inline: 0; transform: none; }
.azonositok { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 1.3rem 0; }
.azonositok dt { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--halvany); }
.azonositok dd { margin: .15rem 0 0; font-family: "Oswald", sans-serif; font-size: .98rem;
  color: var(--sotet); }
.adatlap-megjegyzes { margin-top: 1.1rem; font-size: .88rem; color: var(--halvany); }
.adatlap-link { margin-top: 1rem; }
.adatlap-link a { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600;
  color: var(--ag); }
.adatlap-link svg { width: 18px; height: 10px; }
.adatlap-blokk { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.adatlap-blokk h2 { font-size: 1.35rem; margin-bottom: 1rem; }
.adatlap-blokk p { margin-bottom: .9rem; }

/* The manufacturer's own feature bullets. Two columns on a wide screen, since
   the lines are short and a single column would run down the whole page. */
.jellemzok { list-style: none; display: grid; gap: .55rem 2.2rem; }
@media (min-width: 820px) { .jellemzok { grid-template-columns: 1fr 1fr; } }
.jellemzok li {
  position: relative; padding-left: 1.5rem; line-height: 1.55;
  color: var(--szoveg);
}
.jellemzok li::before {
  content: ''; position: absolute; left: 0; top: .58em;
  width: 8px; height: 8px; background: var(--marka, var(--ag));
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ── változatválasztó ─────────────────────────────────────────────────── */
.valaszto { margin-top: 1.6rem; padding: 1.4rem; background: var(--feher);
  border: 1px solid var(--vonal); box-shadow: 0 14px 34px rgba(20, 24, 30, .08); }
.valaszto-cimke { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--halvany); margin-bottom: .7rem; }
.valaszto-gombok { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.valaszto-gomb { padding: .55rem 1rem; background: var(--feher); border: 2px solid var(--vonal);
  font-family: "Oswald", sans-serif; font-size: .9rem; color: var(--szoveg); cursor: pointer;
  transition: border-color .2s, color .2s, background .2s; }
.valaszto-gomb:hover { border-color: var(--ag-vil); color: var(--ag); }
.valaszto-gomb[aria-checked="true"] { background: var(--ag); border-color: var(--ag); color: #fff; }
.valaszto-ar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.2rem; }
.valaszto .gomb { width: 100%; justify-content: center; }

/* ── telephely-sáv ────────────────────────────────────────────────────── */
.telephely-sav { background: var(--sotet); color: rgba(255, 255, 255, .78); }
.telephely-blokk h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.telephely-blokk > p { margin: .8rem 0 1.4rem; }
.telephely-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap;
  gap: 1rem 2.2rem; }
.telephely-lista li { display: flex; align-items: center; gap: .6rem; }
.telephely-lista svg { width: 19px; height: 19px; flex: 0 0 19px; color: var(--ag-vil); }
.telephely-lista a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .28); }
.telephely-lista a:hover { border-bottom-color: var(--ag-vil); }

/* ── ajánlatkérő párbeszéd ────────────────────────────────────────────── */
body.parbeszed-nyitva { overflow: hidden; }
/* a class-level display beats the UA sheet's [hidden] rule — say it explicitly */
.ajanlat-fatyol[hidden] { display: none; }
.ajanlat-fatyol { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: 1rem; background: rgba(9, 12, 16, .72); overflow-y: auto; }
.ajanlat { position: relative; width: min(100%, 34rem); margin: auto; padding: 2rem;
  background: var(--feher); box-shadow: 0 40px 90px rgba(0, 0, 0, .45); }
.ajanlat h2 { font-size: 1.45rem; }
.ajanlat-termek { margin: .5rem 0 1.4rem; padding-bottom: 1.1rem; font-weight: 600;
  color: var(--ag); border-bottom: 1px solid var(--vonal); }
.ajanlat-zar { position: absolute; top: .6rem; right: .6rem; width: 40px; height: 40px;
  display: grid; place-items: center; background: none; border: 0; cursor: pointer;
  color: var(--halvany); transition: color .2s; }
.ajanlat-zar:hover { color: var(--ag); }
.ajanlat-zar svg { width: 20px; height: 20px; }
.mez { display: block; margin-bottom: .9rem; }
.mez > span { display: block; margin-bottom: .3rem; font-size: .8rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--halvany); }
.mez > span b { color: var(--ag); }
.mez input, .mez textarea { width: 100%; padding: .75rem .9rem; font: inherit; font-size: .95rem;
  color: var(--szoveg); background: var(--hatter); border: 1px solid var(--vonal);
  transition: border-color .2s, background .2s; }
.mez input:focus, .mez textarea:focus { outline: 0; border-color: var(--ag); background: var(--feher); }
.mez textarea { resize: vertical; min-height: 4.6rem; }
.mez-par { display: grid; gap: 0 .9rem; grid-template-columns: 1fr 1fr; }
.ajanlat-extra { margin: .3rem 0 1rem; padding: .9rem 1rem; border: 1px solid var(--vonal);
  background: var(--hatter); }
.ajanlat-extra legend { padding: 0 .4rem; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--halvany); }
.ajanlat-extra label { display: flex; align-items: center; gap: .55rem; padding: .22rem 0;
  font-size: .9rem; cursor: pointer; }
.ajanlat-extra input { accent-color: var(--ag); width: 17px; height: 17px; }
.ajanlat-jog { margin: .4rem 0 1rem; font-size: .78rem; line-height: 1.6; color: var(--halvany); }
.ajanlat-jog a { color: var(--ag); border-bottom: 1px solid currentColor; }
.ajanlat form > .gomb { width: 100%; justify-content: center; }
.ajanlat-uzenet { margin-top: .9rem; font-size: .9rem; }
.ajanlat-uzenet--hiba { color: var(--piros); }
.ajanlat-uzenet--siker { padding: 1.2rem 0 0; font-size: 1.02rem; color: #1B7A3D; }
.rejtett-mezo { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── keskeny képernyő ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ag-racs { grid-template-columns: 1fr; }
  .adatlap-racs { grid-template-columns: 1fr; }
  .adatlap-kep { max-width: 22rem; }
  .hero--kat { min-height: auto; }
}
@media (max-width: 620px) {
  .termek-racs { grid-template-columns: 1fr 1fr; gap: .9rem; }
  .termek-torzs { padding: .85rem .9rem .2rem; }
  .termek-torzs h3 { font-size: .9rem; }
  .termek-lab { padding: .8rem .9rem 1rem; }
  .termek-lab .gomb { flex-basis: 100%; }
  .ar b { font-size: 1rem; }
  .kat-racs { grid-template-columns: 1fr; }
  .mez-par { grid-template-columns: 1fr; }
  .ajanlat { padding: 1.5rem 1.2rem; }
  .telephely-lista { flex-direction: column; gap: .8rem; }
  .meret-tabla, .muszaki-tabla { min-width: 28rem; }
}

/* ── jogi oldalak (impresszum, adatvédelem) ───────────────────────────── */
.jogi { padding-top: clamp(2.4rem, 5vw, 3.6rem); }
.jogi .hasab { max-width: 52rem; }

.jogi-adatok { display: grid; gap: 1px; margin: 0 0 1.6rem;
  background: var(--vonal); border: 1px solid var(--vonal); }
.jogi-adatok > div { display: grid; gap: .15rem .9rem; padding: .8rem 1.1rem;
  background: var(--feher); grid-template-columns: minmax(9rem, 14rem) 1fr; }
.jogi-adatok dt { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--halvany); align-self: center; }
.jogi-adatok dd { margin: 0; font-size: .96rem; }
.jogi-adatok a { color: var(--ag); border-bottom: 1px solid transparent; }
.jogi-adatok a:hover { border-bottom-color: currentColor; }
.jogi-adatok .halk { color: var(--halvany); font-size: .88rem; }

.jogi-szakasz { margin-top: clamp(2.2rem, 4.5vw, 3.2rem); }
.jogi-szakasz h2 { font-size: clamp(1.15rem, 2.4vw, 1.45rem); margin-bottom: .9rem;
  padding-bottom: .55rem; border-bottom: 2px solid var(--ag); }
.jogi-szakasz h3 { font-size: 1rem; margin: 1.3rem 0 .5rem; color: var(--sotet); }
.jogi-szakasz p { margin-bottom: .9rem; }
.jogi-szakasz .tabla-keret { margin: .4rem 0 1rem; }
.jogi-szakasz .muszaki-tabla { min-width: 24rem; }
.jogi-szakasz .muszaki-tabla th { width: 32%; color: var(--sotet); font-weight: 600; }
.jogi-szakasz .muszaki-tabla td { font-weight: 400; color: var(--szoveg); }

.jogi-lista { list-style: none; padding: 0; margin: 0 0 1rem;
  display: flex; flex-direction: column; gap: .45rem; }
.jogi-lista li { position: relative; padding-left: 1.4rem; }
.jogi-lista li::before { content: ''; position: absolute; left: 0; top: .62em;
  width: 8px; height: 2px; background: var(--ag); }

.jogi-telephelyek { display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.jogi-telephely { padding: 1rem 1.15rem; background: var(--feher);
  border-left: 3px solid var(--ag); }
.jogi-telephely b { display: block; font-family: 'Oswald', sans-serif; font-size: .84rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--grafit); }
.jogi-telephely span { font-size: .88rem; color: var(--halvany); }

.jogi-vissza { margin-top: clamp(2.4rem, 5vw, 3.4rem); padding-top: 1.2rem;
  border-top: 1px solid var(--vonal); }
.jogi-vissza a { display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .86rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ag); }

@media (max-width: 620px) {
  .jogi-adatok > div { grid-template-columns: 1fr; }
  .jogi-szakasz .muszaki-tabla { min-width: 20rem; }
}

/* ── kapcsolati űrlap a főoldalon ─────────────────────────────────────── */
.uzenet-urlap { max-width: 44rem; margin-inline: auto; padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--feher); box-shadow: 0 18px 44px rgba(20, 24, 30, .1); }
.uzenet-urlap .mez select { width: 100%; padding: .75rem .9rem; font: inherit;
  font-size: .95rem; color: var(--szoveg); background: var(--hatter);
  border: 1px solid var(--vonal); }
.uzenet-urlap .mez select:focus { outline: 0; border-color: var(--piros); background: var(--feher); }
.uzenet-urlap > .gomb { width: 100%; justify-content: center; }
.urlap-uzenet { margin-top: .9rem; font-size: .92rem; text-align: center; }
.urlap-uzenet--hiba { color: var(--piros); }
.urlap-uzenet--siker { color: #1B7A3D; font-weight: 600; }
.lablec-jogi a { border-bottom: 1px solid rgba(255, 255, 255, .28); }
.lablec-jogi a:hover { border-bottom-color: var(--ag-vil); }

/* ── termékkatalógus-belépő a főoldal fehér sávjában ──────────────────── */
.ek-termekek { display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem 1.05rem .5rem .85rem; margin-top: clamp(.7rem, 2vh, 1.3rem);
  color: var(--piros); font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: clamp(.72rem, 1.5vw, .84rem); letter-spacing: .1em; text-transform: uppercase;
  background: color-mix(in srgb, var(--piros) 9%, transparent);
  box-shadow: inset 2px 0 0 var(--piros);
  clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  transition: background .28s var(--konny), color .28s; }
.ek-termekek svg { width: 18px; height: 10px; flex: 0 0 18px;
  transition: transform .28s var(--konny); }
.ek-termekek:hover { background: var(--piros); color: #fff; }
.ek-termekek:hover svg { transform: translateX(4px); }