/* ═══════════════════════════════════════════════════════════════
   ProVision — KOZPONTI STILUSLAP
   Minden oldal ezt az egy fajlt tolti be.
   A blokkok sorrendje megegyezik a korabbi betoltesi sorrenddel,
   igy a kaszkad (feluliras) valtozatlan.
   ═══════════════════════════════════════════════════════════════ */


/* ─── BETUTIPUSOK — helyben tarolva ──────────────────────────
   A Satoshi korabban a fontshare CDN-rol jott; most sajat fajl.
   A variable valtozat egyetlen fajlban hozza a 300-900 tartomanyt,
   ezert a statikus vastagsagokra nincs szukseg.
   Dolt valtozat nem kell: a stiluslapban nulla font-style: italic van.
   ──────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}


/* ═══════════════════════════════════════════════════════════
   ALAP — globalis valtozok, layout, fooldal
   (korabban: style.css)
   ═══════════════════════════════════════════════════════════ */

/* ─── TOKENS ─────────────────────────────────────────────────── */
:root {
  --bg:        #141616;
  --black:     #0c0d0e;
  --green:     #b8ff34;
  --blue:      #24deff;
  --white:     #ffffff;
  --grey-dark: #1c1c1c;
  --grey-mid:  #303030;
  --grey-text: #a7a7a7;
  --grey-line: #7e7e7e;

  --font: 'Satoshi', sans-serif;

  /* type scale */
  --h1:   clamp(80px, 8.33vw, 160px);
  --h2:   clamp(44px, 4.4vw,  84px);
  --h3:   clamp(26px, 2.08vw,  40px);
  --h4:   clamp(18px, 1.56vw,  30px);
  --body: clamp(16px, 1.15vw,  22px);
  --btn:  16px;
  --cap:  16px;

  --radius-pill: 9999px;
  --radius-card: 60px;
  --radius-lg:   80px;
  --radius-sm:   40px;

  --nav-h: 86px;

  --max-w: 100%;
  --pad-x: clamp(40px, 7.4vw, 142px);
}

/* ─── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: #141616; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font);
  font-size: var(--body);
  line-height: 1.2;
  overflow-x: clip;
  max-width: var(--max-w);
  margin: 0 auto;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ─── PRELOADER ──────────────────────────────────────────────── */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.preloader.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.preloader__video {
  width: auto;
  height: auto;
  max-width: 320px;
  max-height: 320px;
  display: block;
}

/* ─── SHARED ──────────────────────────────────────────────────── */
.section-title {
  font-size: var(--h2);
  font-weight: 400;
  line-height: 1.05;
  color: var(--white);
}
.body-text {
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.434px;
}

/* Animált gradient szög + csillanás — @property (Houdini) */
@property --btn-angle {
  syntax: '<angle>';
  initial-value: 135deg;
  inherits: false;
}
@property --btn-glint {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes btn-border-spin {
  to { --btn-angle: 495deg; }
}
@keyframes btn-glint-spin {
  to { --btn-glint: 360deg; }
}

/* pill button */
/* Gradient border: padding-box/border-box trick + forgó animáció */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  border: 1px solid transparent;
  border-radius: 40px;
  padding: 14px 24px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  isolation: isolate;   /* glow ::before ne kerüljön a body mögé */
  background:
    linear-gradient(#000, #000) padding-box,
    conic-gradient(from var(--btn-glint),
      transparent 0%,
      transparent 86%,
      rgba(255,255,255,0.5) 90%,
      rgba(255,255,255,1) 93%,
      rgba(255,255,255,0.5) 96%,
      transparent 100%
    ) border-box,
    linear-gradient(var(--btn-angle), #B8FF34 0%, #24DEFF 50%, #6E991F 100%) border-box;
  animation: btn-border-spin 3s linear infinite,
             btn-glint-spin  5s linear infinite;
}
.btn-pill:hover { }


/* Lottie nyíl a gombban */
.btn-arrow-lottie {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: block;
}

/* rect buttons */
.btn-rect {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 22px 95px;
  border-radius: 0 30px 0 0;
  font-size: var(--btn);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid var(--black);
  transition: opacity 0.2s;
}
.btn-rect:hover { opacity: 0.85; }
.btn-rect--white { background: var(--white); color: var(--black); }
.btn-rect--green { background: var(--green); color: var(--black); }

/* ─── NAVBAR ─────────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-w);
  height: var(--nav-h);           /* 86px */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 142px;
  background: rgba(33, 31, 31, 0.9);
  z-index: 200;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar--hidden {
  transform: translateX(-50%) translateY(-100%);
}

/* ── Logo ── */
.navbar__logo {
  justify-self: start;
  text-decoration: none;
  display: flex;
  align-items: center;
}
.navbar__logo img {
  display: block;
  width: 170px;
  height: 36px;
}

/* ── Social ikonok (középen) — social.svg: 96×45px, mindkét ikon egyben ── */
.navbar__social {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 6px;
}
/* A social.svg sprite két ikont tartalmaz — külön-külön kivágva,
   hogy mindkettő önálló link lehessen */
.navbar__social-link {
  display: block;
  line-height: 0;
  transition: opacity 0.25s ease;
}
.navbar__social-link:hover { opacity: 0.7; }

.navbar__social-clip {
  width: 45px;
  height: 45px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.navbar__social-clip img {
  display: block;
  width: 96px;
  max-width: none;
  height: 45px;
  flex-shrink: 0;
}
.navbar__social-clip--ig img { margin-left: 0; }
.navbar__social-clip--fb img { margin-left: -51.25px; }

/* ── Menü terület (jobb oldal) ── */
.navbar__menu-area {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
}

.navbar__menu-label {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.157;
  user-select: none;
}

/* ── Nyelvválasztó (HU / EN) ── */
.navbar__lang {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-right: clamp(16px, 2vw, 28px);   /* elkülönítés a menütől */
}

.navbar__lang-link {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  line-height: 1;
  transition: color 0.25s ease;
}
/* Hover csak a valódi linken — az aktuális nyelv nem kattintható */
a.navbar__lang-link:hover {
  color: var(--white);
}
.navbar__lang-link.is-active {
  color: #B8FF34;
}

/* Az aktuális nyelv: nem link, nem interaktív */
.navbar__lang-link--current {
  cursor: default;
  user-select: none;
}

.navbar__lang-sep {
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  line-height: 1;
  user-select: none;
}

/* Hamburger kör gomb — Figma: black bg, green border, pill, ~43×43px */
.navbar__menu-btn {
  position: relative;
  width: 43px;
  height: 43px;
  background: var(--black);
  border: 1px solid var(--green);
  border-radius: 9999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.25s;
}
.navbar__menu-btn:hover { background: rgba(184,255,52,0.08); }

/* Nyitott állapot: a gomb 90°-kal elfordul (Figma: rotate-90) */
.navbar__menu-btn.is-open {
  transform: rotate(90deg);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar__menu-btn {
  transition: background 0.25s, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Két fehér vonal a Figma pozíciók szerint */
.navbar__menu-btn .menu-line {
  position: absolute;
  height: 2px;
  background: var(--white);
  border-radius: 1px;
  right: 9.3px;   /* right: ~22.2% of 42px ≈ 9.3px */
}
.navbar__menu-btn .menu-line:nth-child(1) {
  top: 16.6px;
  left: 11.2px;   /* left: ~27.78% of 42px */
}
.navbar__menu-btn .menu-line:nth-child(2) {
  top: 22.6px;
  left: 18.6px;   /* left: ~44.48% of 42px */
}

/* Header alján 0.5px gradient vonal */
.navbar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.5px;
  background: linear-gradient(90deg, rgba(126,126,126,0) 0%, #7E7E7E 31.25%, #7E7E7E 72.6%, rgba(126,126,126,0) 100%);
  pointer-events: none;
}

/* ── Fullscreen menü overlay ────────────────────────────────────
   Figma Group 60 (nyitott állapot):
   – Fehér bg a header alatt (top: 86px)
   – Nav linkek: left=195px, top=121px az overlay tetejétől
     (számítás: 22.34% × 837px = 187px a Component8 tetejétől;
      Component8 top=21px; overlay top=87px → 21+187−87=121px)
   – X gomb: right=75px, top=84px
     (17.92% × 837 = 150px Component8-ban; 21+150−87=84px overlay-ban)
     méret: ~74×74px (4.46% × 1651 = 73.7px)
   ────────────────────────────────────────────────────────────── */
.nav-overlay {
  position: fixed;
  top: var(--nav-h);        /* 86px — a header alatt kezdődik */
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--white);
  z-index: 150;             /* header (200) alatt, de tartalom felett */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Nav linkek — Figma: left=195px, top=121px, 100px Regular, black */
.nav-overlay__nav {
  position: absolute;
  left: 195px;
  top: 121px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.nav-overlay__link {
  font-family: var(--font);
  font-size: clamp(30px, 3.6vw, 64px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--black);
  text-decoration: none;
  white-space: nowrap;
  padding: 0 12px;
  margin-left: -12px;
  transition: background 0.2s, color 0.2s;
}
.nav-overlay__link:hover {
  background: var(--black);
  color: var(--white);
}

/* ── Almenü (Markets) — fúrás lefelé ──────────────────────────────
   A „Markets" nem link, hanem kapcsoló: rákattintva a főmenüpontok
   eltűnnek, a helyükre a városok lépnek, fölöttük egy Back gombbal. */
.nav-overlay__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.nav-overlay__link--parent {
  cursor: pointer;
  outline: none;
  user-select: none;
}
.nav-overlay__link--parent:hover {
  background: var(--black);
  color: var(--white);
}

/* Alaphelyzet: az almenü nincs jelen. A JS az .is-sub osztályt teszi
   a navra, ami átkapcsol a második szintre. */
.nav-overlay__sub { display: none; }

.nav-overlay__nav.is-sub > .nav-overlay__link,
.nav-overlay__nav.is-sub .nav-overlay__link--parent { display: none; }

.nav-overlay__nav.is-sub .nav-overlay__item.is-open .nav-overlay__sub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Vissza a főmenübe */
.nav-overlay__back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: clamp(15px, 1.15vw, 20px);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--black);
  padding: 6px 10px;
  margin: 0 0 clamp(14px, 1.4vw, 24px) -10px;
  transition: background 0.2s, color 0.2s, gap 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-overlay__back:hover,
.nav-overlay__back:focus-visible {
  background: var(--black);
  color: var(--white);
  gap: 18px;
}
.nav-overlay__back svg { flex-shrink: 0; }

/* A városok a főmenü méretét veszik fel — ők a látható szint */
.nav-overlay__sublink {
  font-family: var(--font);
  font-size: clamp(30px, 3.6vw, 64px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--black);
  text-decoration: none;
  white-space: nowrap;
  padding: 0 12px;
  margin-left: -12px;
  transition: background 0.2s, color 0.2s;
}
.nav-overlay__sublink:hover,
.nav-overlay__sublink:focus-visible {
  background: var(--black);
  color: var(--white);
}

/* Belépő animáció — a Back, majd a városok sorban úsznak be */
@keyframes nav-sub-in {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: none; }
}
.nav-overlay__nav.is-sub .nav-overlay__sub > * {
  animation: nav-sub-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.nav-overlay__nav.is-sub .nav-overlay__sub > :nth-child(2) { animation-delay: 0.06s; }
.nav-overlay__nav.is-sub .nav-overlay__sub > :nth-child(3) { animation-delay: 0.12s; }
.nav-overlay__nav.is-sub .nav-overlay__sub > :nth-child(4) { animation-delay: 0.18s; }

/* X bezáró gomb — x.svg, Figma: right=75px, top=84px, 74×74px */
.nav-overlay__close {
  position: absolute;
  right: calc(var(--pad-x) + 40px);
  top: 84px;
  width: 37px;
  height: 37px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}
.nav-overlay__close:hover { opacity: 0.5; }
.nav-overlay__close img { display: block; }

/* Social ikonok a nav overlay-ben — csak mobil nézetben (ld. @media 768px) */
.nav-overlay__social {
  position: absolute;
  left: 195px;
  bottom: 80px;
  display: none;          /* desktop: rejtve — a header mutatja a social ikonokat */
  gap: 12px;
  align-items: center;
}

/* ─── HERO ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow-x: hidden;
}

/* UnicornStudio háttér — a szöveg zóna mögött */
.hero__bg {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero__bg > div {
  width: 100% !important;
  height: 100% !important;
}
.hero__bg > div:first-child {
  opacity: 0;
  transition: opacity 3s;
}
.hero__bg > div:first-child[data-scene-id] {
  opacity: 1;
}
/* Színátmenet réteg — a szürkés hullámot festi színesre.
   A JS forgatja a színeket (hue-rotate), így folyamatosan váltakoznak.
   mix-blend-mode: color → a hullám fényessége megmarad, csak a színe változik,
   a sötét háttér sötét marad. (Alternatíva: 'overlay' vagy 'soft-light'.) */
.hero__bg-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    #B8FF34 0%,
    #24DEFF 24%,
    #7B5CFF 46%,
    #FF60C5 68%,
    #24DEFF 86%,
    #B8FF34 100%);
  background-size: 220% 220%;
  mix-blend-mode: soft-light;
  opacity: 0.85;
  pointer-events: none;
  will-change: filter, background-position;
  opacity: 0.3;
  transition: opacity 3s;
}
.hero__bg > div:first-child[data-scene-id] + .hero__bg-tint {
  opacity: 1;
}

/* Alsó fade — a canvas háttér a lap háttérszínébe olvad,
   így nincs éles csík a 100vh-s határnál */
.hero__bg::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(120px, 20vh, 240px);
  background: linear-gradient(to bottom, rgba(20, 22, 22, 0) 0%, var(--bg) 100%);
  z-index: 2;   /* a tint réteg fölött, hogy a fade tiszta legyen */
}

/* ── Szöveg + videó zóna — eredeti elrendezés ──────────────── */
.hero__text-zone {
  min-height: 100vh;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + 60px) var(--pad-x) 80px;
}

/* background glow */
.hero__text-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(184,255,52,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(36,222,255,0.04) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Üres scroll tér — JS állítja be a margin-top-ot ───────── */
.hero__video-zone {
  height: 300vh;  /* 100vh animáció + 100vh felgörgetés + 100vh sticky alap */
}

/* top divider line */
.hero::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: var(--nav-h);
  width: 100%;
  max-width: 1920px;
  height: 0.5px;
  background: linear-gradient(90deg, transparent 0%, var(--grey-line) 31%, var(--grey-line) 72%, transparent 100%);
  z-index: 3;
  pointer-events: none;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  background: var(--blue);
  color: #252222;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 4px 10px;
  margin-bottom: 28px;
}

.hero__heading {
  overflow: hidden;
}

/* Typewriter konténer — azonos magasság mint a h1, hogy ne ugorjon az alatta lévő szöveg */
.hero__typewriter {
  height: calc(var(--h1) * 1);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}
.hero__typewriter-word {
  font-size: var(--h1);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--white);
  display: inline-block;
  white-space: nowrap;
}
/* Egyedi betűk — anime.js kezeli az opacity-t */
.hero__typewriter-word .letter {
  display: inline-block;
  opacity: 0;
}

.hero__title {
  font-size: var(--h1);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -1px;
  color: var(--white);
  margin-top: 4px;
}

.hero__sub {
  max-width: 673px;
  font-size: clamp(16px, 1.25vw, 24px);
  line-height: 1.13;
  color: var(--white);
  text-align: center;
}
.hero__sub strong { font-weight: 700; }


/* Hero image / videó doboz */
.hero__image {
  margin-top: 28px;
  width: min(640px, 90%);
  aspect-ratio: 16/9;
  border-radius: 40px;
  overflow: hidden;
  position: relative;
  z-index: 2;
  transform-origin: center center;
  will-change: transform, border-radius;
  opacity: 0;                      /* kezdetben rejtve — első görgetésre jelenik meg */
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero__image.is-revealed { opacity: 1; }
/* Spacer — csak akkor látható (JS állítja), amikor a videó fixed */
.hero__image-spacer {
  display: none;
  flex-shrink: 0;
  align-self: center;
}

.hero__image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Lejátszásgomb a videó fölött ──────────────────────────────
   A gomb maga a teljes felületet lefedi: ez adja az enyhe sötétítést,
   közepén a zöld körben fehér play jel. Indítás után elhalványul. */
.video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.38);
  cursor: pointer;
  z-index: 3;
  transition: background 0.35s ease, opacity 0.35s ease, visibility 0.35s;
}

.video-play:hover { background: rgba(0, 0, 0, 0.3); }

.video-play__circle {
  display: grid;
  place-items: center;
  width: clamp(58px, 5.4vw, 86px);
  height: clamp(58px, 5.4vw, 86px);
  border-radius: 50%;
  background: var(--green);
  color: var(--black);
  box-shadow: 0 0 0 rgba(184, 255, 52, 0);
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
              box-shadow 0.35s ease;
}

.video-play__circle svg {
  width: 42%;
  height: 42%;
  display: block;
}

/* Poszterkép. A <video> a WebM-ekben hiányzó keresési index miatt nem
   tud kockát kirajzolni indítás előtt (tömör feketét fest), ezért a
   posztert a dobozra tesszük háttérként, a videót pedig lejátszásig
   elrejtjük. Így a képarányhoz illő felvétel jelenik meg — a `poster`
   attribútum ezt nem tudná, mert az nem cserélhető töréspont szerint. */
.hero__image {
  background: url("../intro_poster.webp") center / cover no-repeat, var(--black);
}

.hero__image video {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.hero__image:has(.video-play.is-playing) video { opacity: 1; }

/* Mobilon a videó is az álló változat — a poszter is azt követi */
@media (max-width: 768px) {
  .hero__image {
    background-image: url("../intro_mobile_poster.webp");
  }
}

.video-play:hover .video-play__circle {
  transform: scale(1.09);
  box-shadow: 0 0 38px rgba(184, 255, 52, 0.5);
}

.video-play:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -4px;
}

/* Lejátszás közben eltűnik, és nem fogja el a kattintást */
.video-play.is-playing {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .video-play:hover .video-play__circle { transform: none; }
}

/* Kenyérszöveg wrapper — gombok ehhez képest pozicionálódnak */
.hero__sub-area {
  position: relative;
  width: 100%;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-top: 40px;
  padding-bottom: 50px;
}

/* Gombok: top: 100% → gomb teteje = szöveg alja */
.hero__cta {
  position: absolute;
  top: 100%;
  z-index: 2;
}
.hero__cta--left  { left:  0; }
.hero__cta--right { right: 0; }

/* ─── ABOUT ──────────────────────────────────────────────────── */

/* Scroll tér — a sticky section itt ragad.
   margin-top: -100vh kompenzálja a hero zone dead space-ét,
   így az about pontosan akkor jelenik meg, mikor a hero videó eltűnik. */
.about-scroll-zone {
  position: relative;
  height: 220vh;
  margin-top: -100vh;
}

.about {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  overflow: hidden;
}


/* "HUMAN-FIRST" vízjel SVG — bal oldalt, fentről lefelé */
.about__watermark {
  position: absolute;
  left: var(--pad-x);
  top: 50px;
  height: 100%;
  width: auto;
  max-width: calc(50% - var(--pad-x));
  pointer-events: none;
  z-index: 0;
  user-select: none;
  opacity: 0;                     /* JS animálja scroll-driven */
  transform: translateX(-80px);  /* JS animálja scroll-driven */
  will-change: transform, opacity;
}

/* Bal oldali tartalom — scroll-driven beúszás alulról */
.about__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: clamp(80px, 8vw, 160px) 0 clamp(80px, 8vw, 160px) var(--pad-x);
  opacity: 0;                   /* JS animálja scroll-driven */
  transform: translateY(60px); /* JS animálja scroll-driven */
  will-change: transform, opacity;
}

.about__title {
  font-size: clamp(48px, 5.2vw, 100px);
  font-weight: 400;
  line-height: 1.05;
  color: var(--white);
}

.about__desc {
  font-size: var(--body);
  line-height: 1.2;
  letter-spacing: 0.434px;
  color: var(--white);
  max-width: 534px;
}

/* Jobb oldal — scroll-driven videó.
   A háttérszín azért kell ide, mert a z-index saját stacking contextet nyit:
   a canvas mix-blend-mode-ja csak ezen a csoporton belül tud keverni, az oldal
   háttere „nem látszik át" hozzá. Így viszont pontosan a lap színével kever. */
.about__visual {
  position: relative;
  z-index: 2;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg);
}

/* Nincs függőleges eltolás: a konténer overflow: hidden, így a lejjebb
   tolt canvas alja levágódna — a képkocka pedig középre igazítva rajzolódik
   (contain), tehát az eltolásra nincs is szükség.
   mix-blend-mode: lighten — a képkocka fekete háttere sosem lehet sötétebb a
   lap hátterénél, így nem üt el téglalapként; a fények érintetlenek maradnak. */
.about__canvas {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
  mix-blend-mode: lighten;
}

/* ── Az ajtós képszekvencia a blokk háttere — CSAK MOBILON ─────
   Asztalon marad az eredeti elrendezés: szöveg balra, a szekvencia a
   jobb oszlopban. Keskeny nézetben viszont a két oszlop egymás alá
   kerülne, ezért ott a vizuál a teljes szekció háttere lesz, a szöveg
   pedig fölötte fut. A canvas `mix-blend-mode: lighten`-je mindkét
   módban a lap színével kever, így a képkocka fekete része nem üt el. */
@media (max-width: 1024px) {
  .about { grid-template-columns: minmax(0, 1fr); }

  .about__visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    align-self: auto;
    overflow: hidden;
    margin: 0;
  }

  /* Olvashatósági fátyol: a kép fölött, a szöveg alatt */
  .about::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(160deg,
      rgba(20, 22, 22, 0.92) 0%,
      rgba(20, 22, 22, 0.74) 45%,
      rgba(20, 22, 22, 0.34) 100%);
  }

  .about__watermark { z-index: 2; }

  .about__content {
    z-index: 3;
    padding-right: var(--pad-x);
    max-width: min(820px, 100%);
  }
}

/* ─── REEL ───────────────────────────────────────────────────── */
.reel {
  overflow: hidden;
  padding: clamp(60px, 6vw, 120px) 0;
}

.reel__track {
  display: flex;
  gap: 32px;
  width: max-content;
  animation: reel-scroll 22s linear infinite;
  will-change: transform;
}

.reel__track:hover {
  animation-play-state: paused;
}

.reel__item {
  flex-shrink: 0;
  width: clamp(260px, 32.8vw, 630px);
  aspect-ratio: 630 / 280;
  border-radius: 40px;
  overflow: hidden;
}

.reel__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes reel-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── SERVICES ───────────────────────────────────────────────── */
.services {
  padding: clamp(60px, 6vw, 120px) var(--pad-x);
  position: relative;
  overflow: hidden;
}

/* 360° vízjel — az oldal jobb szélére igazítva.
   Eredetileg a 'Bounded' display betűre készült, amihez nincs fájl a
   projektben — ezért a törzsbetűre váltva. A 700-as vastagság tartja
   meg a display betű vizuális tömegét ebben a 295px-es méretben. */
.services__watermark {
  position: absolute;
  right: -200px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  font-family: var(--font);
  font-size: 295px;
  font-weight: 700;
  color: #1c1c1c;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
  line-height: 1;
  z-index: 0;
  user-select: none;
}

