:root {
  --iris: #5B3DF5;
  --iris-glow: rgba(91, 61, 245, 0.55);
  --korall: #FF6B5A;
  --menta: #4FE0B0;
  --tinta: #14132B;
  --tinta-2: #1c1b3d;
  --homok: #FBF7F2;
  --fust: #8a8aa8;
  --vonal: rgba(255, 255, 255, 0.08);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.4, 1.45, 0.5, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: auto;
  -webkit-font-smoothing: antialiased;
  scroll-padding-top: 76px;
}
body {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--homok);
  background: var(--tinta);
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* CRT scanline overlay – diagonal lines like hatter.png */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    -35deg,
    transparent 0,
    transparent 32px,
    rgba(255, 255, 255, 0.022) 32px,
    rgba(255, 255, 255, 0.022) 33px
  );
  pointer-events: none;
  z-index: 1;
}

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

.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; }

h1, h2, h3 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--homok);
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1.02; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.15; margin-bottom: 16px; }

p { color: var(--homok); }
.muted { color: var(--fust); }

.eyebrow {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--korall);
  display: inline-block;
  margin-bottom: 18px;
}

/* "NN / Title" számozott blokk-jelölő, a cím fölött jobbra igazítva, mentazöld */
.section-num {
  display: block;
  text-align: right;
  margin: 0 0 8px;
  font-family: ui-monospace, "SF Mono", Menlo, "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--menta);
  white-space: nowrap;
  position: relative;
  opacity: 0;
}
/* A section-num--top variáns minden szekció .wrap-jának tetején, a tartalom fölött ül,
   így minden szekcióban ugyanahhoz a jobb oldali peremhez igazodik. */
.section-num.section-num--top {
  width: 100%;
  margin: 0 0 6px;
  position: relative;
  z-index: 3;
}
@media (max-width: 720px) {
  .section-num { font-size: 10px; letter-spacing: 0.14em; }
  /* Csak a rebuild szekció "0/2 Újragondolás" eyebrow-ja kap balra-igazítást + szóközt,
     a többi szekció (0/1, 0/3, 0/4, ...) megmarad eredeti jobb-igazítva. */
  .rebuild .section-num--top { text-align: left; padding-left: 8px; }
}
/* glitch / "hack-in" anim — IntersectionObserver tölti rá a .is-glitching class-t */
.section-num.is-glitching {
  animation: sectionNumGlitch 900ms steps(1, end) forwards;
}
.section-num.is-glitching::before,
.section-num.is-glitching::after {
  content: attr(data-text);
  position: absolute;
  top: 0; right: 0;
  width: 100%;
  text-align: right;
  pointer-events: none;
  mix-blend-mode: screen;
}
.section-num.is-glitching::before {
  color: #ff3b6b;
  animation: sectionNumChroma1 900ms steps(1, end) forwards;
}
.section-num.is-glitching::after {
  color: #5BE0FF;
  animation: sectionNumChroma2 900ms steps(1, end) forwards;
}
.section-num.is-settled { opacity: 1; }
@keyframes sectionNumGlitch {
  0%   { opacity: 0;   transform: translate3d(0,0,0); clip-path: inset(0 0 0 0); }
  6%   { opacity: 1;   transform: translate3d(-3px,0,0); clip-path: inset(20% 0 50% 0); }
  10%  {                transform: translate3d(2px,1px,0); clip-path: inset(60% 0 10% 0); }
  16%  {                transform: translate3d(-2px,-1px,0); clip-path: inset(0 0 75% 0); }
  22%  {                transform: translate3d(3px,0,0); clip-path: inset(40% 0 30% 0); }
  30%  {                transform: translate3d(-1px,1px,0); clip-path: inset(80% 0 5% 0); }
  40%  {                transform: translate3d(1px,0,0); clip-path: inset(10% 0 60% 0); }
  55%  {                transform: translate3d(-2px,0,0); clip-path: inset(30% 0 30% 0); }
  70%  { opacity: 0.85; transform: translate3d(0,0,0); clip-path: inset(0 0 0 0); }
  100% { opacity: 1;   transform: translate3d(0,0,0); clip-path: inset(0 0 0 0); }
}
@keyframes sectionNumChroma1 {
  0%, 70% { opacity: 1; transform: translate3d(-2px,0,0); }
  72%     { opacity: 0; transform: translate3d(0,0,0); }
  100%    { opacity: 0; }
}
@keyframes sectionNumChroma2 {
  0%, 70% { opacity: 1; transform: translate3d(2px,0,0); }
  72%     { opacity: 0; transform: translate3d(0,0,0); }
  100%    { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .section-num { opacity: 1; }
  .section-num.is-glitching { animation: none; }
  .section-num.is-glitching::before,
  .section-num.is-glitching::after { display: none; }
}

/* Általános glitch-text — bal-igazítású verzió (lead form címkékhez) */
.glitch-text { position: relative; display: inline-block; }
.glitch-text.is-glitching { animation: sectionNumGlitch 900ms steps(1, end) forwards; color: var(--menta); }
.glitch-text.is-glitching::before,
.glitch-text.is-glitching::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.glitch-text.is-glitching::before {
  color: #ff3b6b;
  animation: sectionNumChroma1 900ms steps(1, end) forwards;
}
.glitch-text.is-glitching::after {
  color: #5BE0FF;
  animation: sectionNumChroma2 900ms steps(1, end) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .glitch-text.is-glitching { animation: none; color: var(--fust); }
  .glitch-text.is-glitching::before,
  .glitch-text.is-glitching::after { display: none; }
}

/* Sima magasság-növekedés/csökkenés a "Jelenlegi oldalam" mezőhöz (grid 0fr → 1fr trükk) */
.lead-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 480ms cubic-bezier(0.2,0.8,0.2,1),
              opacity 240ms ease;
  opacity: 0;
}
.lead-collapse.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.lead-collapse__inner {
  min-height: 0;
  overflow: hidden;
}
.lead-collapse:not(.is-open) .lead-field--current { pointer-events: none; }

/* Conditional "Jelenlegi oldalam" mező hack-szerű megjelenése / eltűnése (a tartalmon, nem a magasságon) */
.lead-field--current.is-hacking-in { animation: leadFieldHackIn 520ms cubic-bezier(0.2,0.8,0.2,1) both; }
.lead-field--current.is-hacking-in textarea {
  animation: leadTextareaHackIn 600ms steps(8, end);
}
.lead-field--current.is-hacking-out { animation: leadFieldHackOut 480ms cubic-bezier(0.4,0,0.6,1) both; pointer-events: none; }
.lead-field--current.is-hacking-out textarea {
  animation: leadTextareaHackOut 480ms steps(7, end);
}
@keyframes leadFieldHackIn {
  0%   { opacity: 0; transform: translate3d(0,-6px,0); clip-path: inset(0 0 100% 0); }
  20%  { opacity: 1; clip-path: inset(0 0 60% 0); transform: translate3d(-2px,0,0); }
  35%  { clip-path: inset(40% 0 30% 0); transform: translate3d(2px,0,0); }
  55%  { clip-path: inset(10% 0 60% 0); transform: translate3d(-1px,0,0); }
  75%  { clip-path: inset(60% 0 5% 0); transform: translate3d(1px,0,0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translate3d(0,0,0); }
}
@keyframes leadFieldHackOut {
  0%   { opacity: 1; clip-path: inset(0 0 0 0); transform: translate3d(0,0,0); }
  18%  { opacity: 1; clip-path: inset(20% 0 50% 0); transform: translate3d(3px,0,0); }
  32%  { clip-path: inset(60% 0 10% 0); transform: translate3d(-2px,1px,0); filter: hue-rotate(40deg); }
  50%  { clip-path: inset(0 0 75% 0); transform: translate3d(2px,-1px,0); }
  68%  { clip-path: inset(35% 0 35% 0); transform: translate3d(-3px,0,0); opacity: 0.6; }
  85%  { clip-path: inset(0 0 95% 0); opacity: 0.25; }
  100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate3d(0,-4px,0); filter: none; }
}
@keyframes leadTextareaHackIn {
  0%   { box-shadow: inset 0 0 0 1px rgba(91,61,245,0.0), 0 0 0 0 rgba(79,224,176,0.0); }
  30%  { box-shadow: inset 0 0 0 1px rgba(255,59,107,0.55), 0 0 18px 0 rgba(91,224,255,0.45); }
  60%  { box-shadow: inset 0 0 0 1px rgba(91,224,255,0.45), 0 0 14px 0 rgba(255,59,107,0.35); }
  100% { box-shadow: inset 0 0 0 1px rgba(91,61,245,0.0), 0 0 0 0 rgba(79,224,176,0.0); }
}
@keyframes leadTextareaHackOut {
  0%   { box-shadow: inset 0 0 0 1px rgba(91,61,245,0.0), 0 0 0 0 rgba(79,224,176,0.0); }
  35%  { box-shadow: inset 0 0 0 1px rgba(91,224,255,0.55), 0 0 14px 0 rgba(255,59,107,0.40); }
  70%  { box-shadow: inset 0 0 0 1px rgba(255,59,107,0.55), 0 0 18px 0 rgba(91,224,255,0.40); }
  100% { box-shadow: inset 0 0 0 1px rgba(91,61,245,0.0), 0 0 0 0 rgba(79,224,176,0.0); }
}
@media (prefers-reduced-motion: reduce) {
  .lead-collapse { transition: none; }
  .lead-field--current.is-hacking-in,
  .lead-field--current.is-hacking-out,
  .lead-field--current.is-hacking-in textarea,
  .lead-field--current.is-hacking-out textarea { animation: none; }
}

