/* ============================================================
   BALABAN LANDING v2 — Synkai-alapú design-rendszer
   Tokenek forrása: synkai.hu CSS (verbatim kinyert értékek).
   Elv: fegyelem × mozgás × bizonyíték-sűrűség.
   Világos (cream/pearl) alap + sötét lila "fejezet" szekciók.
   ============================================================ */

@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  /* Brand mag — Synkai verbatim */
  --purple: #8549de;
  --purple-deep: #5e2fa8;
  --pink: #eb479a;
  --grad: linear-gradient(130deg, #8549de 0%, #eb479a 100%);
  --grad-rev: linear-gradient(130deg, #eb479a 0%, #8549de 100%);
  --grad-soft: linear-gradient(130deg, #8549de2e, #eb479a2e);

  /* Sötét lila skála */
  --bg-deep: #160b26;
  --bg-deep-2: #1f0f35;
  --bg-deep-3: #0f0720;

  /* Világos hátterek */
  --bg-cream: #faf7ff;
  --bg-pearl: #f4eeff;

  /* Szöveg — világos szekción */
  --text-dark: #1a0e2e;
  --text-medium: #5c4a7e;
  /* Szöveg — sötét szekción */
  --text-bright: #f4eeff;
  --text-bright-muted: #f4eeffc7;
  --text-bright-soft: #f4eeff8c;

  /* Glow / árnyék */
  --glow: #8549de73;
  --glow-pink: #eb479a66;
  --purple-12: #8549de1f;
  --purple-14: #8549de24;
  --shadow-md: 0 16px 48px #8549de24;
  --shadow-lg: 0 24px 72px #8549de38;
  --shadow-glow: 0 12px 48px #eb479a40, 0 8px 24px #8549de2e;

  --good: #10b981;
  --bad: #9c8bbd;

  /* Tipográfia — Synkai hármas */
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Fluid méretek — Synkai clamp-képletek */
  --text-h1: clamp(2.2rem, 1.3rem + 3.6vw, 4.4rem);
  --text-h2: clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem);
  --text-lead: clamp(1.02rem, 0.95rem + 0.5vw, 1.3rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-cream);
  color: var(--text-dark);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 800px; }

/* Szekció-tónusok — Synkai váltakozás */
section[id] { scroll-margin-top: 120px; } /* a fixed nav ne takarja az anchor-célt */
section { position: relative; padding: 80px 0; }
@media (min-width: 900px) { section { padding: 112px 0; } }
.sec-cream { background: var(--bg-cream); }
.sec-pearl { background: var(--bg-pearl); }
.sec-dark { background: var(--bg-deep); color: var(--text-bright); }
.sec-darkest { background: var(--bg-deep-3); color: var(--text-bright); }
.sec-dark p, .sec-darkest p { color: var(--text-bright-muted); }
.sec-dark h2, .sec-darkest h2 { color: var(--text-bright); }

/* ---------- tipográfia ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  color: var(--text-dark);
  text-wrap: balance;
  font-weight: 800;
}
h1 { font-size: var(--text-h1); line-height: 0.98; max-width: 22ch; font-weight: 900; }
h2 { font-size: var(--text-h2); line-height: 1.05; max-width: 24ch; margin-bottom: 16px; }
h3 { font-size: 1.05rem; line-height: 1.3; }
p { color: var(--text-medium); }
.lead { font-size: var(--text-lead); }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* eyebrow — Synkai pill badge */
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--purple-deep);
  background: var(--purple-12);
  border: 1px solid var(--purple-14);
  border-radius: 100px;
  padding: 6px 14px;
  margin-bottom: 20px;
}
.sec-dark .eyebrow, .sec-darkest .eyebrow {
  color: var(--text-bright-muted);
  background: #f4eeff14;
  border-color: #f4eeff24;
}

.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head.centered { margin-inline: auto; text-align: center; }
.section-head.centered h2 { margin-inline: auto; }
.section-sub { font-size: var(--text-lead); margin-top: 8px; }

/* ---------- announcement ---------- */
.announce {
  background: var(--bg-deep-3);
  color: var(--text-bright-soft);
  text-align: center;
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.announce b { color: var(--pink); font-weight: 500; }

/* ---------- lebegő glassmorphism pill navbar (Synkai) ---------- */
.nav {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 90;
  width: calc(100% - 32px); max-width: 1240px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid #ffffffb0;
  border-radius: 20px;
  box-shadow: 0 8px 32px #8549de1a;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 10px 22px;
}
.wordmark {
  font-family: var(--font-display); font-weight: 800;
  font-size: 0.86rem; letter-spacing: 0.02em;
  color: var(--text-dark); text-decoration: none;
}
.wordmark span { color: var(--purple); }
body { padding-top: 0; }
.has-announce .nav { top: 46px; }

/* ---------- gombok ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700; font-size: 0.92rem;
  padding: 15px 32px;
  border-radius: 100px;
  border: none; cursor: pointer;
  text-decoration: none; text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: var(--shadow-glow);
  animation: heroButtonPulse 2.8s ease-in-out infinite;
}
.btn-primary:hover { transform: scale(1.015); }
.btn-nav { padding: 10px 20px; font-size: 0.78rem; animation: none; }
.btn-big { padding: 19px 44px; font-size: 1.02rem; }
@keyframes heroButtonPulse {
  0%, 100% { box-shadow: 0 12px 48px #eb479a40, 0 8px 24px #8549de2e; }
  50% { box-shadow: 0 16px 64px #eb479a66, 0 10px 32px #8549de4d; }
}
.microcopy {
  font-size: 0.82rem; color: var(--text-medium);
  opacity: 0.85; margin-top: 14px; max-width: 560px;
}
.sec-dark .microcopy, .sec-darkest .microcopy { color: var(--text-bright-soft); }

/* ---------- hero ---------- */
.hero {
  padding: 150px 0 90px;
  text-align: center;
  overflow: clip;
  background: var(--bg-cream);
}
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px); pointer-events: none; z-index: 0;
}
.orb-1 {
  width: 520px; height: 520px; top: -140px; left: -120px;
  background: #8549de2e;
  animation: orbDrift 26s ease-in-out infinite alternate;
}
.orb-2 {
  width: 460px; height: 460px; top: 40px; right: -140px;
  background: #eb479a24;
  animation: orbDrift 32s ease-in-out infinite alternate-reverse;
}
@keyframes orbDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(60px, 40px, 0) scale(1.12); }
}
.hero .container { position: relative; z-index: 1; }
.hero h1 { margin: 0 auto 22px; }
.hero-sub { max-width: 640px; margin: 0 auto 32px; font-size: var(--text-lead); }

/* VSL player */
.vsl {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  width: 100%; max-width: 780px;
  margin: 0 auto 34px;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(480px 260px at 50% 38%, #8549de26, transparent 72%),
    var(--bg-deep);
  border: none;
  border-radius: 28px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.vsl:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.vsl-play {
  width: 82px; height: 82px; border-radius: 50%;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-glow);
  transition: transform 0.18s ease;
}
.vsl:hover .vsl-play { transform: scale(1.06); }
.vsl-play::after {
  content: ""; margin-left: 5px;
  border-left: 24px solid #fff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.vsl-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--text-bright);
  background: #f4eeff14;
  border: 1px solid #f4eeff24;
  padding: 8px 16px; border-radius: 100px;
}
.vsl-chip svg { width: 14px; height: 14px; fill: currentColor; }
.vsl-note {
  position: absolute; inset: auto 0 0;
  background: #0f0720e6;
  color: var(--text-bright-soft);
  font-size: 0.78rem; padding: 10px 14px;
  display: none;
}
.vsl.show-note .vsl-note { display: block; }

/* ---------- marquee (bizonyíték-sáv) ---------- */
.marquee-band { padding: 26px 0; border-block: 1px solid #8549de1a; background: var(--bg-cream); }
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee .track {
  display: flex; width: max-content; gap: 56px;
  animation: marqueeX 46s linear infinite;
}
.marquee .row { display: flex; gap: 56px; flex-shrink: 0; align-items: center; }
.marquee .item {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.06em; white-space: nowrap;
  color: var(--text-medium);
}
.marquee .item::before { content: "◆ "; color: var(--pink); font-size: 9px; }
@keyframes marqueeX { to { transform: translateX(calc(-50% - 28px)); } }
.marquee:hover .track { animation-play-state: paused; }

/* ---------- kártyák ---------- */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  border: 1px solid #8549de14;
  border-radius: 24px;
  padding: 30px 28px;
  box-shadow: 0 6px 24px #8549de0f;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover { transform: translateY(-3px) scale(1.005); box-shadow: var(--shadow-md); }
.card h3 { margin: 10px 0 8px; }
.card p { font-size: 0.93rem; }
.step-num {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; color: var(--purple);
}

/* pain-kártyák */
.pain-card {
  background: #fff;
  border: 1px solid #8549de14;
  border-left: 3px solid;
  border-image: var(--grad) 1;
  border-radius: 16px;
  padding: 22px 24px;
  font-size: 0.93rem; color: var(--text-medium);
  box-shadow: 0 4px 18px #8549de0d;
}
.callout {
  margin-top: 36px;
  background: var(--grad-soft);
  border: 1px solid var(--purple-14);
  border-radius: 28px;
  padding: 32px 36px;
  font-size: 1.02rem; color: var(--text-dark);
  line-height: 1.75;
}

/* ---------- borderBeam (csak kiemelt elemeken!) ---------- */
.beam-wrap { position: relative; border-radius: 28px; }
.beam-wrap::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--angle),
    transparent 0turn, transparent 0.72turn,
    #8549de 0.86turn, #eb479a 0.93turn, transparent 1turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: beamSpin 5s linear infinite;
  pointer-events: none;
}
@keyframes beamSpin { to { --angle: 360deg; } }
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .beam-wrap::before { background: var(--grad-soft); animation: none; }
}