/* Fejléc */
.services__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: clamp(40px, 4vw, 60px);
  position: relative;
  z-index: 1;
}
.services__title {
  font-size: var(--h2);
  font-weight: 400;
  line-height: 1.05;
  color: var(--white);
  margin: 0;
}
.services__sub {
  font-size: var(--body);
  line-height: 1.2;
  letter-spacing: 0.434px;
  color: var(--white);
  max-width: 697px;
  margin-top: 20px;
  margin: 0 0 15px 0;
}

/* 2 oszlopos layout */
.services__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: start;
  position: relative;
  z-index: 1;
}

/* Bal: képváltó panel */
.services__visual {
  aspect-ratio: 777 / 715;
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
  background: linear-gradient(160deg, #1e1e1e 0%, #2a2a2a 100%);
  /* Scroll-reveal: elmosódva, alulról úszik be (kétirányú) */
  opacity: 0;
  filter: blur(14px);
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              filter  0.9s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.services__visual.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.services__visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.services__visual-img.is-active {
  opacity: 1;
}

/* Accordion lista */
.services__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* CTA gomb a lenyíló blokk alatt */
.services__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 56px);
  position: relative;
  z-index: 1;
}

/* Accordion item — ugyanolyan gradient border mint a btn-pill */
.services__item {
  border: 1px solid transparent;
  border-radius: 40px;
  overflow: hidden;
  background:
    linear-gradient(var(--black), var(--black)) padding-box,
    linear-gradient(135deg, #B8FF34 0%, #24DEFF 50%, #6E991F 100%) border-box;
  transition: border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.services__item.is-open {
  border-radius: 30px;
}

/* Toggle gomb */
.services__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;          /* függőleges padding → két soros szövegnél is megmarad a térköz */
  min-height: 56px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.services__toggle:hover { background: rgba(184,255,52,0.04); }

.services__item-name {
  font-family: var(--font);
  font-size: var(--h4);
  font-weight: 500;
  color: var(--white);
  line-height: 1.2;
}

/* + / − ikon */
.services__icon {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.services__icon-h,
.services__icon-v {
  position: absolute;
  background: var(--white);
  border-radius: 1px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity   0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.services__icon-h {
  width: 32px;
  height: 5.93px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.services__icon-v {
  width: 5.93px;
  height: 32px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  transform-origin: center;
}
.services__item.is-open .services__icon-v {
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}

/* Accordion body — CSS grid trick a smooth height animációhoz */
.services__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.services__item.is-open .services__body {
  grid-template-rows: 1fr;
}
.services__body-inner {
  overflow: hidden;
}
.services__body-inner p {
  padding: 4px 24px 20px;
  font-size: var(--body);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.3px;
}
/* Ha nyilas link követi a bekezdést, kisebb alsó térköz */
.services__body-inner p:not(:last-child) {
  padding-bottom: 12px;
}

/* A lenyíló alsó sora: nyilas link + konzultációs gomb egymás mellett */
.services__body-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin: 0 24px 20px;
}
/* Ha a sorban van, a link saját margóját a sor adja */
.services__body-actions .services__body-link {
  margin: 0;
}

/* Kis gomb — ugyanaz a design, mint a kategória-gomboknál (wm-tab) */
.services__body-btn {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  background:
    linear-gradient(#000, #000) padding-box,
    conic-gradient(from var(--btn-glint),
      transparent 0%,
      transparent 86%,
      rgba(255,255,255,0.5) 90%,
      rgba(255,255,255,1) 93%,
      rgba(255,255,255,0.5) 96%,
      transparent 100%
    ) border-box,
    linear-gradient(var(--btn-angle), #B8FF34 0%, #24DEFF 50%, #6E991F 100%) border-box;
  animation: btn-border-spin 3s linear infinite,
             btn-glint-spin  5s linear infinite;
  transition: color 0.25s ease;
}
.services__body-btn:hover { color: #B8FF34; }

/* Nyilas link a lenyíló szövege alatt — a címmel */
.services__body-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 24px 20px;
  font-family: var(--font);
  font-size: var(--body);
  font-weight: 500;
  line-height: 1.2;
  color: #B8FF34;
  text-decoration: none;
  transition: gap 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.services__body-link:hover {
  gap: 16px;
}
.services__body-link span {
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.services__body-link:hover span {
  border-color: #B8FF34;
}
.services__body-link-arrow {
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.services__body-link:hover .services__body-link-arrow {
  transform: translateX(4px);
}

/* ─── MARQUEE SZÖVEG SÁVOK ───────────────────────────────────── */
.marquee {
  overflow: hidden;
  padding: clamp(32px, 3.5vw, 56px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.marquee:last-of-type {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-rtl 22s linear infinite;
  will-change: transform;
}

/* Balról jobbra irány */
.marquee--ltr .marquee__track {
  animation-name: marquee-ltr;
}

.marquee__text {
  font-family: 'Satoshi', sans-serif;
  font-weight: 300;
  font-size: clamp(80px, 11.1vw, 160px);
  line-height: 1;
  letter-spacing: -1px;
  color: #090a0a;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Tele fehér szöveg (nem outline) */
.marquee--solid .marquee__text {
  color: var(--white);
  -webkit-text-stroke: 0;
}

@keyframes marquee-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes marquee-ltr {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ─── HOGY MŰKÖDÜNK ──────────────────────────────────────────── */
.workflow {
  padding: clamp(60px, 8vw, 160px) var(--pad-x);
  position: relative;
}

/* Fejléc — cím+alcím bal, forgó badge jobb */
.workflow__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: clamp(40px, 5vw, 80px);
}

.workflow__header-text {
  flex: 1;
}

.workflow__title {
  font-family: 'Satoshi', sans-serif;
  font-size: var(--h2);
  font-weight: 400;
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 16px;
}

.workflow__sub {
  font-family: 'Satoshi', sans-serif;
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.434px;
  color: var(--white);
  max-width: 634px;
}

/* ─── FORGÓ BADGE ────────────────────────────────────────────── */
.rotating-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 232px;
  height: 232px;
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
}

.rotating-badge__ring {
  position: absolute;
  inset: 0;
  animation: badge-spin 14s linear infinite;
  transform-origin: center center;
  will-change: transform;
}

.rotating-badge__logo {
  position: relative;
  width: 110px;
  height: auto;
  z-index: 1;
}

@keyframes badge-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 2 oszlopos layout: bal lépések, jobb vizuál */
.workflow__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 4vw, 60px);
  align-items: start;
}

/* Bal lépések — 204px-es bal indent a section padX-en belül */
.workflow__steps {
  display: flex;
  flex-direction: column;
  padding-left: clamp(0px, 14vw, 204px);
}

/*
  Minden lépés: 2 oszlopos CSS Grid
  col 1 (60px) = ikon sáv
  col 2 (1fr)  = sorszám + cím + leírás
*/
.workflow__step {
  display: grid;
  grid-template-columns: 60px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 12px;
}

/* Sorszám — col 2, row 1 — nagy sötét vízjel */
.workflow__num {
  grid-column: 2;
  grid-row: 1;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(56px, 6.9vw, 100px);
  font-weight: 400;
  line-height: 1.2;
  color: #303030;
  pointer-events: none;
  user-select: none;
  margin-bottom: -10px; /* minimális overlap a sor alján */
}

/* Ikon — col 1, row 2 — a cím bal oldalán */
.workflow__step-icon {
  grid-column: 1;
  grid-row: 2;
  width: clamp(32px, 3.3vw, 48px);
  height: clamp(32px, 3.3vw, 48px);
  align-self: center;
  object-fit: contain;
}

/* ── Kör-ikon: telt kék pötty + nagyobb, stroke-os gyűrű ── */
.workflow__step-icon--circles {
  overflow: visible;                 /* a glow ne vágódjon le */
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
              filter 0.35s ease;
  will-change: transform, filter;
}

.workflow__step-icon--circles .wsi-ring,
.workflow__step-icon--circles .wsi-dot {
  transform-origin: 24px 24px;       /* a viewBox közepe */
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
              opacity 0.35s ease;
}
.workflow__step-icon--circles .wsi-ring { opacity: 0.75; }

/* Hover a lépésen (a szöveget is beleértve) */
.workflow__step:hover .workflow__step-icon--circles {
  transform: scale(1.18);
  filter: drop-shadow(0 0 6px rgba(36, 222, 255, 0.9))
          drop-shadow(0 0 18px rgba(36, 222, 255, 0.55));
}
.workflow__step:hover .workflow__step-icon--circles .wsi-ring {
  opacity: 1;
  transform: scale(1.06);
}
.workflow__step:hover .workflow__step-icon--circles .wsi-dot {
  transform: scale(1.12);
}

/* Hoverre a sorszám kifehéredik */
.workflow__num { transition: color 0.35s ease; }
.workflow__step:hover .workflow__num { color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .workflow__step-icon--circles,
  .workflow__step-icon--circles .wsi-ring,
  .workflow__step-icon--circles .wsi-dot { transition: filter 0.35s ease; }
  .workflow__step:hover .workflow__step-icon--circles { transform: none; }
  .workflow__step:hover .workflow__step-icon--circles .wsi-ring,
  .workflow__step:hover .workflow__step-icon--circles .wsi-dot { transform: none; }
}

/* Cím — col 2, row 2 */
.workflow__step-title {
  grid-column: 2;
  grid-row: 2;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--white);
  align-self: center;
}

/* Leírás — col 2, row 3 */
.workflow__step-desc {
  grid-column: 2;
  grid-row: 3;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(14px, 1.5vw, 22px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.434px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 6px;
}

/* 04. kocka ikon — Figma méret szerint */
.workflow__step-icon--cube {
  width: 118px;
  height: auto;
  aspect-ratio: 101 / 95;
  align-self: start;
  overflow: visible;
}

/* Scroll-in animáció */
.workflow__step,
.workflow__connector {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.workflow__step.is-visible,
.workflow__connector.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Nyíl összekötő — az ikon oszlop tengelyén van */
.workflow__connector {
  display: flex;
  /* Az ikon col 60px → center = 30px → nyíl kb. 14px széles → 23px bal pad */
  padding-left: 23px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.workflow__connector img {
  height: clamp(80px, 9vw, 130px);
  width: auto;
}

/* Jobb: 3D vizuál placeholder — sticky görgetés közben */
.workflow__visual {
  aspect-ratio: 772 / 1378;
  border-radius: var(--radius-card);
  background: #111827;
  position: sticky;
  top: 80px;
  overflow: hidden;
}

.workflow__visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.workflow__visual-img.is-active {
  opacity: 1;
}

/* Kocka-szekvencia változat — a képsor arányát veszi fel (770×620) */
.workflow__visual--seq {
  aspect-ratio: 770 / 620;
  background: transparent;
}

.workflow__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ─── PORTFOLIO ──────────────────────────────────────────────── */
.portfolio {
  padding: clamp(60px, 8vw, 160px) var(--pad-x);
}

/* Fejléc — ugyanaz a grid minta mint services / workflow */
.portfolio__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 80px);
}

.portfolio__title {
  font-size: var(--h2);
  font-weight: 400;
  line-height: 1.05;
  color: var(--white);
  margin: 0;
}

.portfolio__sub {
  font-size: var(--body);
  line-height: 1.2;
  letter-spacing: 0.434px;
  color: var(--white);
  margin: 0 0 6px 0;
}

/* 2×2 rács */
.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(32px, 4vw, 60px);
}

/* Kártyák */
.portfolio__item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              filter  0.9s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.portfolio__item.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Kép wrapper — Figma arány: 793 × 662 */
.portfolio__img-wrap {
  aspect-ratio: 793 / 662;
  border-radius: var(--radius-card);   /* 60px */
  overflow: hidden;
  background: #1e1e1e;
}

.portfolio__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio__item:hover .portfolio__img {
  transform: scale(1.04);
}

/* Gomb a grid alatt középre */
.portfolio__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(48px, 5vw, 80px);
}

/* Karakteres cím-animáció */
.portfolio-letter {
  display: inline-block;
  opacity: 0;
}

/* Projekt neve */
.portfolio__name {
  font-size: clamp(16px, 1.45vw, 26px);
  font-weight: 500;
  color: var(--white);
  line-height: 1.2;
  margin: 0;
}

/* Rövid leírás */
.portfolio__desc {
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.434px;
  color: var(--white);
  margin: 0;
}

/* ─── TEXT PRESSURE ─────────────────────────────────────────── */
@font-face {
  font-family: 'PVFlex';
  src: url('../fonts/Roboto_flex.woff2?v=3') format('woff2');
  /* Nincs font-weight/font-stretch range deszkriptor — különben a böngésző
     a registered wdth/wght tengelyt a CSS-tulajdonságokhoz köti, és a
     font-variation-settings figyelmen kívül marad. */
  font-style: normal;
  font-display: swap;
}

.text-pressure-section {
  padding: clamp(60px, 8vw, 140px) var(--pad-x);
}

.text-pressure-wrap {
  position: relative;
  width: 100%;
  height: clamp(160px, 22vw, 340px);
}

.text-pressure-title {
  font-family: 'PVFlex', sans-serif;
  text-transform: uppercase;
  font-weight: 100;
  margin: 0;
  white-space: nowrap;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  color: var(--white);
  line-height: 1;
  transform-origin: center top;
}

.text-pressure-title span {
  display: inline-block;
}

/* ─── ESETTANULMÁNYOK ────────────────────────────────────────── */
.cases {
  padding: clamp(60px, 8vw, 160px) var(--pad-x);
}

/* Fejléc — ugyanaz a grid minta mint a többi szekcióban */
.cases__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 80px);
}

.cases__title {
  font-size: var(--h2);
  font-weight: 400;
  line-height: 1.05;
  color: var(--white);
  margin: 0;
}

.cases__sub {
  font-size: var(--body);
  line-height: 1.2;
  letter-spacing: 0.434px;
  color: var(--white);
  margin: 0 0 6px 0;
}

/* Tartalom: bal stat kártyák + jobb nagy kép — Figma arány 674:950 */
.cases__body {
  display: grid;
  grid-template-columns: 674fr 950fr;
  gap: clamp(12px, 1vw, 18px);
  align-items: stretch;
}

/* Bal: 2 stat kártya egymás alatt */
.cases__stats {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1vw, 18px);
}

.cases__stat {
  flex: 1;
  background: var(--black);
  border-radius: var(--radius-lg);   /* 80px */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(36px, 4vw, 60px) clamp(36px, 4vw, 56px);
  gap: 20px;
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
.cases__stat.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Nagy szám (+42%, 3X) */
.cases__num {
  display: block;
  font-family: var(--font);
  font-size: clamp(56px, 6.9vw, 100px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--white);
}

/* Felirat */
.cases__label {
  display: block;
  font-family: var(--font);
  font-size: clamp(16px, 1.56vw, 30px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--white);
}

/* Jobb: nagy kép — Figma arány 950×819 */
.cases__visual {
  position: relative;
  border-radius: var(--radius-lg);   /* 80px */
  overflow: hidden;
  aspect-ratio: 950 / 819;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              filter  0.9s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.cases__visual.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Két egymásra fektetett réteg — a lapozás valódi átúsztatás */
.cases__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: opacity;
}

/* Hover overlay a nagy képen */
.cases__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(24px, 4vw, 56px);
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.cases__visual:hover .cases__overlay {
  opacity: 1;
  pointer-events: auto;
}
.cases__overlay-title {
  font-size: clamp(18px, 1.8vw, 30px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--white);
}
.cases__overlay-desc {
  font-size: clamp(13px, 1vw, 18px);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 520px;
}

/* Navigáció: vonal — nyilak — vonal */
.cases__footer {
  display: flex;
  align-items: center;
  margin-top: clamp(32px, 4vw, 60px);
}

.cases__line {
  flex: 1;
  height: 1px;
  background: var(--white);
}

/* Jobb rövidebb vonal — Figma: 299px vs 1017px ≈ ~30% arány */
.cases__line--sm {
  flex: 0 0 clamp(80px, 18vw, 299px);
}

.cases__arrows {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 48px);
  padding: 0 clamp(16px, 2.5vw, 40px);
}

.cases__arrow {
  width: 77px;
  height: 77px;
  border-radius: 50%;
  border: 1px solid transparent;
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(var(--black), var(--black)) padding-box,
    conic-gradient(from var(--btn-glint),
      transparent 0%,
      transparent 86%,
      rgba(255,255,255,0.5) 90%,
      rgba(255,255,255,1) 93%,
      rgba(255,255,255,0.5) 96%,
      transparent 100%
    ) border-box,
    linear-gradient(var(--btn-angle), #B8FF34 0%, #24DEFF 50%, #6E991F 100%) border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  animation: btn-border-spin 3s linear infinite,
             btn-glint-spin  5s linear infinite;
}

.cases__counter {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--white);
  min-width: 56px;
  text-align: center;
  user-select: none;
}


.cases__arrow svg {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cases__arrow--prev:hover svg {
  transform: translateX(-5px);
}

.cases__arrow--next:hover svg {
  transform: translateX(5px);
}


/* ─── KAPCSOLAT ──────────────────────────────────────────────── */
.contact {
  padding: clamp(40px, 5vw, 80px) var(--pad-x) clamp(60px, 8vw, 140px);
}

/* Fehér kártya — 80px radius, Figma: margin=var(--pad-x) */
.contact__inner {
  background: var(--white);
  border-radius: var(--radius-lg);   /* 80px */
  padding: clamp(48px, 6vw, 84px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 15vw, 221px);
  color: var(--black);
}

/* Oszlop fejléc — 100px, Regular, fekete */
.contact__col-title {
  font-size: var(--h2);
  font-weight: 400;
  line-height: 1.05;
  color: var(--black);
  margin: 0 0 clamp(32px, 4vw, 56px) 0;
}

/* ── Bal oszlop: elérhetőségek ── */
.contact__rows {
  display: flex;
  flex-direction: column;
}

.contact__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(16px, 2vw, 26px) 0;
  position: relative;
}

.contact__row-text {
  font-size: clamp(16px, 1.56vw, 30px);
  font-weight: 500;
  color: var(--black);
  line-height: 1.2;
}

.contact__row-link {
  text-decoration: none;
  transition: opacity 0.2s;
}
.contact__row-link:hover { opacity: 0.6; }

.contact__row-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--black);
}

/* Social sor */
.contact__row--social { gap: 16px; }

.contact__social-btn {
  flex-shrink: 0;
  display: block;
  transition: opacity 0.2s;
}
.contact__social-btn:hover { opacity: 0.7; }

/* A social.svg 96×45px, két ikon egymás mellett — clipping-gel kettévágjuk */
.contact__social-clip {
  width: 45px;
  height: 45px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #1D1D1D;
  border-radius: 10px;
}
.contact__social-clip img {
  width: 96px;
  max-width: none;
  height: 45px;
  display: block;
  flex-shrink: 0;
}
/* Instagram: bal ikon */
.contact__social-clip--ig img { margin-left: 0; }
/* Facebook: jobb ikon (~50px eltolás) */
.contact__social-clip--fb img { margin-left: -51px; }

/* ── Jobb oszlop: form ── */
.contact__form {
  display: flex;
  flex-direction: column;
}

.contact__field {
  border-bottom: 1px solid var(--black);
}

.contact__field input,
.contact__field textarea {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: clamp(16px, 1.56vw, 30px);
  font-weight: 500;
  color: var(--grey-text);
  padding: clamp(16px, 2vw, 26px) 0;
  line-height: 1.2;
  display: block;
}
.contact__field input::placeholder,
.contact__field textarea::placeholder { color: var(--grey-text); }
.contact__field input:focus,
.contact__field textarea:focus { color: var(--black); }

/* Üzenet mező — Enter új sort ad, nem küldi el az űrlapot */
.contact__field textarea {
  resize: vertical;
  min-height: 3.6em;
}

/* Checkbox sor */
.contact__checkbox-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(20px, 2.5vw, 36px) 0;
}

.contact__checkbox-box {
  width: 35px;
  height: 35px;
  flex-shrink: 0;
  border: 1px solid var(--black);
  background: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.contact__checkbox-box.is-checked { background: var(--black); }
.contact__checkbox-box.is-checked .contact__checkbox-check path { stroke: var(--white); }

.contact__checkbox-check {
  opacity: 0;
  transition: opacity 0.2s;
}
.contact__checkbox-box.is-checked .contact__checkbox-check { opacity: 1; }

.contact__checkbox-label {
  font-size: clamp(14px, 1.15vw, 22px);
  font-weight: 500;
  color: var(--black);
  line-height: 1.4;
  cursor: pointer;
}
.contact__checkbox-link {
  color: var(--black);
  text-decoration: underline;
}

/* ─── Projektbrief űrlap (contact.html) ──────────────────────────
   Tíz mező: két hasáb, kisebb alapméret, hogy a kártya ne nyúljon el. */
.contact__form--brief {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(20px, 2.2vw, 36px);
}

.contact__form--brief .contact__field input,
.contact__form--brief .contact__field select,
.contact__form--brief .contact__field textarea {
  font-size: clamp(15px, 1.05vw, 19px);
  padding: clamp(12px, 1.3vw, 18px) 0;
}

/* Teljes szélességű elemek */
.contact__field--wide,
.contact__form--brief .contact__checkbox-row,
.contact__form--brief .contact__form-footer { grid-column: 1 / -1; }

/* Legördülő — ugyanaz a vonalas formanyelv, mint az input mezőké */
.contact__field select {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  border-radius: 0;
  font-family: var(--font);
  font-size: clamp(16px, 1.56vw, 30px);
  font-weight: 500;
  color: var(--grey-text);
  padding: clamp(16px, 2vw, 26px) 24px clamp(16px, 2vw, 26px) 0;
  line-height: 1.2;
  display: block;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%237e7e7e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}
.contact__field select:focus  { color: var(--black); }
.contact__field select option { color: var(--black); }

@media (max-width: 768px) {
  .contact__form--brief { grid-template-columns: 1fr; }

  /* A hosszú, nowrap gombfelirat min-content szélessége szétfeszítette
     a rácselemet — a kártya kap min-width:0-t, a felirat pedig törhet. */
  .page-hero--form .page-hero__form-card { min-width: 0; }
  .contact__form--brief .contact__submit {
    white-space: normal;
    height: auto;
    min-height: 56px;
    line-height: 1.3;
    text-align: left;
  }
}

/* Gomb — középre igazítva */
.contact__form-footer {
  display: flex;
  justify-content: center;
  margin-top: clamp(8px, 1.5vw, 16px);
}

.contact__submit {
  background:
    linear-gradient(var(--black), var(--black)) padding-box,
    linear-gradient(135deg, #B8FF34 0%, #24DEFF 50%, #6E991F 100%) border-box;
}

form button[type=submit][disabled] {
  opacity: .6;
}

/* ─── FINAL CTA ──────────────────────────────────────────────── */
.cta-final {
  padding: clamp(80px, 8vw, 160px) var(--pad-x);
}
.cta-final__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1096px;
}
.cta-final__headline {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cta-final__green {
  display: block;
  font-size: var(--h1);
  font-weight: 300;
  line-height: 1;
  color: var(--green);
  letter-spacing: -1px;
}
.cta-final__white {
  display: block;
  font-size: var(--h2);
  font-weight: 400;
  line-height: 1.05;
  color: var(--white);
}
/* Fehér változat — a nagy címsor a zöld helyett fehéren fut (works.html) */
.cta-final--white .cta-final__green { color: var(--white); }
/* ...egyetlen kiemelt szó viszont zöld marad */
.cta-final__accent {
  font-style: normal;
  color: var(--green);
}

.cta-final__desc { max-width: 877px; }
.cta-final__btns {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
}

/* ─── FOOTER ─────────────────────────────────────────────────── */
.footer {
  padding: clamp(60px, 7vw, 120px) var(--pad-x) clamp(32px, 4vw, 56px);
  border-top: 1px solid rgba(126, 126, 126, 0.3);
}

/* Felső sor: 3 oszlop */
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
  margin-bottom: clamp(48px, 6vw, 96px);
}

/* Logó + tagline */
.footer__logo {
  display: block;
  width: 170px;
  height: 36px;
  margin-bottom: 24px;
}

.footer__tagline {
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
}

/* Navigáció + elérhetőségek oszlop fejléc */
.footer__nav-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 20px;
}

/* Nav linkek */
.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__nav-link {
  font-size: clamp(14px, 1.1vw, 20px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s;
  width: fit-content;
}
.footer__nav-link:hover { color: var(--white); }

/* Elérhetőségek */
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__contact-item {
  font-size: clamp(14px, 1.1vw, 20px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s;
  line-height: 1.4;
}
a.footer__contact-item:hover { color: var(--white); }

/* Social ikonok a footerben */
.footer__social {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.footer__social-link {
  display: block;
  transition: opacity 0.2s;
}
.footer__social-link:hover { opacity: 0.7; }

/* Ugyanaz a clip mint a contact szekcióban */
.footer__social-clip {
  width: 36px;
  height: 36px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #1D1D1D;
  border-radius: 8px;
}
.footer__social-clip img {
  width: 77px;
  max-width: none;
  height: 36px;
  display: block;
  flex-shrink: 0;
}
.footer__social-clip--ig img { margin-left: 0; }
.footer__social-clip--fb img { margin-left: -41px; }

/* Elválasztó */
.footer__divider {
  display: none;
}

/* Copyright sor */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer__copy {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
}

.footer__copy-link {
  transition: color 0.2s;
}
.footer__copy-link:hover { color: rgba(255, 255, 255, 0.7); }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .about { grid-template-columns: 1fr; }

  /* A háttérkép a szekció széléig fut, ezért itt vágnia kell
     (korábban `visible` volt, amikor a vizuál különálló doboz volt) */
  .about { overflow: hidden; }

  /* A vizuál itt is a szekció háttere (ld. .about__visual fentebb),
     ezért a régi, jobb oldalra igazított négyzetes doboz szabályai
     nem kellenek. */
  .about__visual {
    overflow: hidden;
    margin: 0;
  }
  .services__layout { grid-template-columns: 1fr; }
  .services__image { display: none; }
  /* Forgó badge: fele méret mobilon — scale(0.5), negatív margin kompenzálja a layout-helyet */
  .rotating-badge {
    transform: scale(0.5);
    transform-origin: center center;
    margin: -58px;   /* (232 - 116) / 2 = 58px minden oldalon */
  }

  /* A félméretű badge sorának margóját a fájl végén, a mobil blokkban
     állítjuk — az alap `.badge-row` szabály később jön, itt nem nyerne. */

  /* Workflow: 1 oszlopos, kép elrejtve, nyilak megjelenítve */
  .workflow__layout    { grid-template-columns: 1fr; }
  .workflow__visual    { display: none; }
  .workflow__connector { display: flex; }
  .workflow__steps     { padding-left: 0; }
  .portfolio__header { grid-template-columns: 1fr; gap: 16px; }
  .portfolio__grid { grid-template-columns: 1fr; }
  .cases__header  { grid-template-columns: 1fr; gap: 16px; }
  .cases__body    { grid-template-columns: 1fr; }
  .cases__line--sm { flex: 0 0 80px; }
  .contact__inner { grid-template-columns: 1fr; }
  .navbar { padding: 0 clamp(20px, 4vw, 80px); }
  /* Nav linkek bal pozíciója táblagépen igazodik a kisebb paddinghoz */
  .nav-overlay__nav { left: clamp(40px, 6vw, 120px); }
}

@media (max-width: 768px) {
  /* Navbar: flexbox, hamburger nem csúszik le */
  .navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px !important;
    overflow: hidden;
  }
  .navbar__social     { display: none; }
  .navbar__menu-label { display: none; }
  .navbar__logo img   { width: 130px !important; height: auto !important; }

  /* Nav linkek + social bal oldalt igazítva — navbar__social itt eltűnik */
  .nav-overlay__nav    { left: clamp(24px, 6vw, 60px); }
  .nav-overlay__social { display: flex; left: clamp(24px, 6vw, 60px); bottom: 40px; }


  /* About: human.svg vízjel elrejtve mobilon */
  .about__watermark    { display: none; }

  /* ── Hero: gombok egymás alá, videó a gombok alatt ──────────── */

  /* A szöveg + gombok blokk: column flex, gombok középre igazítva */
  .hero__sub-area {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-bottom: 0;   /* nincs szükség bottom-padding-ra, mert a gombok nem abszolút */
  }

  /* Gombok: kiemeljük az abszolút pozicionálásból, normál flow-ba */
  .hero__cta {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
  }

  /* Videó portrait arányban, majdnem teljes szélességben. (A 65%-os
     kezdőméret még a régi, pineléses megoldáshoz tartozott, ahol a JS
     nagyította — mobilon már nincs pin, ezért kihasználjuk a helyet.) */
  .hero__image {
    margin-top: 32px;
    /* A hero oldalpaddingjából 15-15px-et visszaveszünk: a videó így
       majdnem a teljes szélességet kitölti, de marad mellette levegő. */
    width: calc(100% + 30px);
    margin-inline: -15px;
    aspect-ratio: 9/16;         /* portrait videóhoz */
    height: unset;              /* aspect-ratio vezérel */
    border-radius: 20px;        /* volt: 40px — felezve mobilon */
  }

  /* Lekerekítések felezve mobilon */
  .reel__item         { border-radius: 20px; }   /* volt: 40px */
  .services__visual   { border-radius: 30px; }   /* volt: 60px */
  .portfolio__img-wrap { border-radius: 30px; }  /* volt: 60px */
  .cases__stat        { border-radius: 40px; }   /* volt: 80px */
  .cases__visual      { border-radius: 40px; }   /* volt: 80px */
  .contact__inner     { border-radius: 40px; }   /* volt: 80px */

  /* Hero típusméret — ne folyjon ki a szöveg */
  :root {
    --h1: clamp(48px, 12vw, 80px);
    --h2: clamp(32px, 7vw,  52px);
    --pad-x: 20px;
  }
}

@media (max-width: 600px) {
  .workflow__steps { grid-template-columns: 1fr; }
  .cta-final__btns { flex-direction: column; align-items: flex-start; }
  .footer__top    { grid-template-columns: 1fr; gap: 40px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .services__header { grid-template-columns: 1fr; gap: 16px; }
  /* .portfolio__header handled above in 1024px breakpoint */
}

/* ─── 1920px FELETTI FELBONTÁSOK (2K / 4K / ultrawide) ─────── */
@media (min-width: 1921px) {

  /* ── Tipográfia és térközök skálázása ─────────────────────────
     Min = az eddigi max (zökkenőmentes átmenet 1920px-nél),
     vw-szorzó azonos a base-szel, csak magasabb felső cap. */
  :root {
    --h1:    clamp(160px, 8.33vw, 260px);
    --h2:    clamp(84px, 4.4vw,  136px);
    --h3:    clamp(40px,  2.08vw, 64px);
    --h4:    clamp(30px,  1.56vw, 52px);
    --body:  clamp(22px,  1.15vw, 34px);
    --pad-x: clamp(142px, 7.4vw,  240px);
    --nav-h: 100px;
  }

  /* Nav overlay linkek: igazodnak a nagyobb pad-x-hez */
  .nav-overlay__nav { left: var(--pad-x); }
}

/* ═══════════════════════════════════════════════════════════
   ALOLDAL KOZOS — services-intro, kartyak, page-hero, irodak, 404
   (korabban: pages.css)
   ═══════════════════════════════════════════════════════════ */

/* ─── KÖZÖS ALOLDAL STÍLUSOK ─────────────────────────────────── */

/* ─── SZOLGÁLTATÁSOK INTRO BLOKK ─────────────────────────────── */
.services-intro {
  padding: clamp(60px, 8vw, 120px) var(--pad-x);
}

/* Közvetlenül a következő szekcióhoz tapad — nincs alsó térköz */
.services-intro--tight {
  padding-bottom: 0;
}

.services-intro__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.services-intro__title {
  font-size: var(--h2);
  font-weight: 400;
  line-height: 1.05;
  color: var(--white);
  margin: 0;
}

.services-intro__desc-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.services-intro__desc {
  font-size: var(--body);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

/* A kenyérszöveg első sora optikailag egy vonalba kerül a cím első sorával.
   A nagy címnél a sormagasság-ráhagyás (1.05) sokkal kisebb, mint a
   testszövegnél (1.55), ezért a bekezdés magasabbra ült; a különbséget a
   két betűméretből számoljuk, így minden töréspontnál stimmel. */
.services-intro__desc-col {
  padding-top: calc(0.285 * var(--h2) - 0.535 * var(--body));
}

/* Cím és kenyérszöveg vertikálisan egymás közepére igazítva */
.services-intro--middle .services-intro__header { align-items: center; }

/* A középre igazított változatoknál a korrekció elbillentené a szöveget */
.services-intro--middle .services-intro__desc-col,
.booking-intro .services-intro__desc-col,
.page-home .services-intro__desc-col { padding-top: 0; }

@media (max-width: 1024px) {
  .services-intro__header { grid-template-columns: 1fr; gap: 16px; }
}

/* ─── SZOLGÁLTATÁS KÁRTYÁK (4 db) ─────────────────────────────── */
.services-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 44%));
  justify-content: space-between;
  gap: clamp(28px, 3.5vw, 56px);
  margin-top: clamp(48px, 6vw, 88px);
  align-items: start;
}

/* Oszlopok — bal: 1. és 3. kártya, jobb: 2. és 4. */
.services-cards__col {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.5vw, 56px);
  min-width: 0;
}