.korall { color: var(--korall); }
.iris   { color: var(--iris); }
.menta  { color: var(--menta); }

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

/* ===== NAV (header) ===== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20, 19, 43, 0.78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--vonal);
}
.nav__inner {
  display: flex; align-items: center; justify-content: flex-start;
  height: 76px; gap: 56px;
}
.nav__brand {
  display: flex; align-items: center;
  height: 100%;
}
.nav__brand-svg {
  height: 40px;
  width: auto;
  aspect-ratio: 2712.98 / 480.71;
  display: block;
}

.nav__menu {
  display: flex; align-items: center; gap: 36px;
  list-style: none;
  transform: translateY(8px); /* lejjebb húzva, hogy a labda pattogás-ívének legyen helye fölötte */
}
.nav__menu a {
  font-size: 17px; font-weight: 600;
  color: var(--homok);
  opacity: 0.82;
  letter-spacing: 0.005em;
  transition: opacity 0.15s, color 0.15s;
}
.nav__menu a:hover { opacity: 1; color: var(--iris); }
.nav__menu a.is-active { opacity: 1; color: var(--iris); }

/* === Hamburger gomb (mobil-only) === */
.nav__hamburger {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--vonal);
  border-radius: 10px;
  cursor: pointer;
  padding: 8px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.2s, background 0.2s;
}
.nav__hamburger:hover { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); }
.nav__hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--homok);
  border-radius: 2px;
  transition: transform 0.25s var(--ease-out), opacity 0.2s;
  transform-origin: center;
}
.nav.is-menu-open .nav__hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-menu-open .nav__hamburger span:nth-child(2) { opacity: 0; }
.nav.is-menu-open .nav__hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 720px) {
  .nav__hamburger { display: flex; }
  .nav__inner { gap: 16px; }
  /* Menü mobil dropdown — a sticky nav alatt nyílik le */
  .nav__menu {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: rgba(20, 19, 43, 0.96);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0;
    border-bottom: 1px solid var(--vonal);
    transform: none;
    box-shadow: 0 16px 32px rgba(0,0,0,0.35);
  }
  .nav.is-menu-open .nav__menu { display: flex; }
  .nav__menu li { width: 100%; }
  .nav__menu a {
    display: block;
    padding: 14px 32px;
    font-size: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .nav__menu li:last-child a { border-bottom: none; }
}

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: calc(100vh - 76px);
  display: flex;
  align-items: flex-start;
  padding: 28px 0 60px;
  overflow: hidden;
}

/* arcade canvas — physics-driven iris-ball bouncing through random obstacles */
.hero__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
.hero__arcade-label {
  position: absolute;
  top: 22px; right: 32px;
  font-family: ui-monospace, "SF Mono", Menlo, "JetBrains Mono", monospace;
  font-size: 11px;
  color: rgba(127, 119, 221, 0.78);
  letter-spacing: 0.18em;
  z-index: 2;
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
}
.hero__arcade-label .blink { animation: arcadeBlink 1.05s step-end infinite; margin-left: 1px; }
@keyframes arcadeBlink { 50% { opacity: 0; } }

@media (max-width: 720px) {
  .hero__arcade-label { font-size: 10px; right: 16px; top: 14px; letter-spacing: 0.14em; }
  /* Hero háttérben futo pattogó labda mobilon kikéki — erőforrás + render-teher. */
  .hero__canvas { display: none; }
  .hero__arcade-label { display: none; }
  /* Mobilon ne legyen viewport-magasságú a hero — az audit widget után rögtön jöjjön
     a következő szekció (0/2 Újragondolás), nincs üres helyhasználat. */
  .hero { min-height: 0; padding: 28px 0 28px; }
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  row-gap: 8px;
  column-gap: 36px;
  align-items: stretch;
  width: 100%;
}
/* Hero wrap szélesebb mint a többi szekcióé, hogy a logónak legyen helye */
.hero .wrap.hero__inner { max-width: 1480px; }
.hero__inner > .section-num--top { grid-column: 1 / -1; }
.hero__inner > .hero__left { align-self: start; margin-top: -100px; }
.hero__inner > .hero__text { align-self: start; margin-top: 60px; }
@media (max-width: 880px) {
  .hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .hero__inner > .hero__left { display: contents; }
  /* Mobil sorrend: eyebrow ("0/1 webfelújító műhely"), utána h1 ("Régi oldal, új lélek"), logó, audit */
  .hero__inner > .section-num--top { order: -2; }
  .hero__inner > .hero__text { order: -1; margin-top: 0; }
  .hero__left > .hero__logo { order: 1; }
  .hero__left > .audit-widget { order: 2; }
}

/* Hero RiY logó — az audit-widget felett, közepre igazítva, nagy */
.hero__logo {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: block;
}
.hero__logo svg, .hero__logo img { width: 100%; height: auto; display: block; }
@media (max-width: 880px) { .hero__logo { max-width: 984px; } }
@media (max-width: 720px) { .hero__logo { display: none; } }

.hero__text { max-width: 480px; }
.hero__text h1 { margin-bottom: 18px; }
.hero__text h1 .korall { color: var(--korall); }
.hero__sub {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--fust);
  margin-bottom: 28px;
  line-height: 1.55;
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--iris);
  color: var(--homok);
  border: none;
  padding: 14px 26px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s var(--ease-out), box-shadow 0.2s, background 0.15s;
  box-shadow: 0 8px 24px rgba(91, 61, 245, 0.32);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(91, 61, 245, 0.45); }
.btn:active { transform: translateY(0); }
.btn--ghost {
  background: transparent;
  color: var(--homok);
  border: 1px solid var(--vonal);
  box-shadow: none;
}
.btn--ghost:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.18); box-shadow: none; }

/* ===== NAV DOT — iris ball that lives in the logo and bounces to active/hovered menu items ===== */
.nav-dot {
  position: fixed;
  top: 0; left: 0;
  width: 11px; height: 11px;
  background: var(--iris);
  border-radius: 50%;
  z-index: 60;
  pointer-events: none;
  box-shadow: 0 0 10px var(--iris-glow), 0 0 22px rgba(91, 61, 245, 0.22);
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 100%;
  will-change: transform;
  /* motion is driven by JS / WAAPI keyframes (multi-bounce arc) */
}
.nav-dot.is-init {
  /* Until first JS placement runs, hide to avoid the (0,0) flash */
  visibility: hidden;
}

/* ===== KAPCSOLAT SECTION (block 6) — same arcade-style bg as hero ===== */
.kapcsolat {
  position: relative;
  z-index: 2;
  padding: 56px 0 64px;
  background:
    repeating-linear-gradient(-35deg, transparent 0, transparent 32px, rgba(255,255,255,0.022) 32px, rgba(255,255,255,0.022) 33px),
    var(--tinta);
  overflow: hidden;
}
.kapcsolat__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
.kapcsolat .wrap { position: relative; z-index: 2; }
.kapcsolat__head {
  text-align: center;
  margin-bottom: 56px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.kapcsolat__logo {
  display: block;
  width: 240px;
  max-width: 60%;
  height: auto;
  margin: 0 auto 24px;
}
.kapcsolat__head .eyebrow {
  color: var(--korall);
  margin-bottom: 16px;
}
.kapcsolat__title {
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  line-height: 1.1;
  margin-bottom: 16px;
  color: var(--homok);
  letter-spacing: -0.02em;
}
.kapcsolat__title .iris { color: var(--iris); }
.kapcsolat__intro {
  color: var(--fust);
  font-size: 1.05rem;
  line-height: 1.6;
}
.kapcsolat__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.kapcsolat__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 24px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--vonal);
  border-radius: 16px;
  text-decoration: none;
  color: var(--homok);
  transition: transform 0.2s var(--ease-out), border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.kapcsolat__card:hover {
  transform: translateY(-4px);
  border-color: rgba(91, 61, 245, 0.45);
  background: rgba(91, 61, 245, 0.06);
  box-shadow: 0 12px 28px rgba(91, 61, 245, 0.18);
}
.kapcsolat__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(91, 61, 245, 0.14);
  border: 1px solid rgba(91, 61, 245, 0.30);
  color: var(--iris);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.kapcsolat__icon svg { width: 22px; height: 22px; display: block; }
.kapcsolat__card:hover .kapcsolat__icon {
  background: var(--iris);
  border-color: var(--iris);
  color: var(--homok);
}
.kapcsolat__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fust);
  margin-bottom: 6px;
}
.kapcsolat__value {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--homok);
  word-break: break-word;
}

@media (max-width: 880px) {
  .kapcsolat__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .kapcsolat__grid { grid-template-columns: 1fr; }
  .kapcsolat__head { margin-bottom: 36px; }
  .kapcsolat { padding: 40px 0; }
}

/* ===== FOOTER (egysoros, copyright + tagline + jogi linkek) ===== */
.site-footer {
  background: var(--tinta);
  color: var(--homok);
  padding: 18px 0;
  border-top: 1px solid var(--vonal);
  position: relative;
  z-index: 2;
}
.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 12px;
  font-size: 12px;
  color: var(--fust);
}
.site-footer__row a {
  color: var(--fust);
  text-decoration: none;
  transition: color 0.18s;
}
.site-footer__row a:hover { color: var(--menta); }
.site-footer__row .sep { opacity: 0.4; }
.site-footer__copy { font-size: 13px; }
.site-footer__tagline { font-style: italic; opacity: 0.85; }

