/* Statikus bemutató (GitHub Pages): tájékoztató szalag a lap tetején */
.pages-banner { position: relative; z-index: 60; display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px 14px; padding: 8px 16px; font-size: 13px; line-height: 1.4; text-align: center;
  background: linear-gradient(135deg, #e3f4ea, #d3eedf); color: #23473a; border-bottom: 1px solid #bfe2cf; }
.pages-banner a { color: #2f7a57; font-weight: 650; text-decoration: none; white-space: nowrap; }
.pages-banner a:hover { text-decoration: underline; }
:root[data-theme="dark"] .pages-banner { background: #183126; color: #cfeadb; border-bottom-color: #285240; }
:root[data-theme="dark"] .pages-banner a { color: #8fd3b2; }

/* Nyitó blokk (landing) az Áttekintés tetején */
.pages-hero { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px;
  align-items: center; padding: 30px; overflow: hidden; position: relative;
  background: radial-gradient(120% 140% at 0% 0%, rgba(140, 207, 176, .28), transparent 55%),
              radial-gradient(90% 120% at 100% 100%, rgba(90, 174, 138, .16), transparent 60%), var(--surface); }
.ph-eyebrow { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 650;
  letter-spacing: .02em; color: var(--accent); background: var(--accent-soft, rgba(90, 174, 138, .14)); }
.pages-hero h1 { margin: 14px 0 10px; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -.02em; }
.ph-lead { margin: 0 0 18px; color: var(--text-2, var(--muted)); font-size: 15px; line-height: 1.6; }
.ph-points { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.ph-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.ph-points svg { flex: none; width: 20px; height: 20px; padding: 5px; box-sizing: content-box; border-radius: 9px;
  color: var(--accent); background: var(--accent-soft, rgba(90, 174, 138, .14)); fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ph-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.ph-cta .button { display: inline-flex; align-items: center; gap: 8px; }
.ph-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ph-media .stage { box-shadow: 0 18px 50px rgba(30, 70, 50, .22); border-radius: 16px; }
.ph-media .stage video { max-height: none; }
.ph-hint { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
@media (max-width: 1100px) {
  .pages-hero { grid-template-columns: 1fr; padding: 22px; gap: 22px; }
  .ph-media { order: -1; }
}
@media (max-width: 700px) { .pages-banner { font-size: 12px; padding: 7px 12px; } }