/* Jobb oszlop fél kártyányival lejjebb — pontos értéket JS állítja,
   ez a fallback közelítés */
.services-cards__col--offset {
  margin-top: clamp(280px, 36vw, 420px);
}

.services-card {
  display: flex;
  flex-direction: column;
  background: var(--black);
  border-radius: var(--radius-sm);
  padding: clamp(14px, 1.2vw, 20px) clamp(14px, 1.2vw, 20px) clamp(24px, 2vw, 32px);
  /* Horgonyra érkezéskor a kártya ne csússzon a fix fejléc alá */
  scroll-margin-top: calc(var(--nav-h) + 32px);
  /* Scroll-reveal kezdőállapot: elmosódva, áttetszően, kissé lejjebb */
  opacity: 0;
  filter: blur(14px);
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              filter  0.9s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.services-card.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Múlt állapot: a következő kártya megjelenésekor blur-rel felfelé kiúszik
   (késleltetve indul, hogy a felirat olvasható maradjon; a visszatérés azonnali) */
.services-card.is-visible.is-past {
  opacity: 0.15;
  filter: blur(12px);
  transform: translateY(-60px);
  transition-delay: 1s;
}

/* Horgonyról érkező kártya: élesen fogad, a kaszkád ne mossa el.
   Négy osztály — így nem kell !important a .is-past legyőzéséhez. */
.services-card.is-visible.is-past.is-target,
.services-card.is-target {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 0s;
}


.services-card__img {
  aspect-ratio: 777 / 715;   /* a forrásképek valódi aránya — nincs vágás */
  border-radius: calc(var(--radius-sm) - 12px);
  overflow: hidden;
  margin-bottom: 24px;
}
.services-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.services-card:hover .services-card__img img {
  transform: scale(1.05);
}

.services-card__title {
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--white);
  margin-bottom: 12px;
}

.services-card__desc {
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 20px;
}

/* Szövegek és gomb — nagyobb oldalsó margó a kártyán belül */
.services-card__title,
.services-card__desc {
  padding-inline: clamp(12px, 1.6vw, 28px);
}

/* Kártya gomb — btn-pill, a kártya aljára igazítva */
.services-card__btn {
  margin-top: auto;
  margin-left: clamp(12px, 1.6vw, 28px);
  align-self: flex-start;
}

@media (max-width: 600px) {
  .services-cards { grid-template-columns: 1fr; }
  /* 1 oszlopnál nincs lépcső */
  .services-cards__col--offset { margin-top: 0 !important; }
}

/* ─── OLDAL HERO ─────────────────────────────────────────────── */
.page-hero {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--nav-h) + 80px) var(--pad-x) clamp(60px, 6vw, 100px);
  position: relative;
  border-bottom: 0.5px solid rgba(126,126,126,0.3);
}

.page-hero__label {
  display: inline-flex;
  align-items: center;
  background: var(--blue);
  color: #252222;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 4px 10px;
  margin-bottom: 32px;
  align-self: flex-start;
}

.page-hero__title {
  font-size: var(--h1);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--white);
  margin-bottom: 28px;
  max-width: 900px;
}

.page-hero__sub {
  font-size: clamp(16px, 1.4vw, 24px);
  line-height: 1.5;
  color: rgba(255,255,255,0.65);
  max-width: 620px;
}

.page-hero__sub strong { color: var(--white); font-weight: 500; }

/* Statikus vizuál (aloldalak): egyetlen állandó kép — mindig látható.
   A --static módosító nélkül a főoldali képváltó érintetlen marad. */
.services__layout--static .services__visual-img { opacity: 1; }

/* Nagykép magassága = accordion teljes magassága */
.services__layout--static { align-items: stretch; }
.services__layout--static .services__visual {
  aspect-ratio: auto;
  height: 100%;
}

/* Egymást követő blokkok közötti térköz egy szekción belül */
.services__layout + .services__layout {
  margin-top: clamp(48px, 6vw, 96px);
}

/* Jobb oszlop: kisebb cím + accordion */
.services__col {
  display: flex;
  flex-direction: column;
}
.services__col-title {
  font-size: clamp(18px, 1.8vw, 28px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--white);
  margin: 0 0 clamp(16px, 2vw, 28px);
}

/* ─── RESZPONZÍV ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-hero { min-height: auto; }
  .page-hero__title { font-size: clamp(48px, 12vw, 80px); }
}

/* ─── KAPCSOLAT HERO — szöveg + űrlap egymás mellett ─────────── */
.page-hero--form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
  justify-content: initial;
}

.page-hero--form .page-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Fél szélességű oszlopban a teljes h1 túl nagyra nőne */
.page-hero--form .page-hero__title { font-size: var(--h2); }

/* Kiemelt szavak az oldalcímben (a rendszer sárgája) */
.page-hero__accent { color: #f4d419; }

/* ── Kapcsolat hero háttérkép ──────────────────────────────────
   A `--form` változatot csak a kapcsolat oldal használja, ezért itt
   kaphat saját hátteret. Három réteg:
     ::before — a kép (ez mozog lassan, ezért külön réteg kell: a
                szekciót magát nem lehet transzformálni, mert a tartalom
                is mozogna vele);
     ::after  — sötétítő fátyol, hogy a cím és a fehér űrlapkártya
                olvasható maradjon;
     > *      — a tartalom, mindkettő fölött. */
.page-hero--form {
  background: var(--bg);
  overflow: hidden;
}

.page-hero--form::before {
  content: '';
  position: absolute;
  /* Túlnyújtva, hogy a lassú nagyítás-mozgatás ne csupaszítsa le a szélét */
  inset: -6%;
  z-index: 0;
  pointer-events: none;
  background: url("../contact-bg.webp") center / cover no-repeat;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 1.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-hero--form::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(20, 22, 22, 0.88) 0%,
    rgba(20, 22, 22, 0.74) 50%,
    rgba(20, 22, 22, 0.88) 100%);
}

.page-hero--form > * { position: relative; z-index: 2; }

/* Betöltéskor a kép beúszik, majd folyamatos, lassú sodrásba vált */
.page-hero--form.is-in::before {
  opacity: 1;
  transform: scale(1);
  animation: hero-bg-drift 32s cubic-bezier(0.4, 0, 0.6, 1) 1.6s infinite;
}

@keyframes hero-bg-drift {
  0%   { transform: scale(1)    translate3d(0, 0, 0); }
  50%  { transform: scale(1.07) translate3d(-1.6%, -1.2%, 0); }
  100% { transform: scale(1)    translate3d(0, 0, 0); }
}

/* ── Hero tartalom belépője ────────────────────────────────────
   Ugyanaz a recept, mint a services (és a többi aloldal) hero-jánál:
   a cím vizuális soronként, maszk mögül tolódik fel, utána úszik be a
   kenyérszöveg és az űrlapkártya. A mozgatást anime.js végzi
   (ld. script.js), itt csak a kiindulási állapot van, hogy ne
   villanjon fel a végleges kép az animáció előtt. */
.page-hero--form .page-hero__label,
.page-hero--form .page-hero__title,
.page-hero--form .page-hero__sub,
.page-hero--form .page-hero__form-card { opacity: 0; }

/* Egy vizuális sor maszkja — a lelógó betűszárak miatt kis alsó
   padding, negatív margóval kompenzálva, hogy ne nőjön a sorköz */
.page-hero__title .ph-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.09em;
  margin-bottom: -0.09em;
}
.page-hero__title .ph-line-in { display: block; }
.page-hero__title .ph-w { display: inline-block; }

/* Irodakártya: a rendszer kétirányú beúszása (ld. .md-card) */
.office {
  opacity: 0;
  translate: 0 32px;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              translate 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.office.is-in { opacity: 1; translate: none; }

@media (prefers-reduced-motion: reduce) {
  .page-hero--form.is-in::before { animation: none; }
  .page-hero--form .page-hero__label,
  .page-hero--form .page-hero__title,
  .page-hero--form .page-hero__sub,
  .page-hero--form .page-hero__form-card,
  .office { opacity: 1 !important; translate: none; }
}

/* Telefonon a 2000px széles eredetiből (300 KB) semmi nem látszik, amit a
   900px-es változat (29 KB) ne adna vissza — a hero amúgy is `cover`-rel
   vág és sötétítő réteg van fölötte. */
@media (max-width: 768px) {
  .page-hero--form::before {
    background-image: url("../contact-bg-mobile.webp");
  }
}

/* Fehér űrlapkártya — ugyanaz a formanyelv, mint az iroda-kártyáknál */
.page-hero__form-card {
  background: var(--white);
  border-radius: var(--radius-lg);        /* 80px */
  padding: clamp(32px, 4vw, 60px);
  color: var(--black);
}

@media (max-width: 1024px) {
  .page-hero--form {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .page-hero__form-card { border-radius: var(--radius-sm); }
}

/* ─── IRODÁINK (kapcsolat oldal) ─────────────────────────────── */
.offices {
  padding: clamp(40px, 5vw, 80px) var(--pad-x) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 44px);
}

/* Fehér kártya — ugyanaz a formanyelv, mint a kapcsolat blokknál */
.office__inner {
  background: var(--white);
  border-radius: var(--radius-lg);        /* 80px */
  padding: clamp(32px, 4vw, 64px);
  color: var(--black);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.office__details { min-width: 0; }

.office__label {
  display: inline-flex;
  align-items: center;
  background: var(--black);
  color: var(--white);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 4px 10px;
  margin-bottom: 18px;
}

.office__title {
  font-size: var(--h3);
  font-weight: 400;
  line-height: 1.1;
  color: var(--black);
  margin: 0 0 clamp(16px, 2vw, 28px);
}

.office__social {
  display: flex;
  gap: 12px;
}

/* A sorok értékoszlopa (cím, email, telefon) jobbra igazítva —
   a többsoros címnél a sorok is jobb szélhez rendeződnek */
.office .contact__row-text + .contact__row-text {
  text-align: right;
}

/* ── Beágyazott Google térkép ── */
.office__map {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);        /* 40px */
  overflow: hidden;
  background: #e8e8e8;
  min-width: 0;
}

.office__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Bevezető szöveg az üzenet-blokk bal oldalán */
.contact__intro {
  font-size: clamp(15px, 1.15vw, 20px);
  line-height: 1.55;
  color: rgba(12, 13, 14, 0.7);
  margin: 0;
  max-width: 460px;
}

/* A jobb oszlop saját címe felesleges, ha bal oldalt már van cím */
.contact__col-title--form { display: none; }

@media (max-width: 1024px) {
  .office__inner {
    grid-template-columns: 1fr;
    border-radius: var(--radius-sm);
  }
  .office__map { aspect-ratio: 16 / 10; }
  .contact__col-title--form { display: block; }
}

/* ─── 404 OLDAL ──────────────────────────────────────────────── */
.error404 {
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 60px) var(--pad-x) clamp(40px, 5vw, 80px);
  position: relative;
  overflow: hidden;
}

.error404__content {
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.error404__badge {
  display: inline-flex;
  align-items: center;
  background: var(--blue);
  color: #252222;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 4px 10px;
  margin-bottom: 28px;
}

/* Nagy „404" vízjel — a jobb oldali üres sávban, a szövegtől távol.
   Csak elég széles nézeten jelenik meg, hogy sose takarja a tartalmat. */
.error404__code {
  display: none;
}

@media (min-width: 1200px) {
  .error404__code {
    display: block;
    position: absolute;
    top: 50%;
    left: calc(780px + var(--pad-x) + 40px);   /* a tartalomoszlop után kezdődik */
    transform: translateY(-50%);
    font-family: var(--font);
    font-size: clamp(200px, 18vw, 320px);
    font-weight: 400;
    line-height: 1;
    color: #1e1e1e;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 0;
  }
}

.error404__title {
  font-size: var(--h2);
  font-weight: 400;
  line-height: 1.05;
  color: var(--white);
  margin: 0 0 24px;
}

.error404__desc {
  font-size: var(--body);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  max-width: 620px;
}

.error404__btns {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(28px, 3vw, 44px);
}

/* ── Oldaltérkép kártyák ── */
.error404__links {
  padding: 0 var(--pad-x) clamp(80px, 8vw, 140px);
}

.error404__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
  margin: 0;
  padding: 0;
}