/* ===== RIY logo SVG animation (from logo2.html, dark-bg variant) ===== */
.riy-anim .r-letter { transform: translateX(10px); animation: rSpread 1.9s cubic-bezier(0.4, 1.45, 0.5, 1) forwards; }
.riy-anim .y-letter { transform: translateX(-10px); animation: ySpread 1.9s cubic-bezier(0.4, 1.45, 0.5, 1) forwards; }
.riy-anim .i-body { transform: scaleY(0); transform-box: fill-box; transform-origin: center bottom; animation: iGrow 1.9s cubic-bezier(0.3, 1.55, 0.5, 1) forwards; }
.riy-anim .dot { transform: translateY(-150px); transform-box: fill-box; transform-origin: center; opacity: 0; animation: dotFall 1.4s forwards; }
/* Handoff: hide the SVG dot instantly so the canvas ball takes over without
   any "two dots" overlap. The canvas ball spawns at the same screen position
   with an upward velocity, so visually it's a clean baton-pass. */
.riy-anim.is-handed-off .dot { opacity: 0; animation: none; }
.riy-anim .supporting { opacity: 0; transform: translateX(-6px); animation: supportingAppear 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
.riy-anim .sup-1 { animation-delay: 1.5s; }
.riy-anim .sup-2 { animation-delay: 1.6s; }
.riy-anim .sup-3 { animation-delay: 1.7s; }

@keyframes rSpread { 0%,50%{transform:translateX(10px);} 60%{transform:translateX(-2px);} 72%,100%{transform:translateX(0);} }
@keyframes ySpread { 0%,50%{transform:translateX(-10px);} 60%{transform:translateX(2px);} 72%,100%{transform:translateX(0);} }
@keyframes iGrow { 0%,50%{transform:scaleY(0);} 60%{transform:scaleY(1.2);} 70%{transform:scaleY(0.9);} 78%{transform:scaleY(1.05);} 86%{transform:scaleY(0.98);} 100%{transform:scaleY(1);} }
@keyframes dotFall {
  0%   { transform: translateY(-150px) scale(1, 1); opacity: 0; animation-timing-function: cubic-bezier(0.45, 0, 0.95, 0.4); }
  10%  { opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.95, 0.4); }
  88%  { transform: translateY(0) scale(1, 1); animation-timing-function: cubic-bezier(0.4, 0, 0.4, 1); }
  100% { transform: translateY(3px) scale(1.4, 0.65); opacity: 1; }
}
@keyframes supportingAppear { 0%{opacity:0;transform:translateX(-6px);} 100%{opacity:1;transform:translateX(0);} }