/* ---------- összehasonlító tábla (sötét szekcióban) ---------- */
.compare {
  border-radius: 28px; overflow: hidden;
  background: var(--bg-deep-2);
}
.compare-inner { border-radius: inherit; overflow: hidden; }
.compare-row { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.compare-row > div {
  padding: 17px 22px; font-size: 0.9rem;
  border-bottom: 1px solid #f4eeff12;
}
.compare-row:last-child > div { border-bottom: none; }
.compare-head > div {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-bright-soft);
  background: #0f072080;
}
.c-label { color: var(--text-bright); font-weight: 600; font-size: 0.88rem; }
.c-them { color: var(--text-bright-soft); }
.c-me { color: var(--text-bright); background: #8549de26; }
.compare-head .c-me {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
@media (max-width: 760px) {
  .compare-head { display: none; }
  .compare-row { grid-template-columns: 1fr; }
  .compare-row > div { border-bottom: none; padding: 8px 20px; }
  .compare-row .c-label { padding-top: 18px; font-size: 0.85rem; }
  .compare-row .c-them::before { content: "Nagy program: "; color: var(--text-bright-soft); font-weight: 600; }
  .compare-row .c-me { border-bottom: 1px solid #f4eeff12; padding-bottom: 18px; }
  .compare-row .c-me::before { content: "Nálam: "; font-weight: 700; }
}

/* ---------- idővonal ---------- */
.timeline { position: relative; padding-left: 32px; max-width: 720px; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(#8549de, #eb479a, #8549de1a);
}
.tl-item { position: relative; margin-bottom: 30px; }
.tl-item::before {
  content: ""; position: absolute; left: -31px; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 0 4px var(--purple-12);
}
.tl-tag {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--purple-deep);
}
.tl-item p { margin-top: 6px; font-size: 0.95rem; }
.tl-ph {
  display: inline-block; margin-top: 8px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--purple);
  background: var(--purple-12);
  border: 1px dashed var(--purple);
  border-radius: 8px; padding: 3px 10px;
}

/* ---------- őszinteség-kártya ---------- */
.honesty {
  background: #fff;
  border: 1px solid var(--purple-14);
  border-radius: 28px;
  padding: 30px 34px;
  margin-top: 32px;
  box-shadow: var(--shadow-md);
}
.honesty ul { list-style: none; }
.honesty li {
  padding: 8px 0 8px 32px; position: relative;
  color: var(--text-medium); font-size: 0.93rem;
}
.honesty li::before {
  content: "✓"; position: absolute; left: 0; top: 7px;
  color: var(--good); font-weight: 700;
}

/* ---------- stats (count-up, legmélyebb sötét) ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
@media (max-width: 860px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 16px; } }
.stat-val {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem);
  line-height: 1.05;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-bright-soft);
  margin-top: 10px; line-height: 1.6;
  max-width: 240px; margin-inline: auto;
}
.stats-note {
  text-align: center; margin-top: 40px;
  font-size: 0.82rem; color: var(--text-bright-soft);
}

/* ---------- kinek való / nem ---------- */
.fit-col { padding: 32px 30px; }
.fit-col h3 { margin-bottom: 16px; font-size: 1.1rem; }
.fit-col ul { list-style: none; }
.fit-col li {
  padding: 9px 0 9px 32px; position: relative;
  font-size: 0.93rem; color: var(--text-medium);
}
.fit-yes li::before { content: "✓"; position: absolute; left: 0; top: 8px; color: var(--purple); font-weight: 700; }
.fit-no li::before { content: "✕"; position: absolute; left: 0; top: 8px; color: var(--bad); font-weight: 600; }
.fit-yes { border: 1.5px solid var(--purple-14); box-shadow: var(--shadow-md); }
.fit-note {
  margin-top: 28px;
  background: #fff;
  border: 1px solid var(--purple-14);
  border-radius: 20px;
  padding: 20px 26px;
  font-size: 0.9rem; color: var(--text-medium);
}

/* ---------- proof ---------- */
.proof-placeholder { border: 2px dashed #8549de59; background: #ffffffa6; box-shadow: none; }
.ph-tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--purple-deep);
  background: var(--purple-12);
  padding: 4px 12px; border-radius: 100px;
}

/* ---------- FAQ (grid-rows animáció + aria) ---------- */
.faq-item { border-bottom: 1px solid #8549de1f; }
.faq-q {
  width: 100%; text-align: left; background: none; border: none;
  color: var(--text-dark); font-family: var(--font-display);
  font-size: 0.98rem; font-weight: 700;
  padding: 20px 44px 20px 0; cursor: pointer; position: relative;
}
.faq-q:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; border-radius: 6px; }
.faq-q::after {
  content: "+"; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  color: var(--pink); font-size: 1.5rem; font-weight: 400;
  transition: transform 0.2s ease;
}
.faq-item.open .faq-q::after { transform: translateY(-50%) rotate(45deg); }
.faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.faq-a > div { overflow: hidden; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a p { padding: 0 0 22px; font-size: 0.93rem; }

/* ---------- foglalás (Calendly szekció, sötét) ---------- */
.booking-card {
  background: #fff;
  border-radius: 28px;
  padding: 18px;
  max-width: 900px; margin: 0 auto;
  box-shadow: var(--shadow-lg);
}
.calendly-mount { width: 100%; height: auto; min-height: 700px; border-radius: 18px; transition: min-height 0.25s ease; }
@media (max-width: 640px) { .calendly-mount { min-height: 660px; } }
.booking-fallback { text-align: center; padding: 70px 30px; }
.booking-fallback h3 { margin-bottom: 12px; }
.booking-fallback p { font-size: 0.9rem; max-width: 520px; margin: 0 auto 24px; color: var(--text-medium); }

/* ---------- záró CTA ---------- */
.final { text-align: center; }
.final .body { max-width: 620px; margin: 0 auto 32px; }

/* ---------- footer ---------- */
footer {
  background: var(--bg-deep-3);
  color: var(--text-bright-soft);
  padding: 52px 0 96px;
  font-size: 0.76rem; line-height: 1.7;
}
footer p { margin-bottom: 12px; color: var(--text-bright-soft); }
footer a { color: var(--text-bright-muted); }

/* ---------- sticky mobil CTA ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: #faf7ffe6;
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--purple-14);
  transform: translateY(110%);
  transition: transform 0.3s ease;
  text-align: center;
}
.sticky-cta.visible { transform: translateY(0); }
.sticky-cta .btn { width: 100%; max-width: 420px; animation: none; }
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* ---------- consent banner (a pixel csak elfogadás után!) ---------- */
.consent-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100;
  max-width: 520px; margin: 0 auto;
  background: #fff;
  border: 1px solid var(--purple-14);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: 18px 20px;
  display: none;
}
.consent-banner.visible { display: block; }
.consent-banner p { font-size: 0.82rem; margin-bottom: 12px; color: var(--text-dark); }
.consent-actions { display: flex; gap: 10px; }
.btn-small { padding: 9px 20px; font-size: 0.78rem; animation: none; }
.btn-plain {
  background: none; border: 1px solid #8549de33;
  color: var(--text-medium); box-shadow: none;
}

/* ---------- reveal (staggered) ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- kérdőív / megvan oldalak ---------- */
.flow-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-cream); }
.flow-main { flex: 1; padding: 140px 0 90px; }
.form-wrap { max-width: 620px; margin: 0 auto; }
.progress { height: 4px; background: #8549de1f; border-radius: 4px; margin-bottom: 34px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--grad); width: 0%; transition: width 0.3s ease; border-radius: 4px; }
.q-step { display: none; }
.q-step.active { display: block; animation: stepIn 0.3s ease; }
@keyframes stepIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.q-label {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 700;
  margin: 26px 0 14px; display: block; color: var(--text-dark);
}
.q-label:first-child { margin-top: 0; }
.opt-group { display: grid; gap: 10px; }
.opt {
  display: block; cursor: pointer; position: relative;
  background: #fff; border: 1.5px solid #8549de1f;
  border-radius: 14px;
  padding: 14px 18px; font-size: 0.93rem; color: var(--text-medium);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.opt:hover { border-color: #8549de66; }
/* a11y: az input láthatatlan, de fókuszálható marad */
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt:has(input:focus-visible) { outline: 2px solid var(--purple); outline-offset: 2px; }
.opt.focused { outline: 2px solid var(--purple); outline-offset: 2px; } /* fallback :has nélkül */
.opt:has(input:checked), .opt.selected {
  border-color: var(--purple);
  background: var(--purple-12);
  color: var(--text-dark);
}
textarea {
  width: 100%; min-height: 130px; resize: vertical;
  background: #fff; border: 1.5px solid #8549de1f;
  border-radius: 14px; padding: 15px 18px;
  color: var(--text-dark); font-family: var(--font-body); font-size: 0.93rem;
}
textarea:focus { outline: none; border-color: var(--purple); }
.consent-row { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; font-size: 0.8rem; color: var(--text-medium); cursor: pointer; }
.consent-row input { margin-top: 3px; accent-color: var(--purple); width: auto; height: auto; position: static; opacity: 1; }
.form-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; gap: 14px; }
.btn-ghost { background: none; border: 1px solid #8549de33; color: var(--text-medium); animation: none; box-shadow: none; }
.form-error { color: #d43d6e; font-size: 0.83rem; margin-top: 14px; min-height: 1.2em; }
.form-note { font-size: 0.8rem; color: var(--text-medium); opacity: 0.8; margin-top: 16px; text-align: center; }

.confirm-card {
  max-width: 660px; margin: 0 auto; text-align: center;
  background: #fff; border: 1px solid var(--purple-14);
  border-radius: 28px; padding: 48px 40px;
  box-shadow: var(--shadow-lg);
}
.confirm-badge {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--grad); color: #fff; font-size: 1.7rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.prep { text-align: left; margin-top: 30px; }
.prep li { margin: 9px 0 9px 22px; color: var(--text-medium); font-size: 0.92rem; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn-primary { animation: none; }
  .orb, .beam-wrap::before { animation: none; }
  .marquee { mask-image: none; -webkit-mask-image: none; overflow-x: auto; }
  .marquee .track { animation: none; }
  .marquee .row[aria-hidden="true"] { display: none; } /* a klón ne duplázza a tartalmat */
  html { scroll-behavior: auto; }
}

@media (max-width: 420px) {
  .btn-big { padding: 16px 26px; font-size: 0.92rem; }
  .booking-card { padding: 10px; }
}

/* ================================================================
   V3 — GTA6 / VICE CITY FELÜLÍRÁS
   A Synkai-szerkezet marad, a paletta neon naplemente:
   pink (#ff2f74) → narancs (#ff9f45), mély lila éjszakai háttér.
   A változók felülírása mindent átszínez.
   ================================================================ */
:root {
  --purple: #ff2f74;
  --purple-deep: #d1195c;
  --pink: #ff9f45;
  --grad: linear-gradient(130deg, #ff2f74 0%, #ff9f45 100%);
  --grad-rev: linear-gradient(130deg, #ff9f45 0%, #ff2f74 100%);
  --grad-soft: linear-gradient(130deg, #ff2f742e, #ff9f452e);
  --bg-deep: #1c0a33;
  --bg-deep-2: #2a1046;
  --bg-deep-3: #130724;
  --bg-cream: #fff7f3;
  --bg-pearl: #ffedef;
  --text-dark: #2b0a2e;
  --text-medium: #7a4a6e;
  --text-bright: #fff1ee;
  --text-bright-muted: #fff1eec7;
  --text-bright-soft: #fff1ee8c;
  --glow: #ff2f7473;
  --glow-pink: #ff9f4566;
  --purple-12: #ff2f741f;
  --purple-14: #ff2f7424;
  --shadow-md: 0 16px 48px #ff2f7424;
  --shadow-lg: 0 24px 72px #ff2f7438;
  --shadow-glow: 0 12px 48px #ff9f4540, 0 8px 24px #ff2f742e;
  --bad: #b58aa5;
}

/* neon-glow a gradiens-kiemeléseken sötét szekcióban (Vice City felirat-hatás) */
.sec-dark .grad-text, .sec-darkest .grad-text, .preloader .pre-word span {
  filter: drop-shadow(0 0 12px #ff2f7459) drop-shadow(0 0 32px #ff9f4533);
}
.orb-1 { background: #ff2f742b; }
.orb-2 { background: #ff9f4526; }

/* finom film grain a sötét szekciókon (SVG feTurbulence — nincs külső kérés) */
.sec-dark::after, .sec-darkest::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 180px;
}
.sec-dark > .container, .sec-darkest > .container { position: relative; z-index: 1; }

/* ---------- oldal-preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg-deep-3);
  display: flex; flex-direction: column; gap: 22px;
  align-items: center; justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s;
}
.preloader.done { opacity: 0; visibility: hidden; }
.pre-word {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.1rem, 4vw, 1.6rem);
  color: var(--text-bright); letter-spacing: 0.02em;
}
.pre-word span {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.pre-bar { width: 190px; height: 3px; background: #fff1ee1f; border-radius: 3px; overflow: hidden; }
.pre-bar i { display: block; height: 100%; width: 0; background: var(--grad); animation: preFill 0.9s ease forwards; }
@keyframes preFill { to { width: 100%; } }

/* ---------- videós vélemény kártyák (9:16) ---------- */
.vp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 880px; margin: 0 auto; }
@media (max-width: 860px) { .vp-grid { grid-template-columns: 1fr; max-width: 320px; } }
.vp-card { text-align: center; }
.vp-frame {
  aspect-ratio: 9 / 16; border-radius: 24px;
  background: radial-gradient(240px 320px at 50% 30%, #ff2f7426, transparent 72%), var(--bg-deep);
  border: 2px dashed #ff2f7466;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  margin-bottom: 14px; padding: 16px;
}
.vp-play {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--grad); box-shadow: var(--shadow-glow); position: relative;
}
.vp-play::after {
  content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%);
  border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}
.vp-frame .tl-ph { border-color: #fff1ee40; background: #fff1ee14; color: var(--text-bright-soft); }
.vp-card h3 { margin-bottom: 2px; }
.vp-card p { font-size: 0.88rem; }

/* ---------- szöveges vélemény (monogram) ---------- */
.tp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.tp-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: var(--grad); color: #fff;
  font-family: var(--font-display); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.tp-line {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--purple-deep);
}

/* ---------- screenshot-fal ---------- */
.shot-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .shot-grid { grid-template-columns: 1fr 1fr; } }
.shot-ph {
  aspect-ratio: 4 / 3; border: 2px dashed #ff2f7459; border-radius: 16px;
  background: #ffffffa6;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 16px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.06em; color: var(--purple-deep);
}

.shot-ph.has-img {
  border-style: solid; border-color: #ffc23342; background: #0b0a09;
  padding: 0; overflow: hidden; position: relative;
}
.shot-ph.has-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
#videoproof .shot-stack .shot-ph.has-img { background: #0b0a09; }

/* ---------- két út ---------- */
.cr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 900px; margin: 0 auto 22px; }
@media (max-width: 860px) { .cr-grid { grid-template-columns: 1fr; } }
.cr-col { padding: 32px 30px; border-radius: 24px; }
.cr-left { background: #fff1ee0d; border: 1px solid #fff1ee1f; }
.cr-right { background: #ff2f741f; border: 1.5px solid #ff2f7473; box-shadow: 0 0 44px #ff2f7426; }
.cr-col h3 { color: var(--text-bright); margin-bottom: 14px; }
.cr-col ul { list-style: none; }
.cr-col li { padding: 8px 0 8px 30px; position: relative; color: var(--text-bright-muted); font-size: 0.93rem; }
.cr-left li::before { content: "✕"; position: absolute; left: 0; top: 8px; color: var(--bad); }
.cr-right li::before { content: "✓"; position: absolute; left: 0; top: 8px; color: var(--pink); font-weight: 700; }

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

/* ================================================================
   V3.1 — SÖTÉTÍTETT, FÉRFIASABB HANGOLÁS
   Mélyebb magenta + visszafogott borostyán-narancs, halkabb neon,
   sötét hero. (Ez a blokk felülírja a fenti GTA6-értékeket.)
   ================================================================ */
:root {
  --purple: #e0245e;
  --purple-deep: #a8144a;
  --pink: #ff8a3d;
  --grad: linear-gradient(130deg, #e0245e 0%, #ff8a3d 100%);
  --grad-rev: linear-gradient(130deg, #ff8a3d 0%, #e0245e 100%);
  --grad-soft: linear-gradient(130deg, #e0245e29, #ff8a3d29);
  --bg-deep: #150a26;
  --bg-deep-2: #1e0f33;
  --bg-deep-3: #0d0618;
  --bg-cream: #f5f0ee;
  --bg-pearl: #ebe3e4;
  --text-dark: #241026;
  --text-medium: #66495e;
  --glow: #e0245e59;
  --glow-pink: #ff8a3d4d;
  --purple-12: #e0245e1c;
  --purple-14: #e0245e26;
  --shadow-md: 0 16px 48px #e0245e1f;
  --shadow-lg: 0 24px 72px #e0245e30;
  --shadow-glow: 0 10px 36px #ff8a3d33, 0 6px 18px #e0245e26;
}
/* halkabb neon-glow */
.sec-dark .grad-text, .sec-darkest .grad-text, .preloader .pre-word span {
  filter: drop-shadow(0 0 8px #e0245e40) drop-shadow(0 0 20px #ff8a3d21);
}
@keyframes heroButtonPulse {
  0%, 100% { box-shadow: 0 10px 36px #ff8a3d2b, 0 6px 18px #e0245e21; }
  50% { box-shadow: 0 12px 44px #ff8a3d47, 0 8px 24px #e0245e38; }
}
.orb-1 { background: #e0245e24; }
.orb-2 { background: #ff8a3d1c; }

/* sötét hero (GTA-éjszaka) */
.hero {
  background:
    radial-gradient(720px 420px at 50% -10%, #e0245e12, transparent 70%),
    var(--bg-deep-3);
}
.hero h1 { color: var(--text-bright); }
.hero .hero-sub { color: var(--text-bright-muted); }
.hero .microcopy { color: var(--text-bright-soft); }
.hero .eyebrow { color: var(--text-bright-muted); background: #fff1ee12; border-color: #fff1ee21; }
.hero .vsl { border: 1px solid #fff1ee1a; box-shadow: 0 24px 72px #00000080; }

/* a marquee-sáv a sötét hero folytatása */
.marquee-band { background: var(--bg-deep-3); border-color: #fff1ee12; }
.marquee .item { color: var(--text-bright-soft); }
.marquee .item::before { color: var(--pink); }

/* ---------- eszköz-logó sáv ---------- */
.tool-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 880px; margin: 0 auto; }
.tool-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 100px;
  background: #fff1ee0d; border: 1px solid #fff1ee1c;
  color: var(--text-bright-muted);
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.tool-chip:hover { border-color: #e0245e66; transform: translateY(-2px); }
.tool-chip img { opacity: 0.92; display: block; }
.tool-mono {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--grad); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- sticky-scroll szekció ---------- */
.scrolly { padding: 0; }
.scrolly-track { position: relative; }
.scrolly-sticky {
  position: sticky; top: 0; min-height: 100vh;
  display: flex; align-items: center;
  padding: 90px 0 50px;
}
.scrolly-stage { position: relative; max-width: 720px; margin: 0 auto; min-height: 300px; }
@media (max-width: 640px) { .scrolly-stage { min-height: 420px; } }
.scrolly-panel {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  text-align: center; pointer-events: none;
  display: flex; flex-direction: column; justify-content: center;
}
.scrolly-panel.active { opacity: 1; transform: none; pointer-events: auto; }
.sp-num { font-family: var(--font-mono); color: var(--pink); letter-spacing: 0.22em; font-size: 13px; display: block; margin-bottom: 14px; }
.scrolly-panel h3 { color: var(--text-bright); font-size: clamp(1.4rem, 1rem + 1.8vw, 2.2rem); margin-bottom: 14px; }
.scrolly-panel p { color: var(--text-bright-muted); max-width: 560px; margin: 0 auto; }
.scrolly-dots { display: flex; gap: 10px; justify-content: center; margin-top: 26px; }
.sp-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff1ee2b; transition: background 0.3s, transform 0.3s; }
.sp-dot.on { background: var(--grad); transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) {
  .scrolly-track { height: auto !important; }
  .scrolly-sticky { position: static; min-height: 0; padding: 80px 0; }
  .scrolly-stage { min-height: 0; }
  .scrolly-panel { position: static; opacity: 1; transform: none; margin-bottom: 36px; pointer-events: auto; }
}

/* ---------- PulsingBorder shader-keret a foglaló-kártya körül ---------- */
#foglalas .beam-wrap { position: relative; }
.pulse-host {
  position: absolute; inset: -46px;
  z-index: 0; pointer-events: none;
}
.pulse-host canvas { width: 100%; height: 100%; display: block; }
#foglalas .booking-card { position: relative; z-index: 1; }
#foglalas .beam-wrap.has-shader::before { display: none; } /* a CSS-beam átadja a helyét a shadernek */
@media (prefers-reduced-motion: reduce) { .pulse-host { display: none; } }

/* ---------- V3 TURBO: hero-shader, 3D tilt, tömörített szekciók ---------- */
.hero-shader {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  opacity: 0.85;
}
.hero-shader canvas { width: 100%; height: 100%; display: block; }
.hero.has-hero-shader .orb { display: none; } /* a WebGL átveszi az orbok szerepét */
.hero.has-hero-shader::after {
  /* felső fátyol, hogy a szöveg kontrasztja stabil maradjon a shader felett */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(75% 60% at 50% 42%, #0d061880 0%, #0d061820 55%, transparent 100%);
}

/* 3D tilt a VSL-en */
.vsl-tilt { perspective: 1100px; }
.vsl { transition: transform 0.18s ease-out; will-change: transform; transform-style: preserve-3d; }

/* screenshot-sor a videó-proof alatt */
#videoproof .shots-row { grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 880px; margin: 26px auto 0; }
@media (max-width: 860px) { #videoproof .shots-row { grid-template-columns: 1fr; } }
#videoproof .shot-ph { aspect-ratio: 16 / 7; }

/* eszköz-chipek a számok-szekcióban */
.tools-band { margin-top: 44px; text-align: center; }
.tools-label {
  display: block; margin-bottom: 16px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.22em; color: var(--text-bright-soft);
}
@media (prefers-reduced-motion: reduce) { .hero-shader { display: none; } }

/* ================================================================
   V3 TURBO 2 — Synkai-minták: blueprint, színes logó-marquee,
   kétoszlopos scrolly élő mockuppal
   ================================================================ */

/* ---------- blueprint: ikon-sor + összekötő vonal + kártyák ---------- */
.bp-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; margin-bottom: 26px; }
.bp-line { position: absolute; top: 50%; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, #e0245e33, #ff8a3d33); }
.bp-icon {
  position: relative; z-index: 1;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-glow);
}
.bp-icon svg { width: 30px; height: 30px; }
.bp-card h3 { margin: 10px 0 8px; }
.bp-meta { display: flex; justify-content: space-between; align-items: center; }
.bp-time { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--purple-deep); }
@media (max-width: 900px) {
  .bp-track { display: none; } /* mobilon a kártyák viszik, ikonsor nélkül */
}

/* ---------- eszköz-marquee (színes logók, világos sáv) ---------- */
.tools-marquee {
  margin-top: 26px;
  background: var(--bg-cream);
  padding: 22px 0;
}
.tools-marquee .marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tools-marquee .track { display: flex; width: max-content; gap: 40px; animation: marqueeX 36s linear infinite; }
.tools-marquee .row { display: flex; gap: 40px; flex-shrink: 0; align-items: center; }
.tools-marquee .tool-chip {
  background: none; border: none; padding: 0;
  color: var(--text-dark);
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: 0; gap: 12px;
}
.tools-marquee .tool-chip img { width: 26px; height: 26px; opacity: 1; }
.tools-marquee .marquee:hover .track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .tools-marquee .track { animation: none; }
  .tools-marquee .row[aria-hidden="true"] { display: none; }
}

/* ---------- scrolly: két oszlop — mockup + lépés-lista ---------- */
.scrolly-cols {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 44px;
  align-items: center; max-width: 1040px; margin: 0 auto;
}
@media (max-width: 900px) { .scrolly-cols { grid-template-columns: 1fr; gap: 26px; } }

.scrolly-visual { position: relative; min-height: 340px; }
.mock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(18px) scale(0.97); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; }
.mock.active { opacity: 1; transform: none; }
.mock-card {
  width: min(340px, 100%); background: #fff; border-radius: 22px;
  padding: 20px; box-shadow: var(--shadow-lg);
}
.mock-video { background: var(--bg-deep-2); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 20px; }
.mock-play { width: 54px; height: 54px; border-radius: 50%; background: var(--grad); position: relative; box-shadow: var(--shadow-glow); }
.mock-play::after { content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%,-50%); border-left: 15px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.mock-chip { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--text-bright-soft); background: #fff1ee14; border: 1px solid #fff1ee24; border-radius: 100px; padding: 6px 14px; }
.mock-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text-dark); margin-bottom: 14px; }
.mock-tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--purple-deep); background: var(--purple-12); border-radius: 100px; padding: 4px 10px; }
.mock-tag.live { color: #d1195c; }
.mock-tag.ok { color: #0a8f5b; background: #10b98122; }
.mock-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 12px; }
.mock-cal i { height: 22px; border-radius: 6px; background: #efe7ea; }
.mock-cal i.on { background: var(--grad); }
.mock-slot { border: 1.5px solid #e0245e26; border-radius: 10px; padding: 8px 12px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dark); margin-top: 8px; }
.mock-slot.on { background: var(--grad); color: #fff; border: none; }
.mock-bar { height: 6px; border-radius: 4px; background: var(--grad); margin-bottom: 14px; }
.mock-line { height: 12px; border-radius: 6px; background: #efe7ea; margin-top: 10px; }
.mock-callrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 4px; }
.mock-ava { width: 44px; height: 44px; border-radius: 50%; background: var(--grad); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mock-ava.you { background: var(--bg-deep-2); }
.mock-wave { display: flex; gap: 4px; align-items: center; flex: 1; justify-content: center; }
.mock-wave i { width: 4px; border-radius: 2px; background: var(--grad); animation: wave 1s ease-in-out infinite; }
.mock-wave i:nth-child(1) { height: 10px; } .mock-wave i:nth-child(2) { height: 22px; animation-delay: .1s; }
.mock-wave i:nth-child(3) { height: 30px; animation-delay: .2s; } .mock-wave i:nth-child(4) { height: 18px; animation-delay: .3s; }
.mock-wave i:nth-child(5) { height: 8px; animation-delay: .4s; }
@keyframes wave { 0%,100% { transform: scaleY(0.6); } 50% { transform: scaleY(1); } }
.mock-verdict { border-radius: 10px; padding: 10px 14px; margin-top: 8px; font-size: 13px; font-weight: 600; color: #fff; background: var(--grad); }
.mock-verdict.dim { background: #efe7ea; color: var(--text-medium); font-weight: 500; }

.scrolly-list { display: flex; flex-direction: column; gap: 22px; }
.sc-item { display: flex; gap: 18px; align-items: flex-start; opacity: 0.28; transition: opacity 0.35s ease; }
.sc-item.active { opacity: 1; }
.sc-num {
  font-family: var(--font-display); font-weight: 900;
  font-size: 1.6rem; line-height: 1; flex-shrink: 0;
  color: #fff1ee2e;
}
.sc-item.active .sc-num {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.sc-item h3 { color: var(--text-bright); font-size: 1.05rem; margin-bottom: 4px; }
.sc-item p { color: var(--text-bright-muted); font-size: 0.88rem; max-width: 46ch; }

@media (prefers-reduced-motion: reduce) {
  .sc-item { opacity: 1; }
  .mock { position: static; opacity: 1; transform: none; display: none; }
  .mock[data-m="1"] { display: flex; } /* statikusan a naptár-mock látszik */
}

/* ================================================================
   V4 — AX BRAND: Rockstar / Vice City ARANY arculat
   (a Skool-klasszrum thumbnailek világa: arany-narancs naplemente,
   mélybarna-fekete éj, teal másodszín, brush headline-ok)
   Ez a blokk felülír minden korábbi palettát.
   ================================================================ */
:root {
  --purple: #ff9f1a;
  --purple-deep: #b95f07;
  --pink: #ffc233;
  --grad: linear-gradient(130deg, #ffc233 0%, #ff7a1a 55%, #e8590c 100%);
  --grad-rev: linear-gradient(130deg, #e8590c 0%, #ff7a1a 45%, #ffc233 100%);
  --grad-soft: linear-gradient(130deg, #ffc23329, #ff7a1a29);
  --bg-deep: #1a1008;
  --bg-deep-2: #26180a;
  --bg-deep-3: #0f0a04;
  --bg-cream: #faf3e8;
  --bg-pearl: #f2e7d3;
  --text-dark: #241708;
  --text-medium: #6b5638;
  --text-bright: #fdf3e3;
  --text-bright-muted: #fdf3e3c7;
  --text-bright-soft: #fdf3e38c;
  --glow: #ff9f1a59;
  --glow-pink: #ffc2334d;
  --purple-12: #ff9f1a1f;
  --purple-14: #ff9f1a2e;
  --shadow-md: 0 16px 48px #ff9f1a22;
  --shadow-lg: 0 24px 72px #ff9f1a33;
  --shadow-glow: 0 10px 36px #ffc23345, 0 6px 18px #ff7a1a38;
  --teal: #2ec9c0;
  --good: #2ec9a0;
  --bad: #a08b6a;
  --font-brush: "Knewave", "Unbounded", sans-serif;
}

/* --- GTA-gomb: arany gradiens + sötét szöveg --- */
.btn-primary { color: #1d1207; text-shadow: 0 1px 0 #ffffff40; }
@keyframes heroButtonPulse {
  0%, 100% { box-shadow: 0 10px 36px #ffc2332e, 0 6px 18px #ff7a1a26; }
  50% { box-shadow: 0 14px 48px #ffc23352, 0 8px 26px #ff7a1a42; }
}

/* --- brush headline-ok (Rockstar-plakát stílus) --- */
h1, h2 { font-family: var(--font-brush); font-weight: 400; letter-spacing: 0.015em; }
h1 { line-height: 1.02; }
h1 .grad-text, h2 .grad-text {
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.30)) drop-shadow(0 0 22px #ff9f1a40);
}
.sec-dark .grad-text, .sec-darkest .grad-text, .preloader .pre-word span {
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.45)) drop-shadow(0 0 18px #ffc23345);
}
.preloader .pre-word { font-family: var(--font-brush); }

/* --- hero: naplemente-ég + nap-glow + pálma-sziluettek --- */
.hero {
  background:
    radial-gradient(720px 420px at 50% -10%, #ff7a1a14, transparent 70%),
    var(--bg-deep-3);
}
.hero.has-hero-shader::after {
  background: radial-gradient(75% 60% at 50% 42%, #0f0a0480 0%, #0f0a0420 55%, transparent 100%);
}
.hero .sun {
  position: absolute; left: 50%; bottom: -120px; transform: translateX(-50%);
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, #ffc23330 0%, #ff7a1a18 45%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.orb-1 { background: #ff9f1a24; }
.orb-2 { background: #ffc2331c; }
.palm {
  position: absolute; bottom: -8px; width: 220px; height: auto;
  z-index: 0; pointer-events: none; opacity: 0.5;
}
.palm-l { left: -30px; }
.palm-r { right: -30px; transform: scaleX(-1); }
@media (max-width: 900px) { .palm { width: 130px; opacity: 0.35; } }

/* --- korábbi magenta-hardcode-ok felülírása aranyra --- */
.beam-wrap::before {
  background: conic-gradient(from var(--angle),
    transparent 0turn, transparent 0.72turn,
    #ffc233 0.86turn, #ff7a1a 0.93turn, transparent 1turn);
}
.vp-frame { background: radial-gradient(240px 320px at 50% 30%, #ff9f1a26, transparent 72%), var(--bg-deep); border-color: #ff9f1a59; }
.shot-ph { border-color: #ff9f1a59; }
.marquee-band { border-color: #2ec9c026; } /* teal csík — az AX-logó vize */
.mock-tag.live { color: #ff2d2d; background: #ff2d2d1a; } /* LIVE badge, mint a thumbnaileken */
.sc-num { color: #fdf3e326; }

/* --- teal másodszín finom használata --- */
.honesty li::before, .fit-yes li::before { color: var(--teal); }
.tools-label { color: #2ec9c0aa; }

/* ---------- V4.1 — top-VSL minták: review-horgony, proof-pill, 3 pillér ---------- */
.review-anchor {
  margin: 18px auto 0; max-width: 620px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--text-bright-soft);
}
.review-anchor::first-letter { color: #ffc233; }
.proof-pill {
  display: block; width: fit-content; max-width: 640px;
  margin: 26px auto 0; padding: 12px 22px;
  border-radius: 100px;
  background: #ffc23314; border: 1px solid #ffc23333;
  font-size: 0.85rem; color: var(--text-bright-muted);
  text-align: center;
}
.sec-cream .proof-pill, .sec-pearl .proof-pill { background: var(--purple-12); border-color: var(--purple-14); color: var(--text-medium); }
.pillar-t {
  font-family: var(--font-brush); font-size: 1.5rem;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}

/* ================================================================
   V4.2 — GTA-BRUSH CÍMSOROK + MODUL-CAROUSEL + ISMERŐS ÚJRA +
   CHIP-ES REFERENCIA-SÁV
   ================================================================ */

/* --- a cover-képek betű-stílusa: vastag brush, UPPERCASE, dőlt,
       arany gradiens + fekete kontúr-árnyék --- */
:root { --font-brush: "Ranchers", "Bahiana", "Knewave", sans-serif; }
h1, h2 {
  font-family: var(--font-brush);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transform: skew(-3deg);
}
h2 {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 3px 0 rgba(15, 8, 2, 0.55)) drop-shadow(0 0 20px #ff9f1a33);
  padding-right: 0.06em; /* a dőlés ne vágja le az utolsó betűt */
}
h2 .grad-text { filter: none; } /* a teljes h2 már gradiens */
h1 { line-height: 1.04; }
h1 .grad-text { filter: drop-shadow(2px 4px 0 rgba(15, 8, 2, 0.6)) drop-shadow(0 0 24px #ffc23340); }
.preloader .pre-word, .pillar-t, .scrolly-panel h3, .sc-item h3 { font-family: var(--font-brush); text-transform: uppercase; letter-spacing: 0.03em; }

/* --- MODUL-CAROUSEL (oldalra görgethető cover-kártyák) --- */
.mod-rail-wrap { position: relative; }
.mod-rail {
  display: flex; gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 10px max(24px, calc((100vw - 1140px) / 2 + 24px)) 26px;
  scrollbar-width: none;
}
.mod-rail::-webkit-scrollbar { display: none; }
.mod-rail:focus-visible { outline: 2px solid var(--purple); outline-offset: -2px; }
.mod-card {
  flex: 0 0 min(360px, 82vw);
  scroll-snap-align: center;
  background: #fff;
  border: 1px solid #ff9f1a24;
  border-radius: 22px;
  padding: 14px 18px 22px;
  box-shadow: 0 8px 28px #ff9f1a14;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mod-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.mod-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
  background:
    radial-gradient(280px 160px at 50% 20%, #ff7a1a2e, transparent 70%),
    linear-gradient(160deg, #26180a, #0f0a04);
}
.mod-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mod-cover.no-img::after {
  content: "COVER — assets/modules/";
  position: absolute; inset: auto 10px 10px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em;
  color: #fdf3e359; text-align: center;
}
.mod-num {
  position: absolute; top: 10px; left: 12px;
  font-family: var(--font-brush); font-size: 1.5rem;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.6));
}
.mod-tag {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em;
  color: #1d1207; background: var(--grad);
  padding: 4px 10px; border-radius: 100px; font-weight: 600;
}
.mod-card h3 { font-family: var(--font-brush); text-transform: uppercase; font-size: 1.15rem; margin-bottom: 6px; letter-spacing: 0.03em; }
.mod-card p { font-size: 0.88rem; }
.mod-hint {
  text-align: center; margin-top: 2px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em;
  color: var(--text-medium); opacity: 0.7;
}

/* --- ISMERŐS? — sötét, döntött "graffiti-kártyák" --- */
#ismeros .pain-card {
  background: #221407;
  border: 1px solid #ff9f1a30;
  border-left: none;
  color: var(--text-bright-muted);
  font-size: 1rem;
  box-shadow: 0 10px 30px #00000059;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
#ismeros .grid > .pain-card:nth-child(odd) { transform: rotate(-1.1deg); }
#ismeros .grid > .pain-card:nth-child(even) { transform: rotate(1.1deg); }
#ismeros .pain-card:hover { transform: rotate(0deg) translateY(-3px); border-color: #ffc23366; }
#ismeros .callout {
  background: #ffc2331a;
  border-color: #ffc23340;
  color: var(--text-bright);
}

/* --- referencia-marquee: chip-esítve --- */
.marquee .item {
  padding: 10px 20px;
  border: 1px solid #ffc23330;
  border-radius: 100px;
  background: #ffc2330f;
  color: var(--text-bright-muted);
  font-size: 12px;
}
.marquee .item::before { content: "★ "; color: #ffc233; font-size: 11px; }
.marquee .track { gap: 18px; }
.marquee .row { gap: 18px; }

/* --- eszköz-fejléc a logók fölött --- */
.tools-band { max-width: 720px; margin-inline: auto; }
.tools-title {
  font-family: var(--font-brush); text-transform: uppercase;
  font-size: 1.6rem; letter-spacing: 0.03em;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.5));
  margin-bottom: 6px;
}
.tools-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #2ec9c0aa; margin-bottom: 12px; }
.tools-text { font-size: 0.92rem; color: var(--text-bright-muted); margin-bottom: 8px; }

/* ---------- V4.3 — modul-sáv sticky üzemmódban (desktop) ---------- */
.mod-track { position: relative; }
.mod-sticky { display: flex; flex-direction: column; justify-content: center; }
#modulok.mod-pinned { padding: 0; }
#modulok.mod-pinned .mod-sticky {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden;
}
#modulok.mod-pinned .mod-rail {
  overflow-x: visible;
  scroll-snap-type: none;
  will-change: transform;
  transition: none;
}
#modulok.mod-pinned .mod-hint { display: none; }
#modulok.mod-pinned .mod-card { flex-basis: 380px; }

/* ================================================================
   V4.4 — KIEMELŐK + DIFFERENCIÁTOR-TURBO + MEGA-CTA
   ================================================================ */

/* --- arany szöveg-kiemelő (==szöveg== a content.js-ben) --- */
mark.hl {
  background: linear-gradient(180deg, transparent 55%, #ffc23342 55%);
  color: inherit;
  font-weight: 700;
  padding: 0 0.12em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.sec-dark mark.hl, .sec-darkest mark.hl {
  background: linear-gradient(180deg, transparent 55%, #ff9f1a3d 55%);
  color: var(--text-bright);
}

/* --- differenciátor-body: nagyobb, erősebb --- */
#kulonbseg .diff-body {
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--text-bright-muted);
}

/* --- összehasonlító tábla: a NÁLAM oszlop aranyban --- */
.c-me { background: #ffc23312; color: var(--text-bright); }
.compare-row .c-me { border-left: 2px solid #ffc2334d; font-weight: 600; }
.compare-head > div { background: #0f0a04b3; }
.compare { border: 1px solid #ffc2331f; }
@media (max-width: 760px) {
  .compare-row .c-me::before { color: var(--pink); }
}

/* --- MEGA-CTA zóna a tábla alatt --- */
.mega-cta {
  position: relative;
  max-width: 720px;
  margin: 52px auto 0;
  padding: 44px 32px 38px;
  text-align: center;
  border-radius: 28px;
  background:
    radial-gradient(420px 220px at 50% 0%, #ff9f1a1f, transparent 70%),
    #22140799;
  border: 1px solid #ffc23330;
  overflow: hidden;
}
.mega-cta::before {
  content: "";
  position: absolute; top: 0; left: 15%; right: 15%; height: 2px;
  background: var(--grad);
  filter: blur(0.5px);
  box-shadow: 0 0 18px #ffc23366;
}
.mega-cta .closing {
  font-family: var(--font-brush);
  text-transform: uppercase;
  font-size: clamp(1.15rem, 0.9rem + 1.2vw, 1.7rem);
  letter-spacing: 0.03em;
  color: var(--text-bright);
  line-height: 1.25;
  margin-bottom: 24px;
  transform: skew(-2deg);
}
.mega-cta .closing mark.hl {
  background: none;
  -webkit-background-clip: unset;
  background-image: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.5));
  font-weight: 400; padding: 0;
}
.mega-cta .microcopy { margin-top: 16px; }
.mega-cta .proof-pill { margin-top: 20px; }

/* ================================================================
   V4.5 — ESZKÖZ-SÁV ÚJRATERVEZVE (sötét, integrált) + BOLD-RENDSZER
   ================================================================ */

/* --- strong: a "nyomott hangszín" — mindenhol súlyt kap --- */
strong { font-weight: 700; color: var(--text-dark); }
.sec-dark strong, .sec-darkest strong, .hero strong,
.marquee .item strong, .stat-label strong, .scrolly-panel strong,
.sc-item strong, .mega-cta strong { color: var(--text-bright); }
.microcopy strong { color: inherit; opacity: 1; }
.c-me strong { color: #ffc233; }           /* a táblázat NÁLAM-celláiban aranyban üt */
.stat-label strong { color: #ffc233cc; }
.faq-a strong, .faq-a mark.hl { font-weight: 700; }

/* --- eszköz-marquee: NINCS többé fehér csík — a sötét szekció része --- */
.tools-marquee {
  background: transparent;
  margin-top: 30px;
  padding: 30px 0 34px;
  position: relative;
}
.tools-marquee::before, .tools-marquee::after {
  content: "";
  position: absolute; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, #ffc2334d 30%, #ffc2334d 70%, transparent);
}
.tools-marquee::before { top: 0; }
.tools-marquee::after { bottom: 0; }
.tools-marquee .tool-chip {
  background: #fdf3e30a;
  border: 1px solid #ffc23326;
  border-radius: 100px;
  padding: 10px 22px 10px 12px;
  color: var(--text-bright);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  gap: 12px;
  box-shadow: 0 4px 18px #00000040;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.tools-marquee .tool-chip:hover { border-color: #ffc23359; background: #fdf3e312; }
/* a színes logó krém "érme-korongon" ül — a sötét háttéren is él minden brand-szín */
.tools-marquee .tool-chip img {
  width: 30px; height: 30px;
  background: #fdf3e3;
  border-radius: 50%;
  padding: 5px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px #00000059, inset 0 0 0 1px #ffc23333;
}
.tools-marquee .tool-mono {
  width: 30px; height: 30px; font-size: 12px;
  box-shadow: 0 2px 8px #00000059;
}

/* --- FIX: a hero abszolút díszei (pálmák, nap, orbok, shader) a heróhoz horgonyzódjanak --- */
.hero { position: relative; }

/* ================================================================
   V5 — CÍMSOROK VISSZA UNBOUNDED-RE + HALVÁNY BALI-HÁTTÉR A HERÓBAN
   ================================================================ */

/* --- címsorok: a brush (Ranchers) helyett vissza a display fontra --- */
h1, h2 {
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: -0.025em;
  transform: none;
}
h1 { font-weight: 900; line-height: 0.98; }
h2 {
  font-weight: 800; line-height: 1.05;
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  color: var(--text-dark);
  -webkit-text-fill-color: currentcolor;
  filter: none;
  padding-right: 0;
}
.sec-dark h2, .sec-darkest h2 { color: var(--text-bright); }
h1 .grad-text, h2 .grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(15, 8, 2, 0.35)) drop-shadow(0 0 18px #ffc23340);
}

/* --- al-címsorok, kiemelt sorok: szintén vissza a displayre --- */
.preloader .pre-word, .pillar-t, .scrolly-panel h3, .sc-item h3,
.mod-card h3, .tools-title, .mega-cta .closing, .mod-num {
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: -0.01em;
  transform: none;
}
.pillar-t { font-size: 1.22rem; font-weight: 800; }
.tools-title { font-size: 1.3rem; font-weight: 800; }
.mod-card h3 { font-size: 1rem; font-weight: 800; }
.mod-num { font-size: 1.15rem; font-weight: 900; }
.mega-cta .closing { font-weight: 800; font-size: clamp(1.05rem, 0.85rem + 1vw, 1.5rem); }

/* --- halvány Bali / Vice City jelenet a hero mögött, ~85% sötét fátyollal --- */
.hero-scene {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  overflow: hidden;
}
.hero-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-scene::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    #1a1008f0 0%,
    #1a1008d9 40%,
    #140c05cc 70%,
    #0f0a04e6 100%);
}
.hero .palm { display: none; } /* a régi sarok-pálmákat a jelenet saját pálmái váltják */

/* ================================================================
   V6 — VÉGLEGES CÍMSOR-BETŰ: BEBAS NEUE (font-casting győztes)
   Alcímek (hero-sub, section-sub): Inter Tight.
   ================================================================ */
:root { --font-display: "Bebas Neue", "Unbounded", sans-serif; }
h1, h2 { font-weight: 400; letter-spacing: 0.012em; }
h1 { font-size: calc(var(--text-h1) * 1.18); line-height: 0.92; }
h2 { font-size: calc(var(--text-h2) * 1.12); line-height: 0.95; }
h3, .pillar-t, .tools-title { font-weight: 400; letter-spacing: 0.02em; }
.preloader .pre-word, .mod-card h3, .mega-cta .closing, .mod-num { font-weight: 400; letter-spacing: 0.02em; }
.hero-sub, .section-sub { font-family: "Inter Tight", var(--font-body); font-weight: 400; }

/* ================================================================
   V6.1 — MOBIL SOCIAL PROOF: snappelő videó-carousel (MekkMester-minta)
   + screenshot-kártyák 3D belépővel a carousel után
   ================================================================ */
@media (max-width: 860px) {
  /* — videókártyák: teljes szélességű, középre snappelő sáv, peek-elő szélekkel — */
  #videoproof .vp-grid {
    display: flex;
    max-width: none;
    margin: 0 -24px;
    padding: 4px 26vw 10px;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #videoproof .vp-grid::-webkit-scrollbar { display: none; }
  /* kompakt kártya — nem tölti ki a képernyőt, a szomszédok jól látszanak */
  #videoproof .vp-card {
    flex: 0 0 47vw;
    scroll-snap-align: center;
    position: relative;
  }
  #videoproof .vp-frame { margin-bottom: 0; border-radius: 18px; }
  #videoproof .vp-play { width: 40px; height: 40px; }
  #videoproof .vp-play::after {
    border-left-width: 12px; border-top-width: 7px; border-bottom-width: 7px;
  }
  #videoproof .vp-frame .tl-ph { font-size: 8.5px; padding: 5px 8px; }
  /* név + eredmény rá a videóra, a kártya aljára */
  #videoproof .vp-card h3 {
    position: absolute; left: 10px; right: 10px; bottom: 26px;
    margin: 0; pointer-events: none;
    color: #fff; font-size: 1.02rem; letter-spacing: 0.03em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  }
  #videoproof .vp-card p {
    position: absolute; left: 10px; right: 10px; bottom: 10px;
    margin: 0; pointer-events: none;
    color: #ffffffe0; font-size: 0.72rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
  }

  /* — screenshot-referenciák: egymásra pakolódó sticky kártya-pakli — */
  #videoproof .shots-row { perspective: 900px; }
  #videoproof .shot-ph { aspect-ratio: 16 / 9; }
  #videoproof .shots-row.shot-stack { display: block; }
  #videoproof .shot-stack .shot-ph {
    position: sticky;
    border-style: solid;
    border-color: #ff9f1a4d;
    background: #fffdf7;
    box-shadow: 0 22px 60px rgba(31, 18, 4, 0.22), 0 4px 14px rgba(31, 18, 4, 0.12);
    overflow: hidden;
    will-change: transform;
  }
  /* arany hairline a kártya tetején — brand-jel */
  #videoproof .shot-stack .shot-ph::before {
    content: ""; position: absolute; top: 0; left: 14%; right: 14%; height: 3px;
    background: var(--grad); border-radius: 0 0 6px 6px; opacity: 0.9;
  }
  #videoproof .shot-stack .shot-ph:nth-child(1) { top: 86px; margin-bottom: 150px; }
  #videoproof .shot-stack .shot-ph:nth-child(2) { top: 100px; margin-bottom: 150px; }
  #videoproof .shot-stack .shot-ph:nth-child(3) { top: 114px; margin-bottom: 24px; }
}

/* ================================================================
   V6.3 — STICKY MOBIL CTA: lebegő pill, háttérsáv nélkül
   ================================================================ */
.sticky-cta {
  left: 16px; right: 16px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  padding: 0;
  background: none;
  backdrop-filter: none;
  border-top: none;
  transform: translateY(150%);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sticky-cta .btn {
  width: 100%; max-width: 440px;
  font-size: 17px;
  letter-spacing: 0.06em;
  padding: 17px 30px;
  box-shadow: 0 14px 38px #ff7a1a52, 0 6px 16px #00000059, inset 0 1px 0 #ffffff4d;
}

/* ================================================================
   V6.5 — "AZ ÚT" TELEFONON: LÉPÉS-ROTÁCIÓ
   Egy képernyő = a mock + az aktív lépés szövege. Görgetésre a
   lement lépés balra fordul ki, az új jobbról fordul be, a mock
   szinkronban vált. Pont-progressz mutatja, hol tart a látogató.
   ================================================================ */
#ut .scrolly-dots { display: none; }
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  #ut .scrolly-sticky { padding: 48px 0 96px; }
  #ut .scrolly-cols { gap: 18px; }
  #ut .scrolly-visual { min-height: clamp(170px, 26svh, 250px); }
  #ut .scrolly-list { order: 2; position: relative; min-height: 205px; }
  #ut .scrolly-micro { display: none; }
  #ut .sp-dot { width: 8px; height: 8px; background: #fdf3e347; }
  #ut .sc-item {
    position: absolute; inset: 0 0 auto 0;
    opacity: 0; pointer-events: none;
    transform: perspective(900px) rotateY(30deg) translateX(56px);
    transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  #ut .sc-item.done { transform: perspective(900px) rotateY(-30deg) translateX(-56px); }
  #ut .sc-item.active { opacity: 1; transform: none; pointer-events: auto; }
  #ut .mock {
    transform: perspective(900px) rotateY(-22deg) scale(0.95);
    transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  #ut .mock.active { transform: none; }
  #ut .scrolly-dots { display: flex; order: 1; margin-top: 0; }
}

/* ================================================================
   V6.6 — HERO BRAND-SOR (Zero to Heroes) + ANNOUNCE-KONTRASZT
   ================================================================ */
.hero-brand {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.3rem);
  letter-spacing: 0.07em;
  line-height: 1;
  margin: 0 0 16px;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(15, 8, 2, 0.35)) drop-shadow(0 0 18px #ffc23340);
  text-wrap: balance;
}
.announce { color: #fdf3e3d9; font-size: 12.5px; padding: 10px 16px; }
.announce b, .announce strong { color: #ffc233; font-weight: 700; }
/* a navbar kivezetése után a hero nagy felső ürességére nincs szükség */
.hero { padding-top: 72px; }
@media (max-width: 700px) { .hero { padding-top: 48px; } }

/* ================================================================
   V6.7 — FESZESEBB RITMUS: behúzott térközök mobilon és gépen
   ================================================================ */
section { padding: 56px 0; }
@media (min-width: 900px) { section { padding: 84px 0; } }
section[id] { scroll-margin-top: 24px; } /* fixed nav már nincs, kis rásegítés elég */
.section-head { margin-bottom: 30px; }
@media (min-width: 900px) { .section-head { margin-bottom: 38px; } }
.hero { padding-bottom: 60px; }
@media (max-width: 700px) {
  .hero { padding-bottom: 40px; }
  .hero h1 { margin-bottom: 16px; }
  .hero-sub { margin-bottom: 24px; }
}
.marquee-band { padding: 16px 0; }
.tools-band { margin-top: 30px; }
.mega-cta { margin-top: 40px; padding: 34px 26px 30px; }
footer { padding: 40px 0 108px; } /* alul hely marad a lebegő CTA-pillnek */

/* ================================================================
   V6.8 — "AZ ÚT" MOBILON: kompakt mockok, kisebb szövegek,
   nincs többé címre lógó kártya és holt tér
   ================================================================ */
@media (max-width: 900px) {
  #ut .section-head { margin-bottom: 12px !important; } /* az inline 30px-et üti */
  #ut h2 { font-size: calc(var(--text-h2) * 0.92); }
  #ut .scrolly-sticky { padding: 36px 0 92px; align-items: flex-start; }
  #ut .scrolly-visual { min-height: clamp(180px, 26svh, 220px); }
  #ut .mock-video { min-height: 170px; justify-content: center; }
  #ut .scrolly-list { min-height: 182px; }
  /* — mock-kártyák: minden elem arányosan kisebb, hogy beférjen a dobozába — */
  #ut .mock-card { width: min(264px, 78vw); padding: 12px 14px; border-radius: 16px; }
  #ut .mock-head { font-size: 12px; margin-bottom: 8px; }
  #ut .mock-tag { font-size: 8.5px; padding: 3px 8px; }
  #ut .mock-cal { gap: 4px; margin-bottom: 8px; }
  #ut .mock-cal i { height: 14px; border-radius: 4px; }
  #ut .mock-slot { padding: 5px 10px; font-size: 10px; margin-top: 6px; border-radius: 8px; }
  #ut .mock-video { padding: 24px 16px; gap: 10px; }
  #ut .mock-play { width: 38px; height: 38px; }
  #ut .mock-play::after { border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px; }
  #ut .mock-chip { font-size: 9px; padding: 4px 10px; }
  #ut .mock-bar { margin-bottom: 8px; }
  #ut .mock-line { height: 9px; margin-top: 7px; }
  #ut .mock-callrow { padding: 5px 2px; }
  #ut .mock-ava { width: 34px; height: 34px; font-size: 11px; }
  #ut .mock-verdict { padding: 8px 11px; margin-top: 6px; font-size: 12px; }
  /* — lépés-szövegek: egy fokkal kisebb, feszesebb — */
  #ut .sc-item { gap: 14px; }
  #ut .sc-num { font-size: 1.3rem; }
  #ut .sc-item h3 { font-size: 0.98rem; }
  #ut .sc-item p { font-size: 0.84rem; }
}

/* ================================================================
   V7 — TIPOGRÁFIA A SKILL-SKÁLÁRA HANGOLVA (gép + telefon):
   mobil body 16px, H2 ~32-35px, H1 poster-méret; a lead-ek levegősek.
   "Az út" lépés-szövege teljes szélességen fut, nem szorul oszlopba.
   ================================================================ */
:root {
  --text-h1: clamp(2.5rem, 1.5rem + 3.6vw, 4.2rem);
  --text-h2: clamp(1.9rem, 1.3rem + 2.3vw, 3rem);
  --text-lead: clamp(1.06rem, 0.98rem + 0.5vw, 1.28rem);
}
body { font-size: 16.5px; }
@media (max-width: 700px) { body { font-size: 16px; } }

/* ================================================================
   V7.3 — SZABADSÁG-SZEKCIÓ: szöveg felül, alatta keretes showreel-slot
   (a slot a proof-kártyák nyelvén beszél: keret + play + chip;
    videóval: autoplay loop + hang-kapcsoló, REC-jelzéssel)
   ================================================================ */
.ls .section-head { max-width: 720px; }
.ls h2 { font-size: clamp(2.2rem, 1.7rem + 2.6vw, 3.6rem); line-height: 0.98; }
.ls-lead {
  font-family: "Inter Tight", var(--font-body);
  font-size: clamp(1.1rem, 1rem + 0.7vw, 1.34rem);
  line-height: 1.5;
  color: var(--text-bright);
  max-width: 36ch; margin: 14px auto 12px;
  text-wrap: balance;
}
.ls-lead strong { color: #ffc233; }
.ls-lead mark.hl {
  background: #ffc23329; color: var(--text-bright);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 1px 6px; border-radius: 6px;
}
.ls-body {
  font-size: clamp(0.96rem, 0.9rem + 0.4vw, 1.08rem);
  line-height: 1.62;
  color: var(--text-bright-muted);
  max-width: 54ch; margin: 0 auto;
}
.ls-body strong { color: var(--text-bright); }

/* — a videó-slot: keretes, glow-os kártya (16:9) — */
.ls-slot-wrap { max-width: 340px; margin: 38px auto 0; }
.ls-slot {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid #ffc23342;
  background: var(--bg-deep-3);
  box-shadow: 0 30px 80px #00000073, 0 0 60px #ff9f1a2b, inset 0 0 0 1px #ffffff0d;
}
.ls-slot video, .ls-slot .ls-scene {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.ls-scene { animation: lsKen 26s ease-in-out infinite alternate; transform-origin: 50% 74%; }
@keyframes lsKen { from { transform: scale(1); } to { transform: scale(1.16); } }
.ls-slot .ls-veil {
  position: absolute; inset: 0;
  background: radial-gradient(70% 70% at 50% 46%, #0f0a0433 0%, #0f0a04a6 100%);
}
.ls-slot.live .ls-scene, .ls-slot.live .ls-veil, .ls-slot.live .ls-slot-inner { display: none; }
.ls-slot-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
}
.ls-play {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--grad); box-shadow: var(--shadow-glow);
  position: relative;
}
.ls-play::after {
  content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%);
  border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.ls-ph { border-color: #fff1ee40; background: #fff1ee14; color: var(--text-bright-soft); max-width: 82%; text-align: center; }
.ls-chip {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 2;
  white-space: nowrap;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em;
  color: #ffc233c7;
  background: #0f0a0480;
  padding: 6px 10px; border-radius: 100px;
  backdrop-filter: blur(6px);
}
.ls-chip::before {
  content: "";
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #ff2d2d; margin-right: 7px;
  animation: lsRec 1.6s ease-in-out infinite;
  vertical-align: 1px;
}
@keyframes lsRec { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.ls-sound {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-bright);
  background: #0f0a04b3;
  border: 1px solid #ffc23340;
  border-radius: 100px;
  padding: 9px 16px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ls-sound[hidden] { display: none; } /* videó nélkül tényleg rejtve */
.ls-sound:hover { border-color: #ffc23380; }
.ls-sound.on { background: var(--grad); color: #1d1207; border-color: transparent; }
.ls-sound svg { width: 15px; height: 15px; fill: currentColor; }
@media (max-width: 700px) {
  .ls-slot-wrap { width: min(66vw, 300px); margin-top: 28px; }
  .ls-slot { border-radius: 18px; }
  .ls-play { width: 48px; height: 48px; }
  .ls-play::after { border-left-width: 14px; border-top-width: 8px; border-bottom-width: 8px; }
  .ls-ph { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-scene { animation: none; }
  .ls-chip::before { animation: none; }
}

/* ================================================================
   V7.1 — "ISMERŐS?" ÚJRA: éjszakai belső monológ chat-streamben.
   Bejövő buborékok időbélyeggel, a végén Balabán arany válasza.
   ================================================================ */
#ismeros .section-head { max-width: 640px; margin-inline: auto; }
#ismeros .grid {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 640px; margin: 0 auto;
}
#ismeros .chat-msg {
  align-self: flex-start;
  max-width: min(88%, 540px);
  background: #241708;
  border: 1px solid #ffc23326;
  border-radius: 18px 18px 18px 5px;
  padding: 13px 18px 14px;
  color: var(--text-bright-muted);
  font-size: 1rem; line-height: 1.55;
  box-shadow: 0 6px 22px #00000045;
}
#ismeros .chat-msg:nth-child(even) { margin-left: 26px; } /* enyhe beszélgetés-ritmus */
#ismeros .chat-msg strong { color: #ffc233; }
#ismeros .chat-time {
  display: block;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em;
  color: #fdf3e34d; margin-bottom: 5px;
}
#ismeros .callout {
  position: relative;
  max-width: min(92%, 570px);
  margin: 16px 0 0 auto; /* jobbra zár — ez a válasz */
  background: var(--grad);
  border: none;
  border-radius: 20px 20px 5px 20px;
  padding: 18px 22px 16px;
  color: #1d1207;
  font-size: 1.02rem; line-height: 1.55;
  box-shadow: 0 14px 40px #ff7a1a45, 0 4px 14px #00000059;
}
#ismeros .callout::before {
  content: "BALABÁN · MOST";
  display: block;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em;
  color: #1d1207a6; margin-bottom: 6px;
}
#ismeros .callout, #ismeros .callout strong, #ismeros .callout mark.hl { color: #1d1207; }
#ismeros .callout mark.hl { background: #fdf3e359; }
#ismeros .callout .grad-text {
  background: none; color: #1d1207;
  -webkit-text-fill-color: currentcolor;
  font-weight: 800;
  filter: none;
  text-decoration: underline 2px rgba(29, 18, 7, 0.55);
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  /* az út: sorszám a cím elé úsztatva — a bekezdés kihasználja a teljes szélességet */
  #ut .sc-item { display: block; }
  #ut .sc-num { float: left; margin-right: 12px; font-size: 1.4rem; line-height: 1.1; }
  #ut .sc-item h3 { font-size: 1.14rem; margin-bottom: 8px; }
  #ut .sc-item p { font-size: 0.98rem; line-height: 1.62; max-width: none; }
  #ut .scrolly-list { min-height: 228px; }
  #ut .scrolly-sticky { padding: 32px 0 88px; }
  #ut .container { padding: 0 18px; }
}

/* ================================================================
   V6.4 — NAVBAR KI (mindenhol), STICKY CTA DESKTOPON IS
   ================================================================ */
.nav { display: none; }
@media (min-width: 900px) {
  .sticky-cta { display: block; bottom: 22px; }
  .sticky-cta .btn { max-width: 400px; }
}

/* ================================================================
   V7.4 — "AZ ÚT" SZÍNCSERE: világos (krém) szekció, sötét
   mock-kártyák, sötét szövegek — minden kontrasztra hangolva
   ================================================================ */
/* lépés-szövegek: sötét a krémen */
#ut .sc-item h3 { color: var(--text-dark); }
#ut .sc-item p { color: var(--text-medium); }
#ut .sc-item strong { color: var(--text-dark); }
#ut .sc-num { color: #24170826; }
#ut .sc-item.active .sc-num {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* pont-progressz: sötét pöttyök, az aktív marad arany */
#ut .sp-dot { background: #24170830; }
#ut .sp-dot.on { background: var(--grad); }

/* mock-kártyák: a szekció korábbi mélybarnáját kapják */
#ut .mock-card {
  background: #241708;
  border: 1px solid #ffc23333;
  box-shadow: 0 24px 60px #24170840, 0 6px 18px #00000033;
}
#ut .mock-head { color: var(--text-bright); }
#ut .mock-tag { color: #ffc233; background: #ffc2331f; }
#ut .mock-tag.live { color: #ff5d5d; background: #ff2d2d1f; }
#ut .mock-tag.ok { color: #2ec9a0; background: #2ec9a01f; }
#ut .mock-cal i { background: #fdf3e31f; }
#ut .mock-cal i.on { background: var(--grad); }
#ut .mock-slot { border-color: #ffc23342; color: var(--text-bright-muted); }
#ut .mock-slot.on { background: var(--grad); color: #1d1207; border: none; }
#ut .mock-line { background: #fdf3e321; }
#ut .mock-ava.you { background: #fdf3e326; }
#ut .mock-verdict.dim { background: #fdf3e31f; color: var(--text-bright-muted); }

/* ================================================================
   V7.5 — "AZ ÚT" DESKTOP NYÍLVONAL
   A lépéslista timeline-ná alakul: halvány sín fut a lépések mellett,
   görgetésre arany fényvonal töltődik rajta (--ut-fill px-ben, a JS
   állítja), és minden lépésnél egy lefelé mutató nyílhegy izzik fel,
   ahogy a fény eléri. Mobil (≤900px) érintetlen.
   ================================================================ */
@media (min-width: 901px) {
  /* kompakt sticky-képernyő: a teljes 5 lépés férjen el egy laptop-viewporton,
     az alsó tér a fix CTA-pill alatt hagy helyet a mikroszövegnek */
  #ut .scrolly-sticky { padding: 24px 0 72px; }
  #ut .section-head { margin-bottom: 16px !important; }
  #ut .scrolly-list { position: relative; padding-left: 60px; gap: 24px; }

  /* halvány sín */
  #ut .scrolly-list::before {
    content: ""; position: absolute; left: 20px; top: 4px; bottom: 4px;
    width: 2px; border-radius: 2px; background: #24170817;
  }
  /* töltődő arany fényvonal */
  #ut .scrolly-list::after {
    content: ""; position: absolute; left: 19px; top: 4px;
    width: 4px; border-radius: 4px;
    height: min(calc(100% - 8px), var(--ut-fill, 0px));
    background: linear-gradient(180deg, #ffc233, #ff7a1a);
    box-shadow: 0 0 10px #ff9f1a80, 0 0 26px #ff9f1a33;
    transition: height 0.15s ease-out;
  }

  /* nyílhegy minden lépésnél a sínen — SVG-maszk, px-re szimmetrikus,
     a 24px-es doboz közepe pontosan a sín tengelyén (x=21) ül */
  #ut .sc-item { position: relative; gap: 20px; }
  #ut .sc-item::before {
    content: ""; position: absolute; left: -51px; top: 7px;
    width: 24px; height: 14px;
    background: #24170822;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'><path d='M3.5 2.5 L12 11 L20.5 2.5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'><path d='M3.5 2.5 L12 11 L20.5 2.5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    transition: background-color 0.3s ease, filter 0.3s ease;
  }
  #ut .sc-item.done::before,
  #ut .sc-item.active::before {
    background: #ff7a1a;
    filter: drop-shadow(0 0 5px #ff9f1a99);
  }

  /* lépés-tipográfia: nagyobb jelenlét a timeline mellett */
  #ut .sc-num { font-size: 1.8rem; }
  #ut .sc-item h3 { font-size: 1.4rem; letter-spacing: 0.02em; }
  #ut .sc-item p { font-size: 0.95rem; max-width: 52ch; }
}
/* a már lement lépések olvashatók maradnak, csak az aktív világít teljesen */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  #ut .sc-item { opacity: 0.35; }
  #ut .sc-item.done { opacity: 0.72; }
  #ut .sc-item.active { opacity: 1; }
}
/* reduced-motion: statikus, végig kivilágított timeline */
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  #ut .scrolly-list::after { height: calc(100% - 8px); }
  #ut .sc-item::before { background: #ff7a1a; }
}

/* ================================================================
   V7.6 — NAGYOBB LOGÓ-CHIPEK + NAGYOBB FOGLALÓ CTA-GOMBOK
   ================================================================ */
/* eszköz-marquee: nagyobb érme-logók és szoftvernevek (gép) */
.tools-marquee .tool-chip { padding: 12px 28px 12px 14px; font-size: 18px; gap: 14px; }
.tools-marquee .tool-chip img, .tools-marquee .tool-mono { width: 44px; height: 44px; }
.tools-marquee .tool-chip img { padding: 7px; }
.tools-marquee .tool-mono { font-size: 16px; }
@media (max-width: 640px) {
  /* telefonon is nagyobb, de férjen el a sávban */
  .tools-marquee .tool-chip { padding: 10px 24px 10px 12px; font-size: 16px; gap: 12px; }
  .tools-marquee .tool-chip img, .tools-marquee .tool-mono { width: 38px; height: 38px; }
  .tools-marquee .tool-chip img { padding: 6px; }
}

/* hívásfoglaló CTA-k: jóval nagyobb gomb, arányosan nagyobb felirat */
a.btn-primary[data-cta]:not(.btn-nav) { font-size: 1.25rem; padding: 22px 52px; letter-spacing: 0.04em; }
a.btn-primary.btn-big[data-cta] { font-size: 1.35rem; padding: 25px 60px; }
@media (max-width: 640px) {
  a.btn-primary[data-cta]:not(.btn-nav) { font-size: 1.12rem; padding: 19px 40px; }
  a.btn-primary.btn-big[data-cta] { font-size: 1.08rem; padding: 19px 24px; white-space: nowrap; }
}
/* sticky pill: a felirat majdnem a gomb két széléig ér, a magasság arányos marad
   (a fenti CTA-szabályok UTÁN kell állnia, mert a pill linkje is data-cta) */
.sticky-cta a.btn.btn-primary {
  font-size: clamp(15px, 4.4vw, 19px);
  line-height: 1.1;
  letter-spacing: 0.05em;
  padding: 9px 12px;
  max-width: 300px;
  white-space: nowrap;
}

/* ================================================================
   V7.7 — GYIK: nagyobb kérdés-sorok gépen és telefonon
   (telefonon ~20px, gépen ~23px — a Bebas kondenzált, bírja)
   ================================================================ */
.faq-q { font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.42rem); padding: 18px 48px 18px 0; }
.faq-q::after { font-size: 1.9rem; }

/* ================================================================
   V7.8 — "KÜLÖNBSÉG" SZEKCIÓ: középre zárt fej + body, prémium
   szövegkiemelés (arany gradient betű + vékony, eltolt aláhúzás
   a tömbszerű filc-highlight helyett)
   ================================================================ */
#kulonbseg .section-head { text-align: center; margin-inline: auto; }
#kulonbseg .section-head h2,
#kulonbseg .section-head .section-sub { margin-inline: auto; }
#kulonbseg .diff-body {
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
  line-height: 1.75;
}
/* kulcsmondat: arany gradient szöveg, halvány arany aláhúzással */
#kulonbseg .diff-body mark.hl {
  background: linear-gradient(92deg, #ffc233, #ff9f1a 55%, #ff7a1a);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  padding: 0; border-radius: 0;
  text-decoration: underline;
  text-decoration-color: #ff9f1a4d;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
/* másodlagos hangsúly: fényes fehér, a tompított body-ból kiemelkedik */
#kulonbseg .diff-body strong { color: var(--text-bright); }

/* ================================================================
   V8.1 — STICKY ANNOUNCE-SÁV: görgetésnél fent marad
   (a body közvetlen gyereke, így az egész oldalon át kitart;
   z-index a consent [100] és a modal [200] alatt, tartalom felett)
   ================================================================ */
.announce {
  position: sticky; top: 0; z-index: 150;
  box-shadow: 0 4px 16px #00000059;
}

/* ================================================================
   V8.4 — ROADMAP ORBIT: sticky szekció, görgetésre töltődő körrel.
   A címkék a körön KÍVÜL ülnek sugárirányban — a fényvonal sosem
   takar szöveget; telefonon csak ikon-érmék, a szöveg középen vált.
   ================================================================ */
#roadmap { padding: 0; }
#roadmap .rm-track { position: relative; }
#roadmap .rm-sticky { position: sticky; top: var(--rm-y, 0px); padding: 30px 0 96px; } /* az alsó tér a fix CTA-pillnek hagy helyet */
#roadmap .rm-sub { margin-inline: auto; }
#roadmap .rm-stage {
  position: relative;
  width: min(560px, 88vw);
  aspect-ratio: 1;
  margin: 14px auto 0;
}
#roadmap .rm-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
#roadmap .rm-fill { filter: drop-shadow(0 0 8px #ff9f1a66); transition: stroke-dashoffset 0.15s linear; }
/* atmoszféra a kör mögé */
#roadmap .rm-stage::before {
  content: ""; position: absolute; inset: -8%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #ff9f1a10 30%, transparent 68%);
}

/* checkpoint-érmék a körvonalon */
#roadmap .rm-node { position: absolute; transform: translate(-50%, -50%); }
#roadmap .rm-node .coin {
  width: 56px; height: 56px; border-radius: 50%;
  background: #2a1c0e; border: 1.5px solid #ffc23342;
  display: flex; align-items: center; justify-content: center;
  color: #fdf3e3a6; position: relative;
  transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}
#roadmap .rm-node .coin svg {
  width: 24px; height: 24px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
#roadmap .rm-node.lit .coin {
  background: var(--grad); color: #1d1207; border-color: transparent;
  box-shadow: 0 0 18px #ff9f1a66, 0 0 44px #ff9f1a2e;
}
/* szikrák az aktív érmén */
#roadmap .coin.spark::before, #roadmap .coin.spark::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  background:
    radial-gradient(2px 2px at 12% 22%, #ffd76b 60%, transparent 61%),
    radial-gradient(2.5px 2.5px at 85% 15%, #ffc233 60%, transparent 61%),
    radial-gradient(2px 2px at 92% 70%, #ff9f1a 60%, transparent 61%),
    radial-gradient(1.8px 1.8px at 20% 88%, #ffd76b 60%, transparent 61%),
    radial-gradient(2.2px 2.2px at 55% -2%, #ffc233 60%, transparent 61%);
  animation: rmSpark 1.4s ease-in-out infinite;
}
#roadmap .coin.spark::before { transform: rotate(150deg) scale(1.25); animation-delay: 0.5s; opacity: 0.8; }
@keyframes rmSpark {
  0%, 100% { opacity: 0.5; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.12); }
}

/* címkék: sugárirányban a körön KÍVÜL — a vonal sosem éri őket */
#roadmap .rm-label {
  position: absolute; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  color: #fdf3e359; transition: color 0.35s ease;
}
#roadmap .rm-node.lit .rm-label { color: var(--gold, #ffc233); }
#roadmap .rn0 .rm-label { bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); }
#roadmap .rn1 .rm-label, #roadmap .rn2 .rm-label { left: calc(100% + 12px); top: 50%; transform: translateY(-50%); }
#roadmap .rn3 .rm-label, #roadmap .rn4 .rm-label { right: calc(100% + 12px); top: 50%; transform: translateY(-50%); }

/* középső, váltakozó tartalom — geometriailag a körön belül, védve */
#roadmap .rm-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 0 clamp(64px, 17%, 100px);
}
#roadmap .rm-center .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: #fdf3e359; margin-bottom: 8px; }
#roadmap .rm-center .t {
  font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px #ff9f1a33);
}
#roadmap .rm-center .d { font-size: clamp(0.78rem, 0.72rem + 0.3vw, 0.92rem); color: #fdf3e3a6; margin-top: 10px; }
#roadmap .rm-center .d strong { color: var(--text-bright); }

/* telefon: kisebb érmék, címkék rejtve — a szöveg középen vált, takarás kizárva */
@media (max-width: 640px) {
  #roadmap .rm-node .coin { width: 44px; height: 44px; }
  #roadmap .rm-node .coin svg { width: 19px; height: 19px; }
  #roadmap .rm-label { display: none; }
  #roadmap .rm-sticky { padding: 22px 0 30px; }
}
/* reduced-motion: statikus, teljes kör, minden érme világít */
@media (prefers-reduced-motion: reduce) {
  #roadmap .rm-track { height: auto !important; }
  #roadmap .rm-fill { stroke-dashoffset: 0 !important; }
  #roadmap .rm-node .coin { background: var(--grad); color: #1d1207; border-color: transparent; }
  #roadmap .rm-label { color: var(--gold, #ffc233); }
}

/* ================================================================
   V8.7 — SZABADSÁG: ZERO→HERO IDŐVONAL
   9:16 fotókártyák kronológiában, oldalra húzható snap-sávban.
   A kártya-hátterek műhely-sötétből naplemente-aranyba melegednek —
   a színátmenet maga meséli az ívet. Fotó nélkül korszak-sziluett fut.
   ================================================================ */
#szabadsag {
  background: linear-gradient(115deg, #120d08, #17100a 38%, #241405 72%, #2e1706);
  padding: 64px 0 44px;
}
#szabadsag .ls-lead { margin-inline: auto; }

/* izzó idővonal a sáv felett, nyílheggyel */
#szabadsag .ls-strip-wrap { position: relative; margin-top: 30px; }
#szabadsag .glow-timeline {
  --gt-p: 0;
  position: relative; height: 4px; border-radius: 4px;
  margin: 0 auto 22px; width: min(1240px, 88%);
  background: #3a2a18; /* halvány alap-sín — a fényes réteg görgetésre töltődik rá */
}
#szabadsag .glow-timeline::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, #3a2a18, #7a4a10 40%, #ffc233 75%, #ff7a1a);
  box-shadow: 0 0 18px #ff9f1a4d;
  clip-path: inset(0 calc((1 - var(--gt-p)) * 100%) 0 0);
}
#szabadsag .glow-timeline::after {
  content: ""; position: absolute; right: -2px; top: 50%;
  width: 13px; height: 13px; transform: translateY(-50%) rotate(45deg);
  border-top: 3px solid #5a3d1c; border-right: 3px solid #5a3d1c; border-radius: 2px;
  transition: border-color .35s ease, filter .35s ease;
}
#szabadsag .glow-timeline.done::after {
  border-color: #ff7a1a; filter: drop-shadow(0 0 6px #ff9f1a99);
}

/* a sáv: full-bleed, snappelő vízszintes görgetés */
#szabadsag .ls-strip {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px max(24px, calc((100vw - 1272px) / 2)) 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#szabadsag .ls-strip::-webkit-scrollbar { display: none; }

.ls-card {
  position: relative; flex: 0 0 auto; margin: 0;
  width: clamp(176px, 14.5vw, 200px);
  aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden;
  border: 1px solid #ffc23342; scroll-snap-align: center;
  box-shadow: 0 18px 44px #00000059, inset 0 0 0 1px #ffffff0a;
}
@media (max-width: 640px) {
  .ls-card { width: 58vw; }
  #szabadsag .ls-strip { padding-inline: 21vw; } /* az első/utolsó kártya is középre tud snappelni */
}
.ls-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}
.lsc-scene { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; opacity: 0.5; z-index: 0; }
.lsc-ph {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); z-index: 0;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
  color: #fdf3e380; border: 1px dashed #fdf3e34d; padding: 5px 8px; border-radius: 8px; white-space: nowrap;
}
.lsc-era {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; font-weight: 700;
  color: #1d1207; background: #fdf3e3d9; border-radius: 100px; padding: 4px 9px;
}
.ls-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 30px 12px 12px;
  background: linear-gradient(180deg, transparent, #000000bf);
  font-size: 0.72rem; line-height: 1.45; color: var(--text-bright); font-weight: 600;
}
.ls-card figcaption strong { color: #ffc233; }
/* korszak-hátterek: kronologikusan melegednek */
.ls-card.bg-muhely { background: linear-gradient(180deg, #1c1712, #0f0c08); }
.ls-card.bg-csomagolas { background: linear-gradient(180deg, #20160e, #110d07); }
.ls-card.bg-monaco { background: linear-gradient(180deg, #241a10, #14100a); }
.ls-card.bg-marbella { background: linear-gradient(180deg, #3a2408, #180f06); }
.ls-card.bg-dubai { background: linear-gradient(180deg, #59340c, #1d1206); }
.ls-card.bg-egyiptom { background: linear-gradient(180deg, #7a4210, #241206); }
.ls-card.bg-miami { background: linear-gradient(180deg, #a35a12, #2a1506); }

/* ================================================================
   V9.0 — ISMERŐS? ÉRTESÍTÉS-STACK
   Sticky szekció: a gondolatok görgetésre iPhone-módra pattannak be
   (rugós easing, a régebbiek lejjebb csúsznak, max 5 látszik), a
   végén az arany BALABÁN-üzenet érkezik és az óra hajnalra vált.
   ================================================================ */
#ismeros.notif-sec { padding: 0; }
#ismeros .notif-track { position: relative; }
#ismeros .notif-sticky { position: sticky; top: var(--nf-y, 0px); padding: 44px 0 96px; }
#ismeros .section-head { margin-inline: auto; margin-bottom: 20px; }
#ismeros .section-head h2 { margin-inline: auto; }
#ismeros .section-sub { margin-inline: auto; max-width: 52ch; }

#ismeros .ph-panel {
  width: min(480px, 100%); margin: 0 auto;
  border-radius: 26px; padding: 20px 14px 18px;
  background: linear-gradient(200deg, #221a26 0%, #17121c 45%, #120d08 100%);
  border: 1px solid #fdf3e326;
  box-shadow: 0 30px 70px #00000080, inset 0 0 0 5px #05030a;
}
#ismeros .ph-clock {
  text-align: center; font-family: var(--font-display); font-weight: 400;
  font-size: 54px; line-height: 1; color: #fdf3e3e6;
  transition: color 0.4s ease;
}
#ismeros .ph-date {
  text-align: center; font-size: 0.7rem; color: #fdf3e359; margin: 4px 0 16px;
}
#ismeros .notif-stack { min-height: 380px; }

/* értesítés-slot: 0 magasságról nyílik ki — az új elem felülről "bepattan",
   a többit természetesen tolja lejjebb (iOS-érzés, rugós easinggel) */
#ismeros .n-slot {
  display: grid; grid-template-rows: 0fr;
  opacity: 0; transform: translateY(-16px) scale(0.94);
  transition:
    grid-template-rows 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.12),
    opacity 0.32s ease,
    transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.18);
}
#ismeros .n-slot.in { grid-template-rows: 1fr; opacity: 1; transform: none; }
#ismeros .n-clip { overflow: hidden; }
#ismeros .notif {
  display: flex; gap: 10px; align-items: flex-start;
  background: #fdf3e312; border: 1px solid #fdf3e31a;
  border-radius: 15px; padding: 11px 13px; margin-bottom: 8px;
}
#ismeros .notif i { flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; background: #3a2f45; }
#ismeros .notif .nh {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em;
  color: #fdf3e359; margin-bottom: 2px;
}
#ismeros .notif .nt { font-size: 0.78rem; line-height: 1.45; color: #fdf3e3d9; }
#ismeros .notif.gold {
  background: var(--grad); border-color: transparent;
  box-shadow: 0 10px 30px #ff9f1a4d;
}
#ismeros .notif.gold i { background: #1d1207; }
#ismeros .notif.gold .nt, #ismeros .notif.gold .nh { color: #1d1207; font-weight: 600; }
#ismeros .notif.gold .nt strong { color: #1d1207; }

@media (max-width: 640px) {
  #ismeros .ph-clock { font-size: 46px; }
  #ismeros .notif-stack { min-height: 350px; }
  #ismeros .notif .nt { font-size: 0.74rem; }
  #ismeros .notif-sticky { padding: 34px 0 92px; }
}
/* reduced-motion: statikus — minden értesítés látszik, az arany felül */
@media (prefers-reduced-motion: reduce) {
  #ismeros .notif-track { height: auto !important; }
  #ismeros .n-slot { grid-template-rows: 1fr; opacity: 1; transform: none; }
}

/* V8.8 — egér-húzás a vízszintes sávokon */
#szabadsag .ls-strip, #videoproof .vp-grid, .mod-rail { cursor: grab; }
.dragging { scroll-snap-type: none !important; cursor: grabbing !important; user-select: none; }
.dragging * { pointer-events: none; }

/* V8.3 — "A hívás nem kerül semmibe" extra kiemelés a mikrosorokban:
   arany gradient + vastag betű; krém háttéren sötétebb gradienst kap,
   hogy ott is legyen kontrasztja */
.microcopy .grad-text { font-weight: 800; }
/* V8.5 — "Egyéni eredmények, egyéni munkával." extra kiemelés a Számok alatt */
.stats-note .grad-text { font-weight: 800; font-size: 1.05rem; letter-spacing: 0.01em; }
#ut .scrolly-micro .grad-text { background: linear-gradient(92deg, #e8760f, #d35400); -webkit-background-clip: text; background-clip: text; }

/* V8.2 — rotáló announce-üzenetek: mindkét üzenet ugyanabban a grid-cellában
   ül (a sáv magassága a hosszabbikhoz igazodik, nincs ugrálás), és
   opacity-átúszással váltják egymást */
.announce { display: grid; align-items: center; }
.announce .ann-msg { grid-area: 1 / 1; opacity: 0; transition: opacity 0.6s ease; }
.announce .ann-msg.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .announce .ann-msg { transition: none; } }

/* ================================================================
   V8.0 — "3 PILLÉR" + GYIK: középre zárt fej és tartalom mindkét nézetben
   (a GYIK-accordion sorai szándékosan balra zártak maradnak — a
   kérdés–plusz ikon pár úgy olvasható; a fej centerezése adja a keretet)
   ================================================================ */
#faq .section-head { text-align: center; margin-inline: auto; }
#faq .section-head h2 { margin-inline: auto; }
#pillerek .pillar-grid .card { text-align: center; }
#pillerek .proof-pill { display: block; width: fit-content; margin-inline: auto; text-align: center; }

/* ================================================================
   V7.9 — "AZ ÚT" → "SZÁMOK" váltás: nincs üres krém-sáv.
   A sticky doboz eddig fixen 100vh volt — magas viewporton a
   tartalom alatti rész üres térként jelent meg a szekcióhatáron.
   Mostantól csak a tartalom magasságáig tart, a következő szekció
   flush érkezik. (A pinelés a track magasságából jön, azt nem érinti.)
   ================================================================ */
#ut .scrolly-sticky { min-height: 0; top: var(--sticky-y, 0px); }

/* alacsonyabb laptop-kijelzőn az "Az út" maradjon egy képernyős
   (a nagyobb CTA-pill alatt is férjen el a mikroszöveg) */
@media (min-width: 901px) and (max-height: 870px) {
  #ut .scrolly-sticky { padding: 14px 0 60px; }
  #ut .section-head { margin-bottom: 10px !important; }
  #ut .scrolly-list { gap: 16px; }
  #ut .sc-num { font-size: 1.5rem; }
  #ut .sc-item h3 { font-size: 1.25rem; }
  #ut .sc-item p { font-size: 0.88rem; }
}

/* ================================================================
   V9.2 — SHOWREEL: telefonon majdnem teljes szélességű videó-slot,
   gusztusos kis holttérrel minden irányban
   ================================================================ */
@media (max-width: 640px) {
  #showreel .ls-slot-wrap { width: min(90vw, 420px); max-width: none; margin: 26px auto 0; }
}

/* ================================================================
   V9.3 — "AZ ÚT" → GYIK határ: a felesleges tér behúzva
   (telefonon a scrolly-micro rejtett, így az alsó padding fölösleges;
   a GYIK felső paddingje mindkét nézetben feszesebb)
   ================================================================ */
@media (max-width: 900px) {
  #ut .scrolly-sticky { padding-bottom: 36px !important; }
}
#faq { padding-top: 48px; }
#faq .section-head { margin-bottom: 22px; }


/* ---------- V9.5: #konzultacio — heti élő kérdezz-felelek (copy + kép split) ---------- */
#konzultacio { padding: 88px 0; position: relative; overflow: hidden; }
#konzultacio::before {
  content: ""; position: absolute; right: -8%; top: 12%;
  width: 720px; height: 560px; pointer-events: none;
  background: radial-gradient(closest-side, #ff9f1a12, transparent 70%);
}
.qa-grid {
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 56px;
  align-items: center; max-width: 1160px; margin: 0 auto; position: relative;
}
.qa-head { margin-bottom: 0; text-align: center; }
.qa-lead { color: var(--text-bright); font-size: 1.12rem; line-height: 1.6; margin-top: 16px; }
.qa-body { color: var(--text-bright-muted); margin-top: 12px; line-height: 1.65; }
.qa-media { position: relative; border-radius: 20px; }
.qa-media::before {
  content: ""; position: absolute; inset: -20px -24px; z-index: 0;
  background: radial-gradient(60% 70% at 50% 55%, #ff9f1a2e, transparent 72%);
  filter: blur(8px); pointer-events: none;
}
.qa-media img {
  position: relative; z-index: 1; display: block; width: 100%; height: auto;
  aspect-ratio: 960 / 541; object-fit: cover; /* helyfoglalás betöltés előtt — nincs CLS */
  border-radius: 20px; border: 1px solid #ffc23345;
  box-shadow: 0 30px 80px #00000073, inset 0 0 0 1px #ffffff0d;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s ease;
}
.qa-media:hover img { transform: translateY(-5px); box-shadow: 0 42px 96px #00000082; }
.qa-live {
  position: absolute; z-index: 2; top: 16px; right: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: #0d0a06d9; border: 1px solid #ff5a3c66;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #ffd9a8; white-space: nowrap;
}
.qa-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #ff4d3d;
  box-shadow: 0 0 0 0 #ff4d3d80; animation: qa-pulse 2.2s ease-out infinite;
}
@keyframes qa-pulse {
  0% { box-shadow: 0 0 0 0 #ff4d3d80; }
  70% { box-shadow: 0 0 0 11px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .qa-dot { animation: none; }
  .qa-media img { transition: none; }
  .qa-media:hover img { transform: none; }
}
@media (max-width: 900px) {
  #konzultacio { padding: 64px 0 60px; }
  .qa-grid { grid-template-columns: 1fr; gap: 28px; }
  .qa-head { text-align: center; }
  .qa-lead { font-size: 1.05rem; }
  .qa-media { margin-inline: auto; max-width: 560px; }
  .qa-live { top: auto; bottom: 12px; right: 12px; padding: 7px 12px; font-size: 10px; }
}


/* ---------- V9.6: desktop-optimalizálás — szabadsag / showreel / ismeros / videoproof
   (csak min-width 901px — a mobil nézet változatlan) ---------- */
@media (min-width: 901px) {
  /* Miért csinálom: nyíl desktopon nem kell, a kártyasor középre rendezve,
     a kártyák úgy méretezve, hogy mind a 7 elférjen egy sorban (~1400px felett) */
  #szabadsag .glow-timeline { display: none; }
  #szabadsag .ls-strip { justify-content: safe center; padding-inline: 24px; }
  #szabadsag .ls-strip-wrap { margin-top: 10px; }
  #szabadsag .ls-card { width: clamp(170px, 12.4vw, 196px); }

  /* Showreel: kettéosztott — copy balra, telefon-slot jobbra (konzultáció-ritmus) */
  #showreel .container {
    display: grid; grid-template-columns: minmax(0, 1fr) 390px;
    gap: 72px; align-items: center; max-width: 1140px;
  }
  #showreel .section-head { margin-bottom: 0; }
  #showreel .ls-slot-wrap { margin: 0; max-width: 390px; width: 100%; }

  /* Ismerős: kettéosztott — copy balra, iPhone-panel jobbra */
  #ismeros .notif-sticky .container {
    display: grid; grid-template-columns: minmax(0, 1fr) 480px;
    gap: 72px; align-items: center; max-width: 1180px;
  }
  #ismeros .section-head { margin-bottom: 0; }
  #ismeros .ph-panel { margin: 0; }
  #ismeros .notif-micro { grid-column: 1 / -1; margin-top: 20px; }
}
@media (min-width: 1200px) {
  /* Videóproof: szélesebb rács nagy kijelzőn — kitöltöttebb, nagyobb kártyák */
  #videoproof .vp-grid { max-width: 1020px; }
}
@media (min-width: 901px) {
  /* Videóproof: nagyobb screenshotok — szélesebb sáv + 3:2 kártyaarány;
     a képek sötét háttere a kártyáéba olvad, így vágás nélkül nőnek */
  #videoproof .shots-row { max-width: 1240px; gap: 20px; margin-top: 36px; }
  #videoproof .shot-ph { aspect-ratio: 3 / 2; }
}


/* ---------- V9.7: teljesítmény + mobil sticky modulok + qa-fix ---------- */
/* CTA-pulzus: box-shadow animáció helyett kompozitor-barát opacity-pulzus
   (a box-shadow animálása minden frame-ben újrafestette az összes CTA-t) */
.btn-primary { animation: none; position: relative; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  box-shadow: 0 16px 64px #eb479a66, 0 10px 32px #8549de4d;
  opacity: 0; animation: btnPulseO 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btnPulseO { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.btn-nav::after { content: none; }
@media (prefers-reduced-motion: reduce) { .btn-primary::after { animation: none; } }

/* képernyőn kívül az orb/marquee/Ken Burns animációk szünetelnek (JS: initAnimPause) */
.anim-off .orb, .anim-off .track, .anim-off .ls-scene,
.anim-off.tools-marquee .track, .anim-off.marquee-band .track {
  animation-play-state: paused !important;
}

/* off-screen szekciók renderelése halasztva */
/* content-visibility ELTÁVOLÍTVA: a 900px-es becslés vs 2227px valós magasság
   +1327px ugrást okozott, amikor a szekció görgetés közben renderelődött
   (felfelé görgetésnél a néző FÖLÖTT nő meg a tartalom = az oldal "ugrál") */

/* modulok: sticky mobilon is — kompaktabb kártyák, dinamikus viewport-magasság */
@media (max-width: 899px) {
  #modulok.mod-pinned .mod-sticky { height: 100vh; height: 100dvh; }
  #modulok.mod-pinned .mod-card { flex-basis: min(300px, 76vw); }
}

/* konzultáció: a fit-content szélességű h2 középre (mobilon szét volt csúszva) */
.qa-head h2 { margin-inline: auto; }


/* ---------- V9.8: vízszintes túlcsordulás vágása (clip = nem hoz létre
   scroll-konténert, a sticky elemek működnek tovább) ---------- */
html, body { overflow-x: clip; }


/* ---------- V9.9: proof-screenshot lightbox ---------- */
.shot-ph.has-img { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw;
  background: #0c0805e6;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 100%; max-height: 100%;
  border-radius: 16px; border: 1px solid #ffc23359;
  box-shadow: 0 40px 120px #000000b3;
  transform: scale(0.96); transition: transform 0.25s ease;
  cursor: zoom-out;
}
.lightbox.open img { transform: scale(1); }
.lightbox .lb-close {
  position: absolute; top: 18px; right: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid #ffc23359; background: #1c1206cc; color: #ffd9a8;
  font-size: 20px; line-height: 1; cursor: pointer;
  transition: background 0.2s ease;
}
.lightbox .lb-close:hover { background: #2e1c08; }
@media (prefers-reduced-motion: reduce) { .lightbox, .lightbox img { transition: none; } }

/* ================================================================
   V9.10 — PONTOS CTA-LANDOLÁS: a scroll-margin a sticky announce-sáv
   valós magasságához igazodik (a JS méri be a --ann-h változóba;
   mobilon 2 soros a sáv, ~84px). A korábbi 24px még a sticky
   announce bevezetése előtti időből maradt itt.
   ================================================================ */
section[id] { scroll-margin-top: calc(var(--ann-h, 44px) + 16px); }

/* ================================================================
   V9.11 — GARANCIA-SÁV (risk reversal a foglalás fölött):
   kompakt kártya forgó arany fénycsíkos kerettel (transform-only,
   composited — nem laggol), pecsét-embléma körbefutó felirattal.
   ================================================================ */
#garancia { padding: 64px 0 0; }
#garancia .container { max-width: 980px; }

/* keret: a 2px-es padding a "border", benne forgó conic-fénycsík */
.guar-frame {
  position: relative; border-radius: 28px; padding: 2px;
  overflow: hidden; isolation: isolate;
  background: #ffc23324;
  box-shadow: 0 24px 60px #00000059, 0 0 42px #ffc23314;
}
.guar-spin {
  position: absolute; left: 50%; top: 50%;
  width: 170%; aspect-ratio: 1; z-index: -1;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(from 0deg,
    #ffc23300 0deg 258deg, #ffc2337a 300deg, #ffd76e 320deg,
    #ff7a1a 334deg, #ffc23300 360deg);
  animation: guarSpin 7s linear infinite;
}
@keyframes guarSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.guar-card {
  position: relative; border-radius: 26px;
  background:
    radial-gradient(640px 320px at 10% 50%, #ffc23315, transparent 62%),
    linear-gradient(135deg, #241708, #140d06 55%, #1c1207);
  display: flex; align-items: center; gap: 38px;
  padding: 38px 46px;
}

/* pecsét: körbefutó felirat + "90 NAP" mag */
.guar-seal {
  position: relative; width: 158px; height: 158px; flex: 0 0 auto;
  transform: rotate(-7deg);
  filter: drop-shadow(0 12px 28px #ffc23329);
}
.guar-ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform-origin: 50% 50%;
  animation: guarRingSpin 28s linear infinite;
}
.guar-ring text {
  fill: #ffc233a6;
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 2.6px; text-transform: uppercase;
}
@keyframes guarRingSpin { to { transform: rotate(360deg); } }
.guar-core {
  position: absolute; inset: 30px; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #3d2610, #1a1008 72%);
  border: 1.5px solid #ffc23352;
  box-shadow: inset 0 0 24px #ffc23321, 0 0 0 5px #ffc2330f;
  display: grid; place-content: center; text-align: center;
}
.guar-num {
  font-family: var(--font-brush); font-size: 46px; line-height: 0.9;
  background: linear-gradient(180deg, #ffe9a8, #ffc233 55%, #ff7a1a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.guar-nap {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 4px;
  color: #ffc233d9; margin-top: 4px; padding-left: 4px;
}

/* szövegoldal */
.guar-body h2 { font-size: clamp(27px, 3.1vw, 40px); margin-bottom: 10px; max-width: 22ch; }
.guar-text { color: #fdf3e3d1; font-size: 0.97rem; line-height: 1.66; max-width: 58ch; }

@media (max-width: 700px) {
  #garancia { padding: 48px 0 0; }
  .guar-card { flex-direction: column; text-align: center; padding: 34px 20px 30px; gap: 24px; }
  .guar-seal { width: 132px; height: 132px; }
  .guar-core { inset: 25px; }
  .guar-num { font-size: 40px; }
  .guar-body h2 { margin-inline: auto; }
  .guar-text { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .guar-spin, .guar-ring { animation: none; }
}

/* ================================================================
   V9.12 — TALLY-KAPU a foglalás-kártyában: 1) rövid kérdőív →
   2) naptár. A lépésjelzőt és a Tally-mountot a JS kapcsolja be;
   amíg nincs CONFIG.TALLY_URL, semmi sem látszik belőlük.
   ================================================================ */
.bk-steps { display: none; align-items: center; justify-content: center; gap: 12px; padding: 10px 8px 18px; }
.bk-step { display: flex; align-items: center; gap: 9px; }
.bk-dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-content: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: #a3814f; border: 1.5px solid #eadfca; background: #fdf8ee;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.bk-step.is-active .bk-dot {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #ffc233, #ff7a1a);
  box-shadow: 0 4px 14px #ff7a1a4d;
}
.bk-step.done .bk-dot { color: #1d9e55; border-color: #1d9e5566; background: #eafaf0; }
.bk-lbl { font-size: 0.86rem; font-weight: 600; color: #a3814f; transition: color 0.3s; white-space: nowrap; }
.bk-step.is-active .bk-lbl, .bk-step.done .bk-lbl { color: #241708; }
.bk-track { width: 54px; height: 2px; border-radius: 2px; background: #eadfca; overflow: hidden; }
.bk-track i {
  display: block; height: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, #ffc233, #ff7a1a);
  transition: transform 0.6s ease;
}
.bk-steps.s2 .bk-track i { transform: scaleX(1); }
.tally-mount { display: none; min-height: 380px; transition: opacity 0.45s ease; }
.tally-mount iframe { display: block; border-radius: 14px; }
.tally-mount.out { opacity: 0; }
@media (max-width: 640px) {
  .bk-lbl { font-size: 0.8rem; }
  .bk-track { width: 30px; }
}

/* ================================================================
   V9.13 — OPT-IN KÁRTYA (index) + foglalas.html aloldal.
   A naptár és a kérdőív a foglalas.html-re költözött; az indexen
   natív név/email/teló űrlap gyűjti a leadet (Tally-ba mentve).
   ================================================================ */
.optin-card { max-width: 620px; margin-inline: auto; padding: 34px 30px 30px; }
#optin-form { display: grid; gap: 16px; text-align: left; }
.oi-field { display: grid; gap: 7px; }
.oi-field label {
  font-size: 0.82rem; font-weight: 700; color: #6b5236;
  letter-spacing: 0.02em;
}
.oi-field input {
  width: 100%; font-size: 16px; padding: 13px 15px;
  border: 1.5px solid #eadfca; border-radius: 12px;
  background: #fdfaf3; color: #241708; font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.oi-field input::placeholder { color: #b39b74; }
.oi-field input:focus { outline: none; border-color: #ffc233; box-shadow: 0 0 0 3px #ffc23340; }
.oi-consent { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.oi-consent input {
  width: 17px; height: 17px; margin-top: 2px;
  accent-color: #ff7a1a; flex: 0 0 auto; cursor: pointer;
}
.oi-consent span { font-size: 0.78rem; color: #6b5236; line-height: 1.55; }
.oi-error {
  background: #fdecec; color: #b3261e; font-size: 0.85rem;
  padding: 10px 14px; border-radius: 10px;
}
.oi-btn { width: 100%; justify-content: center; font-size: 1.06rem; padding: 17px 20px; }
.oi-btn[disabled] { opacity: 0.6; cursor: default; }
@media (max-width: 640px) {
  .optin-card { padding: 26px 18px 22px; }
}

/* foglalas.html — nincs hero, a szekció kap felső levegőt az announce alatt */
.booking-page #foglalas { padding-top: 46px; }
.booking-page footer { margin-top: 0; }

/* ================================================================
   V9.14 — MOBIL SCROLL-PERF: offscreen animációk teljes leállítása
   + a fix sticky-pill backdrop-blur cseréje (a blur(16px) minden
   scroll-frame-nél újraszámolta a hátteret mobilon).
   ================================================================ */
.anim-off .guar-spin, .anim-off .guar-ring,
.anim-off .beam-wrap::before { animation-play-state: paused !important; }

/* ================================================================
   V9.15 — MOBIL BÖNGÉSZŐ-UI BEOLVADÁS: a sticky pill lebegő, sáv
   nélküli (az eredeti dizájn — a V9.14 tévedésből visszahozta a
   krém hátteret, ez itt véglegesen kikapcsolja). A html sötét
   háttere az overscroll-t és a Safari alsó sávját is besötétíti.
   ================================================================ */
.sticky-cta {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: none;
}
/* a html fix sötét hátterét KIVETTÜK: kimerevítette a Safari sáv-színét —
   a kaméleon-hatást a JS-es dinamikus theme-color adja (initThemeColor) */

/* ================================================================
   V10 — EGYSZER JÁTSZÓDÓ PIN-SZEKCIÓK + LAPOZHATÓ MODULOK
   A modul-sávot a JS többé nem pineli (a .mod-pinned szabályok
   inertek) — az alap carousel él: snap, drag, "görgess" hint.
   A pin-done osztályt a JS teszi fel, miután a látogató egyszer
   végigment az animáción és elhagyta a szekciót: a track statikus,
   minden tartalom látszik, visszafelé nincs beragadás.
   ================================================================ */
.notif-track.pin-done, .scrolly-track.pin-done { height: auto !important; }
/* id-erősségű szelektorok, hogy a szekciók saját szabályait felülüssék */
#ismeros .notif-track.pin-done .notif-sticky { position: static; top: auto; }
#ismeros .notif-track.pin-done .n-slot {
  grid-template-rows: 1fr; opacity: 1; transform: none; transition: none;
}
#ut .scrolly-track.pin-done .scrolly-sticky { position: static; top: auto; }

/* a pin-összecsukás kompenzációját a JS végzi pontos matekkal — a böngésző
   saját scroll-horgonyzása duplán korrigálna (= ugrálás), ezért kikapcsoljuk */
html { overflow-anchor: none; }