/* Ugyanaz a gradiens keret, mint a lenyílóknál */
.error404__item {
  border: 1px solid transparent;
  border-radius: 30px;
  overflow: hidden;
  background:
    linear-gradient(var(--black), var(--black)) padding-box,
    linear-gradient(135deg, #B8FF34 0%, #24DEFF 50%, #6E991F 100%) border-box;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.error404__item:hover { transform: translateY(-3px); }

.error404__item a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 16px;
  padding: 22px 26px;
  text-decoration: none;
}

.error404__item-name {
  grid-column: 1;
  font-family: var(--font);
  font-size: var(--h4);
  font-weight: 500;
  color: var(--white);
  line-height: 1.2;
}

.error404__item-desc {
  grid-column: 1;
  font-size: var(--body);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
}

.error404__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.error404__item:hover .error404__arrow {
  transform: translateX(5px);
}

@media (max-width: 900px) {
  .error404__list { grid-template-columns: 1fr; }
  .error404__code { opacity: 0.5; }
}

/* ═══════════════════════════════════════════════════════════
   ROLUNK / ALOLDAL HERO — breadcrumb, hero valtozatok, csapat, GYIK
   (korabban: rolunk.css)
   ═══════════════════════════════════════════════════════════ */

/* ─── RÓLUNK ALOLDAL ─────────────────────────────────────────── */

/* ─── ANIMÁCIÓ KEZDŐÁLLAPOTOK ────────────────────────────────── */
.rolunk-hero__main-img  { opacity: 0; transform: translateX(-80px); }
.rolunk-hero__badge     { opacity: 0; }
.rolunk-hero__title     { opacity: 0; }   /* JS visszaállítja 1-re a span-ok előtt */
.rolunk-hero__desc      { opacity: 0; }
.rolunk-hero__stats     { opacity: 0; }

/* Count-up layout-shift megakadályozás — JS fixálja a szélességet */
.rolunk-hero__stat      { flex-shrink: 0; }
.rolunk-hero__stat-num  { display: block; white-space: nowrap; }

/* ─── Görgetésre beúszó elemek (gombok, lenyílók) ────────────── */
.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-up.is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ─── ÚTVONAL (breadcrumb) ───────────────────────────────────── */
.breadcrumb {
  padding: calc(var(--nav-h) + 28px) var(--pad-x) 0;
}

.breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.5px;
  margin: 0;
  padding: 0;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.55);
}

.breadcrumb__item a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.25s ease;
}
.breadcrumb__item a:hover {
  color: #B8FF34;
}

.breadcrumb__sep {
  color: rgba(255, 255, 255, 0.3);
  user-select: none;
}

.breadcrumb__item--current {
  color: var(--white);
}

/* Ha breadcrumb előzi meg a herót, kevesebb felső térköz kell */
.breadcrumb + .rolunk-hero {
  padding-top: clamp(24px, 3vw, 44px);
}

/* ─── RÓLUNK HERO ────────────────────────────────────────────── */
.rolunk-hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 10fr);   /* kép keskenyebb, szöveg szélesebb */
  gap: clamp(32px, 4vw, 80px);
  padding: calc(var(--nav-h) + 60px) var(--pad-x) clamp(60px, 6vw, 100px);
  align-items: stretch;   /* mindkét oszlop egyforma magasságú */
}

/* Fordított: szöveg bal (széles), kép jobb (keskeny) */
.rolunk-hero--rev {
  grid-template-columns: minmax(0, 10fr) minmax(0, 7fr);
}

/* Bal oszlop: kép felveszi a jobb oszlop magasságát */
.rolunk-hero__left {
  display: flex;
  flex-direction: column;
}

.rolunk-hero__main-img {
  border-radius: var(--radius-card);   /* 60px — egyezik a services__visual-lal */
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.rolunk-hero__main-img img,
.rolunk-hero__main-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Teljes blokk háttérképes hero (szolgáltatások, munkáink):
   kép helyett a szekció háttere viszi a vizuált */
.rolunk-hero--szolg-bg,
.rolunk-hero--munkak-bg {
  position: relative;
  overflow: hidden;               /* a belépő animáció túlnagyítását vágja */
}

/* A háttérkép külön rétegen — kreatív belépő animációval:
   nagyítva + elmosódva indul, majd élesre úszik be */
.rolunk-hero--szolg-bg::before,
.rolunk-hero--munkak-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  z-index: 0;
  animation: szolg-bg-in 1.8s cubic-bezier(0.4, 0, 0.2, 1) 1s both;
}

.rolunk-hero--szolg-bg::before {
  background-image: url('../absztrakt-3d-hatter-arany.webp');
}
.rolunk-hero--munkak-bg::before {
  background-image: url('../absztrakt-3d-hatter-lila-arany.webp');
}

@keyframes szolg-bg-in {
  from {
    opacity: 0;
    transform: scale(1.15);
    filter: blur(24px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* Tartalom a háttérréteg felett */
.rolunk-hero--szolg-bg > *,
.rolunk-hero--munkak-bg > * {
  position: relative;
  z-index: 1;
}
/* Alsó fade — a kép szépen beleolvad a lap hátterébe */
.rolunk-hero--szolg-bg::after,
.rolunk-hero--munkak-bg::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(120px, 18vh, 220px);
  background: linear-gradient(to bottom, rgba(20, 22, 22, 0) 0%, var(--bg) 100%);
  pointer-events: none;
}



/* Két gomb térközzel */
.rolunk-hero__btns {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(24px, 3vw, 40px);
}

/* Stats sáv — jobb oldal, leírás alatt */
.rolunk-hero__stats {
  background: var(--black);          /* #0c0d0e */
  border-radius: var(--radius-sm);   /* 40px */
  height: clamp(140px, 15vw, 209px);
  display: flex;
  align-items: center;
  margin-top: clamp(32px, 4vw, 56px);
  width: 100%;
}

.rolunk-hero__stats-items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 56px);
  padding: clamp(20px, 3vw, 32px) clamp(24px, 3vw, 48px);
}

.rolunk-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rolunk-hero__stat-num {
  font-size: clamp(24px, 2.8vw, 40px);  /* Figma: 40px */
  font-weight: 400;
  line-height: 1.2;
  color: var(--white);
}

.rolunk-hero__stat-label {
  font-size: clamp(16px, 1.56vw, 30px); /* Figma: 30px Medium */
  font-weight: 500;
  line-height: 1.2;
  color: var(--white);
}

/* Jobb oszlop: szöveg */
.rolunk-hero__right {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
}

.rolunk-hero__badge {
  display: inline-flex;
  align-items: center;
  background: var(--blue);
  color: #252222;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 4px 10px;
  margin-bottom: 28px;
}

.rolunk-hero__title {
  font-size: clamp(52px, 5.2vw, 100px);  /* Figma: 100px = var(--h2) */
  font-weight: 400;
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 32px;
}

.rolunk-hero__desc {
  font-size: clamp(16px, 1.25vw, 24px);  /* Figma: 24px, line-height: 1.13 */
  line-height: 1.13;
  color: var(--white);
  max-width: 592px;
}

/* Több bekezdéses hero-leírás (works.html) — a p-knek nincs saját margója */
.rolunk-hero__desc + .rolunk-hero__desc { margin-top: 18px; }

.rolunk-hero__desc strong {
  color: var(--white);
  font-weight: 700;
}

/* ─── RESZPONZÍV ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .rolunk-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .rolunk-hero__right { order: -1; } /* szöveg előre mobilon */
}

@media (max-width: 768px) {
  .rolunk-hero__stats-items { gap: 24px; }
}

/* ─── ÉRTÉKEINK ──────────────────────────────────────────────── */
.values {
  padding: clamp(80px, 8vw, 160px) var(--pad-x);
  position: relative;
  overflow: hidden;
}

/* Háttérkép — JS animálja opacity-t és parallax translateY-t */
.values__bg {
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: 0;
  right: 0;
  background-image: url('../absztrakt-3d-hatter-turkiz.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
  will-change: transform;
}

.values__header,
.values__grid {
  position: relative;
  z-index: 1;
}

.values__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: clamp(60px, 6vw, 100px);
}

/* Animáció kezdőállapotok */
.values__title { opacity: 0; }
.values__sub   { opacity: 0; }
.values__item  { opacity: 0; transform: translateX(-50px); }

.values__title {
  font-size: var(--h2);
  font-weight: 400;
  line-height: 1.2;
  color: var(--white);
}

.values__sub {
  font-size: var(--body);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

.values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
}

.values__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(28px, 3vw, 48px) clamp(20px, 2vw, 32px);
  background: rgba(12, 13, 14, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  transition: border-color 0.3s;
  backdrop-filter: blur(6px);
}

.values__item:hover {
  border-color: rgba(255, 255, 255, 0.25);
}

/* Ikon sor — szám elrejtve, ikon balra */
.values__num-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.values__num { display: none; }   /* színes számok eltávolítva */

.values__icon {
  height: clamp(36px, 3.5vw, 56px);
  width: auto;
  display: block;
  flex-shrink: 0;
}

.values__item-title {
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 500;
  color: var(--white);
  line-height: 1.2;
}

.values__item-desc {
  font-size: var(--body);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

/* ─── CSAPAT ─────────────────────────────────────────────────── */
.team {
  padding: clamp(80px, 8vw, 160px) var(--pad-x);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.team__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 80px);
}

.team__title {
  font-size: var(--h2);
  font-weight: 400;
  line-height: 1.2;
  color: var(--white);
}

.team__sub {
  font-size: var(--body);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

/* Animáció kezdőállapotok */
.team__title  { opacity: 0; }
.team__sub    { opacity: 0; }
.team__member { opacity: 0; transform: translateX(60px); }

/* Carousel */
.team__carousel {
  overflow: hidden;
}

.team__track {
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.team__member {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* szélesség JS-ben kerül beállításra */
}

.team__photo {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--grey-dark);
}

.team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.team__member:hover .team__photo img {
  transform: scale(1.04);
}

.team__name {
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 500;
  color: var(--white);
  line-height: 1.2;
}

.team__role {
  font-size: clamp(13px, 1vw, 16px);
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.5px;
}

/* Nav — ugyanolyan mint cases__footer */
.team__nav {
  display: flex;
  align-items: center;
  margin-top: clamp(32px, 4vw, 56px);
}

/* "Más szolgáltatást keresel?" gomb a Kinek ajánlott alatt */
.services-intro__btn {
  align-self: flex-start;   /* ne nyúljon a flex-oszlop teljes szélességére */
  margin-top: clamp(20px, 2.4vw, 32px);
}

/* ─── Gyakran ismételt kérdések (FAQ accordion) ──────────────── */
.faq {
  padding: clamp(60px, 8vw, 140px) var(--pad-x);
}

.faq__header {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 64px);
}

.faq__title {
  font-size: var(--h2);
  font-weight: 400;
  line-height: 1.05;
  color: var(--white);
  margin: 0;
}

.faq__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 900px;
  margin: 0 auto;
}