/* ===== REBUILD SECTION (block 2) — same arcade-style bg as hero (scanlines + drifting shapes) ===== */
.rebuild {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 76px); /* exactly one viewport (minus sticky nav) — fits the snap window */
  padding: 32px 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    repeating-linear-gradient(-35deg, transparent 0, transparent 32px, rgba(255,255,255,0.022) 32px, rgba(255,255,255,0.022) 33px),
    var(--tinta);
  overflow: visible;
}
/* arcade canvas — same vibe as hero: drifting iris/coral/mint shapes (no ball, throwable iris) */
.rebuild__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
.rebuild__head { max-width: 900px; margin: 0 auto; text-align: center; padding: 0 24px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.rebuild__title {
  /* A foreignObject SVG-skálázása miatt itt nagyobb értékkel kompenzálunk,
     hogy vizuálisan együtt szóljon a services / ajanlat / kapcsolat címekkel. */
  font-size: clamp(2.2rem, 4.8vw, 3.8rem);
  line-height: 1.1;
  margin-bottom: 14px;
  position: relative;
}
.rebuild__title .iris { color: var(--iris); }
.rebuild__title .korall { color: var(--korall); }
.rebuild__title-dot {
  display: inline-block;
  width: 0.16em; height: 0.16em;
  background: var(--iris);
  border-radius: 50%;
  margin-left: 0.08em;
  vertical-align: baseline;
  box-shadow: 0 0 0.5em rgba(91, 61, 245, 0.55), 0 0 1em rgba(91, 61, 245, 0.25);
  transform-origin: 50% 100%;
  opacity: 0;
  transform: translate(120px, -100vh) scale(0.95, 1.06);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.rebuild.is-arrived .rebuild__title-dot {
  animation: titleDotThrow 2.6s linear forwards;
}
/* Per-keyframe physics easing — labda-fizika természetes ívekkel.
   PHASE 1: gravitációs zuhanás → 2× pattan → settle mint mondat-végi pont (0-67%).
   PHASE 2: windup (kis overshoot) → ív → SVG impact (67-93%) → fade-out (93-100%).
   A fade-outot a SVG iris-dot folytatja: 1.3s múlva az SVG dotPath első
   becsapódási pontjában (SVG 600,78) válik láthatóvá és viszi tovább. */
@keyframes titleDotThrow {
  /* === PHASE 1: íves gravitációs zuhanás top-right-ról === */
  /* X linear (konstans vízszintes sebesség), Y parabolikus (gravitáció), 12 keyframe a smoothságért */
  0%   { opacity: 0; transform: translate(200px, -100vh) scale(0.95, 1.06); }
  2%   { opacity: 1; transform: translate(189px, -99vh)  scale(0.95, 1.06); }
  6%   { transform: translate(166px, -97vh)  scale(0.95, 1.06); }
  10%  { transform: translate(143px, -92vh)  scale(0.95, 1.05); }
  14%  { transform: translate(120px, -84vh)  scale(0.96, 1.05); }
  18%  { transform: translate(97px,  -73vh)  scale(0.96, 1.05); }
  22%  { transform: translate(74px,  -60vh)  scale(0.97, 1.04); }
  26%  { transform: translate(51px,  -45vh)  scale(0.97, 1.04); }
  30%  { transform: translate(29px,  -27vh)  scale(0.98, 1.03); }
  32%  { transform: translate(17px,  -17vh)  scale(0.99, 1.02); }
  34%  { transform: translate(6px,   -6vh)   scale(1.0,  1.0); }
  /* Bounce sequence: 2 pattanás parabolikus Y-elosztással (y=-h*(1-(2t/T-1)²)),
     linear interpoláció, csak ütközéskor squash. 15 keyframe a smooth physikához. */
  35%  { transform: translate(0, 0)    scale(1.50, 0.55); }                         /* IMPACT 1 — dramatic landing */
  36%  { transform: translate(0, -7px) scale(1.20, 0.85); }                         /* spring rebound, relax */
  37%  { transform: translate(0, -13px) scale(1.05, 0.97); }                        /* rising */
  38.5%{ transform: translate(0, -19px) scale(1, 1); }                              /* near apex */
  41%  { transform: translate(0, -22px) scale(1, 1); }                              /* APEX 1 (peak height) */
  43.5%{ transform: translate(0, -19px) scale(1, 1); }                              /* past apex */
  45%  { transform: translate(0, -13px) scale(1, 1); }                              /* falling */
  46%  { transform: translate(0, -7px)  scale(1, 1); }                              /* falling fast */
  47%  { transform: translate(0, 0)    scale(1.20, 0.85); }                        /* IMPACT 2 — softer */
  48%  { transform: translate(0, -3px) scale(1.05, 0.97); }                        /* relaxing */
  49%  { transform: translate(0, -5px) scale(1, 1); }                              /* rising */
  51%  { transform: translate(0, -7px) scale(1, 1); }                              /* HOP APEX */
  53%  { transform: translate(0, -5px) scale(1, 1); }                              /* falling */
  54%  { transform: translate(0, -3px) scale(1, 1); }                              /* near ground */
  55%  { opacity: 1; transform: translate(0, 0) scale(1, 1); }                     /* SETTLED */
  67%  { opacity: 1; transform: translate(0, 0) scale(1, 1); }                     /* HOLD mint irásjel */
  /* === PHASE 2: throw — egyszerű parabolikus drop a SVG (600, 78) frame top-ra.
        Apex Y=-38px enyhén a start fölött, aztán leereszkedik az impactre. */
  69.5%{ transform: translate(0, 1px) scale(1.18, 0.82);                            /* windup squash */
         animation-timing-function: cubic-bezier(0.34, 1.30, 0.64, 1); }
  72%  { transform: translate(0, -4px) scale(0.92, 1.10);                           /* extension */
         animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
  74%  { transform: translate(0, 0) scale(1.08, 0.93);                              /* push-off */
         animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  78%  { transform: translate(calc(var(--titleDotEndX, 0px) * 0.20), -26px) scale(1, 1); }
  82%  { transform: translate(calc(var(--titleDotEndX, 0px) * 0.40), -38px) scale(1, 1); }     /* apex */
  85%  { transform: translate(calc(var(--titleDotEndX, 0px) * 0.55), -36px) scale(1, 1); }
  88%  { transform: translate(calc(var(--titleDotEndX, 0px) * 0.72), calc(var(--titleDotEndY, 210px) * 0.18 - 22px)) scale(1, 1); }
  91%  { transform: translate(calc(var(--titleDotEndX, 0px) * 0.88), calc(var(--titleDotEndY, 210px) * 0.62)) scale(0.97, 1.03); }
  93%  { opacity: 1; transform: translate(var(--titleDotEndX, 0px), var(--titleDotEndY, 210px)) scale(1.45, 0.6); /* IMPACT @ SVG */
         animation-timing-function: steps(1, jump-end); }                                                   /* opacity-jump nincs fade */
  93.5%{ opacity: 0; transform: translate(var(--titleDotEndX, 0px), var(--titleDotEndY, 210px)) scale(1.45, 0.6); } /* instant disappear — SVG dot átvette */
  100% { opacity: 0; transform: translate(var(--titleDotEndX, 0px), var(--titleDotEndY, 210px)) scale(1.45, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .rebuild.is-arrived .rebuild__title-dot { animation: none; opacity: 1; transform: none; }
}
.rebuild__sub {
  color: var(--fust);
  font-size: 1rem;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.55;
}

/* SVG stage — chrome (border, shadow, bg) eltávolítva mert a címsor most a SVG-n belül van.
   Reszponzív max-width: a 100vh viewport-magasságot használjuk fel — az SVG aspect-
   ratio-ja 1200/940=1.277, így ha height kell legyen kisebb mint a viewport, a width
   is csökken arányosan. min(1400px, (100vh-100px)*1.277) → mindig elfér 1 monitoron. */
.rebuild__stage {
  position: relative;
  max-width: min(1400px, calc((100vh - 100px) * 1200 / 940));
  margin: 0 auto;
  z-index: 1;
}
/* A rebuild szekcióban a wrap is szélesebb, hogy a 1400px stage elférjen */
.rebuild .wrap { max-width: 1480px; }
/* Stage ::before / ::after eltávolítva mert a címsor a SVG-n belül van.
   A scanline és iris-glow chrome más blokkokra (body::before) van hagyva. */

.rebuild-svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;                  /* max-height eltávolítva — teljes méretű SVG */
  position: relative;
  z-index: 1;
}

.rebuild__caption {
  margin: 36px auto 0;
  max-width: 640px;
  text-align: center;
  color: var(--homok);
  font-size: 1.05rem;
  line-height: 1.6;
  position: relative;
  z-index: 2;
}
.rebuild__caption strong { color: var(--korall); font-weight: 600; }
.rebuild__head { position: relative; z-index: 2; }

/* Mobil telefon-mockup SVG: alapból rejtve, csak mobilon jelenik meg */
.rebuild-svg-mobile { display: none; }

/* Mobil-only fejléc a rebuild szekcióban (a SVG foreignObject helyett) */
.rebuild__head-mobile { display: none; }
@media (max-width: 720px) {
  .rebuild {
    min-height: auto;
    justify-content: flex-start;
    padding: 24px 0 32px;
  }
  .rebuild__head-mobile {
    display: block;
    text-align: center;
    padding: 0 8px 0;
    position: relative;
    z-index: 2;
  }
  .rebuild__head-mobile .eyebrow { margin-bottom: 14px; }
  .rebuild__title-mobile {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 5vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--homok);
    margin-bottom: 16px;
  }
  .rebuild__title-mobile .iris { color: var(--iris); }
  .rebuild__caption-mobile {
    color: var(--homok);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 540px;
    margin: 0 auto;
    opacity: 0.9;
  }
  .rebuild__caption-mobile strong { font-weight: 600; color: var(--korall); }
  .rebuild__caption-mobile em { font-style: italic; }
  /* SVG-n belüli foreignObject elrejtése mobilon (a duplikált szöveg helyett) */
  .rebuild-svg foreignObject { display: none; }

  /* Mobilon a desktop SVG-t is elrejtjük, helyette telefon-mockup */
  .rebuild-svg { display: none; }
  .rebuild-svg-mobile {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  /* Mobil-iris-dot és new-el alapból rejtve */
  .rebuild-svg-mobile .new-el,
  .rebuild-svg-mobile .mobile-iris-dot { opacity: 0; }

  /* Animációk mobil SVG-n: ugyanaz az oldHide/newAppear keyframe, mobil-specifikus delay-ek */
  .rebuild-svg-mobile.is-playing .old-el { animation: oldHide 0.85s forwards; }
  .rebuild-svg-mobile.is-playing .frame-old   { animation-delay: 1.5s; }
  .rebuild-svg-mobile.is-playing .hero-old    { animation-delay: 2.6s; }
  .rebuild-svg-mobile.is-playing .card1-old   { animation-delay: 3.6s; }
  .rebuild-svg-mobile.is-playing .card2-old   { animation-delay: 4.4s; }
  .rebuild-svg-mobile.is-playing .card3-old   { animation-delay: 5.2s; }
  .rebuild-svg-mobile.is-playing .footer-old  { animation-delay: 6.0s; }

  .rebuild-svg-mobile.is-playing .new-el { animation: newAppear 0.85s cubic-bezier(0.2, 0.9, 0.3, 1.15) forwards; }
  .rebuild-svg-mobile.is-playing .frame-new   { animation-delay: 1.65s; }
  .rebuild-svg-mobile.is-playing .hero-new    { animation-delay: 2.75s; }
  .rebuild-svg-mobile.is-playing .card1-new   { animation-delay: 3.75s; }
  .rebuild-svg-mobile.is-playing .card2-new   { animation-delay: 4.55s; }
  .rebuild-svg-mobile.is-playing .card3-new   { animation-delay: 5.35s; }
  .rebuild-svg-mobile.is-playing .footer-new  { animation-delay: 6.15s; }

  /* Iris-dot path: pattogás lefelé az elemekre */
  .rebuild-svg-mobile.is-playing .mobile-iris-dot {
    animation: mobileIrisPath 7s cubic-bezier(0.4, 0, 0.6, 1) forwards;
    animation-delay: 0.8s;
  }
}

@keyframes mobileIrisPath {
  0%   { transform: translate(0, -10px); opacity: 0; }
  10%  { transform: translate(0, 70px);  opacity: 1; }
  18%  { transform: translate(0, 76px); }                /* frame impact */
  30%  { transform: translate(0, 175px); }               /* hero impact */
  44%  { transform: translate(0, 305px); }               /* card1 impact */
  56%  { transform: translate(0, 390px); }               /* card2 impact */
  68%  { transform: translate(0, 476px); }               /* card3 impact */
  82%  { transform: translate(0, 600px); opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4); } /* footer impact */
  92%  { transform: translate(0, 690px); opacity: 0.7; } /* gravitációval lepottyan */
  100% { transform: translate(0, 720px); opacity: 0; }   /* eltűnik a telefon alján */
}

/* ----- SVG element baselines (paused state — visible old, hidden new) ----- */
.rebuild-svg .new-el,
.rebuild-svg .ripple,
.rebuild-svg .iris-dot {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.rebuild-svg .iris-dot {
  will-change: transform, opacity;        /* GPU hint mindkét property-re */
  backface-visibility: hidden;
  transform: translateZ(0);                /* forced GPU layer Safari/older browsers-en */
}

/* ----- Animations only run when .is-playing is on the SVG (set by IntersectionObserver).
       12s timeline with 9 stations: frame → 3 menu pills → hero → 3 cards → footer. ----- */
.rebuild-svg.is-playing .bg-rect { animation: bgChange 1s 1.30s forwards; }
.rebuild-svg.is-playing .old-el { animation: oldHide 0.7s forwards; }
.rebuild-svg.is-playing .frame-old  { animation-delay: 1.30s; }
.rebuild-svg.is-playing .hero-old   { animation-delay: 5.20s; }
.rebuild-svg.is-playing .card3-old  { animation-delay: 6.60s; }                /* CARD 3 (right) hit FIRST */
.rebuild-svg.is-playing .card2-old  { animation-delay: 8.00s; }
.rebuild-svg.is-playing .card1-old  { animation-delay: 9.40s; }                /* CARD 1 (left) hit LAST */
.rebuild-svg.is-playing .footer-old { animation-delay: 10.80s; }
.rebuild-svg.is-playing .new-el { animation: newAppear 0.85s cubic-bezier(0.2, 0.9, 0.3, 1.15) forwards; }
.rebuild-svg.is-playing .frame-new     { animation-delay: 1.45s; }
.rebuild-svg.is-playing .munkak-new    { animation-delay: 2.30s; }
.rebuild-svg.is-playing .rolunk-new    { animation-delay: 2.90s; }
.rebuild-svg.is-playing .kapcsolat-new { animation-delay: 3.50s; }
.rebuild-svg.is-playing .hero-new      { animation-delay: 5.35s; }
.rebuild-svg.is-playing .card3-new     { animation-delay: 6.75s; }             /* CARD 3 (right) appears FIRST */
.rebuild-svg.is-playing .card2-new     { animation-delay: 8.15s; }
.rebuild-svg.is-playing .card1-new     { animation-delay: 9.55s; }             /* CARD 1 (left) appears LAST */
.rebuild-svg.is-playing .footer-new    { animation-delay: 10.95s; }
.rebuild-svg.is-playing .ripple { animation: ripple 0.85s cubic-bezier(0.1, 0.7, 0.3, 1) forwards; }
.rebuild-svg.is-playing .ripple-1         { animation-delay: 1.30s; }
.rebuild-svg.is-playing .ripple-munkak    { animation-delay: 2.20s; }
.rebuild-svg.is-playing .ripple-rolunk    { animation-delay: 2.80s; }
.rebuild-svg.is-playing .ripple-kapcsolat { animation-delay: 3.40s; }
.rebuild-svg.is-playing .ripple-2         { animation-delay: 5.20s; }
.rebuild-svg.is-playing .ripple-5         { animation-delay: 6.60s; }          /* ripple-5 at right (965), fires FIRST */
.rebuild-svg.is-playing .ripple-4         { animation-delay: 8.00s; }
.rebuild-svg.is-playing .ripple-3         { animation-delay: 9.40s; }          /* ripple-3 at left (235), fires LAST */
.rebuild-svg.is-playing .ripple-6         { animation-delay: 10.80s; }
.rebuild-svg.is-playing .iris-dot { animation: dotPath 12s linear forwards; }

@keyframes bgChange {
  0%   { fill: #1a1937; }
  35%  { fill: #181734; }
  70%  { fill: #16152F; }
  100% { fill: #14132B; }
}
@keyframes oldHide {
  0%    { opacity: 1; }
  20%   { opacity: 0.82; }
  45%   { opacity: 0.50; }
  72%   { opacity: 0.20; }
  100%  { opacity: 0; }
}
/* newAppear és ripple: a cubic-bezier timing function az ANIMATION SHORTHAND-ben
   van (newAppear: 0.2, 0.9, 0.3, 1.15 spring-out; ripple: 0.1, 0.7, 0.3, 1 ease-out).
   Ez MINDEN keyframe-szegmensre érvényes — sok keyframe-mel minden határon
   pulzálna a velocity. Ezért 2 keyframe (0% és 100%) — a cubic-bezier egyetlen
   sima görbéje vezeti az egész átmenetet. */
@keyframes newAppear {
  0%   { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes ripple {
  0%   { opacity: 0.7; transform: scale(0.05); }
  100% { opacity: 0;   transform: scale(3); }
}
@keyframes dotPath {
  /* Smooth-pass v2: flight-time mind scale(1, 1) — nincs scale-oszcilláció
     a levegőben (a labda nem deformálódik repülés közben). Impact-squash
     (1.4, 0.65) → (1.2, 0.85) lágyabb. Rebound és relax is csillapítva. */
  /* 1. FRAME top impact @ 1.3s (10.83%) — eredeti pozíció */
  0%      { transform: translate(600px, 78px) scale(1.45, 0.6); opacity: 0; }
  10%     { transform: translate(600px, 78px) scale(1.45, 0.6); opacity: 0; animation-timing-function: steps(1, jump-end); }
  10.83%  { transform: translate(600px, 78px) scale(1.45, 0.6); opacity: 1; }
  11.4%   { transform: translate(600px, 75px) scale(1.20, 0.85); opacity: 1; }
  12%     { transform: translate(600px, 70px) scale(1, 1);       opacity: 1; }
  /* 2. Arc → MUNKÁK pill @ 2.2s (18.33%) */
  13%     { transform: translate(660px, 38px)  scale(1, 1); }
  14%     { transform: translate(720px, 8px)   scale(1, 1); }
  15%     { transform: translate(782px, -2px)  scale(1, 1); }
  16%     { transform: translate(840px, -8px)  scale(1, 1); }
  17%     { transform: translate(880px, 0px)   scale(1, 1); }
  17.5%   { transform: translate(910px, 12px)  scale(1, 1); }
  18.33%  { transform: translate(919px, 26px)  scale(1.20, 0.85); }
  19%     { transform: translate(927px, 21px)  scale(1.08, 0.93); }              /* X folytat a RÓLUNK felé */
  19.5%   { transform: translate(933px, 18px)  scale(1, 1); }
  /* 3. Arc → RÓLUNK pill @ 2.8s (23.33%) */
  20.5%   { transform: translate(945px, 10px)  scale(1, 1); }
  21%     { transform: translate(960px, 7px)   scale(1, 1); }
  21.7%   { transform: translate(975px, 5px)   scale(1, 1); }
  22%     { transform: translate(985px, 9px)   scale(1, 1); }
  22.7%   { transform: translate(998px, 16px)  scale(1, 1); }
  23.33%  { transform: translate(1004px, 26px) scale(1.20, 0.85); }
  24%     { transform: translate(1014px, 22px) scale(1.08, 0.93); }              /* X folytat a KAPCSOLAT felé */
  24.5%   { transform: translate(1021px, 18px) scale(1, 1); }
  /* 4. Arc → KAPCSOLAT pill @ 3.4s (28.33%) */
  25.5%   { transform: translate(1035px, 10px) scale(1, 1); }
  26%     { transform: translate(1050px, 7px)  scale(1, 1); }
  26.7%   { transform: translate(1066px, 5px)  scale(1, 1); }
  27%     { transform: translate(1078px, 9px)  scale(1, 1); }
  27.7%   { transform: translate(1090px, 16px) scale(1, 1); }
  28.33%  { transform: translate(1096px, 26px) scale(1.20, 0.85); }
  29%     { transform: translate(1074px, 22px) scale(1.08, 0.93); }              /* X folytat a HERO felé (balra) */
  29.5%   { transform: translate(1058px, 18px) scale(1, 1); }
  /* 5. Big arc back left + down → HERO @ 5.2s (43.33%) */
  31%     { transform: translate(1010px, -5px) scale(1, 1); }
  33%     { transform: translate(850px, -12px) scale(1, 1); }
  35%     { transform: translate(680px, -10px) scale(1, 1); }
  37%     { transform: translate(530px, 30px)  scale(1, 1); }
  39%     { transform: translate(380px, 90px)  scale(1, 1); }
  40.5%   { transform: translate(330px, 145px) scale(1, 1); }
  41.5%   { transform: translate(280px, 200px) scale(1, 1); }
  42.5%   { transform: translate(263px, 220px) scale(1, 1); }
  43.33%  { transform: translate(250px, 233px) scale(1.20, 0.85); }              /* HERO IMPACT */
  44%     { transform: translate(291px, 200px) scale(1.08, 0.93); }              /* X konstans 61.3, Y parabolikus */
  44.5%   { transform: translate(322px, 178px) scale(1, 1); }
  /* 6. NEW Arc → CARD 3 @ 6.6s (55%) — magas íves pálya jobbra fel az "Is Yours" fölé,
        apex Y=80 (a SVG felső harmadában), aztán le a CARD 3-ra (jobb szélen) */
  45.5%   { transform: translate(383px, 140px) scale(1, 1); }
  46.5%   { transform: translate(444px, 112px) scale(1, 1); }
  48%     { transform: translate(536px, 86px)  scale(1, 1); }
  49.5%   { transform: translate(628px, 81px)  scale(1, 1); }                    /* APEX area (peak Y=80) */
  51%     { transform: translate(720px, 116px) scale(1, 1); }
  52.5%   { transform: translate(812px, 198px) scale(1, 1); }
  53.5%   { transform: translate(873px, 280px) scale(1, 1); }
  54%     { transform: translate(904px, 329px) scale(1, 1); }
  54.5%   { transform: translate(935px, 383px) scale(1, 1); }
  55%     { transform: translate(965px, 442px) scale(1.20, 0.85); }              /* CARD 3 IMPACT */
  55.5%   { transform: translate(949px, 437px) scale(1.08, 0.93); }              /* X konstans -31.3 a CARD 2 felé */
  56%     { transform: translate(934px, 432px) scale(1, 1); }
  /* 7. CARD 3 → CARD 2 @ 8.0s (66.67%) — FÉLKÖR: y = 442 - sqrt(182.5² - (x-782.5)²) */
  58.5%   { transform: translate(855px, 275px) scale(1, 1); }                    /* steep rise */
  60%     { transform: translate(808px, 261px) scale(1, 1); }
  62%     { transform: translate(746px, 263px) scale(1, 1); }                    /* APEX area Y=259 */
  64%     { transform: translate(683px, 289px) scale(1, 1); }
  65%     { transform: translate(652px, 314px) scale(1, 1); }
  66%     { transform: translate(621px, 357px) scale(1, 1); }                    /* steep fall */
  66.67%  { transform: translate(600px, 442px) scale(1.20, 0.85); }              /* CARD 2 IMPACT */
  67.3%   { transform: translate(580px, 359px) scale(1.08, 0.93); }              /* félkör startup steep rise */
  68%     { transform: translate(558px, 326px) scale(1, 1); }
  /* 8. CARD 2 → CARD 1 @ 9.4s (78.33%) — FÉLKÖR: y = 442 - sqrt(182.5² - (x-417.5)²) */
  70.5%   { transform: translate(480px, 271px) scale(1, 1); }
  72%     { transform: translate(433px, 260px) scale(1, 1); }                    /* APEX area Y=259 */
  74%     { transform: translate(370px, 266px) scale(1, 1); }
  76%     { transform: translate(308px, 296px) scale(1, 1); }
  77%     { transform: translate(277px, 326px) scale(1, 1); }
  78%     { transform: translate(245px, 382px) scale(1, 1); }                    /* steep fall */
  78.33%  { transform: translate(235px, 442px) scale(1.20, 0.85); }              /* CARD 1 IMPACT */
  79%     { transform: translate(256px, 360px) scale(1.08, 0.93); }              /* félkör startup steep rise */
  79.5%   { transform: translate(272px, 335px) scale(1, 1); }
  /* 9. CARD 1 → FOOTER @ 10.8s (90%) — aszimm. félkör-szerű ív (rise félkör, descent steep) */
  82%     { transform: translate(350px, 275px) scale(1, 1); }
  84%     { transform: translate(412px, 265px) scale(1, 1); }                    /* APEX (broad) */
  85%     { transform: translate(444px, 270px) scale(1, 1); }
  87%     { transform: translate(506px, 330px) scale(1, 1); }                    /* descent steep mert FOOTER lent */
  88%     { transform: translate(538px, 410px) scale(1, 1); }
  89%     { transform: translate(569px, 490px) scale(1, 1); }
  90%     { transform: translate(600px, 558px) scale(1.18, 0.87); }              /* FOOTER IMPACT */
  90.7%   { transform: translate(578px, 553px) scale(1.08, 0.93); }              /* X konstans -31.3 a final felé */
  91.5%   { transform: translate(553px, 550px) scale(1, 1); }
  /* 10. Final flight: ívben repül vissza az "Is Yours" után, kétszer pattan,
        és LANDOL a hiányzó pont helyén — az iris-dot LESZ a sentence-end period. */
  93%     { transform: translate(506px, 291px) scale(1, 1); opacity: 1; }            /* magas íves felfelé — apex Y=165 */
  94%     { transform: translate(475px, 196px) scale(1, 1); opacity: 1; }
  95%     { transform: translate(459px, 165px) scale(1, 1); opacity: 1; }            /* APEX */
  95.5%   { transform: translate(428px, 167px) scale(1, 1); opacity: 1; }
  96.5%   { transform: translate(397px, 186px) scale(1, 1); opacity: 1; }
  97.5%   { transform: translate(365px, 222px) scale(1, 1); opacity: 1; }
  98.3%   { transform: translate(340px, 265px) scale(1.20, 0.85); opacity: 1; animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } /* IMPACT 1 — softer squash */
  98.7%   { transform: translate(340px, 254px) scale(1, 1); opacity: 1; }
  99%     { transform: translate(340px, 248px) scale(0.96, 1.06); opacity: 1; animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } /* REBOUND apex */
  99.3%   { transform: translate(340px, 258px) scale(1, 1); opacity: 1; }
  99.5%   { transform: translate(340px, 265px) scale(1.10, 0.92); opacity: 1; animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } /* IMPACT 2 — small squash */
  99.7%   { transform: translate(340px, 263px) scale(1, 1); opacity: 1; }
  99.85%  { transform: translate(340px, 261px) scale(1, 1); opacity: 1; animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
  100%    { transform: translate(340px, 265px) scale(1, 1); opacity: 1; }
}

/* nav-dot mindig látszik — a rebuild szekcióban az "Újragondolás" linkre pattan */
.nav-dot.is-handed-off { /* opacity:0 eltávolítva — a bogyó az aktív menüponton ül */ }

/* ===== SERVICES SECTION (block 3) — "Mivel foglalkozunk" kártyarács ===== */
.services {
  padding: 96px 0 32px;
  background:
    repeating-linear-gradient(-35deg, transparent 0, transparent 32px, rgba(255,255,255,0.022) 32px, rgba(255,255,255,0.022) 33px),
    var(--tinta);
  position: relative;
  overflow: hidden;
  z-index: 2;
}
.services__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
.services__head { margin: 0 auto 48px; max-width: 720px; position: relative; z-index: 2; text-align: center; }
.services__title {
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  line-height: 1.1;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  color: var(--homok);
}
.services__title em { font-style: normal; color: var(--iris); }
.services__intro {
  font-size: 1.05rem;
  color: var(--fust);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.55;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 16px;
  position: relative;
  z-index: 2;
}

.services .card {
  grid-column: span 2;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--vonal);
  border-radius: 16px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out),
              background 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}
.services .card.featured { grid-column: span 4; min-height: 240px; padding: 32px; }
.services .card.full { grid-column: span 8; min-height: 180px; padding: 32px 36px; }
.services .card[data-slide="left"]  { transform: translateX(-50px); }
.services .card[data-slide="right"] { transform: translateX(50px); }
.services .card[data-slide="up"]    { transform: translateY(40px); }
.services .card.is-visible { opacity: 1; transform: translate(0, 0); }

.services .card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(91, 61, 245, 0.30);
}

.services .card::before {
  content: attr(data-num);
  position: absolute;
  top: 8px; right: 16px;
  font-size: 5rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.025);
  line-height: 1;
  pointer-events: none;
  transition: color 0.3s ease;
  z-index: 0;
}
.services .card:hover::before { color: rgba(79, 224, 176, 0.20); }    /* mint, halvány */

.services .card-icon {
  width: 44px; height: 44px;
  margin-bottom: 20px;
  color: var(--iris);
  z-index: 1; position: relative;
}
.services .card-icon svg { width: 100%; height: 100%; }

.services .card-title {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--homok);
  margin-bottom: 8px;
  z-index: 1; position: relative;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.services .card.featured .card-title { font-size: 1.85rem; }
.services .card.full .card-title { font-size: 2.1rem; }

.services .card-desc {
  font-size: 1.1rem;
  color: var(--fust);
  line-height: 1.55;
  z-index: 1; position: relative;
  flex: 1;
}

.services .card-extra {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--vonal);
  z-index: 1; position: relative;
}

.services .card-cta {
  margin-top: 16px;
  z-index: 1; position: relative;
}
.services .card-cta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--iris);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color 0.2s ease, transform 0.2s ease;
}
.services .card-cta a:hover {
  color: var(--korall);
  transform: translateX(2px);
}

/* "Menő gomb" variáns — pill alakú, pulzáló shadow, hover-on shimmer */
.services .card-cta--btn { margin-top: 20px; }
.services .card-cta--btn a {
  position: relative;
  overflow: hidden;
  padding: 13px 28px;
  background: linear-gradient(135deg, #5B3DF5 0%, #7B5FFF 100%);
  color: var(--homok);
  border-radius: 999px;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  box-shadow: 0 8px 22px rgba(91, 61, 245, 0.28),
              0 0 0 0 rgba(91, 61, 245, 0.55);
  animation: ctaBtnPulse 2.4s infinite cubic-bezier(.4, 0, .2, 1);
  transition: transform 0.28s cubic-bezier(.4, 0, .2, 1),
              box-shadow 0.28s,
              background 0.3s ease;
  transform: translateX(0);
  gap: 0;
}
.services .card-cta--btn a span {
  position: relative;
  z-index: 2;
}
.services .card-cta--btn a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(110deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: skewX(-22deg);
  z-index: 1;
  transition: left 0.7s cubic-bezier(.4, 0, .2, 1);
}
.services .card-cta--btn a:hover {
  color: var(--tinta);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 34px rgba(79, 224, 176, 0.5),
              0 0 0 0 rgba(79, 224, 176, 0);
  background: var(--menta);
  animation-play-state: paused;
}
.services .card-cta--btn a:hover::before {
  left: 130%;
}
@keyframes ctaBtnPulse {
  0%   { box-shadow: 0 8px 22px rgba(91, 61, 245, 0.28), 0 0 0 0 rgba(91, 61, 245, 0.55); }
  60%  { box-shadow: 0 8px 22px rgba(91, 61, 245, 0.28), 0 0 0 14px rgba(91, 61, 245, 0); }
  100% { box-shadow: 0 8px 22px rgba(91, 61, 245, 0.28), 0 0 0 0 rgba(91, 61, 245, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .services .card-cta--btn a { animation: none; }
}

.services .palette { display: flex; gap: 6px; align-items: center; }
.services .palette-swatch { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; }
.services .palette-label {
  margin-left: 8px;
  font-size: 0.72rem;
  color: var(--fust);
}

.services .before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.services .ba-side {
  border-radius: 8px;
  padding: 12px;
  font-family: 'Times New Roman', serif;
  font-size: 0.72rem;
  height: 64px;
  position: relative;
  overflow: hidden;
}
.services .ba-old { background: #4A4640; color: #B8B2A6; }
.services .ba-old::before {
  content: 'My Site™'; font-weight: 700; font-size: 0.85rem;
  display: block; margin-bottom: 4px;
}
.services .ba-old::after {
  content: 'CLICK!';
  background: #B8870A; padding: 2px 6px; font-size: 0.65rem;
  color: #2A1F00; border: 1px solid #6B5008;
}
.services .ba-new {
  background: var(--homok); color: var(--tinta);
  font-family: "Space Grotesk", system-ui, sans-serif;
}
.services .ba-new::before {
  content: 'Brand.'; font-weight: 700; font-size: 0.95rem;
  display: block; margin-bottom: 6px;
}
.services .ba-new::after {
  content: '→';
  background: var(--iris); padding: 2px 8px;
  border-radius: 4px; font-size: 0.65rem; color: var(--homok);
}

.services .chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 18px; z-index: 1; position: relative;
}
.services .chip {
  background: rgba(255, 255, 255, 0.05);
  color: var(--homok);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  cursor: pointer;
}
.services .chip:hover {
  background: rgba(79, 224, 176, 0.20);          /* mint highlight egyetlen hovered chip-en */
  border-color: rgba(79, 224, 176, 0.50);
  color: var(--menta);
}

.services__footer {
  margin-top: 40px;
  padding: 40px 44px;                         /* nagyobb padding a nagyobb címhez */
  background: linear-gradient(135deg, rgba(91, 61, 245, 0.12), rgba(255, 107, 90, 0.08));
  border: 1px solid var(--vonal);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  position: relative;
  z-index: 2;
}
.services__footer-text strong {
  display: block;
  font-weight: 700;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);     /* címszöveg méret — brand h2 */
  line-height: 1.15;
  margin-bottom: 12px;
  color: var(--homok);
  letter-spacing: -0.02em;
}
.services__footer-text span {
  color: var(--fust);
  font-size: 1rem;
  line-height: 1.55;
}

.services__traveler {
  position: absolute;
  top: 0; left: 0;
  width: 14px; height: 14px;
  background: var(--iris);
  border-radius: 50%;
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 18px var(--iris-glow),
              0 0 0 5px rgba(91, 61, 245, 0.10);
  will-change: transform;
}

/* ===== AJÁNLAT KÉRŐ SECTION (block 4) — only the lead form, same arcade-style bg ===== */
.ajanlat {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 76px);
  padding: 64px 0;
  background:
    repeating-linear-gradient(-35deg, transparent 0, transparent 32px, rgba(255,255,255,0.022) 32px, rgba(255,255,255,0.022) 33px),
    var(--tinta);
  overflow: hidden;
}
.ajanlat__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
.ajanlat .wrap { position: relative; z-index: 2; }
.ajanlat__logo {
  display: block;
  width: 220px;
  max-width: 60%;
  height: auto;
  margin: 0 auto 18px;
}
.ajanlat__eyebrow {
  color: var(--korall);
  display: block;
  text-align: center;
  margin-bottom: 28px;
}
.ajanlat__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
}
.ajanlat__title {
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  line-height: 1.1;
  color: var(--homok);
  letter-spacing: -0.02em;
  margin: 0;
}
.ajanlat__title .korall { color: var(--korall); }

/* ===== EGYEDI / "FELVESZEM A KAPCSOLATOT" SECTION (block 5) — same arcade-style bg as hero ===== */
.egyedi {
  position: relative;
  z-index: 2;
  padding: 56px 0 0;
  background:
    repeating-linear-gradient(-35deg, transparent 0, transparent 32px, rgba(255,255,255,0.022) 32px, rgba(255,255,255,0.022) 33px),
    var(--tinta);
  overflow: hidden;
}
.egyedi__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
.egyedi .wrap { position: relative; z-index: 2; }

.egyedi__card {
  padding: 48px 52px;
  background: linear-gradient(135deg, rgba(91, 61, 245, 0.14), rgba(255, 107, 90, 0.10));
  border: 1px solid var(--vonal);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  position: relative;
  z-index: 2;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.egyedi__text { flex: 1; min-width: 280px; }
.egyedi__text .eyebrow {
  color: var(--korall);
  margin-bottom: 12px;
}
.egyedi__text strong {
  display: block;
  font-weight: 700;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.15;
  margin-bottom: 14px;
  color: var(--homok);
  letter-spacing: -0.02em;
}
.egyedi__text span {
  color: var(--fust);
  font-size: 1.05rem;
  line-height: 1.55;
}
@media (max-width: 640px) {
  .egyedi__card { flex-direction: column; align-items: flex-start; padding: 28px 22px; }
  .egyedi__card .btn { width: 100%; justify-content: center; }
}
/* "Nem találod amit keresel?" doboz a kapcsolat-kártyák alatt, közvetlenül utána */
.kapcsolat__cta { margin-top: 24px; }
@media (max-width: 640px) {
  .kapcsolat__cta { margin-top: 16px; }
}

/* ===== LEAD FORM (a "Beszéljünk" gombbal nyíló űrlap) ===== */
.lead-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--ease-out), margin-top 0.55s var(--ease-out);
  margin-top: 0;
}
.lead-wrap.is-open {
  grid-template-rows: 1fr;
  margin-top: 18px;
}
.lead-form {
  overflow: hidden;
  min-height: 0;
  background: linear-gradient(135deg, rgba(91, 61, 245, 0.10), rgba(255, 107, 90, 0.06));
  border: 1px solid var(--vonal);
  border-radius: 16px;
  padding: 0 28px;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: padding 0.55s var(--ease-out), max-height 0.55s var(--ease-out),
              opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.lead-wrap.is-open .lead-form {
  padding: 32px 28px;
  max-height: 1400px;
  opacity: 1;
  transform: translateY(0);
}
.lead-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 14px;
}
.lead-field {
  display: block;
  margin-bottom: 14px;
}
.lead-field > span,
.lead-options > legend {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--fust);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.lead-field input,
.lead-field textarea {
  width: 100%;
  background: rgba(20, 19, 43, 0.55);
  border: 1px solid var(--vonal);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--homok);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.lead-field input:focus,
.lead-field textarea:focus {
  outline: none;
  border-color: var(--iris);
  background: rgba(20, 19, 43, 0.75);
  box-shadow: 0 0 0 3px rgba(91, 61, 245, 0.18);
}
.lead-field textarea { resize: vertical; min-height: 110px; }

.lead-options {
  border: none;
  padding: 0;
  margin: 0 0 14px;
}
.lead-options > div,
.lead-options > .lead-option { /* fallback ha nem grid */ }
.lead-options {
  display: grid;
  gap: 6px;
}
.lead-options > legend { padding: 0; }
.lead-options > .lead-option:first-of-type { margin-top: 6px; }
.lead-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(20, 19, 43, 0.45);
  border: 1px solid var(--vonal);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.lead-option:hover { border-color: rgba(91, 61, 245, 0.55); }
.lead-option input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 2px solid var(--fust);
  border-radius: 50%;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition: border-color 0.15s;
}
.lead-option input[type=radio]:checked { border-color: var(--iris); }
.lead-option input[type=radio]:checked::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--iris);
  border-radius: 50%;
}
.lead-option input[type=radio]:checked ~ span { color: var(--homok); }
.lead-option:has(input:checked) {
  border-color: var(--iris);
  background: rgba(91, 61, 245, 0.10);
}

.lead-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.lead-status {
  font-size: 14px;
  color: var(--fust);
  margin: 0;
}
.lead-status.is-success { color: var(--menta); }
.lead-status.is-error { color: var(--korall); }

@media (max-width: 640px) {
  .lead-form__row { grid-template-columns: 1fr; gap: 0; }
  .lead-wrap.is-open .lead-form { padding: 22px 18px; }
}

@media (max-width: 900px) {
  .services { padding: 64px 0 56px; }
  .services__grid { grid-template-columns: repeat(4, 1fr); }
  .services .card { grid-column: span 2; }
  .services .card.featured { grid-column: span 4; }
  .services .card.full { grid-column: span 4; }
  .services .card[data-slide] { transform: translateY(30px); }
  .services__traveler { display: none; }
}
@media (max-width: 540px) {
  .services__grid { grid-template-columns: 1fr; gap: 12px; }
  .services .card,
  .services .card.featured,
  .services .card.full { grid-column: span 1; }
  .services .card::before { font-size: 4rem; }
  .services__footer { flex-direction: column; align-items: flex-start; padding: 24px; }
  .services__footer .btn { width: 100%; justify-content: center; }
}

/* Mobil (≤720px) — service kártyák scrollra besusznak: párosak jobbról, páratlanok balról */
@media (max-width: 720px) {
  .services__grid .card {
    opacity: 0;
    transition: opacity .7s ease, transform .8s cubic-bezier(.16,.84,.32,1);
    will-change: transform, opacity;
  }
  .services__grid .card:nth-child(odd)  { transform: translateX(-32px); }
  .services__grid .card:nth-child(even) { transform: translateX(32px); }
  .services__grid .card.is-revealed { opacity: 1; transform: translateX(0); }
  @media (prefers-reduced-motion: reduce) {
    .services__grid .card { opacity: 1; transform: none; transition: none; }
  }
}

/* ===== HERO BAL OSZLOP — audit widget középre igazítva ===== */
.hero__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
}
@media (max-width: 880px) { .hero__left { gap: 16px; } }