/* Accordion item — ugyanolyan gradient border mint a szolgáltatás-lenyíló */
.faq__item {
  border: 1px solid transparent;
  border-radius: 40px;
  overflow: hidden;
  background:
    linear-gradient(var(--black), var(--black)) padding-box,
    linear-gradient(135deg, #B8FF34 0%, #24DEFF 50%, #6E991F 100%) border-box;
  transition: border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq__item.is-open {
  border-radius: 30px;
}

.faq__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  min-height: 56px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.faq__toggle:hover { background: rgba(184,255,52,0.04); }

.faq__q {
  font-family: var(--font);
  font-size: var(--h4);
  font-weight: 500;
  color: var(--white);
  line-height: 1.2;
}

/* + / − ikon */
.faq__icon {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.faq__icon-h,
.faq__icon-v {
  position: absolute;
  background: var(--white);
  border-radius: 1px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity   0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq__icon-h {
  width: 32px;
  height: 5.93px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.faq__icon-v {
  width: 5.93px;
  height: 32px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  transform-origin: center;
}
.faq__item.is-open .faq__icon-v {
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}

/* Accordion body — CSS grid trick a smooth height animációhoz */
.faq__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq__item.is-open .faq__body {
  grid-template-rows: 1fr;
}
.faq__body-inner {
  overflow: hidden;
}
.faq__body-inner p {
  padding: 4px 24px 20px;
  font-size: var(--body);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.3px;
  margin: 0;
}

/* ─── Kapcsolódó munkáink carousel ───────────────────────────── */
.portfolio__carousel {
  overflow: hidden;
}

.portfolio__track {
  display: flex;
  gap: clamp(32px, 4vw, 60px);
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.portfolio--carousel .portfolio__item {
  flex-shrink: 0;
  /* szélesség JS-ben kerül beállításra */
}

/* ─── SZÁMOKBAN ──────────────────────────────────────────────── */
.about-stats {
  padding: clamp(80px, 8vw, 140px) var(--pad-x);
  background: var(--black);
}

.about-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
  text-align: center;
}

.about-stats__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.about-stats__num {
  font-size: clamp(56px, 6vw, 100px);
  font-weight: 400;
  line-height: 1;
  color: var(--white);
}

.about-stats__label {
  font-size: clamp(14px, 1.1vw, 18px);
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
}

/* ─── RESZPONZÍV ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .page-hero       { grid-template-columns: 1fr; min-height: auto; }
  .page-hero__visual { display: none; }
  .values__header  { grid-template-columns: 1fr; }
  .values__grid    { grid-template-columns: repeat(2, 1fr); }
  .team__header    { grid-template-columns: 1fr; }
  .team__grid      { grid-template-columns: repeat(2, 1fr); }
  .about-stats__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .values__grid      { grid-template-columns: 1fr; }
  .team__grid        { grid-template-columns: repeat(2, 1fr); }
  .about-stats__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .team__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   MUNKAINK / ESETTANULMANYOK — fulek, wm-kartyak
   (korabban: munkak.css)
   ═══════════════════════════════════════════════════════════ */

/* ─── MUNKÁK ALOLDAL ─────────────────────────────────────────── */

/* ─── TABOS MUNKÁK ───────────────────────────────────────────── */
.wm-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1.2vw, 16px);
  margin-bottom: clamp(40px, 5vw, 72px);
}

/* Gomb-design: forgó gradiens stroke + csillanás (mint a btn-pill, nyíl nélkül) */
.wm-tab {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  background:
    linear-gradient(#000, #000) padding-box,
    conic-gradient(from var(--btn-glint),
      transparent 0%,
      transparent 86%,
      rgba(255,255,255,0.5) 90%,
      rgba(255,255,255,1) 93%,
      rgba(255,255,255,0.5) 96%,
      transparent 100%
    ) border-box,
    linear-gradient(var(--btn-angle), #B8FF34 0%, #24DEFF 50%, #6E991F 100%) border-box;
  animation: btn-border-spin 3s linear infinite,
             btn-glint-spin  5s linear infinite;
}

/* Aktív fül: tömör zöld, animáció nélkül */
.wm-tab.is-active {
  color: var(--black);
  background: var(--green);
  border-color: var(--green);
  animation: none;
}

/* Panelek */
.wm-panel { display: none; }
.wm-panel.is-active { display: block; }

.wm-panel__empty {
  font-size: var(--body);
  color: rgba(255, 255, 255, 0.55);
  padding: clamp(40px, 6vw, 100px) 0;
  text-align: center;
}


/* ─── MUNKÁK LISTA ───────────────────────────────────────────── */
.wm-list {
  padding: clamp(40px, 5vw, 80px) 0 0;
}

/* Stacking kártyák — görgetésre egymás elé csúsznak (sticky) */
.wm-card {
  position: sticky;
  top: 20px;                /* minden kártya ugyanide érkezik */
  background: var(--black);
  /* nagy alsó padding → görgetési szünet, mielőtt a következő kártya érkezik */
  padding: clamp(40px, 5vw, 72px) var(--pad-x) 28vh;
}
/* Felső gradiens vonal — mint a navbar alján */
.wm-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.5px;
  background: linear-gradient(90deg, rgba(126,126,126,0) 0%, #7E7E7E 31.25%, #7E7E7E 72.6%, rgba(126,126,126,0) 100%);
  pointer-events: none;
}

/* ── Fejléc — teljes szélességben: szám + cím + kategóriák ───── */
.wm-card__header {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  margin-bottom: clamp(20px, 2vw, 32px);
  flex-wrap: wrap;
}

.wm-card__num {
  font-size: clamp(13px, 1vw, 18px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
  min-width: 28px;
}

.wm-card__title {
  font-size: clamp(22px, 2.4vw, 40px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--white);
  flex: 1;
  min-width: 0;
}

.wm-card__tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ── Body — 2 oszlop: bal carousel, jobb kenyérszöveg ───────── */
.wm-card__body {
  display: grid;
  grid-template-columns: 1.3fr 1fr;   /* kép kisebb, szöveg nagyobb */
  gap: clamp(32px, 4vw, 72px);
  align-items: start;                 /* szöveg a kép tetejétől indul */
}

.wm-card__info {
  display: flex;
  flex-direction: row;
  gap: 16px;
  padding-top: clamp(8px, 1.5vw, 20px);  /* kis margó felülről */
  align-items: stretch;
}

/* Görgethető szövegterület — magassága a képhez igazodik (JS) */
.wm-card__desc-scroll {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  scrollbar-width: none;          /* Firefox */
}
.wm-card__desc-scroll::-webkit-scrollbar { display: none; }

.wm-card__desc {
  font-size: var(--body);
  line-height: 1.55;
  color: var(--white);
}

/* Esettanulmány-szöveg formázása */
.wm-card__desc p { margin: 0 0 14px; }
.wm-card__desc p:last-child { margin-bottom: 0; }
.wm-card__desc strong { font-weight: 700; color: var(--white); }

.wm-card__h {
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--white);
  margin: 28px 0 12px;
}

.wm-card__list,
.wm-card__meta {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Pötty a sima listáknál */
.wm-card__list li {
  position: relative;
  padding-left: 20px;
  color: rgba(255, 255, 255, 0.85);
}
.wm-card__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

/* Projektösszefoglaló — címke + érték */
.wm-card__meta li {
  color: rgba(255, 255, 255, 0.85);
}

/* CTA blokk a végén */
.wm-card__cta {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.wm-card__cta .btn-pill { margin-top: 8px; }

/* Oldalsó vezérlő: fel nyíl — csúszka — le nyíl, csak ha túllóg */
.wm-card__desc-nav {
  display: none;                  /* JS kapcsolja be ha kell */
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  width: 28px;
}

/* Csúszka sáv (szürke) */
.wm-card__desc-track {
  flex: 1;
  width: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}

/* Csúszka (fehér) */
.wm-card__desc-thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40px;
  min-height: 24px;
  background: var(--white);
  border-radius: 2px;
  cursor: grab;
}
.wm-card__desc-thumb:active { cursor: grabbing; }

.wm-card__desc-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.wm-card__desc-arrow:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
}
.wm-card__desc-arrow svg { display: block; }

.wm-card__tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--white);
  white-space: nowrap;
  /* Forgó gradiens stroke + csillanás — mint a gomboknál */
  background:
    linear-gradient(var(--black), var(--black)) padding-box,
    conic-gradient(from var(--btn-glint),
      transparent 0%,
      transparent 86%,
      rgba(255,255,255,0.5) 90%,
      rgba(255,255,255,1) 93%,
      rgba(255,255,255,0.5) 96%,
      transparent 100%
    ) border-box,
    linear-gradient(var(--btn-angle), #B8FF34 0%, #24DEFF 50%, #6E991F 100%) border-box;
  animation: btn-border-spin 3s linear infinite,
             btn-glint-spin  5s linear infinite;
}

/* ── Jobb oszlop: carousel ───────────────────────────────────── */
.wm-card__carousel-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Carousel konténer — overflow hidden, viewport-be illő magasság */
.wm-card__carousel {
  position: relative;
  border-radius: var(--radius-sm);   /* 40px */
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-height: 64vh;                  /* ne lógjon ki a képernyőből */
  background: var(--grey-dark);
}

/* Slide track */
.wm-card__track {
  display: flex;
  height: 100%;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.wm-card__track img {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Navigáció — vonal — nyilak — vonal (cases stílus) */
.wm-card__nav {
  display: flex;
  align-items: center;
}
/* Mindkét vonal egyforma szélességű → nyilak középen a kép alatt */
.wm-card__nav .cases__line,
.wm-card__nav .cases__line--sm {
  flex: 1 1 0;
}

/* ─── RESZPONZÍV ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .wm-card__body {
    grid-template-columns: 1fr;
  }
  .wm-card__carousel {
    border-radius: 24px;
  }
}

@media (max-width: 768px) {
  .wm-card__header { gap: 12px; }
  .wm-card__tags   { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   BLOG — cikk-kartyak, kategoria szuro
   (korabban: blog.css)
   ═══════════════════════════════════════════════════════════ */

/* ─── BLOG ALOLDAL ───────────────────────────────────────────── */

/* ─── NYITÓ BLOKK (cím + kenyérszöveg) ──────────────────────── */
/* Az oldal hero nélkül indul, ezért a bevezető kap felül levegőt,
   alul pedig nagyobb elválasztást a kategória-szűrőtől. */
.blog-intro {
  padding-top: clamp(48px, 5vw, 80px);
  padding-bottom: clamp(72px, 9vw, 150px);
}

/* ─── CIKK LISTA ─────────────────────────────────────────────── */
.blog {
  padding: 0 var(--pad-x) clamp(80px, 8vw, 140px);
}

.blog__tabs {
  margin-bottom: clamp(28px, 3vw, 44px);
}

.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 2.6vw, 40px);
}

/* ─── KÁRTYA ─────────────────────────────────────────────────── */
.blog__card {
  display: flex;
}
.blog__card[hidden] { display: none; }

.blog__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background:
    linear-gradient(var(--black), var(--black)) padding-box,
    linear-gradient(135deg, #B8FF34 0%, #24DEFF 50%, #6E991F 100%) border-box;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog__card:hover .blog__link { transform: translateY(-4px); }

/* Kép + kategória címke */
.blog__img-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #1e1e1e;
}

.blog__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog__card:hover .blog__img { transform: scale(1.05); }

.blog__cat {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--blue);
  color: #252222;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 10px;
}

/* Szöveges rész */
.blog__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(20px, 2vw, 28px);
}

.blog__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: clamp(12px, 0.95vw, 14px);
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 12px;
}
.blog__dot { color: rgba(255, 255, 255, 0.3); }

.blog__title {
  font-family: var(--font);
  font-size: clamp(18px, 1.5vw, 26px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--white);
  margin: 0 0 12px;
}

.blog__excerpt {
  font-size: var(--body);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 20px;
}

/* „Tovább olvasom" — a kártya aljára tapad */
.blog__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font-family: var(--font);
  font-size: var(--body);
  font-weight: 500;
  line-height: 1.2;
  color: #B8FF34;
  transition: gap 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog__more svg {
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog__card:hover .blog__more { gap: 16px; }
.blog__card:hover .blog__more svg { transform: translateX(4px); }

/* Üres állapot */
.blog__empty {
  font-size: var(--body);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin: clamp(20px, 3vw, 40px) 0 0;
}
.blog__empty[hidden] { display: none; }

/* ─── RESZPONZÍV ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .blog__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .blog__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   IDOPONTFOGLALAS — naptar, idopontok, urlap
   (korabban: foglalas.css)
   ═══════════════════════════════════════════════════════════ */

/* ─── IDŐPONTFOGLALÁS ALOLDAL ────────────────────────────────── */

/* Nyitó blokk — hero nincs, ezért felül levegő, alul elválasztás */
.booking-intro {
  padding-top: clamp(48px, 5vw, 80px);
  padding-bottom: clamp(56px, 6vw, 100px);
}

/* A cím és a kenyérszöveg egymáshoz képest függőlegesen középen */
.booking-intro .services-intro__header {
  align-items: center;
}

.booking {
  padding: 0 var(--pad-x) clamp(80px, 8vw, 140px);
}

/* ─── NAGY FEHÉR KÁRTYA — a főoldali kapcsolat blokk mintájára ── */
.booking__grid {
  background: var(--white);
  border-radius: var(--radius-lg);        /* 80px */
  padding: clamp(40px, 5vw, 84px);
  color: var(--black);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}

.booking__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Oszlopcímek — az oldal H1-e alatti szint, ezért visszafogottabb méret */
.booking__col-title {
  font-size: var(--h3);
  font-weight: 400;
  line-height: 1.15;
  color: var(--black);
  margin: 0 0 clamp(20px, 2.4vw, 32px);
}

/* ─── Mezők ──────────────────────────────────────────────────
   A .contact__* alapstílusok fehér háttérre készültek, azokat
   használjuk — csak a méretet hangoljuk vissza kicsit. */
.booking .contact__field {
  border-bottom: 1px solid rgba(12, 13, 14, 0.25);
  transition: border-color 0.25s ease;
}
.booking .contact__field:focus-within {
  border-bottom-color: var(--black);
}

.booking .contact__field input,
.booking .contact__field select,
.booking .contact__field textarea {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 500;
  color: var(--black);
  padding: clamp(13px, 1.4vw, 18px) 0;
  line-height: 1.3;
  display: block;
}

.booking .contact__field input::placeholder,
.booking .contact__field textarea::placeholder {
  color: rgba(12, 13, 14, 0.45);
}

.booking .contact__field textarea {
  resize: vertical;
  min-height: 88px;
}

/* Legördülő */
.booking__field--select {
  position: relative;
}
.booking__field--select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  cursor: pointer;
}
/* Az alapértelmezett („Válassz szolgáltatást") halványabb */
.booking__field--select select:invalid {
  color: rgba(12, 13, 14, 0.45);
}
.booking__field--select select option {
  background: var(--white);
  color: var(--black);
}
.booking__select-arrow {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.booking__select-arrow path { stroke: var(--black); }

/* Checkbox — a kapcsolat oldali fehér kártyás megjelenés */
.booking .contact__checkbox-row {
  margin-top: clamp(20px, 2.4vw, 32px);
  align-items: center;   /* négyzet és felirat egy vonalban, függőlegesen középen */
  gap: 14px;
}
.booking .contact__checkbox-box {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}
.booking .contact__checkbox-label {
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 400;
  color: rgba(12, 13, 14, 0.75);
  line-height: 1.45;
}
.booking .contact__checkbox-link {
  color: var(--black);
  text-decoration: underline;
}

/* ─── Naptár + időpontok egymás mellett ─────────────────────── */
.booking__when {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

/* ── Naptár — sötét panel a fehér kártyán (eredeti színezés) ── */
.booking__calendar {
  background: var(--black);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: clamp(14px, 1.6vw, 22px);
  min-width: 0;
}

.booking__cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.booking__cal-month {
  font-family: var(--font);
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 500;
  color: var(--white);
  text-transform: capitalize;
}

.booking__cal-nav {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(184, 255, 52, 0.35);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.booking__cal-nav:hover {
  background: rgba(184, 255, 52, 0.1);
  border-color: #B8FF34;
}
.booking__cal-nav[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Fejléc: napnevek */
.booking__cal-days,
.booking__cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.booking__cal-days { margin-bottom: 6px; }
.booking__cal-days span {
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  padding: 4px 0;
}

/* Napok */
.booking__day {
  aspect-ratio: 1;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: clamp(12px, 0.95vw, 15px);
  color: var(--white);
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.booking__day:hover:not([disabled]) {
  background: rgba(184, 255, 52, 0.12);
  border-color: rgba(184, 255, 52, 0.5);
}
.booking__day[disabled] {
  color: rgba(255, 255, 255, 0.2);
  cursor: not-allowed;
}
.booking__day--empty {
  cursor: default;
  pointer-events: none;
}
.booking__day--today {
  border-color: rgba(255, 255, 255, 0.3);
}
.booking__day.is-selected {
  background: #B8FF34;
  border-color: #B8FF34;
  color: #0c0d0e;
  font-weight: 700;
}

.booking__hint {
  font-size: clamp(11px, 0.82vw, 12px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.4);
  margin: 12px 0 0;
}

/* ── Időpontok ── */
.booking__slots {
  display: flex;
  flex-direction: column;
}

/* A címke a fehér kártyán ül, ezért sötét marad */
.booking__slots-title {
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(12, 13, 14, 0.45);
  margin-bottom: 10px;
}

.booking__slot-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Időpont-gombok — eredeti sötét pirulák zöld kiemeléssel */
.booking__slot {
  min-width: 84px;
  padding: 10px 16px;
  font-family: var(--font);
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 500;
  color: var(--white);
  background: var(--black);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-align: center;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.booking__slot:hover:not([disabled]) {
  border-color: #B8FF34;
  background: #B8FF34;
  color: #0c0d0e;
}
.booking__slot[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.booking__slot.is-selected {
  background: #B8FF34;
  border-color: #B8FF34;
  color: #0c0d0e;
  font-weight: 700;
}

/* ─── Összegzés + küldés ─────────────────────────────────────── */
/* Kiválasztott időpont — eredeti sötét panel, zöld kiemeléssel */
.booking__summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: clamp(18px, 2.2vw, 28px);
  padding: 14px 18px;
  background: var(--black);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
}

.booking__summary-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.booking__summary-value {
  font-family: var(--font);
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}
.booking__summary-value.is-set { color: #B8FF34; }

.booking__footer {
  margin-top: clamp(18px, 2.2vw, 28px);
}

.booking__error,
.booking__success {
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.5;
  margin: 14px 0 0;
}
.booking__error   { color: #C62828; }
.booking__success { color: #2E7D32; }
.booking__error[hidden],
.booking__success[hidden] { display: none; }

/* ─── RESZPONZÍV ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .booking__grid {
    grid-template-columns: 1fr;
    border-radius: var(--radius-sm);
  }
}

@media (max-width: 560px) {
  .booking__grid { padding: clamp(24px, 6vw, 40px); }
  /* Időpontok a naptár alá, több oszlopban */
  .booking__when { grid-template-columns: 1fr; }
  .booking__slot-list {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .booking__slot { flex: 1 1 84px; }
}

/* ═══════════════════════════════════════════════════════════
   FOOLDAL (fooldal_wire.pdf) — utility sav, proof, Design/Build/Grow,
   spotlight, SEO rendszer, market selector, why, european experience
   Csak a fooldal hasznalja — minden szelektor `hi-` prefixu vagy
   `.hero--wire`-re szukitett, igy a tobbi oldal erintetlen marad.
   ═══════════════════════════════════════════════════════════ */

/* ─── 02. HERO — wireframe változat ──────────────────────────── */
/* A rotáló szó a vezérfokozat: 130px (1300px felett), alatta a
   nézetablakkal skálázódik — a typewriter white-space: nowrap, tehát
   a leghosszabb szónak („SEO & Local Search") mindig ki kell férnie.
   A cím-folytatás pontosan feleakkora, ezért közös változóból számol. */
.hero--wire {
  --hero-word: clamp(30px, 9.5vw, 130px);
}
.hero--wire .hero__typewriter {
  height: auto;
  min-height: calc(var(--hero-word) * 1.1);
}
.hero--wire .hero__typewriter-word {
  font-size: var(--hero-word);
}
.hero--wire .hero__title--claim {
  font-size: calc(var(--hero-word) / 2);
  line-height: 1.05;
  letter-spacing: -0.5px;
  margin: 0 auto;
  max-width: none;
}

/* A két hero-gomb az alap .hero__cta--left / --right pozíciót használja
   (a kenyérszöveg két szélén, a videó fölött) — nincs szükség felülírásra. */

/* ── Szövegváltás görgetésre ─────────────────────────────────────
   Két változat ugyanabban a grid-cellában: a doboz mindig a hosszabbik
   szöveg magasságát veszi fel, így váltáskor semmi nem ugrik el alatta.
   Az `is-swapped` osztályt a JS teszi a .hi-swap wrapperre. */
.hi-swap {
  display: grid;
}
.hi-swap > * {
  grid-area: 1 / 1;
  align-self: start;
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              filter   0.55s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.hi-swap__b {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(10px);
  pointer-events: none;
}
.hi-swap.is-swapped .hi-swap__a {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(-10px);
  pointer-events: none;
}
.hi-swap.is-swapped .hi-swap__b {
  opacity: 1;
  filter: blur(0);
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .hi-swap > * { transition-duration: 0.01ms; }
  .hi-swap__b,
  .hi-swap.is-swapped .hi-swap__a { filter: none; transform: none; }
}

/* ─── 05. DESIGN → BUILD → GROW ──────────────────────────────── */
/* A ragadó about-blokk után indul, ezért nagyobb felső levegő kell:
   a sticky szekció az utolsó pillanatig kitölti a képernyőt. */
.hi-flow {
  padding: clamp(100px, 13vw, 260px) var(--pad-x) clamp(60px, 7vw, 120px);
}

/* ── Görgetésvezérelt kártyaváltó ────────────────────────────────
   A zóna adja a görgetési teret, a stage ragad, a kártyák egy
   grid-cellában fekszenek egymáson: a magasság a legmagasabbhoz
   igazodik, így váltáskor semmi nem ugrik el. */
/* Magasság = 100vh ragadás + kártyánként ~60vh görgetési út (3 kártya) */
.hi-stage-zone {
  height: 280vh;
  margin-top: clamp(36px, 4.5vw, 64px);
}

.hi-stage {
  position: sticky;
  top: clamp(90px, 14vh, 170px);
  display: grid;
  max-width: 920px;
  margin: 0 auto;
}

/* Középre igazított kártya — gradiens keret, mint a lenyílóknál/404-listánál */
.hi-card {
  position: relative;
  grid-area: 1 / 1;
  padding: clamp(28px, 3.4vw, 60px) clamp(22px, 3vw, 56px);
  border: 1px solid transparent;
  border-radius: 30px;
  background:
    linear-gradient(var(--black), var(--black)) padding-box,
    linear-gradient(135deg, #B8FF34 0%, #24DEFF 50%, #6E991F 100%) border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(16px, 2vw, 26px);
  align-self: start;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              filter   0.7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity, filter;
}

/* Aktív kártya: élesen, középen, legfelül */
.hi-card.is-active {
  opacity: 1;
  transform: none;
  filter: blur(0);
  pointer-events: auto;
  z-index: 5;
}

/* A többi kártya nem tűnik el: oldalt, hátrébb, elmosódva áll.
   Alapeset a távolabbi (2+ lépésre lévő) kártya. */
.hi-card.is-past,
.hi-card.is-next {
  opacity: 0.22;
  filter: blur(11px);
  pointer-events: none;
  z-index: 2;
}
.hi-card.is-past { transform: translateX(-104%) scale(0.76); }
.hi-card.is-next { transform: translateX(104%)  scale(0.76); }

/* A közvetlen szomszéd közelebb, élesebb és erősebb — így lesz mélysége
   a sornak. A data-d értékét (kártya távolsága az aktívtól) a JS írja. */
.hi-card[data-d="-1"],
.hi-card[data-d="1"] {
  opacity: 0.4;
  filter: blur(7px);
  z-index: 3;
}
.hi-card[data-d="-1"] { transform: translateX(-64%) scale(0.86); }
.hi-card[data-d="1"]  { transform: translateX(64%)  scale(0.86); }

/* ── Ikon a kártya bal felső sarkában ──────────────────────────
   A rajz az assets/icons/ közös könyvtárból jön, CSS-maszkként — így
   ugyanazok a vonalas ikonok, mint az aloldalak kártyáin, és a színt a
   badge `color`-ja adja. */
.hi-card__icon {
  position: absolute;
  /* Függőlegesen a cím első sorának közepére igazítva:
     felső padding + (a sormagasság − a doboz magassága) / 2 */
  top: calc(
    clamp(28px, 3.4vw, 60px)
    + (1.2 * clamp(22px, 2.2vw, 36px) - clamp(40px, 3.6vw, 54px)) / 2
  );
  left: clamp(22px, 3vw, 56px);       /* = a kártya bal paddingja */
  width: clamp(40px, 3.6vw, 54px);
  height: clamp(40px, 3.6vw, 54px);
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--green);
  background-color: rgba(184, 255, 52, 0.08);
  border: 1px solid rgba(184, 255, 52, 0.35);
}

/* A maszkolt rajz — kis méretben nagyobb kitöltés kell, hogy olvasható maradjon */
.hi-card__icon::before {
  content: '';
  width: 60%;
  height: 60%;
  background: currentColor;
  -webkit-mask: var(--md-icon) center / contain no-repeat;
          mask: var(--md-icon) center / contain no-repeat;
}

.hi-card__icon--design { --md-icon: url("../icons/identity.svg"); }
.hi-card__icon--build  { --md-icon: url("../icons/module.svg"); }
.hi-card__icon--grow   { --md-icon: url("../icons/analytics.svg"); }

/* A cím ne fusson bele az ikonba a bal oldalon */
.hi-card__title {
  font-size: clamp(22px, 2.2vw, 36px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--white);
  margin: 0;
  max-width: 24ch;
}
.hi-card__key { color: var(--green); }

.hi-card__desc {
  font-size: var(--body);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 62ch;
}

/* ── Felsorolás — hoverre megnő és felizzik ── */
.hi-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 4px 0 0;
  padding: 0;
}

.hi-card__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.02);
  font-size: clamp(14px, 1.1vw, 19px);
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
  /* Rugós easing — ugyanaz, mint a workflow ikonjainál */
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
              border-color 0.3s ease,
              background 0.3s ease,
              color 0.3s ease,
              box-shadow 0.35s ease;
  will-change: transform;
}
.hi-card__item:hover {
  transform: scale(1.04);
  border-color: rgba(184, 255, 52, 0.55);
  background: rgba(184, 255, 52, 0.07);
  color: var(--white);
  box-shadow: 0 0 26px rgba(184, 255, 52, 0.13);
}

.hi-card__dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--green);
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
              box-shadow 0.35s ease;
}
.hi-card__item:hover .hi-card__dot {
  transform: scale(1.7);
  box-shadow: 0 0 12px rgba(184, 255, 52, 0.9);
}

/* Önálló változat — a kártya a főoldali váltón kívül, saját szekcióban áll.
   A rácshelyet és a váltó pozicionálását nem örökli, csak a megjelenést. */
.hi-card--static {
  grid-area: auto;
  width: min(900px, 100%);
  margin-inline: auto;
  transform: none;
  filter: none;
  align-self: stretch;
  justify-content: center;
}

/* Az aloldalakon a kártya a piac/szolgáltatás akcentusszínét viszi — a
   .hi-card alap zöldjei a főoldalra vannak hangolva. */
.md-page .hi-card--static {
  background:
    linear-gradient(var(--black), var(--black)) padding-box,
    linear-gradient(135deg,
      var(--md-accent) 0%,
      color-mix(in srgb, var(--md-accent) 28%, var(--black)) 50%,
      var(--md-accent) 100%) border-box;
}

.md-page .hi-card--static .hi-card__dot { background: var(--md-accent); }

/* Halkított változat — a „nem ez az első lépés" jellegű, kizáró listákhoz.
   Semleges keret és pöttyök, hogy ne versenyezzen a fő kártyával. */
.md-page .hi-card--muted {
  background:
    linear-gradient(var(--black), var(--black)) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06)) border-box;
}

.md-page .hi-card--muted .hi-card__dot { background: rgba(255, 255, 255, 0.35); }
.md-page .hi-card--muted .hi-card__label { color: rgba(255, 255, 255, 0.7); }

.md-page .hi-card--muted .hi-card__item:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

.md-page .hi-card--muted .hi-card__item:hover .hi-card__dot {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
}

.md-page .hi-card--static .hi-card__item:hover {
  border-color: color-mix(in srgb, var(--md-accent) 55%, transparent);
  background: color-mix(in srgb, var(--md-accent) 7%, transparent);
  box-shadow: 0 0 26px color-mix(in srgb, var(--md-accent) 13%, transparent);
}

.md-page .hi-card--static .hi-card__item:hover .hi-card__dot {
  box-shadow: 0 0 12px color-mix(in srgb, var(--md-accent) 90%, transparent);
}

/* Görgetésre beúszás — a kártyák és a mellettük álló kép ugyanazzal a
   recepttel jönnek be, mint az .md-card / .flow__step: a mozgás a
   `translate`-en fut, hogy a `transform` szabadon maradjon. */
.hi-card--static,
.card-split__visual {
  opacity: 0;
  translate: 0 32px;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              translate 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.hi-card--static.is-in,
.card-split__visual.is-in {
  opacity: 1;
  translate: none;
}

@media (prefers-reduced-motion: reduce) {
  .hi-card--static,
  .card-split__visual { opacity: 1; translate: none; }
}

/* Kép + felsoroláskártya egymás mellett: bal oldalt a vizuál, jobb oldalt
   a kártya. A stretch tartja azonos magasságban a kettőt. */
.card-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: stretch;
  margin-top: clamp(32px, 4vw, 56px);
}

/* A kép abszolút tölti ki a keretet, így nem a saját képaránya szabja meg
   a sor magasságát — azt a kártya (illetve ez a minimum) adja. */
.card-split__visual {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  min-height: clamp(260px, 26vw, 400px);
}

.card-split__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ha a sorban nincs kép, hanem két kártya áll egymás mellett: mindkettő a
   saját tartalmának magasságát veszi fel, és felül kezdődik — így a rövidebb
   lista nem nyúlik végig, a tartalmak mégis egy vonalban indulnak. */
.card-split:not(:has(.card-split__visual)) .hi-card--static {
  align-self: start;
  justify-content: flex-start;
}

@media (max-width: 1024px) {
  .card-split { grid-template-columns: 1fr; }
}

/* Egy vagy több gomb — szűk helyen egymás alá tördel */
.hi-card__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 18px);
  margin-top: clamp(6px, 1.2vw, 16px);
}

@media (prefers-reduced-motion: reduce) {
  .hi-card__item:hover { transform: none; }
  .hi-card__item:hover .hi-card__dot { transform: none; }
}

/* ─── 07. WEB DESIGN & DEVELOPMENT SPOTLIGHT ─────────────────── */
.hi-spotlight {
  padding: clamp(60px, 8vw, 140px) var(--pad-x);
}

/* ─── Fejlécek: cím + mellette kenyérszöveg ──────────────────────
   A főoldalon minden ilyen páros függőlegesen középre igazul: felül
   (vagy alul) igazítva a nagy, többsoros cím mellett a bekezdés
   kibillentnek látszik. Csak a főoldalra érvényes (.page-home),
   mert ezeket a fejléceket az aloldalak is használják. */
.page-home .services-intro__header,
.page-home .services__header,
.page-home .portfolio__header,
.page-home .cases__header {
  align-items: center;
}

/* A kenyérszövegek alsó margója még az alul igazított elrendezéshez volt
   hangolva — középre igazításnál elbillentené a szöveget */
.page-home .services__sub,
.page-home .portfolio__sub,
.page-home .cases__sub {
  margin-bottom: 0;
}

/* ─── Kiemelt szórészek a címekben ───────────────────────────────
   A szekciócímeket a blur-reveal script szavakra bontja (.rbw), és
   közben eldobja a beágyazott jelölést — ezért a kiemelés a szavak
   sorrendje alapján, CSS-ből történik. */

/* „open the door" — kék */
.page-home .about__title .rbw:nth-child(4),
.page-home .about__title .rbw:nth-child(5),
.page-home .about__title .rbw:nth-child(6) {
  color: var(--blue);
}

/* „your business needs" — zöld */
.page-home .services__title .rbw:nth-child(4),
.page-home .services__title .rbw:nth-child(5),
.page-home .services__title .rbw:nth-child(6) {
  color: var(--green);
}

/* „Selected work." — sárga */
.page-home .portfolio__title .rbw:nth-child(1),
.page-home .portfolio__title .rbw:nth-child(2) {
  color: #f4d419;
}

/* „attention into action" — lila, ez a blokk akcentusa */
.hi-spotlight .services-intro__title .rbw:nth-child(5),
.hi-spotlight .services-intro__title .rbw:nth-child(6),
.hi-spotlight .services-intro__title .rbw:nth-child(7) {
  color: #d29dff;
}

/* „consistent across" — lila, a blokk hover-színével azonos */
.hi-why .services-intro__title .rbw:nth-child(6),
.hi-why .services-intro__title .rbw:nth-child(7) {
  color: #d29dff;
}

/* „connected team" — kék, a lánc csomópontjainak színe */
.hi-chain .services-intro__title .rbw:nth-child(2),
.hi-chain .services-intro__title .rbw:nth-child(3) {
  color: var(--blue);
}

/* A blokk felsorolás-pöttyei is lilák. A .wm-card__list az aloldalakon
   is használatban van, ezért csak ebben a szekcióban írjuk felül. */
.hi-spotlight .wm-card__list li::before {
  background: #d29dff;
}

.hi-spotlight__layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
  margin-top: clamp(32px, 4vw, 56px);
}

.hi-spotlight__visual {
  border-radius: var(--radius-card);   /* 60px */
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--grey-dark);
}
.hi-spotlight__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.hi-spotlight__visual:hover img { transform: scale(1.04); }

.hi-spotlight__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.hi-spotlight__lead {
  font-size: var(--body);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

/* ─── 08. SEO RENDSZER ───────────────────────────────────────── */
.hi-seo {
  padding: clamp(60px, 8vw, 140px) var(--pad-x);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* A cím első két szava („Be visible") sárga — a blokk akcentusa.
   A szavakat a blur-reveal script bontja .rbw elemekre és eldobja a
   beágyazott jelölést, ezért a sorrendjük alapján színezzük. */
.hi-seo .services-intro__title .rbw:nth-child(-n+2) {
  color: #f4d419;
}

/* ── Lépcsős kártyasor ───────────────────────────────────────────
   Minden lépés egy fokkal beljebb kezdődik: a jobb szél egy vonalban
   marad, a bal szél lépcsőzik — így a sorozat útvonalként olvasható.
   A számok a rendszer nagy, sötét vízjel-számai (mint a workflow-nál). */
.hi-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 20px);
  margin: clamp(32px, 4vw, 56px) 0 0;
  padding: 0;
  counter-reset: hi-step;
}

/* A kártya szélessége fix: így a lépcső a JOBB oldalon is látszik
   (a bal szél beljebb lép, a jobb szél vele együtt tolódik). */
.hi-steps__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 34px);
  width: calc(100% - clamp(0px, 16vw, 288px));
  padding: clamp(18px, 2vw, 30px) clamp(22px, 2.4vw, 40px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  background: var(--black);
  /* Kezdőállapot: balról úszik be. A `translate` a beúszásé, a `transform`
     a hoveré — így külön sebességgel mozoghat a kettő. */
  opacity: 0;
  translate: -80px 0;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              translate 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
              border-color 0.3s ease,
              box-shadow 0.35s ease,
              margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hi-steps__item.is-in {
  opacity: 1;
  translate: 0 0;
}

/* Lépcső — a lépésköz a nézetablakkal skálázódik */
.hi-steps__item:nth-child(2) { margin-left: clamp(0px, 4vw, 72px); }
.hi-steps__item:nth-child(3) { margin-left: clamp(0px, 8vw, 144px); }
.hi-steps__item:nth-child(4) { margin-left: clamp(0px, 12vw, 216px); }
.hi-steps__item:nth-child(5) { margin-left: clamp(0px, 16vw, 288px); }

/* Hoverre sárga körvonal — ez a blokk saját akcentusa */
.hi-steps__item:hover {
  transform: translateX(8px);
  border-color: #f4d419;
  box-shadow: 0 0 32px rgba(244, 212, 25, 0.14);
}

.hi-steps__num {
  flex-shrink: 0;
  min-width: 2ch;
  font-size: clamp(30px, 3.4vw, 56px);
  font-weight: 400;
  line-height: 1;
  color: var(--grey-mid);
  user-select: none;
  transition: color 0.35s ease, text-shadow 0.35s ease;
}
.hi-steps__item:hover .hi-steps__num {
  color: #f4d419;
  text-shadow: 0 0 18px rgba(244, 212, 25, 0.45);
}

.hi-steps__label {
  font-size: clamp(15px, 1.3vw, 22px);
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.9);
  transition: color 0.3s ease;
}
.hi-steps__item:hover .hi-steps__label { color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .hi-steps__item:hover { transform: none; }
}

/* ─── 09. PIACOK — digitális földgömb ────────────────────────
   Canvas-alapú pontraszteres gömb: a görgetés arányában fordul,
   és mindig az aktuális város régiója néz a néző felé. A pin és a
   kártya pozícióját a JS számolja a gömb elölnézeti pontjából. */
/* A szekció nem kap oldalsó paddingot: a térkép teljes szélességben fut.
   A szöveges elemek külön kapják meg a rendszer margóját. */
.hi-globe {
  padding: clamp(60px, 8vw, 140px) 0 0;
}

/* A tördelést a címben lévő <br> adja — a szélességet nem szűkítjük,
   különben a nagy fokozatú cím sok sorra esne szét. */
.hi-globe__header {
  max-width: 100%;
  margin: 0 auto;
  padding-inline: var(--pad-x);
  text-align: center;
}

/* A cím „three different" szavai zöldek. A blur-reveal script szavakra
   bontja a címet (a <br> is gyerekelem marad), ezért sorrend szerint. */
.hi-globe__header .services-intro__title .rbw:nth-child(4),
.hi-globe__header .services-intro__title .rbw:nth-child(5) {
  color: var(--green);
}

.hi-globe__zone {
  height: 300vh;          /* városonként ~100vh görgetési út */
  margin-top: clamp(24px, 3vw, 48px);
}