/* ===== AUDIT WIDGET ===== */
.audit-widget {
  background: rgba(20, 19, 43, 0.55);
  border: 1px solid var(--vonal);
  border-radius: 14px;
  padding: 22px 24px;
  font-family: 'Space Grotesk', sans-serif;
  max-width: 720px;
  width: 100%;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.28);
}
.aw-tag {
  font-family: ui-monospace, "SF Mono", Menlo, "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--menta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.aw-h {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 700;
  color: var(--homok);
  line-height: 1.2;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.aw-h span { color: var(--korall); }
.aw-sub {
  font-size: 13px;
  color: var(--fust);
  margin: 0 0 18px;
  line-height: 1.5;
}
.aw-inp-row { display: flex; gap: 8px; margin-bottom: 10px; }
.aw-btn-row { display: flex; gap: 10px; margin-bottom: 6px; }
.aw-btn-row > .aw-scan-btn {
  flex: 1 1 0;
  width: auto;
  padding: 16px 18px;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 10px;
}
.aw-url-inp {
  flex: 1;
  background: rgba(20, 19, 43, 0.65);
  border: 1px solid var(--vonal);
  border-radius: 10px;
  color: var(--homok);
  font-size: 14px;
  font-family: 'Space Grotesk', sans-serif;
  padding: 11px 14px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  min-width: 0;
}
.aw-url-inp:focus {
  border-color: var(--iris);
  box-shadow: 0 0 0 3px rgba(91,61,245,0.18);
}
.aw-url-inp::placeholder { color: rgba(138, 138, 168, 0.55); }
.aw-scan-btn {
  background: var(--iris);
  border: none;
  border-radius: 10px;
  color: var(--homok);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Space Grotesk', sans-serif;
  padding: 11px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, transform 0.1s, box-shadow 0.18s;
  box-shadow: 0 6px 18px rgba(91,61,245,0.32);
}
.aw-scan-btn:hover { background: #4a2fd4; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(91,61,245,0.42); }
.aw-scan-btn:active { transform: translateY(0); }
.aw-scan-btn:disabled { background: #2a2850; color: #4a4870; cursor: not-allowed; transform: none; box-shadow: none; }
.aw-status {
  font-size: 12px;
  color: var(--fust);
  min-height: 18px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.aw-status.running { color: var(--menta); }
.aw-status.error   { color: var(--korall); }
.aw-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(138,138,168,0.4);
  border-top-color: var(--menta);
  border-radius: 50%;
  animation: aw-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes aw-spin { to { transform: rotate(360deg); } }
.aw-results { display: none; }
.aw-results.show { display: block; animation: aw-fadein 0.3s ease; }
@keyframes aw-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.aw-score-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.aw-sc-label {
  font-size: 12px;
  color: var(--fust);
  width: 120px;
  flex-shrink: 0;
}
.aw-bar-bg {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.aw-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--clr, var(--menta));
  width: 0%;
  transition: width 1.1s cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 0 12px var(--clr, var(--menta));
}
.aw-sc-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--homok);
  width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.aw-divider {
  border: none;
  border-top: 1px solid var(--vonal);
  margin: 14px 0;
}
.aw-total-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 14px;
  gap: 12px;
}
.aw-total-label { font-size: 12px; color: var(--fust); }
.aw-total-num {
  font-size: 44px;
  font-weight: 800;
  color: var(--homok);
  line-height: 1;
  text-align: right;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.aw-verdict {
  font-size: 12px;
  text-align: right;
  margin-top: 4px;
  font-weight: 600;
}
.aw-insight {
  background: rgba(91,61,245,0.07);
  border-radius: 10px;
  border-left: 3px solid var(--iris);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: rgba(251,247,242,0.85);
  line-height: 1.55;
}
.aw-insight b { color: var(--homok); font-weight: 600; }
  .aw-insight ul { margin: 8px 0 0; padding: 0; list-style: none; }
  .aw-insight li { color: var(--korall); margin: 4px 0 4px 28px; padding-left: 4px; position: relative; }
  .aw-insight li::before { content: "—"; position: absolute; left: -18px; color: var(--korall); }
  .aw-insight li.pos { color: var(--menta); }
  .aw-insight li.pos::before { content: "+"; color: var(--menta); font-weight: 700; }
.aw-cta-btn {
  display: block;
  width: 100%;
  padding: 13px;
  background: var(--korall);
  border: none;
  border-radius: 10px;
  color: var(--tinta);
  font-size: 14px;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
  cursor: pointer;
  transition: background 0.18s, transform 0.1s, box-shadow 0.18s;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px rgba(255,107,90,0.32);
}
.aw-cta-btn:hover { background: #ff5645; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255,107,90,0.42); }
.aw-cta-btn:active { transform: translateY(0); }
.aw-disclaimer {
  margin-top: 14px;
  padding: 12px 14px;
  font-size: 12.5px;
  text-align: center;
  color: rgba(251,247,242,0.8);
  background: rgba(255, 107, 90, 0.06);
  border: 1px dashed rgba(255, 107, 90, 0.32);
  border-radius: 10px;
  line-height: 1.5;
}
.aw-disclaimer__hl {
  color: var(--korall);
  font-weight: 700;
  letter-spacing: 0.01em;
}
@media (max-width: 540px) {
  .audit-widget { padding: 18px 18px; }
  .aw-h { font-size: 1.3rem; }
  .aw-sc-label { width: 90px; font-size: 11px; }
  .aw-total-num { font-size: 36px; }
  .aw-inp-row { flex-direction: column; }
  .aw-scan-btn { width: 100%; }
  .aw-btn-row { flex-direction: column; gap: 8px; }
  .aw-btn-row > .aw-scan-btn,
  .aw-btn-row > .aw-cta-btn--inline { width: 100%; }
}

/* ===== HU/EN nyelvkapcsoló a navigáció végén ===== */
.nav__lang-li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding-left: 18px;
  border-left: 1px solid rgba(255,255,255,0.10);
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
.nav__menu .nav__lang {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--homok);
  opacity: 0.55;
  padding: 4px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.nav__menu .nav__lang:hover { opacity: 0.95; color: var(--homok); background: rgba(255,255,255,0.04); }
.nav__menu .nav__lang.is-active {
  opacity: 1;
  color: var(--menta);
  background: rgba(79, 224, 176, 0.10);
}
.nav__lang-sep {
  color: rgba(255,255,255,0.22);
  font-size: 13px;
  font-weight: 400;
  user-select: none;
}

@media (max-width: 720px) {
  .nav__lang-li {
    justify-content: center;
    gap: 10px;
    margin-left: 0;
    padding: 14px 32px;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .nav__menu .nav__lang-li .nav__lang {
    display: inline-block;
    padding: 8px 16px;
    font-size: 13px;
    border-bottom: none;
    border-radius: 999px;
  }
  .nav__lang-sep { font-size: 14px; }
}


/* ==== Mobil cím-igazítás: minden szekció-cím és kapcsolódó szöveg balra (≤880px) ==== */
@media (max-width: 880px) {
  main h1, main h2, main h3, main h4 { text-align: left !important; }
  main p, main .lead, main .eyebrow { text-align: left !important; }
  .hero__text, .ajanlat__title, .kapcsolat__title { text-align: left !important; }
  .rebuild__head, .services__head, .ajanlat__head, .kapcsolat__head { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; }
}


/* ==== Mobil nav (≤720px): position: fixed a sticky+backdrop-filter
   iOS Safari quirkok kikerülésére. A flow-t main { padding-top: 76px }
   kompenzálja, hogy a hero ne csússzon a nav alá. ==== */
@media (max-width: 720px) {
  .nav {
    position: fixed; top: 0; left: 0; right: 0;
    /* Mobilon nem kell backdrop-filter: olcsóbb és nem flicker-el */
    background: rgba(20, 19, 43, 0.94);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* iOS Safari momentum-scroll fix: saját GPU-réteg + teljes render-izoláció.
       A nav ne függjön semmilyen alsóbb réteg újraszámolásától. */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    /* contain: paint kivéve, mert levágta a nav __menu mobil dropdown-ot
       (top: 100%-on lóg le a .nav alól) — emiatt nem nyílt meg a menü mobilon. */
    isolation: isolate;
  }
  main { padding-top: 76px; }
  /* A többi backdrop-filter (audit-widget, services-card, egyedi) iOS Safari-on
     re-compose triggert ad, amitől a fixed nav megvillan. Mobilon kikapcsolva. */
  .audit-widget,
  .services .card,
  .egyedi__inner,
  .egyedi {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}


/* ==== Mobil rebuild címsor utáni pont: statikus, animáció nélkül ==== */
@media (max-width: 720px) {
  .rebuild__title-mobile .rebuild__title-dot,
  .rebuild.is-arrived .rebuild__title-mobile .rebuild__title-dot {
    opacity: 1;
    transform: none;
    animation: none;
  }
}


/* ==== Hero click-capture overlay ====
   Láthatatlan div a hero felett (z=11, wrap=2 fölött) — csak click-elésre.
   A rajzoló canvas marad z=0-n, így az audit-widget mindig fölötte rajzolódik,
   és a drag-elt labda mögé csúszik. */
.hero__capture {
  position: absolute; inset: 0;
  z-index: 11;
  pointer-events: none;
}


/* ============ COOKIE BAR ============ */
.riy-cookie {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(20px);
  width: min(540px, calc(100vw - 32px));
  z-index: 10000;
  background: rgba(20, 19, 43, 0.96);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(91, 61, 245, 0.35);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  color: var(--homok);
  padding: 14px 16px;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(.16,1,.3,1), opacity 0.45s ease;
}
.riy-cookie.is-show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.riy-cookie__inner {
  display: flex;
  align-items: center;
  gap: 14px;
}
.riy-cookie__txt {
  flex: 1 1 auto;
  font-family: 'Inter', 'Space Grotesk', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(251, 247, 242, 0.85);
}
.riy-cookie__txt strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--homok);
  margin-bottom: 2px;
}
.riy-cookie__txt a {
  color: var(--iris);
  border-bottom: 1px solid rgba(91, 61, 245, 0.4);
  text-decoration: none;
  transition: color 0.18s, border-color 0.18s;
}
.riy-cookie__txt a:hover {
  color: #7B5FFF;
  border-bottom-color: rgba(123, 95, 255, 0.7);
}
.riy-cookie__act { flex: 0 0 auto; }
.riy-cookie__btn {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--iris);
  color: var(--homok);
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.18s, transform 0.08s, box-shadow 0.18s;
  box-shadow: 0 6px 18px rgba(91, 61, 245, 0.32);
}
.riy-cookie__btn:hover { background: #7B5FFF; box-shadow: 0 10px 24px rgba(91, 61, 245, 0.42); }
.riy-cookie__btn:active { transform: translateY(1px); }

@media (max-width: 640px) {
  .riy-cookie {
    bottom: 10px;
    width: calc(100vw - 16px);
    padding: 9px 11px;
    border-radius: 10px;
  }
  .riy-cookie__inner { gap: 9px; align-items: center; }
  .riy-cookie__txt { font-size: 11.5px; line-height: 1.4; }
  .riy-cookie__txt strong { font-size: 12px; margin-bottom: 1px; }
  .riy-cookie__btn { font-size: 11px; padding: 7px 11px; border-radius: 7px; }
}

/* Hero (1480px wrap) és Rebuild (1480px wrap) eyebrow-ja
   ugyanabba a vertikális oszlopba kerüljön, mint a 03/04/05 szekciók
   default 1280px wrap-jának jobb élén. Belső max 1216px (1280-2*32 pad). */
.hero__inner > .section-num--top,
.rebuild .wrap > .section-num--top {
  max-width: 1216px;
  margin-left: auto;
  margin-right: auto;
}