.hi-globe__stage {
  position: sticky;
  top: calc(var(--nav-h) + 12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
}
/* A kártya a stage-hez képest lebeg (a térkép dobozán kívül van, hogy
   mobilon a térkép ALÁ tudjon kerülni normál folyamban) */
.hi-globe__stage > .hi-globe__cards { position: absolute; }

/* Berepülés közben (bolygó → USA → Fort Myers) nincs szövegbuborék */
.hi-globe__stage.is-flying .hi-globe__cards {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s;
}
.hi-globe__stage .hi-globe__cards {
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Térképdoboz — teljes szélességben, széles döntött nézethez.
   Nagy kijelzőn a stage tölti ki a képernyőt, ott a magasságot örökli. */
.hi-globe__map {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
}

@media (min-width: 1025px) {
  .hi-globe__stage {
    top: 0;
    height: 100vh;
    justify-content: center;
  }
  .hi-globe__map {
    height: 100%;
    aspect-ratio: auto;
  }
}

.hi-globe__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Pin ── */
.hi-globe__marker {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.hi-globe__pin,
.hi-globe__pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.hi-globe__pin {
  width: 12px;
  height: 12px;
  background: var(--green);
  box-shadow: 0 0 14px rgba(184, 255, 52, 0.95),
              0 0 34px rgba(184, 255, 52, 0.45);
  z-index: 2;
}

.hi-globe__pulse {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(184, 255, 52, 0.8);
  animation: globe-pulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes globe-pulse {
  from { transform: translate(-50%, -50%) scale(1);   opacity: 0.9; }
  to   { transform: translate(-50%, -50%) scale(6.5); opacity: 0; }
}

/* ── Városkártyák a pin fölött ── */
/* A buborék függőlegesen a keret közepén ül (a JS a keret felezőpontjára
   teszi, ez a transform húzza vissza a saját magassága felével). */
.hi-globe__cards {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  width: min(520px, 82vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hi-globe__card {
  grid-area: 1 / 1;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(20px, 2.2vw, 30px) clamp(22px, 2.4vw, 34px);
  background: rgba(12, 13, 14, 0.92);
  border: 1px solid rgba(184, 255, 52, 0.35);
  border-radius: 20px;
  backdrop-filter: blur(6px);
  text-align: left;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(7px);
  /* Kilépő kártya: azonnal indul, gyorsan tisztára ürül */
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Belépő kártya: kis késleltetéssel indul, hogy a kettő ne mosódjon
   egymásba — így lágyabb az átadás. Csak az aktív kártya kattintható,
   a konténer egyébként átengedi az egeret a térkép fölött. */
.hi-globe__card.is-active {
  opacity: 1;
  transform: none;
  filter: blur(0);
  pointer-events: auto;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.18s,
              transform 0.75s cubic-bezier(0.4, 0, 0.2, 1) 0.18s,
              filter 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.18s,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}
/* Hoverre élénk zöld körvonal (csak az aktív kártya kattintható) */
.hi-globe__card.is-active:hover {
  border-color: var(--green);
  box-shadow: 0 0 34px rgba(184, 255, 52, 0.16);
}

/* Vékony vonal a kártyától a pinig — a hosszát a JS méri be (--pin-gap),
   mert a kártya magassága városonként eltér */
.hi-globe__cards::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: var(--pin-gap, 20px);
  background: linear-gradient(rgba(184, 255, 52, 0.65), rgba(184, 255, 52, 0));
}

.hi-globe__city {
  font-size: clamp(23px, 2.2vw, 34px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--white);
  margin: 0 0 10px;
}

.hi-globe__text {
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

/* Kis gomb a kártya alján — a rendszer kisgomb-receptje
   (forgó gradiens keret + csillanás), mint a lenyílóknál */
.hi-globe__btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 14px;
  padding: 10px 18px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(#000, #000) padding-box,
    conic-gradient(from var(--btn-glint),
      transparent 0%,
      transparent 86%,
      rgba(255,255,255,0.5) 90%,
      rgba(255,255,255,1) 93%,
      rgba(255,255,255,0.5) 96%,
      transparent 100%
    ) border-box,
    linear-gradient(var(--btn-angle), #B8FF34 0%, #24DEFF 50%, #6E991F 100%) border-box;
  animation: btn-border-spin 3s linear infinite,
             btn-glint-spin  5s linear infinite;
  transition: color 0.25s ease;
}
.hi-globe__btn:hover { color: var(--green); }

/* ─── 10. MUNKÁK — a fejléc két bekezdése egy oszlopban ──────── */
.portfolio__sub-col {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 20px);
}

/* ─── 11. KREATÍV — kép + szöveg + két gomb ──────────────────── */
.hi-why {
  padding: clamp(60px, 8vw, 140px) var(--pad-x);
  background: var(--black);
}

/* A rács oszlopköze megegyezik a fejlécével (40px), így az alsó
   kenyérszöveg pontosan ott kezdődik, ahol a cím melletti bekezdés. */
.hi-why__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-top: clamp(32px, 4vw, 56px);
}

/* A kép nem tölti ki az oszlopot — kisebb, balra igazítva.
   Görgetésre balról úszik be; hoverre szándékosan nem mozdul. */
.hi-why__visual {
  max-width: clamp(240px, 26vw, 420px);
  border-radius: var(--radius-card);   /* 60px */
  overflow: hidden;
  opacity: 0;
  translate: -70px 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              translate 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.hi-why__visual.is-in {
  opacity: 1;
  translate: 0 0;
}
.hi-why__visual img {
  width: 100%;
  height: auto;
  display: block;
}

/* A szöveg + gombok külön hátteres panelen.
   A panel a saját oldalpaddingjával balra lóg ki, így a SZÖVEG marad
   egy vonalban a cím melletti bekezdéssel — nem a panel széle. */
.hi-why__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.4vw, 34px);
  padding: clamp(26px, 3vw, 48px) clamp(24px, 2.8vw, 44px);
  margin-left: calc(-1 * clamp(24px, 2.8vw, 44px));
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);   /* 40px */
  /* Görgetésre jobbról úszik be — a kép tükörképeként, kis késéssel */
  opacity: 0;
  translate: 70px 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
              translate 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}
.hi-why__body.is-in {
  opacity: 1;
  translate: 0 0;
}
/* Hoverre lila körvonal — ez a blokk saját akcentusa */
.hi-why__body:hover {
  border-color: #d29dff;
  box-shadow: 0 0 34px rgba(210, 157, 255, 0.16);
}

.hi-why__lead {
  font-size: var(--body);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

/* Két gomb a kenyérszöveg alatt, egymás alatt */
.hi-why__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 1.4vw, 20px);
}

/* Záró gomb a folyamat-blokk alján */
.workflow__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(40px, 5vw, 80px);
}

/* ─── EGY CSAPAT — láncolt idővonal ──────────────────────────
   Középen futó gerincvonal, rajta világító csomópontok; a kártyák
   felváltva jobbra-balra ülnek, és a saját oldalukról úsznak be. */
.hi-chain {
  padding: clamp(60px, 8vw, 140px) var(--pad-x);
}

/* A tördelést a címben lévő <br> adja — szélességgel nem szűkítjük,
   különben a nagy fokozatú cím több sorra esne szét. */
.hi-chain__header {
  max-width: 100%;
  margin: 0 auto clamp(40px, 5vw, 72px);
  text-align: center;
}

.hi-chain__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A gerincvonal — ugyanaz a szürke, mint a folyamat-blokk nyilai (#303030) */
.hi-chain__list::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: var(--grey-mid);
}

.hi-chain__item {
  position: relative;
  display: flex;
  justify-content: flex-end;      /* páratlan: bal oldal */
  padding-right: calc(50% + clamp(28px, 3.4vw, 56px));
  margin-bottom: clamp(24px, 3vw, 44px);
}
.hi-chain__item:last-child { margin-bottom: 0; }

.hi-chain__item:nth-child(even) {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: calc(50% + clamp(28px, 3.4vw, 56px));
}

/* Csomópont a gerincen — a folyamat-idővonal .flow__dot receptje:
   kis, üres pötty, amely a beúszáskor telik meg és kezd világítani.
   A háttér kitakarja mögötte a vonalat. */
.hi-chain__node {
  position: absolute;
  top: clamp(32px, 3.9vw, 52px);
  left: 50%;
  width: 11px;
  height: 11px;
  transform: translateX(-50%);
  transform-origin: center;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid rgba(255, 255, 255, 0.28);
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
              border-color 0.35s ease,
              background 0.35s ease,
              box-shadow 0.35s ease;
}

/* Beúszáskor telt kék pötty, halvány izzással */
.hi-chain__item.is-in .hi-chain__node {
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: 0 0 14px color-mix(in srgb, var(--blue) 55%, transparent);
}

/* Hoverre megnő és erősebben világít */
.hi-chain__item:hover .hi-chain__node {
  border-color: var(--blue);
  background: var(--blue);
  transform: translateX(-50%) scale(1.45);
  box-shadow: 0 0 22px color-mix(in srgb, var(--blue) 85%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .hi-chain__item:hover .hi-chain__node { transform: translateX(-50%); }
}

.hi-chain__card {
  width: 100%;
  max-width: 560px;
  padding: clamp(22px, 2.4vw, 34px) clamp(24px, 2.6vw, 38px);
  background: var(--black);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  transition: background 0.35s ease, border-color 0.35s ease,
              box-shadow 0.35s ease;
}

/* Blokk-highlight az idővonal lépéseiről: kék tint, kék keret, kék glow.
   A tint alapja a kártya saját fekete háttere, hogy ne váljon áttetszővé. */
.hi-chain__item:hover .hi-chain__card {
  background: color-mix(in srgb, var(--blue) 7%, var(--black));
  border-color: color-mix(in srgb, var(--blue) 30%, transparent);
  box-shadow: 0 0 34px color-mix(in srgb, var(--blue) 12%, transparent);
}

.hi-chain__title {
  font-size: clamp(18px, 1.7vw, 26px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--white);
  margin: 0 0 10px;
}

.hi-chain__desc {
  font-size: clamp(13px, 1.05vw, 17px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.hi-chain__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(36px, 4vw, 64px);
}

/* Beúszás: az idővonal lépéseivel azonos — alulról, elhalványulva
   (kétirányú, ld. slideIn) */
.hi-chain__item {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              translate 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.hi-chain__item.is-in { opacity: 1; translate: none; }

@media (prefers-reduced-motion: reduce) {
  .hi-chain__item { translate: 0 0; }
}

/* ─── 13. EUROPEAN EXPERIENCE ────────────────────────────────── */
.hi-europe {
  padding: clamp(60px, 8vw, 140px) var(--pad-x);
}

.hi-europe__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 72px);
  /* A kép magasságát a bal oszlop adja: címtetőtől a gomb aljáig */
  align-items: stretch;
}

.hi-europe__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

/* Ugyanaz a fokozat, mint a szekciócímeknél (.services-intro__title) */
.hi-europe__title {
  font-size: var(--h2);
  font-weight: 400;
  line-height: 1.05;
  color: var(--white);
  margin: 0;
}
/* Ez a cím nincs a blur-reveal listában, ezért a kiemelés
   közvetlenül a jelölésből jöhet (nem sorrend szerint). */
.hi-europe__accent { color: #f4d419; }

.hi-europe__cta {
  margin-top: clamp(6px, 1vw, 14px);
}

.hi-europe__desc {
  font-size: var(--body);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* Nincs rögzített képarány: a doboz a rács sorát tölti ki, a magasságot
   a szövegoszlop szabja meg. A kép abszolút, hogy ne ő húzza a sort. */
.hi-europe__visual {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  min-height: 320px;
  background: var(--grey-dark);
}
.hi-europe__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Zöld nyilas link — a services__body-link szabad változata ── */
.hi-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-size: clamp(14px, 1.05vw, 18px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--green);
  text-decoration: none;
  transition: gap 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hi-link:hover { gap: 16px; }
.hi-link span {
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.hi-link:hover span { border-color: var(--green); }
.hi-link svg {
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hi-link:hover svg { transform: translateX(4px); }

/* ─── RESZPONZÍV ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* A kártyaváltó mobilon is görgetésre vált. A ragadást natív
     `position: sticky` adja (nem JS-es fixed), így érintéses görgetésnél
     sem remeg. A kártya tömörebb, hogy egy képernyőn elférjen. */
  .hi-stage-zone {
    height: 260vh;
    margin-top: clamp(24px, 4vw, 40px);
  }
  .hi-stage { top: calc(var(--nav-h) + 12px); }

  .hi-card { padding: 22px 18px; gap: 12px; }
  .hi-card__title { font-size: clamp(20px, 5.4vw, 26px); max-width: none; }
  .hi-card__desc  { font-size: 14px; line-height: 1.45; }
  .hi-card__list  { gap: 8px; }
  .hi-card__item  { padding: 10px 16px; font-size: 13px; }
  .hi-card__cta   { margin-top: 4px; }

  /* Keskeny kártyán az abszolút ikon belelógna a középre igazított címbe,
     ezért normál folyamba kerül, a cím fölé, bal szélre igazítva */
  .hi-card__icon {
    position: static;
    align-self: flex-start;
    margin-bottom: 2px;
  }

  .hi-globe__map     { aspect-ratio: 4 / 3; }
  .hi-spotlight__layout,
  .hi-why__layout,
  .hi-europe__inner  { grid-template-columns: 1fr; }
  .hi-spotlight__visual { aspect-ratio: 16 / 10; }
  /* Egy oszlopnál nincs mihez igazodni: visszatér a saját képaránya */
  .hi-europe__visual { aspect-ratio: 16 / 11; min-height: 0; }
}

@media (max-width: 768px) {
  .hi-why__visual { border-radius: 30px; }
  /* Egy oszlopnál a panel nem lóg ki, és kisebb a lekerekítés */
  .hi-why__body   { margin-left: 0; border-radius: 20px; }

  /* Lánc: a gerinc balra kerül, minden kártya mellé jobbra */
  .hi-chain__list::before { left: 6px; transform: none; }
  .hi-chain__item,
  .hi-chain__item:nth-child(even) {
    justify-content: flex-start;
    padding-left: 34px;
    padding-right: 0;
  }
  .hi-chain__node { left: 6px; }
  .hi-chain__card { max-width: none; border-radius: 20px; }

  /* Keskeny kijelzőn nincs lépcső — a kártyák teljes szélességben állnak */
  .hi-steps__item:nth-child(n) { margin-left: 0; }
  .hi-steps__item { width: 100%; border-radius: 20px; }

  /* Földgömb: a városkártya a gömb ALÁ kerül, normál folyamba —
     lebegve rátakarna a gömbre és becsúszna a fejléc alá */
  .hi-globe__stage > .hi-globe__cards {
    position: static;
    transform: none;
    width: min(420px, 100%);
  }
  .hi-globe__cards::after { display: none; }
  .hi-globe__zone { height: 260vh; }

  /* Lekerekítések felezve — a rendszer mobil szabálya szerint */
  .hi-card             { border-radius: 20px; }
  .hi-globe__card      { border-radius: 16px; }

  /* Hosszú gombfelirat: mobilon több sorba törhet, hogy ne lógjon ki */
  .hi-card__cta .btn-pill,
  .hi-why__cta .btn-pill,
  .hi-chain__cta .btn-pill,
  .hi-spotlight__body .btn-pill {
    white-space: normal;
    height: auto;
    min-height: 56px;
    text-align: left;
    line-height: 1.3;
  }
  .hi-spotlight__visual,
  .hi-europe__visual   { border-radius: 30px; }
}

/* ═══════════════════════════════════════════════════════════
   JOGI OLDALAK — adatvédelem, feltételek
   Egy hasábos, olvasásra tervezett szövegoldal.
   ═══════════════════════════════════════════════════════════ */
.legal {
  padding: clamp(40px, 5vw, 80px) var(--pad-x) clamp(80px, 8vw, 140px);
  /*max-width: 1040px;*/
}

.legal__header {
  margin-bottom: clamp(40px, 5vw, 72px);
}

.legal__title {
  font-size: var(--h2);
  font-weight: 400;
  line-height: 1.05;
  color: var(--white);
  margin: 0 0 18px;
}

.legal__meta {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 24px;
}

.legal__lead {
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  max-width: 780px;
}

/* Egy szakasz: vékony elválasztó vonal fölötte */
.legal__block {
  padding-top: clamp(26px, 3vw, 44px);
  margin-top: clamp(26px, 3vw, 44px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.legal__block:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.legal__h2 {
  font-size: var(--h4);
  font-weight: 500;
  line-height: 1.25;
  color: var(--white);
  margin: 0 0 16px;
}

.legal__p {
  font-size: var(--body);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 14px;
  max-width: 860px;
}
.legal__p:last-child { margin-bottom: 0; }
.legal__p strong { color: var(--white); font-weight: 500; }

.legal__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  max-width: 860px;
}
.legal__list li {
  position: relative;
  padding-left: 26px;
  font-size: var(--body);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}
.legal__list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}
.legal__list li strong { color: var(--white); font-weight: 500; }

/* Felsorolás és a rákövetkező bekezdés ne érjen össze */
.legal__list + .legal__p { margin-top: 18px; }

.legal__link {
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.legal__link:hover { border-color: var(--green); }

.legal__cta {
  display: flex;
  margin-top: clamp(40px, 5vw, 72px);
}

@media (max-width: 768px) {
  .legal__cta .btn-pill {
    white-space: normal;
    height: auto;
    min-height: 56px;
    line-height: 1.3;
    text-align: left;
  }
}

/* ═══════════════════════════════════════════════════════════
   PIACI ALOLDALAK — Fort Myers / Cape Coral / Naples
   Minden piac saját akcentusszínt kap; a szabályok a
   --md-accent változóra hivatkoznak, így a body osztálya dönt.
   ═══════════════════════════════════════════════════════════ */
.md-page             { --md-accent: var(--green); }
.md-page--purple     { --md-accent: #d29dff; }
.md-page--blue       { --md-accent: var(--blue); }
.md-page--yellow     { --md-accent: #f4d419; }

/* Pöttyös felsorolás a szövegoszlopokban */
.md-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0 0;
  padding: 0;
}
.md-list li {
  position: relative;
  padding-left: 26px;
  font-size: var(--body);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}
.md-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--md-accent);
}

/* ── Kiemelések ───────────────────────────────────────────────────
   A címek átmennek a szóbontó animációkon (script.js → .rbw,
   rolunk.js → .rh-w[data-i]), ezért az inline jelölés elveszne:
   a kiemelt szavakat sorszám szerint színezzük. */
.rolunk-hero__badge--accent { background: var(--md-accent); }

.md-t--hero .rh-w,
.md-t--expect .rbw,
.md-t--four .rbw,
.md-t--process .rbw,
.md-t--work .rbw,
.md-t--why .rbw,
.md-t--faq .rbw,
.md-workflow .workflow__title .rbw { transition: color 0.3s ease; }

/* „Digital Marketing" — hero (mindkét piaci oldalon) */
.md-t--hero .rh-w[data-i="1"],
.md-t--hero .rh-w[data-i="2"] { color: var(--md-accent); }

/* „digital presence" */
.md-t--four .rbw:nth-child(7),
.md-t--four .rbw:nth-child(8) { color: var(--md-accent); }

/* „One process," */
.md-t--process .rbw:nth-child(1),
.md-t--process .rbw:nth-child(2) { color: var(--md-accent); }

/* „explained with context" */
.md-t--work .rbw:nth-child(3),
.md-t--work .rbw:nth-child(4),
.md-t--work .rbw:nth-child(5) { color: var(--md-accent); }

/* „Why" */
.md-t--why .rbw:nth-child(1) { color: var(--md-accent); }

/* „Questions about working" */
.md-t--faq .rbw:nth-child(1),
.md-t--faq .rbw:nth-child(2),
.md-t--faq .rbw:nth-child(3) { color: var(--md-accent); }

/* Az „expect" cím kiemelése piaconként más hosszúságú */
.md-page--purple .md-t--expect .rbw:nth-child(1),   /* „What Fort" */
.md-page--purple .md-t--expect .rbw:nth-child(2),
.md-page--blue   .md-t--expect .rbw:nth-child(2),   /* „Cape Coral" */
.md-page--blue   .md-t--expect .rbw:nth-child(3),
.md-page--yellow .md-t--expect .rbw:nth-child(2) { color: var(--md-accent); }  /* „Naples" */

/* ── Webdesign aloldalak (Fort Myers / Cape Coral / Naples) ───── */
/* A hero címe piaconként más hosszúságú:
   „Webdesign & Development…" (1–3) vs. „Custom Webdesign…" (1–2) */
.md-page--purple .md-t--hero4 .rh-w[data-i="3"],
.md-page--blue   .md-t--hero4 .rh-w[data-i="3"] { color: var(--md-accent); }

.md-t--hero4 .rh-w[data-i="1"],
.md-t--hero4 .rh-w[data-i="2"],
/* „Your website" */
.md-t--cost .rbw:nth-child(1),
.md-t--cost .rbw:nth-child(2),
/* „Web design" — szolgáltatások */
.md-t--svc .rbw:nth-child(1),
.md-t--svc .rbw:nth-child(2),
/* „Development" */
.md-t--dev .rbw:nth-child(1),
/* „SEO" */
.md-t--seo .rbw:nth-child(1),
/* „From research" */
.md-t--flow .rbw:nth-child(1),
.md-t--flow .rbw:nth-child(2),
/* „Selected website" */
.md-t--work4 .rbw:nth-child(1),
.md-t--work4 .rbw:nth-child(2),
/* „Web design" — piaci kontextus */
.md-t--compete .rbw:nth-child(1),
.md-t--compete .rbw:nth-child(2),
/* „Questions about" */
.md-t--faq4 .rbw:nth-child(1),
.md-t--faq4 .rbw:nth-child(2) { color: var(--md-accent); }

/* Záró CTA kiemelt szava a piaci oldalak akcentusát veszi fel */
.md-page .cta-final__accent { color: var(--md-accent); }

/* Nem kattintható kártya: ugyanaz a stroke + glow, csak nem mutat kézre */
article.md-card { cursor: default; }

/* Folyamat: az elválasztó pontok és a lépésikonok is akcentusszínűek.
   A pont-szabály csak az „A · B · C · D" alakú címre érvényes — külön
   osztállyal jelölve, hogy más folyamatcímbe ne szivárogjon be. */
.md-t--dots .rbw:nth-child(2),
.md-t--dots .rbw:nth-child(4),
.md-t--dots .rbw:nth-child(6),
.md-t--dots .rbw:nth-child(8) { color: var(--md-accent); }

/* ── SEO aloldalak címkiemelései ──────────────────────────────── */
/* „SEO Services" */
.seo-t--hero .rh-w[data-i="1"],
.seo-t--hero .rh-w[data-i="2"],
/* „right customers" */
.seo-t--why .rbw:nth-child(3),
.seo-t--why .rbw:nth-child(4),
/* „SEO foundation," */
.seo-t--found .rbw:nth-child(3),
.seo-t--found .rbw:nth-child(4),
/* „Technical SEO:" */
.seo-t--tech .rbw:nth-child(1),
.seo-t--tech .rbw:nth-child(2),
/* „Content" */
.seo-t--content .rbw:nth-child(1),
/* „Local visibility" */
.seo-t--local .rbw:nth-child(1),
.seo-t--local .rbw:nth-child(2),
/* „What we" */
.seo-t--measure .rbw:nth-child(1),
.seo-t--measure .rbw:nth-child(2),
/* „Proof" */
.seo-t--proof .rbw:nth-child(1),
/* „Questions about SEO" */
.seo-t--faq .rbw:nth-child(1),
.seo-t--faq .rbw:nth-child(2),
.seo-t--faq .rbw:nth-child(3) { color: var(--md-accent); }

/* ── Social media aloldalak címkiemelései ─────────────────────── */
/* „Social Media Marketing" */
.sm-t--hero .rh-w[data-i="1"],
.sm-t--hero .rh-w[data-i="2"],
.sm-t--hero .rh-w[data-i="3"],
/* „Social media" */
.sm-t--dest .rbw:nth-child(1),
.sm-t--dest .rbw:nth-child(2),
/* „Strategy" */
.sm-t--strat .rbw:nth-child(1),
/* „Strategy," */
.sm-t--deliver .rbw:nth-child(1),
/* „Choose channels" */
.sm-t--channels .rbw:nth-child(1),
.sm-t--channels .rbw:nth-child(2),
/* „Organic content" */
.sm-t--paid .rbw:nth-child(1),
.sm-t--paid .rbw:nth-child(2),
/* „Content examples" */
.sm-t--examples .rbw:nth-child(1),
.sm-t--examples .rbw:nth-child(2),
/* „Reporting" */
.sm-t--report .rbw:nth-child(1),
/* „Social content" */
.sm-t--market .rbw:nth-child(1),
.sm-t--market .rbw:nth-child(2),
/* „Questions about" */
.sm-t--faq .rbw:nth-child(1),
.sm-t--faq .rbw:nth-child(2) { color: var(--md-accent); }

/* ── Logo Design gyermekoldal címkiemelései ──────────────────── */
/* „Logo Design" */
.ld-t--hero .rh-w[data-i="1"],
.ld-t--hero .rh-w[data-i="2"],
/* „A logo" */
.ld-t--why .rbw:nth-child(1),
.ld-t--why .rbw:nth-child(2),
/* „What the service" */
.ld-t--included .rbw:nth-child(1),
.ld-t--included .rbw:nth-child(2),
.ld-t--included .rbw:nth-child(3),
/* „Focused concept" */
.ld-t--concept .rbw:nth-child(1),
.ld-t--concept .rbw:nth-child(2),
/* „Responsive logo" */
.ld-t--responsive .rbw:nth-child(1),
.ld-t--responsive .rbw:nth-child(2),
/* „What changes" */
.ld-t--changes .rbw:nth-child(1),
.ld-t--changes .rbw:nth-child(2),
/* „right starting point?" */
.ld-t--fit .rbw:nth-child(4),
.ld-t--fit .rbw:nth-child(5),
.ld-t--fit .rbw:nth-child(6),
/* „How" */
.ld-t--how .rbw:nth-child(1),
/* „What you receive" */
.ld-t--deliver .rbw:nth-child(1),
.ld-t--deliver .rbw:nth-child(2),
/* „Selected work," */
.ld-t--work .rbw:nth-child(1),
.ld-t--work .rbw:nth-child(2),
/* „A practical process," */
.ld-t--trust .rbw:nth-child(1),
.ld-t--trust .rbw:nth-child(2),
.ld-t--trust .rbw:nth-child(3),
/* „Need logo design" */
.ld-t--area .rbw:nth-child(1),
.ld-t--area .rbw:nth-child(2),
.ld-t--area .rbw:nth-child(3),
/* „Related services" */
.ld-t--related .rbw:nth-child(1),
.ld-t--related .rbw:nth-child(2),
/* „Questions about" */
.ld-t--faq .rbw:nth-child(1),
.ld-t--faq .rbw:nth-child(2) { color: var(--md-accent); }

/* ═══════════════════════════════════════════════════════════
   FOLYAMAT — idővonalas elrendezés
   Bal oldalt tapadó cím, jobb oldalt függőleges vonal + pontok.
   ═══════════════════════════════════════════════════════════ */
.flow {
  padding: clamp(60px, 8vw, 140px) var(--pad-x);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.flow__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

/* Bal oszlop: görgetés közben a helyén marad */
/* Ragadós oldalsáv. A magasságát a képernyőhöz kötjük, és oszlopos flexbe
   tesszük: így a kép mindig a maradék helyet kapja, vagyis alacsonyabb
   ablakban sem lóg ki az alja. */
.flow__aside {
  position: sticky;
  top: calc(var(--nav-h) + 16px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-height: calc(100vh - var(--nav-h) - 32px);
}

/* Ahol az al-navigáció az ablak aljára tapad, annak a helyét is le kell venni,
   különben ráfekszik a kép aljára */
body:has(.subnav--bottom) .flow__aside {
  max-height: calc(100vh - var(--nav-h) - 32px - 66px);
}

.flow__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: clamp(18px, 2vw, 30px);
}
.flow__eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--md-accent);
}

.flow__title {
  font-size: var(--h2);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -1px;
  color: var(--white);
  margin: 0;
}

/* Jobb oszlop: a lista bal szélén fut a függőleges vonal */
.flow__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 clamp(26px, 3vw, 48px);
}
.flow__list::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.flow__step {
  position: relative;
  isolation: isolate;          /* a hover-panel a szöveg alatt maradjon */
  padding: clamp(28px, 3.2vw, 48px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.flow__step:first-child { border-top: none; }

/* Hover-panel: nem tolja el a szöveget, csak mögé úszik be */
.flow__step::before {
  content: '';
  position: absolute;
  inset: 8px -22px 8px -14px;
  z-index: -1;
  border-radius: 22px;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.flow__step:hover::before {
  background: color-mix(in srgb, var(--md-accent) 7%, transparent);
  border-color: color-mix(in srgb, var(--md-accent) 30%, transparent);
  box-shadow: 0 0 34px color-mix(in srgb, var(--md-accent) 12%, transparent);
}

/* Pont az idővonalon */
.flow__dot {
  position: absolute;
  left: calc(clamp(26px, 3vw, 48px) * -1 - 5px);
  top: clamp(34px, 3.6vw, 54px);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid rgba(255, 255, 255, 0.28);
  transition: border-color 0.35s ease, box-shadow 0.35s ease,
              background 0.35s ease,
              transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.flow__step.is-in .flow__dot {
  border-color: var(--md-accent);
  background: var(--md-accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--md-accent) 55%, transparent);
}
/* Hoverre a pont megnő és erősebben világít */
.flow__dot { transform-origin: center; }
.flow__step:hover .flow__dot {
  border-color: var(--md-accent);
  background: var(--md-accent);
  transform: scale(1.45);
  box-shadow: 0 0 22px color-mix(in srgb, var(--md-accent) 85%, transparent);
}

/* Sorszám + lépésnév kis chipben */
.flow__chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(14px, 1.4vw, 22px);
}
.flow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--md-accent);
  color: var(--black);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
              box-shadow 0.35s ease;
}
.flow__step:hover .flow__num {
  transform: scale(1.12);
  box-shadow: 0 0 20px color-mix(in srgb, var(--md-accent) 60%, transparent);
}

.flow__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.35s ease;
}
.flow__step:hover .flow__label { color: var(--md-accent); }

/* Referenciakép a cím alatt — a ragadós oldalsáv üres helyét tölti ki.
   Teljes oszlopszélesség; a magasságot fekvő képarány fogja meg, hogy az
   álló felvétel a címmel együtt beférjen a képernyőre, amíg a lépéslista
   mellette görög. A vágás a laptopot tartja a képkivágás közepén. */
.flow__img {
  display: block;
  width: 100%;
  height: auto;              /* különben a height attribútum nyerne */
  aspect-ratio: 5 / 4;
  flex: 0 1 auto;            /* szűk ablakban zsugorodik, nem lóg ki */
  min-height: 0;
  object-fit: cover;
  object-position: center 38%;
  margin-top: clamp(24px, 3vw, 40px);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── Kék változat — a főoldali folyamat-szekció ─────────────────
   Itt a cím és a kenyérszöveg elgörög (nem ragad), csak a
   képszekvencia marad a képernyőn — ahogy a korábbi elrendezésben.
   Az oszlopok is a régi arányt veszik vissza (1fr 1fr), így a kocka
   ugyanakkora marad, mint volt. */
.flow--blue { --md-accent: var(--blue); }

.flow--blue .flow__inner {
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 4vw, 60px);
}

.flow--blue .flow__aside {
  position: static;
  display: block;
  max-height: none;
  /* A ragadós kép csak a szülőjén belül tud elmozdulni, ezért az
     oldalsávnak a lépéslistával azonos magasságúnak kell lennie */
  align-self: stretch;
}

.flow--blue .flow__seq {
  position: sticky;
  top: 80px;
  border-radius: var(--radius-card);
  overflow: hidden;
  /* A lépés felső paddingjével azonos, hogy a kép teteje pontosan az
     első lépés sorszámával egy vonalban induljon */
  margin-top: clamp(28px, 3.2vw, 48px);
}

/* Alcím a cím alatt (a főoldalon a régi workflow__sub szövege) */
.flow__sub {
  font-size: var(--body);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: clamp(14px, 1.4vw, 20px) 0 0;
}

/* Görgetésre pörgő képszekvencia a cím alatt — a .flow__img helyén.
   A canvas abszolút tölti ki, ezért kell a méretezett, relatív szülő. */
.flow__seq {
  position: relative;
  width: 100%;
  aspect-ratio: 770 / 620;
  flex: 0 1 auto;
  min-height: 0;
  margin-top: clamp(20px, 2.4vw, 32px);
}

/* Teljes szélességű fejléc — a cím mellett nincs semmi, a két oszlop
   (kép + lépések) alatta, azonos magasságban indul */
.flow__head {
  margin-bottom: clamp(40px, 5vw, 80px);
}

/* A forgó „Lépjünk kapcsolatba" badge sora — a CTA gomb alatt, jobbra.
   A badge alsó fele belelóg a következő, sötét szekcióba: a negatív alsó
   margó a badge felét (232 / 2) veszi vissza, így a szekcióhatár pontosan
   a kör közepén fut. A z-index kell, hogy a következő szekció háttere ne
   takarja ki. */
.badge-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(16px, 1.6vw, 24px);
  margin-bottom: -116px;
}

/* A szekció alsó paddingja itt csak eltolná a kört — a záró teret maga
   a belelógó badge adja */
.portfolio:has(.badge-row) { padding-bottom: 0; }

.flow__h {
  font-size: var(--h3);
  font-weight: 400;
  line-height: 1.05;
  color: var(--white);
  margin: 0 0 14px;
}

.flow__p {
  font-size: var(--body);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 620px;
}

/* Görgetésre beúszó lépés — mindkét irányban */
.flow__step {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              translate 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.flow__step.is-in { opacity: 1; translate: none; }

@media (max-width: 1024px) {
  .flow__inner { grid-template-columns: 1fr; gap: clamp(32px, 5vw, 56px); }
  .flow__img   { max-width: 520px; }
  .flow__aside { position: static; }
}

/* ── Általános címkiemelés: data-hl="N" = az első N szó ──────────
   Így nem kell oldalanként külön szabály. A blur-reveal .rbw
   szavakra és a hero maszkolt .rh-w[data-i] szavaira is működik. */
[data-hl="1"] .rbw:nth-child(-n+1),
[data-hl="2"] .rbw:nth-child(-n+2),
[data-hl="3"] .rbw:nth-child(-n+3),
[data-hl="4"] .rbw:nth-child(-n+4),
[data-hl="1"] .rh-w[data-i="1"],
[data-hl="2"] .rh-w[data-i="1"],
[data-hl="2"] .rh-w[data-i="2"],
[data-hl="3"] .rh-w[data-i="1"],
[data-hl="3"] .rh-w[data-i="2"],
[data-hl="3"] .rh-w[data-i="3"],
[data-hl="4"] .rh-w[data-i="1"],
[data-hl="4"] .rh-w[data-i="2"],
[data-hl="4"] .rh-w[data-i="3"],
[data-hl="4"] .rh-w[data-i="4"] { color: var(--md-accent); }

/* ── Gyermekoldalak: sticky aloldal-navigáció ────────────────── */
.subnav {
  position: sticky;
  top: var(--nav-h);
  z-index: 90;
  padding: 0 var(--pad-x);
  background: rgba(20, 22, 22, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.subnav__list {
  display: flex;
  gap: clamp(18px, 2.4vw, 40px);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 16px 0;
}
.subnav__list::-webkit-scrollbar { display: none; }

.subnav__link {
  flex-shrink: 0;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.subnav__link:hover { color: var(--white); }
.subnav__link.is-active {
  color: var(--md-accent);
  border-color: var(--md-accent);
}

/* Horgonyra érkezéskor a fejléc + subnav se takarja a szakaszt */
.subnav ~ section[id],
.subnav ~ .workflow[id] { scroll-margin-top: calc(var(--nav-h) + 72px); }

/* ── Alsó változat: a sáv a képernyő aljára tapad ─────────────────
   A body `overflow: clip` miatt a sticky `bottom` nem kapaszkodik meg,
   ezért fix pozíció + a lábléc alján térkitöltő. */
.subnav--bottom {
  position: fixed;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: none;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.4);
}

/* A fix sáv ne takarja a lábléc utolsó sorát */
body:has(.subnav--bottom) .footer { padding-bottom: 108px; }

/* Fent már nincs sáv, ezért csak a fejléc magasságát kell kihagyni */
.subnav--bottom ~ section[id],
.subnav--bottom ~ .workflow[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* Hero alatti bizalmi sor */
.hero-trust {
  margin-top: clamp(18px, 1.8vw, 28px);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.4px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
  max-width: 592px;
}

/* Kiemelt felvezető mondat a szövegoszlop tetején */
.services-intro__lead {
  font-size: clamp(17px, 1.3vw, 22px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--white);
  margin: 0 0 14px;
}

/* ── Social media régiós oldal címkiemelései ─────────────────── */
/* „Social Media Marketing" */
.sm2-t--hero .rh-w[data-i="1"],
.sm2-t--hero .rh-w[data-i="2"],
.sm2-t--hero .rh-w[data-i="3"],
/* „Why social," */
.sm2-t--why .rbw:nth-child(1),
.sm2-t--why .rbw:nth-child(2),
/* „Explore our" */
.sm2-t--explore .rbw:nth-child(1),
.sm2-t--explore .rbw:nth-child(2),
/* „Strategy, reporting" */
.sm2-t--layers .rbw:nth-child(1),
.sm2-t--layers .rbw:nth-child(2),
/* „Organic and paid" */
.sm2-t--reinforce .rbw:nth-child(1),
.sm2-t--reinforce .rbw:nth-child(2),
.sm2-t--reinforce .rbw:nth-child(3),
/* „Creative is" */
.sm2-t--creative .rbw:nth-child(1),
.sm2-t--creative .rbw:nth-child(2),
/* „Reporting should" */
.sm2-t--report .rbw:nth-child(1),
.sm2-t--report .rbw:nth-child(2),
/* „What changes" */
.sm2-t--changes .rbw:nth-child(1),
.sm2-t--changes .rbw:nth-child(2),
/* „right starting point?" */
.sm2-t--fit .rbw:nth-child(4),
.sm2-t--fit .rbw:nth-child(5),
.sm2-t--fit .rbw:nth-child(6),
/* „How" */
.sm2-t--how .rbw:nth-child(1),
/* „Selected work," */
.sm2-t--work .rbw:nth-child(1),
.sm2-t--work .rbw:nth-child(2),
/* „Choose the" */
.sm2-t--markets .rbw:nth-child(1),
.sm2-t--markets .rbw:nth-child(2),
/* „Marketing work" */
.sm2-t--method .rbw:nth-child(1),
.sm2-t--method .rbw:nth-child(2),
/* „Connected services" */
.sm2-t--conn .rbw:nth-child(1),
.sm2-t--conn .rbw:nth-child(2),
/* „Questions about" */
.sm2-t--faq .rbw:nth-child(1),
.sm2-t--faq .rbw:nth-child(2) { color: var(--md-accent); }

/* ── SEO régiós oldal címkiemelései ──────────────────────────── */
/* „SEO & Local Search" */
.sx-t--hero .rh-w[data-i="1"],
.sx-t--hero .rh-w[data-i="2"],
.sx-t--hero .rh-w[data-i="3"],
.sx-t--hero .rh-w[data-i="4"],
/* „Why SEO" */
.sx-t--why .rbw:nth-child(1),
.sx-t--why .rbw:nth-child(2),
/* „Explore our" */
.sx-t--explore .rbw:nth-child(1),
.sx-t--explore .rbw:nth-child(2),
/* „Internal linking," */
.sx-t--inside .rbw:nth-child(1),
.sx-t--inside .rbw:nth-child(2),
/* „Technical foundations" */
.sx-t--tech .rbw:nth-child(1),
.sx-t--tech .rbw:nth-child(2),
/* „Content should" */
.sx-t--content .rbw:nth-child(1),
.sx-t--content .rbw:nth-child(2),
/* „Local SEO" */
.sx-t--local .rbw:nth-child(1),
.sx-t--local .rbw:nth-child(2),
/* „What changes" */
.sx-t--changes .rbw:nth-child(1),
.sx-t--changes .rbw:nth-child(2),
/* „right starting point?" */
.sx-t--fit .rbw:nth-child(4),
.sx-t--fit .rbw:nth-child(5),
.sx-t--fit .rbw:nth-child(6),
/* „How" */
.sx-t--how .rbw:nth-child(1),
/* „Selected work," */
.sx-t--work .rbw:nth-child(1),
.sx-t--work .rbw:nth-child(2),
/* „Choose the" */
.sx-t--markets .rbw:nth-child(1),
.sx-t--markets .rbw:nth-child(2),
/* „Research first," */
.sx-t--method .rbw:nth-child(1),
.sx-t--method .rbw:nth-child(2),
/* „Connected services" */
.sx-t--conn .rbw:nth-child(1),
.sx-t--conn .rbw:nth-child(2),
/* „Questions about" */
.sx-t--faq .rbw:nth-child(1),
.sx-t--faq .rbw:nth-child(2) { color: var(--md-accent); }

/* ── Web Design régiós oldal címkiemelései ───────────────────── */
/* „Webdesign & Development" */
.wd-t--hero .rh-w[data-i="1"],
.wd-t--hero .rh-w[data-i="2"],
.wd-t--hero .rh-w[data-i="3"],
/* „Why webdesign" */
.wd-t--why .rbw:nth-child(1),
.wd-t--why .rbw:nth-child(2),
/* „Explore our" */
.wd-t--explore .rbw:nth-child(1),
.wd-t--explore .rbw:nth-child(2),
/* „Custom design," */
.wd-t--logic .rbw:nth-child(1),
.wd-t--logic .rbw:nth-child(2),
/* „Structure and UX" */
.wd-t--structure .rbw:nth-child(1),
.wd-t--structure .rbw:nth-child(2),
.wd-t--structure .rbw:nth-child(3),
/* „Design and development" */
.wd-t--connectedwork .rbw:nth-child(1),
.wd-t--connectedwork .rbw:nth-child(2),
.wd-t--connectedwork .rbw:nth-child(3),
/* „Growth foundations" */
.wd-t--growth .rbw:nth-child(1),
.wd-t--growth .rbw:nth-child(2),
/* „What changes" */
.wd-t--changes .rbw:nth-child(1),
.wd-t--changes .rbw:nth-child(2),
/* „right starting point?" */
.wd-t--fit .rbw:nth-child(4),
.wd-t--fit .rbw:nth-child(5),
.wd-t--fit .rbw:nth-child(6),
/* „How" */
.wd-t--how .rbw:nth-child(1),
/* „Selected works," */
.wd-t--work .rbw:nth-child(1),
.wd-t--work .rbw:nth-child(2),
/* „Choose the" */
.wd-t--markets .rbw:nth-child(1),
.wd-t--markets .rbw:nth-child(2),
/* „A website workflow" */
.wd-t--workflow .rbw:nth-child(1),
.wd-t--workflow .rbw:nth-child(2),
.wd-t--workflow .rbw:nth-child(3),
/* „Connected services" */
.wd-t--conn .rbw:nth-child(1),
.wd-t--conn .rbw:nth-child(2),
/* „Questions about" */
.wd-t--faq .rbw:nth-child(1),
.wd-t--faq .rbw:nth-child(2) { color: var(--md-accent); }

/* ── Graphic Design régiós oldal címkiemelései ────────────────── */
/* „Graphic Design &" */
.gdm-t--hero .rh-w[data-i="1"],
.gdm-t--hero .rh-w[data-i="2"],
.gdm-t--hero .rh-w[data-i="3"],
/* „Why connected" */
.gdm-t--why .rbw:nth-child(1),
.gdm-t--why .rbw:nth-child(2),
/* „Explore our" */
.gdm-t--explore .rbw:nth-child(1),
.gdm-t--explore .rbw:nth-child(2),
/* „One visual system," */
.gdm-t--system .rbw:nth-child(1),
.gdm-t--system .rbw:nth-child(2),
.gdm-t--system .rbw:nth-child(3),
/* „Visual identity" */
.gdm-t--beyond .rbw:nth-child(1),
.gdm-t--beyond .rbw:nth-child(2),
/* „Creative built" */
.gdm-t--place .rbw:nth-child(1),
.gdm-t--place .rbw:nth-child(2),
/* „What changes" */
.gdm-t--changes .rbw:nth-child(1),
.gdm-t--changes .rbw:nth-child(2),
/* „Is this the right starting point?" — „right starting point?" */
.gdm-t--fit .rbw:nth-child(4),
.gdm-t--fit .rbw:nth-child(5),
.gdm-t--fit .rbw:nth-child(6),
/* „How" */
.gdm-t--how .rbw:nth-child(1),
/* „Selected work," */
.gdm-t--work .rbw:nth-child(1),
.gdm-t--work .rbw:nth-child(2),
/* „Looking for" */
.gdm-t--markets .rbw:nth-child(1),
.gdm-t--markets .rbw:nth-child(2),
/* „Designed for" */
.gdm-t--practical .rbw:nth-child(1),
.gdm-t--practical .rbw:nth-child(2),
/* „Connected services" */
.gdm-t--connected .rbw:nth-child(1),
.gdm-t--connected .rbw:nth-child(2),
/* „Questions about" */
.gdm-t--faq .rbw:nth-child(1),
.gdm-t--faq .rbw:nth-child(2) { color: var(--md-accent); }

/* ── Graphic design aloldalak címkiemelései ───────────────────── */
/* „Graphic Design" */
.gd-t--hero .rh-w[data-i="1"],
.gd-t--hero .rh-w[data-i="2"],
/* „Creative support" */
.gd-t--support .rbw:nth-child(1),
.gd-t--support .rbw:nth-child(2),
/* „Website visuals" */
.gd-t--web .rbw:nth-child(1),
.gd-t--web .rbw:nth-child(2),
/* „Campaign creative" */
.gd-t--campaign .rbw:nth-child(1),
.gd-t--campaign .rbw:nth-child(2),
/* „Social creative" */
.gd-t--social .rbw:nth-child(1),
.gd-t--social .rbw:nth-child(2),
/* „Logo and visual identity" */
.gd-t--identity .rbw:nth-child(1),
.gd-t--identity .rbw:nth-child(2),
.gd-t--identity .rbw:nth-child(3),
.gd-t--identity .rbw:nth-child(4),
/* „From brief" */
.gd-t--flow .rbw:nth-child(1),
.gd-t--flow .rbw:nth-child(2),
/* „Design work" */
.gd-t--work .rbw:nth-child(1),
.gd-t--work .rbw:nth-child(2),
/* „Creative designed" */
.gd-t--market .rbw:nth-child(1),
.gd-t--market .rbw:nth-child(2),
/* „Questions about" */
.gd-t--faq .rbw:nth-child(1),
.gd-t--faq .rbw:nth-child(2) { color: var(--md-accent); }

/* Felsorolásban a kiemelt mutatószám neve */
.md-list li strong { color: var(--white); font-weight: 500; }

.md-workflow .wsi-ring { stroke: var(--md-accent); }
.md-workflow .wsi-dot  { fill:   var(--md-accent); }

/* A lépéspöttyök hoverre felizzanak az akcentusszínben */
.md-workflow .workflow__step-icon {
  transition: filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.md-workflow .workflow__step:hover .workflow__step-icon {
  filter: drop-shadow(0 0 6px var(--md-accent))
          drop-shadow(0 0 18px var(--md-accent));
}

/* Négy szolgáltatás — kártyarács */
.md-services {
  padding: clamp(60px, 8vw, 140px) var(--pad-x);
}

.md-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}

/* Kártya — a főoldali .hi-steps__item receptje:
   mozgás (rugós easing) + akcentusos stroke + azonos színű glow.
   A beúszás a `translate`-en fut, a hover a `transform`-on — így a
   kettő nem üti egymást, és külön sebességgel mozoghat. */
.md-card {
  display: block;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: clamp(26px, 2.6vw, 40px);
  background: var(--black);
  opacity: 0;
  translate: 0 40px;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              translate 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
              border-color 0.3s ease,
              box-shadow 0.35s ease;
}
.md-card.is-in {
  opacity: 1;
  translate: none;
}
.md-card:hover {
  transform: translateY(-6px);
  border-color: var(--md-accent);
  box-shadow: 0 0 32px color-mix(in srgb, var(--md-accent) 16%, transparent);
}

.md-card__title {
  font-size: var(--h4);
  font-weight: 500;
  line-height: 1.2;
  color: var(--white);
  margin: 0 0 14px;
}

/* Ikonbadge a cím előtt — a főoldali .hi-card__icon receptje, csak itt a
   sorba illesztve és az akcentusváltozóból színezve. Az ikonrajz az
   assets/icons/ mappából jön, CSS-maszkként: így külön fájl marad, de a
   színt az akcentusváltozó adja (piaconként lila / kék / sárga). */
.md-card__title:has(.md-card__icon),
.md-card__title:has(.md-card__num) {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.1vw, 16px);
}

/* Sorszám a kártyacím előtt — ugyanaz a badge és ugyanaz a hover-viselkedés,
   mint a „How we work" idővonal .flow__num elemén. */
.md-card__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--md-accent);
  color: var(--black);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
              box-shadow 0.35s ease;
}

.md-card:hover .md-card__num {
  transform: scale(1.12);
  box-shadow: 0 0 20px color-mix(in srgb, var(--md-accent) 60%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .md-card:hover .md-card__num { transform: none; }
}

.md-card__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(38px, 3vw, 46px);
  height: clamp(38px, 3vw, 46px);
  border-radius: 14px;
  color: var(--md-accent);
  background: color-mix(in srgb, var(--md-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--md-accent) 35%, transparent);
  transition: background 0.35s ease, border-color 0.35s ease,
              box-shadow 0.35s ease,
              transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* A maszkolt ikonrajz — a háttér adja a színt, az SVG csak a formát */
.md-card__icon::before {
  content: '';
  width: 56%;
  height: 56%;
  background: currentColor;
  -webkit-mask: var(--md-icon) center / contain no-repeat;
          mask: var(--md-icon) center / contain no-repeat;
}

.md-card__icon--analytics                { --md-icon: url("../icons/analytics.svg"); }
.md-card__icon--architecture             { --md-icon: url("../icons/architecture.svg"); }
.md-card__icon--audience                 { --md-icon: url("../icons/audience.svg"); }
.md-card__icon--audio                    { --md-icon: url("../icons/audio.svg"); }
.md-card__icon--budget                   { --md-icon: url("../icons/budget.svg"); }
.md-card__icon--calendar                 { --md-icon: url("../icons/calendar.svg"); }
.md-card__icon--camera                   { --md-icon: url("../icons/camera.svg"); }
.md-card__icon--campaign                 { --md-icon: url("../icons/campaign.svg"); }
.md-card__icon--caption                  { --md-icon: url("../icons/caption.svg"); }
.md-card__icon--chart                    { --md-icon: url("../icons/chart.svg"); }
.md-card__icon--checklist                { --md-icon: url("../icons/checklist.svg"); }
.md-card__icon--clapper                  { --md-icon: url("../icons/clapper.svg"); }
.md-card__icon--cluster                  { --md-icon: url("../icons/cluster.svg"); }
.md-card__icon--cms                      { --md-icon: url("../icons/cms.svg"); }
.md-card__icon--concept                  { --md-icon: url("../icons/concept.svg"); }
.md-card__icon--crawl                    { --md-icon: url("../icons/crawl.svg"); }
.md-card__icon--deploy                   { --md-icon: url("../icons/deploy.svg"); }
.md-card__icon--discovery                { --md-icon: url("../icons/discovery.svg"); }
.md-card__icon--document                 { --md-icon: url("../icons/document.svg"); }
.md-card__icon--export                   { --md-icon: url("../icons/export.svg"); }
.md-card__icon--fix                      { --md-icon: url("../icons/fix.svg"); }
.md-card__icon--form                     { --md-icon: url("../icons/form.svg"); }
.md-card__icon--guidelines               { --md-icon: url("../icons/guidelines.svg"); }
.md-card__icon--handoff                  { --md-icon: url("../icons/handoff.svg"); }
.md-card__icon--hierarchy                { --md-icon: url("../icons/hierarchy.svg"); }
.md-card__icon--identity                 { --md-icon: url("../icons/identity.svg"); }
.md-card__icon--image                    { --md-icon: url("../icons/image.svg"); }
.md-card__icon--index                    { --md-icon: url("../icons/index.svg"); }
.md-card__icon--integration              { --md-icon: url("../icons/integration.svg"); }
.md-card__icon--intent                   { --md-icon: url("../icons/intent.svg"); }
.md-card__icon--interaction              { --md-icon: url("../icons/interaction.svg"); }
.md-card__icon--keyword                  { --md-icon: url("../icons/keyword.svg"); }
.md-card__icon--landing                  { --md-icon: url("../icons/landing.svg"); }
.md-card__icon--layers                   { --md-icon: url("../icons/layers.svg"); }
.md-card__icon--link                     { --md-icon: url("../icons/link.svg"); }
.md-card__icon--location                 { --md-icon: url("../icons/location.svg"); }
.md-card__icon--logo                     { --md-icon: url("../icons/logo.svg"); }
.md-card__icon--message                  { --md-icon: url("../icons/message.svg"); }
.md-card__icon--mobile                   { --md-icon: url("../icons/mobile.svg"); }
.md-card__icon--module                   { --md-icon: url("../icons/module.svg"); }
.md-card__icon--optimize                 { --md-icon: url("../icons/optimize.svg"); }
.md-card__icon--organize                 { --md-icon: url("../icons/organize.svg"); }
.md-card__icon--outline                  { --md-icon: url("../icons/outline.svg"); }
.md-card__icon--palette                  { --md-icon: url("../icons/palette.svg"); }
.md-card__icon--paths                    { --md-icon: url("../icons/paths.svg"); }
.md-card__icon--pattern                  { --md-icon: url("../icons/pattern.svg"); }
.md-card__icon--pen                      { --md-icon: url("../icons/pen.svg"); }
.md-card__icon--plugin                   { --md-icon: url("../icons/plugin.svg"); }
.md-card__icon--presentation             { --md-icon: url("../icons/presentation.svg"); }
.md-card__icon--publish                  { --md-icon: url("../icons/publish.svg"); }
.md-card__icon--qa                       { --md-icon: url("../icons/qa.svg"); }
.md-card__icon--redirect                 { --md-icon: url("../icons/redirect.svg"); }
.md-card__icon--refresh                  { --md-icon: url("../icons/refresh.svg"); }
.md-card__icon--report                   { --md-icon: url("../icons/report.svg"); }
.md-card__icon--research                 { --md-icon: url("../icons/research.svg"); }
.md-card__icon--responsive               { --md-icon: url("../icons/responsive.svg"); }
.md-card__icon--review                   { --md-icon: url("../icons/review.svg"); }
.md-card__icon--schema                   { --md-icon: url("../icons/schema.svg"); }
.md-card__icon--shot                     { --md-icon: url("../icons/shot.svg"); }
.md-card__icon--sitemap-file             { --md-icon: url("../icons/sitemap-file.svg"); }
.md-card__icon--slides                   { --md-icon: url("../icons/slides.svg"); }
.md-card__icon--spec                     { --md-icon: url("../icons/spec.svg"); }
.md-card__icon--speed                    { --md-icon: url("../icons/speed.svg"); }
.md-card__icon--template                 { --md-icon: url("../icons/template.svg"); }
.md-card__icon--testing                  { --md-icon: url("../icons/testing.svg"); }
.md-card__icon--thumbnail                { --md-icon: url("../icons/thumbnail.svg"); }
.md-card__icon--tracking                 { --md-icon: url("../icons/tracking.svg"); }
.md-card__icon--training                 { --md-icon: url("../icons/training.svg"); }
.md-card__icon--typography               { --md-icon: url("../icons/typography.svg"); }
.md-card__icon--url                      { --md-icon: url("../icons/url.svg"); }
.md-card__icon--video                    { --md-icon: url("../icons/video.svg"); }
.md-card__icon--website                  { --md-icon: url("../icons/website.svg"); }
.md-card__icon--wireframe                { --md-icon: url("../icons/wireframe.svg"); }

/* A kártya hoverére az ikon is felizzik — ugyanaz a glow, mint a stroke-on */
.md-card:hover .md-card__icon {
  transform: scale(1.08);
  background: color-mix(in srgb, var(--md-accent) 16%, transparent);
  border-color: var(--md-accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--md-accent) 30%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .md-card:hover .md-card__icon { transform: none; }
}
.md-card__desc {
  font-size: var(--body);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* Hármas rács — probléma-, piac- és kapcsolódó szolgáltatás kártyák */
.md-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* A városkártyák a saját piacuk akcentusszínét viszik — ugyanazokat az
   értékeket, mint az .md-page--* módosítók a piaci aloldalakon. Elég a
   változót átírni: a keret, a glow és a cím már erre hivatkozik. */
.md-card--fort-myers { --md-accent: #d29dff; }
.md-card--cape-coral { --md-accent: var(--blue); }
.md-card--naples     { --md-accent: #f4d419; }

.md-card--fort-myers .md-card__title,
.md-card--cape-coral .md-card__title,
.md-card--naples     .md-card__title { color: var(--md-accent); }

/* Kártyarács közvetlenül egy szövegblokk után: kisebb felső levegő */
.md-services--tight { padding-top: 0; }

/* Felsoroláscímke („A good fit if:") */
.md-list__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--md-accent);
  margin: 0 0 14px;
}
.md-list + .md-list__label { margin-top: clamp(24px, 2.6vw, 36px); }
.md-list__label--muted { color: rgba(255, 255, 255, 0.45); }
.md-list--muted li::before { background: rgba(255, 255, 255, 0.3); }

/* Projekt-kategória címke a referenciakártyákon */
.gdm-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--md-accent);
  margin-bottom: 8px;
}

/* Két elemű referenciarács */
.portfolio__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Szekciózáró gomb */
.md-cta {
  display: flex;
  margin-top: clamp(32px, 3.5vw, 56px);
}

/* A szekciózáró gombok vízszintesen középen állnak */
.md-services .md-cta,
.md-workflow .md-cta { justify-content: center; }

@media (max-width: 1024px) {
  .md-grid--3,
  .portfolio__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .md-grid,
  .md-grid--3,
  .portfolio__grid--two { grid-template-columns: 1fr; }
  .md-cta .btn-pill {
    white-space: normal;
    height: auto;
    min-height: 56px;
    line-height: 1.3;
    text-align: left;
  }
}

/* ─── GYIK — „Questions" lila + lila nyilas linkek ───────────── */
/* A .faq__title átmegy a blur-reveal szóbontáson (script.js),
   ezért az első szó csak .rbw sorszámmal színezhető. */
.page-home .faq__title .rbw:nth-child(1) { color: #d29dff; }

/* Ha link is követi a választ, kisebb a bekezdés alsó levegője */
.faq__body-inner p:not(:last-child) { padding-bottom: 12px; }

.faq__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 24px 22px;
  font-family: var(--font);
  font-size: var(--body);
  font-weight: 500;
  line-height: 1.2;
  color: #d29dff;
  text-decoration: none;
  transition: gap 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq__link:hover { gap: 16px; }

.faq__link span {
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.faq__link:hover span { border-color: #d29dff; }

.faq__link svg {
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq__link:hover svg { transform: translateX(4px); }


/* ═══════════════════════════════════════════════════════════════
   MOBIL FINOMHANGOLÁS
   A korábbi töréspontok fölé rétegzett javítások. Szándékosan a
   fájl végén: itt már minden korábbi szabályt felül tud írni.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tabletig: a folyamat-idővonal kék (főoldali) változata ──────
   A .flow--blue kétoszlopos rácsa erősebb volt, mint az általános
   1024-es egyoszlopos szabály, ezért mobilon is megmaradt. */
@media (max-width: 1024px) {
  .flow--blue .flow__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 5vw, 48px);
  }

  /* A görgetésre pörgő kockaszekvenciát mobilon nem mutatjuk: keskeny
     nézetben nem ad hozzá, viszont 35 képkockát (~467 KB) töltene le.
     A JS is ebből tudja, hogy nem kell betöltenie (nincs layout-doboza). */
  .flow--blue .flow__aside { align-self: auto; }
  .flow--blue .flow__seq { display: none; }

  /* A lenyílós szolgáltatásblokk képe: egy oszlopban nincs, ami
     magasságot adjon neki (a kép abszolút pozicionált), ezért a
     képarány tartja életben — enélkül 0 magas és eltűnik. */
  .services__layout--static .services__visual {
    aspect-ratio: 777 / 715;
    min-height: 0;
  }

  /* Egyoszlopos rácsokban az `1fr` nem tud a tartalom minimális
     szélessége alá menni, ezért egy hosszú szó kitolta a szekciót a
     képernyőből. A minmax(0,…) engedi összehúzódni. */
  .services-intro__header,
  .services__header,
  .portfolio__header,
  .cases__header,
  .workflow__layout,
  .hi-why__layout,
  .hi-europe__inner { grid-template-columns: minmax(0, 1fr); }

  /* A blur-reveal `inline-block` szavakra bontja a címeket; ezek
     alapból nem törhetnek belül, így a hosszú szavak kilógtak. */
  .services-intro__title,
  .services__title,
  .portfolio__title,
  .cases__title,
  .workflow__title,
  .faq__title,
  .flow__title,
  .about__title,
  .rolunk-hero__title,
  .hi-card__title,
  .md-card__title,
  .team__name { overflow-wrap: break-word; }

  .rbw, .rh-w { overflow-wrap: break-word; max-width: 100%; }
}

/* ── Tabletig: a hero videó pin-effektje ki van kapcsolva (ld. script.js),
   így a hozzá tartozó 300vh-s görgetési tér nagy része felesleges.
   100vh-t hagyunk, mert a következő .about-scroll-zone `-100vh` negatív
   margója pont ezt eszi meg — a kettő kioltja egymást, és nem marad üres
   görgetés. Az About saját, görgetésvezérelt animációjához viszont kell a
   zónája, ezért azt nem bántjuk (különben a szövege láthatatlan maradna). */
@media (max-width: 1024px) {
  .hero__video-zone { height: 100vh; }
}

/* Érintőképernyőn a pin szélességtől függetlenül ki van kapcsolva
   (Android tablet is ide tartozik), így ott sem kell a hosszú zóna */
@media (pointer: coarse) {
  .hero__video-zone { height: 100vh; }
}

/* Pin nélkül a videó után nem kell nagy levegő a következő blokkig:
   a hero alsó paddingja és az About beúszási zónája is rövidebb. */
@media (max-width: 1024px) {
  .hero__text-zone   { padding-bottom: 24px; }
  .about-scroll-zone { height: 150vh; }
}
@media (pointer: coarse) {
  .hero__text-zone   { padding-bottom: 24px; }
  .about-scroll-zone { height: 150vh; }
}

/* ── Hero videó beúszása pin nélkül ────────────────────────────
   A pin helyett — ahol az ki van kapcsolva — a videó egyszerűen
   beúszik és közben egy kicsit megnő, amikor a képernyőre ér.
   Csak `opacity` és `transform` animálódik egy folyamban lévő
   elemen, ezért érintéses görgetésnél sincs mit remegnie.
   Az osztályt a script.js teszi rá, épp azokon az eszközökön,
   ahol a pin nem fut — így a két logika nem csúszhat szét. */
.hero__image--reveal {
  transform: scale(0.88);
  transform-origin: center center;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero__image--reveal.is-revealed { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .hero__image--reveal,
  .hero__image--reveal.is-revealed { transform: none; }
}

/* ── Telefon ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* A pill gombok fix magasak és nowrap-ek voltak: a hosszú
     feliratok (pl. „Explore Webdesign & Development") kilógtak a
     képernyőből. Mobilon törhetnek és a tartalomhoz nőnek. */
  .btn-pill {
    white-space: normal;
    height: auto;
    min-height: 56px;
    max-width: 100%;
    line-height: 1.3;
    text-align: left;
  }

  /* A hero két gombja teljes szélességben, egymás alatt */
  .rolunk-hero__btns .btn-pill,
  .hero__cta { max-width: 100%; }

  /* About: a rács oszlopa a tartalom min-szélességére nőtt (389px),
     ezért 14 px-et kilógott. A minmax(0,…) engedi összehúzódni. */
  .about { grid-template-columns: minmax(0, 1fr); }
  .about__content {
    padding-right: var(--pad-x);
    max-width: 100%;
  }

  /* Az alsó al-navigáció vízszintesen görgethető — mobilon szűkebb
     ritmus, hogy egyszerre több pont látszódjon */
  .subnav__list {
    gap: 14px;
    scrollbar-width: none;
  }
  .subnav__list::-webkit-scrollbar { display: none; }

  /* Csapatkártyák: egy fotó egy képernyőn, olvasható mérettel */
  .team__photo { aspect-ratio: 3 / 4; }

  /* Menü: a `clamp` alsó határa (30px) telefonon aprónak hatott, pedig a
     hat menüpont alatt még ~300px üres hely maradt a social ikonokig.
     Itt a képernyő szélességéhez kötjük, saját alsó és felső határral. */
  .nav-overlay__link,
  .nav-overlay__sublink { font-size: clamp(38px, 12vw, 56px); }

  .nav-overlay__back { font-size: 17px; }

  /* ── Hero szövegek ────────────────────────────────────────────
     A gépelt szó `white-space: nowrap`, és a leghosszabb változat
     („SEO & Local Search") ~8px széles minden 1px betűméretre.
     375px-en 335px a sáv, ezért ~10,2vw a biztonságos maximum —
     efölött a szó kilógna. A cím-folytatás eddig pontosan feleakkora
     volt, ami aprónak hatott: most 1,65-ös osztóval nagyobb. */
  .hero--wire { --hero-word: clamp(32px, 10.2vw, 130px); }
  .hero--wire .hero__title--claim { font-size: calc(var(--hero-word) / 1.65); }

  .hero__sub {
    font-size: clamp(17px, 4.9vw, 24px);
    line-height: 1.35;              /* 1.13 tömör volt kis fokozathoz */
  }

  .hero-trust { font-size: 14px; letter-spacing: 1.2px; }
}

/* A badge asztalon szándékosan félig belelóg a következő, sötét
   szekcióba. Mobilon viszont a következő blokk címe („Creative that keeps
   the message consistent…") közvetlenül a szekcióhatár alatt kezdődik,
   így a kör ráülne a szövegre — ezért ott nincs átlógás, a szekció pedig
   visszakapja a normál alsó levegőjét. */
@media (max-width: 1024px) {
  .badge-row { margin-bottom: 0; }
  .portfolio:has(.badge-row) { padding-bottom: clamp(40px, 8vw, 80px); }
}

/* ── Kis telefon ────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* A felsorolás-pill kártyák szűk helyen balra zárva olvashatóbbak,
     mint középre igazítva */
  .hi-card--static .hi-card__item {
    justify-content: flex-start;
    text-align: left;
    padding: 12px 18px;
  }

  /* A lejátszásgomb köre ne nőjön a kis videódobozhoz képest túl nagyra */
  .video-play__circle { width: 56px; height: 56px; }
}