/* RESPRAY™ industrial — v0.5 kiegészítések: többoldalas prototípus (aloldalak, statikus JS).
   Alap: site.css (a Claude Design vászon v0.4 stíluslapja, változatlanul). */

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #fff; }
body > .rs { min-height: 100vh; }
[hidden] { display: none !important; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: #fff; color: var(--g900); font: 700 13px/1 var(--f-display); border-radius: 3px; }
.skip:focus { top: 12px; }
.muted { color: var(--g600); }
.footnote { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--g500); }

/* Fejléc: aktív menüpont, mobilmenü ikonok */
.hdr-nav a[aria-current="page"] { border-bottom-color: var(--o400); }
.mnav a.mnav-link[aria-current="page"] { color: var(--o300); }
.hdr [data-menu] .i-close { display: none; }
.hdr [data-menu][aria-expanded="true"] .i-open { display: none; }
.hdr [data-menu][aria-expanded="true"] .i-close { display: inline; }
.hdr [data-menu] span { display: inline-grid; place-items: center; }
/* Nyelvváltó (HU / EN) a fejlécben, desktopon és mobilon is */
.lang-sw { display: inline-flex; align-items: center; flex: none; border: 1px solid rgba(255,255,255,.28); border-radius: 3px; overflow: hidden; }
.lang-sw a { display: inline-grid; place-items: center; min-width: 40px; height: 36px; padding: 0 8px; font: 700 12.5px/1 var(--f-display); letter-spacing: .08em; color: rgba(255,255,255,.72); text-decoration: none; transition: background-color 150ms var(--ease), color 150ms var(--ease); }
.lang-sw a + a { border-left: 1px solid rgba(255,255,255,.28); }
.lang-sw a:hover { color: #fff; background: rgba(255,255,255,.1); }
.lang-sw a[aria-current] { color: var(--g900); background: var(--o400); }
.lang-sw a:focus-visible { outline: 2px solid var(--o400); outline-offset: -2px; }
.hdr-mob .lang-sw a { height: 42px; min-width: 38px; }
@container rs (max-width: 1100px) { .hdr-nav { gap: 18px; } .hdr-nav a { font-size: 12px; letter-spacing: .08em; } .hdr-in { gap: 20px; } }

/* Bizalmi sáv: Schiller-logó, Rólunk link */
.trust-count { flex-wrap: wrap; align-items: center; }
.schiller-sm { height: 32px; width: auto; }
.trust-more { display: flex; justify-content: center; margin-top: 24px; }

/* Referencia: Schiller-logó */
.ref-logo { width: 160px; height: auto; }
.ref-media .slot { height: 100%; }
/* Referencia, 16:9 videó (2026-10-28): bal oszlop videó + eredmények, jobb oszlop logó, időtartam, idézet */
.ref { grid-template-areas: "media body" "wins more"; row-gap: 32px; }
.ref-media { grid-area: media; align-self: end; }
.ref-body { grid-area: body; align-self: end; }
.ref-wins { grid-area: wins; align-self: start; }
.ref-more { grid-area: more; align-self: start; padding-top: 14px; }
.ref-quote-wrap .quote { font-size: 20px; }
@container rs (max-width: 1023px) {
  .ref { grid-template-areas: "media" "body" "wins" "more"; }
  .ref-more { padding-top: 0; }
}
@container rs (max-width: 767px) {
  .ref-quote-wrap .quote { font-size: 18px; }
}

/* 03. lépés helykitöltő (a v0.4 inline stílusai osztályba téve) */
.slot-qr { flex-direction: row; gap: 20px; }
.slot-qr-t { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }
.slot-qr-t .slot-sub { font-size: 12.5px; }
.phone-mock { width: 96px; height: 172px; border: 2px solid var(--g500); border-radius: 16px; background: #fff; display: flex; flex-direction: column; gap: 7px; padding: 18px 10px 10px; flex: none; }
.phone-mock span { height: 18px; border: 1px solid var(--g200); border-radius: 2px; }
.phone-mock span:first-child { height: 6px; width: 60%; border: 0; background: var(--g200); }
.phone-mock span:last-child { margin-top: auto; height: 20px; border: 0; background: var(--o400); }

/* A „csomag tartalma” blokk után nincs szükség a videó felső térközére */
.sec-top-0 { padding-top: 0; }

/* GYIK: csoportcímek és továbblépő linkek */
.faq-h { margin: 0; }
.faq-group { margin: 0; padding: 28px 0 6px; font: 700 12px/1.3 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--o700); border-bottom: 1px solid var(--g200); }
.faq-list > .faq-group:first-child { padding-top: 0; }
.faq-list:has(> .faq-group:first-child) { border-top: 0; }
.faq-more { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--g100); }
.faq-more .link-arrow { min-height: 40px; }
.help-mail { font-size: 16px; min-height: 32px; display: inline-flex; align-items: center; }
.bg-white .help-box { background: var(--g25); }

/* Űrlap: portré, hibás állapot */
.contact .portrait { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--g50); }
.alert-tel { font-family: var(--f-display); font-weight: 800; font-size: 18px; color: var(--g900); white-space: nowrap; }
.fld.is-error .inp { border-color: var(--crit-dot); box-shadow: 0 0 0 1px var(--crit-dot); }
.seg.is-error { border-color: var(--crit-dot); box-shadow: 0 0 0 1px var(--crit-dot); }
.formcard .is-flash { animation: rs-accent 900ms var(--ease) backwards; }

/* ---------- Aloldalak: bevezető ---------- */
.hero-sub { padding-block: 56px 80px; }
.h1.h1-sub { font-size: clamp(32px, 3cqi, 46px); line-height: 1.08; }
.slot-hero { border-radius: 4px 0 0 4px; border-right: 0; }
.hero-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px 0 0 4px; background: var(--g50); }
.hero-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-contain { background: #fff; border: 1px solid var(--g100); }
.photo-contain img { object-fit: contain; }
.hero-media .photo-contain { border-right: 0; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.jump a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--g200); border-radius: 3px; font: 700 12px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--g700); text-decoration: none; transition: border-color 150ms var(--ease), color 150ms var(--ease); }
.jump a:hover { border-color: var(--o400); color: var(--o700); }
.jump a:focus-visible { outline: 2px solid var(--o600); outline-offset: 2px; }
.intro { padding-block: 64px 72px; }
.intro-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: end; }
.intro-text .lead { font-size: 18px; }

/* Számsor (Így működik) */
.figs-band { padding-block: 56px; }
.figs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.fig { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; border-left: 3px solid var(--o400); }
.fig .num { font-size: 52px; color: #fff; display: flex; align-items: baseline; gap: 6px; }
.fig .unit { font-size: 20px; font-weight: 700; color: var(--o300); }
.fig-k { font: 700 13px/1.3 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.fig-s { font-size: 15px; line-height: 1.45; color: var(--g300); }
.figs[data-in] .fig { animation: rs-rise 400ms var(--ease-out) backwards; }
.figs[data-in] .fig:nth-child(2) { animation-delay: 60ms; } .figs[data-in] .fig:nth-child(3) { animation-delay: 120ms; } .figs[data-in] .fig:nth-child(4) { animation-delay: 180ms; }

/* Kéthasábos szöveg + kép */
.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 72px; align-items: center; }
.split-wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.split-media-left .split-media { order: -1; }
.split-body { display: flex; flex-direction: column; gap: 18px; }
.split-body .lead { font-size: 18px; }
.photo.ar-4-5 { aspect-ratio: 4 / 5; }
.iconrow { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding-top: 16px; border-top: 1px solid var(--g100); }
.bg-tint .iconrow { border-top-color: var(--g200); }
.iconrow .p { font-size: 16.5px; }
.iconrow b, .split-body b, .duo-item b { color: var(--g800); }
.box-icon { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; font-size: 16.5px; line-height: 1.6; }
.box-icon > .ic { margin-top: 3px; color: var(--o700); }

/* Számozott lista (napi használat) */
.numlist { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--g100); }
.numlist li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--g100); }
.numlist-no { width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid var(--g800); border-radius: 3px; font: 800 18px/1 var(--f-display); color: var(--g800); }
.numlist .h3 { font-size: 16px; margin-bottom: 4px; }
.numlist .p { font-size: 16px; }

/* Műszaki táblázat */
.spec-card { border: 1px solid var(--g200); border-radius: 6px; background: #fff; box-shadow: var(--sh-sm); overflow: hidden; }
.spec-head { display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--g100); }
.spec-head img { width: 72px; height: 96px; object-fit: contain; }
.spec-head .h3 { margin-top: 4px; }
.spec { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.spec th, .spec td { padding: 12px 24px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--g100); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.spec th { width: 38%; font: 700 12px/1.45 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--g600); }
.spec td { color: var(--g800); }
.spec-plain { margin-top: 32px; border-top: 1px solid var(--g200); }
.spec-plain th, .spec-plain td { padding-inline: 0 16px; }

/* Dokumentumok */
.docs { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.doc { height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px; border: 1.5px dashed var(--g300); border-radius: 4px; background: #fff; color: var(--g600); }
.doc-t { flex: 1; font: 700 14px/1.4 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--g800); }

/* Kéthasábos rövid blokkok */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; align-items: start; }
.duo-item { display: flex; flex-direction: column; gap: 18px; }
.duo-item > .benefit-ic { margin-bottom: 4px; }
.duo-logo { height: 40px; width: auto; align-self: flex-start; margin-bottom: 4px; }
.slot-sm { margin-top: 6px; }
/* Kép a duo-oszlop alján: egy vonalban a szomszéd oszlop képével (Csomagok, szerződés, 2026-10-28) */
.duo:has(.duo-bottom) { align-items: stretch; }
.duo-bottom { margin-top: auto; }
.duo-bottom img { object-position: 40% 50%; }

/* ---------- Csomagok ---------- */
.paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.path { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-top: 3px solid var(--o400); background: var(--g25); border-radius: 0 0 4px 4px; }
.path .h3 { font-size: 20px; }
.path .p { font-size: 16px; }
.tscroll { margin-top: 48px; overflow-x: auto; border: 1px solid var(--g200); border-radius: 6px; background: #fff; }
.tscroll:focus-visible { outline: 2px solid var(--o600); outline-offset: 2px; }
.cmp { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.cmp th, .cmp td { padding: 14px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--g100); }
.cmp thead th { font: 800 15px/1.3 var(--f-display); letter-spacing: .04em; color: var(--g800); background: var(--g50); border-bottom: 1px solid var(--g200); }
.cmp thead td { background: var(--g50); border-bottom: 1px solid var(--g200); }
.cmp tbody th { width: 22%; font: 700 12px/1.45 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--g600); }
.cmp td { color: var(--g800); }
.cmp tfoot td { border-bottom: 0; padding-block: 20px; }
.cmp tbody tr:hover td, .cmp tbody tr:hover th { background: var(--g25); }
.cmp-2 { min-width: 620px; }
.cmp-2 tbody th { width: 24%; }
.cmp .is-us { background: var(--o50); }
.cmp thead th.is-us { background: var(--o100); }
.cmp tbody tr:hover td.is-us { background: var(--o100); }
.cmp td b { color: var(--o800); }
.paycard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--g200); border-radius: 6px; background: #fff; box-shadow: var(--sh-sm); overflow: hidden; }
.paycol { padding: 24px; }
.paycol + .paycol { border-left: 1px solid var(--g100); }
.paycol-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 700 13px/1.2 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--g800); }
.paycol-h .ic { color: var(--g500); }
.paycol-h.is-free .ic { color: var(--ok-dot); }
.paycol ul { list-style: none; margin: 0; padding: 0; }
.paycol li { padding: 10px 0; border-bottom: 1px solid var(--g100); font-size: 15.5px; line-height: 1.45; color: var(--g800); }
.paycol li:last-child { border-bottom: 0; }
.paycard-foot { grid-column: 1 / -1; margin: 0; padding: 12px 24px; border-top: 1px solid var(--g100); background: var(--g25); }
.process-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.feature { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px; align-items: center; margin-top: 72px; padding: 48px; border-radius: 6px; background: var(--g800); color: var(--g100); overflow: hidden; }
.feature .h2 { color: #fff; }
.feature .eyebrow { color: var(--o300); }
.feature .p { color: var(--g100); font-size: 17px; max-width: 62ch; }
.feature-body { display: flex; flex-direction: column; gap: 18px; }
.feature-media { align-self: stretch; display: grid; place-items: center; margin: -48px -48px -48px 0; background: #fff; }
.feature-media img { width: 100%; max-height: 360px; object-fit: contain; }

/* ---------- Rólunk ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; background: var(--g200); }
.timeline li { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 0 0 22px 32px; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--g500); box-sizing: border-box; }
.timeline li.is-now::before { background: var(--o400); border-color: var(--o400); }
.tl-year { font: 800 22px/1.2 var(--f-display); color: var(--g800); font-variant-numeric: tabular-nums; }
.timeline .p { font-size: 16px; }
.mission { max-width: 880px; display: flex; flex-direction: column; gap: 20px; }
.mission .lead { color: var(--g100); font-size: 20px; line-height: 1.6; }
.team { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.member { display: flex; flex-direction: column; gap: 6px; }
.member img { width: 120px; height: 120px; aspect-ratio: 1; object-fit: cover; object-position: center top; border-radius: 4px; background: var(--g50); margin-bottom: 10px; }
.member .h3 { font-size: 16px; }
.awardcards { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.awardcards li { display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: center; padding: 16px 20px; border: 1px solid var(--g100); border-radius: 4px; background: #fff; }
.awardcards img { width: 72px; height: 72px; object-fit: contain; }
.awardcards .h4 { margin-bottom: 4px; }
.awardcards .small b { color: var(--g800); }

/* ---------- Technikai oldalak ---------- */
.tech { min-height: 52vh; }
.tech-in { max-width: 720px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.tech-ic { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--ok-bg); color: var(--ok-fg); }
.tech-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 8px; }
.measure-wide { max-width: 820px; display: flex; flex-direction: column; gap: 20px; }
.slot-doc { margin-top: 12px; padding: 40px 24px; }
.proto-note { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--g100); }

/* ---------- Reszponzív ---------- */
@container rs (max-width: 1023px) {
  .slot-hero, .hero-media .photo-contain { border-radius: 4px; border-right: 1.5px dashed var(--g300); }
  .hero-video { border-radius: 4px; }
  .hero-media .photo-contain { border-right: 1px solid var(--g100); }
  .intro-grid { grid-template-columns: 1fr; gap: 20px; }
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .split, .split-wide { grid-template-columns: 1fr; gap: 40px; }
  .split-media-left .split-media { order: 0; }
  .split .split-media { max-width: 560px; }
  .split-wide .split-media { max-width: none; }
  .docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo { grid-template-columns: 1fr; gap: 56px; }
  .paths { grid-template-columns: 1fr; }
  .process-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature { grid-template-columns: 1fr; padding: 36px; }
  .feature-media { margin: 0 -36px -36px; max-height: 280px; }
  .feature-media img { max-height: 280px; }
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .awardcards { grid-template-columns: 1fr; }
}
@container rs (max-width: 767px) {
  html { scroll-padding-top: 68px; }
  .hero-sub { padding-block: 32px 0; }
  .slot-hero, .hero-media .photo-contain { border-radius: 0; border-left: 0; border-right: 0; }
  .hero-video { border-radius: 0; }
  .h1.h1-sub { font-size: clamp(28px, 8.6cqi, 38px); }
  .intro { padding-block: 40px 48px; }
  .figs-band { padding-block: 44px; }
  .fig .num { font-size: 40px; }
  .split, .split-wide { gap: 32px; }
  .docs { grid-template-columns: 1fr; gap: 12px; }
  .doc { flex-direction: row; align-items: center; padding: 16px 18px; }
  .spec th, .spec td { display: block; width: auto; padding: 0 18px; border: 0; }
  .spec th { padding-top: 12px; }
  .spec td { padding-bottom: 12px; border-bottom: 1px solid var(--g100); }
  .spec-plain th, .spec-plain td { padding-inline: 0; }
  .spec-head { padding: 16px 18px; }
  .paycard { grid-template-columns: 1fr; }
  .paycol + .paycol { border-left: 0; border-top: 1px solid var(--g100); }
  .process-5 { grid-template-columns: 1fr; }
  .feature { margin-top: 48px; padding: 28px 20px; margin-inline: -20px; border-radius: 0; }
  .feature-media { margin: 0 -20px -28px; }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .member .h3 { font-size: 14px; }
  .awardcards li { grid-template-columns: 56px 1fr; padding: 14px; }
  .awardcards img { width: 56px; height: 56px; }
  .timeline li { grid-template-columns: 1fr; gap: 2px; }
  .contact .portrait { width: 72px; height: 72px; }
  .slot-qr { flex-direction: column; }
  .phone-mock { width: 72px; height: 128px; padding-top: 12px; gap: 5px; }
  .phone-mock span { height: 12px; }
  .ref-logo { width: 120px; }
}

/* Listák alapstílus nélkül (a v0.4-ben inline stílus volt) */
.awards, .media-logos { list-style: none; margin: 0; padding: 0; }
.slot-sm { max-width: 460px; }
@container rs (max-width: 767px) {
  .cmp tbody th, .cmp thead td, .cmp tfoot td:first-child { position: sticky; left: 0; z-index: 1; width: 118px; min-width: 118px; background: #fff; box-shadow: 1px 0 0 var(--g100); }
  .cmp thead td { background: var(--g50); }
  .cmp th, .cmp td { padding: 12px 14px; }
}
/* biztonságos felső sáv telefonon (artifact-nézet) */
.hdr { top: env(safe-area-inset-top, 0px); }

.slot.ar-4-5 { aspect-ratio: 4 / 5; }

/* Referencia: Schiller-interjú (2026-10-26) */
.ref-video { width: 100%; text-decoration: none; color: inherit; }
.ref-video:focus-visible { outline: 2px solid var(--o600); outline-offset: 2px; }
.ref-big { display: flex; align-items: center; gap: 16px; padding-left: 20px; border-left: 3px solid var(--o400); }
.ref-big .num { font-family: var(--f-display); font-weight: 800; font-size: 72px; line-height: 1; color: var(--g900); }
.ref-big-t { font: 700 13px/1.4 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--g700); max-width: 18ch; }
.ref-wins { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ref-win { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--g200); }
.ref-win .h4 { display: flex; align-items: center; gap: 8px; margin: 0; }
.ref-win .h4 .ic { color: var(--o700); flex: none; }
.ref-win .p { font-size: 15.5px; }
.ref-quote-wrap .quote { padding-top: 26px; }
@container rs (max-width: 767px) {
  .ref-big .num { font-size: 56px; }
  .ref-wins { grid-template-columns: 1fr; }
}

/* Hero: videó a háttérben, a szöveg mögött elhomályosított sáv (vászon, 2026-10-26) */
.hero-bg { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 640px; padding-block: 96px 112px; background: #fff; }
.hero-bg-media { position: absolute; inset: 0; }
.hero-bg-media img, .hero-bg-media video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Desktop: a videó jobbra tolva, hogy a képközép a szöveg mellett látsszon; bal széle beleolvad a fehérbe */
@container rs (min-width: 1024px) {
  .hero-bg-media video { position: absolute; top: 0; right: 0; width: 62%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%); mask-image: linear-gradient(90deg, transparent 0%, #000 24%); }
}
.hero-bg-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.88) 36%, rgba(255,255,255,.45) 56%, rgba(255,255,255,0) 70%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 48%, transparent 70%); mask-image: linear-gradient(90deg, #000 0%, #000 48%, transparent 70%); }
.hero-bg-in { position: relative; z-index: 1; }
.hero-bg .hero-text { max-width: 600px; padding-right: 0; }
@container rs (max-width: 1023px) {
  .hero-bg { min-height: 560px; padding-block: 72px 80px; }
  .hero-bg-veil { background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.85) 55%, rgba(255,255,255,.3) 85%); -webkit-mask-image: none; mask-image: none; }
}
/* Mobil (2026-10-28): a videó nem háttér, hanem 16:9-es kép az „Induló beruházás nélkül” és a bevezető szöveg között.
   A szövegdoboz kibontva (display: contents), így a videó a szöveg elemei közé sorolható. */
@container rs (max-width: 767px) {
  .hero-bg { min-height: 0; flex-direction: column; align-items: center; gap: 18px; padding-block: 48px; }
  .hero-bg-in, .hero-bg .hero-text { display: contents; }
  .hero-bg .hero-text > * { order: 3; width: calc(100% - 40px); }
  .hero-bg .hero-text > :nth-child(-n+3) { order: 1; }
  .hero-bg-media { position: relative; inset: auto; order: 2; width: calc(100% - 40px); margin-block: 6px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; }
  .hero-bg-media video { position: absolute; inset: 0; }
  .hero-bg-veil { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-bg-media video { display: none; } .hero-bg-media { background: url(../img/posters/hero-desktop-poster.webp) right center / cover no-repeat; } }

/* Csomag-fotó a főoldalon: keret nélkül, a fehér háttérbe olvad */
.pack .photo { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.pack .photo img { mix-blend-mode: multiply; }

/* YouTube-videók: az oldalon beágyazott lejátszó (a vásznon kép + link, lásd to_canvas.py) */
.yt-embed { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #000; }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-embed img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; transition: opacity 150ms; }
.yt-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); line-height: 0; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.yt-embed:hover img { opacity: 1; }

/* Így működik · „Egy töltés, négy mozdulat”: kattintható folyamatábra rövid videókkal */
#hasznalat .sec-head, #hasznalat .fs { max-width: 960px; margin-inline: auto; }
.fs { display: flex; flex-direction: column; gap: 40px; margin-top: 48px; }
.fs-media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--g50); }
.fs-clip { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms var(--ease, ease); }
.fs-clip.is-on { opacity: 1; z-index: 1; }
.fs-media video, .fs-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fs-media .fs-still { display: none; }
.fs-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; height: 190px; align-items: start; }
.fs-line { position: absolute; left: 12.5%; right: 12.5%; top: 27px; height: 2px; background: var(--g100); }
.fs-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--o500); transition: width 700ms var(--ease, ease); }
.fs-step { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; text-align: center; font: inherit; color: inherit; min-height: 56px; }
.fs-no { width: 56px; height: 56px; display: grid; place-items: center; border: 2px solid var(--g300); border-radius: 50%; background: #fff; font: 800 22px/1 var(--f-display); color: var(--g500); transition: background 400ms var(--ease, ease), border-color 400ms var(--ease, ease), color 400ms var(--ease, ease), transform 400ms var(--ease, ease); }
.fs-step:hover .fs-no { border-color: var(--o500); color: var(--g800); }
.fs-step.is-done .fs-no { border-color: var(--o500); color: var(--g800); }
.fs-step.is-on .fs-no { background: var(--o500); border-color: var(--o500); color: var(--g900); transform: scale(1.08); }
.fs-step:focus-visible { outline: 2px solid var(--o700); outline-offset: 4px; border-radius: 8px; }
.fs-text { display: none; position: absolute; top: 72px; left: -12px; right: -12px; flex-direction: column; align-items: center; gap: 6px; }
.fs-step.is-on .fs-text { display: flex; animation: fs-in 500ms var(--ease, ease) both; }
.fs-title { font: 700 16px/1.3 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--g800); }
.fs-desc { font-size: 15.5px; line-height: 1.5; color: var(--g600); }
@keyframes fs-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .fs-media video { display: none; } .fs-media .fs-still { display: block; }
  .fs-clip, .fs-fill, .fs-no { transition: none; }
  .fs-step.is-on .fs-text { animation: none; }
  .fs-step.is-on .fs-no { transform: none; }
}
@container rs (max-width: 767px) {
  .fs-steps { gap: 8px; }
  .fs-no { width: 44px; height: 44px; font-size: 18px; }
  .fs-line { top: 21px; }
  .fs-step { position: static; }
  .fs-text { top: 60px; left: 0; right: 0; }
}

/* Rólunk · csapat: elérhetőség a névjegy alatt (Zámbó Gergely) */
.member-contact { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.member-contact a { overflow-wrap: anywhere; }

/* Dokumentumok: kattintható kártya (a szaggatott keret a „készül” állapoté) */
a.doc { border-style: solid; border-color: var(--g200); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.doc:hover, a.doc:focus-visible { border-color: var(--o700); box-shadow: 0 2px 10px rgba(0,0,0,.08); }

/* Mobil elcsúszások javítása (2026-10-27, vászon; a desktop nem változik) */
@container rs (max-width: 767px) {
  /* 1 · Többsoros nyilas link: a nyíl a szöveg végén, az aláhúzás nem csúszik a következő sorra */
  .link-arrow { display: inline-block; max-width: 100%; min-height: 0; padding-block: 11px; padding-right: 24px; line-height: 1.7; text-underline-offset: 4px; }
  .link-arrow .arr { display: inline-block; vertical-align: -3px; margin-left: 8px; margin-right: -24px; }
  /* Szöveg előtti ikon (pl. „Elküldjük e-mailben is?”): a sor közepén, nyíl nélkül nem kell a jobb oldali hely */
  .link-arrow > .ic:first-child:not(.arr) { display: inline-block; vertical-align: -4px; margin-right: 8px; }
  .link-arrow:not(:has(.arr)) { padding-right: 0; }
  .plan-row .link-arrow { min-height: 0; padding-block: 4px; }
  .calc .link-arrow { min-height: 0; padding-block: 6px; }
  .faq-more .link-arrow { min-height: 0; padding-block: 8px; }
  /* 3 · Összehasonlító táblázat: egy oszlop teljes szélességben, a következő széle kilátszik */
  .cmp, .cmp-2 { width: max-content; min-width: 0; }
  .cmp thead th, .cmp tbody td, .cmp tfoot td:not(:first-child) { width: calc(100cqi - 194px); min-width: calc(100cqi - 194px); max-width: calc(100cqi - 194px); }
  .tscroll { scroll-snap-type: x mandatory; scroll-padding-left: 118px; }
  .cmp thead th { scroll-snap-align: start; }
  .cmp .btn { white-space: normal; width: 100%; padding-inline: 12px; text-align: center; }
  /* 3b · „Mi változik a műhelyben?”: két oszlop görgetés nélkül, a sor címe a cellák fölött */
  .cmp-2, .cmp-2 thead, .cmp-2 tbody { display: block; width: 100%; min-width: 0; }
  .cmp-2 tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp-2 thead td { display: none; }
  .cmp-2 thead th, .cmp-2 tbody td { width: auto; min-width: 0; max-width: none; padding: 8px 14px 14px; font-size: 15px; }
  .cmp-2 thead th { padding-block: 12px; font-size: 14px; }
  .cmp-2 tbody th { grid-column: 1 / -1; position: static; width: auto; min-width: 0; padding: 9px 14px; text-align: center; background: var(--g50); border-top: 1px solid var(--g200); border-bottom: 1px solid var(--g100); box-shadow: none; }
  .cmp-2 tbody td { padding-top: 12px; }
  .cmp-2 tbody tr:first-child th { border-top: 0; }
  .cmp-2 tbody tr:hover th { background: var(--g50); }
  /* 4 · „3 napos ingyenes teszt” sáv a képernyőn belül */
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature .btn { white-space: normal; width: 100%; text-align: center; }
  /* 5 · Számsor: a mértékegység a szám mellett marad */
  .fig .num { font-size: 34px; white-space: nowrap; }
  /* 7 · Letölthető dokumentum: a címke a cím alá kerül */
  .doc { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; }
  .doc .tag { grid-column: 2; justify-self: start; }
  /* 2 · A csapat utolsó, páratlan kártyája (Csíkos Zoltán, fő kapcsolattartó): alul középen, teljes szélességben, szürke háttérrel */
  .team .member:last-child:nth-child(odd) { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 20px; border-radius: 6px; background: var(--g50); }
  .team .member:last-child:nth-child(odd) .member-contact { align-self: stretch; align-items: center; }
}

/* E-mail-címek mindig egy sorban (2026-10-27): a betűméret a rendelkezésre álló szélességhez igazodik (Arial) */
.contact .stack, .member-contact { container-type: inline-size; }
.contact a[href^="mailto:"] { white-space: nowrap; font-size: min(15.5px, calc(100cqi / 16.4)) !important; }
.member-contact a { overflow-wrap: normal; white-space: nowrap; font-size: min(14px, calc(100cqi / 12.4)); }
.member-contact a[href*="zoltan.csikos"] { font-size: min(14px, calc(100cqi / 16.4)); }

/* Kalkulátor mobilon (2026-10-27): nem csúszik jobbra; az „Ajánlatot kérek” és az e-mail-küldés a számítás alatt, az előnyök fölött */
@media (max-width: 860px) { .calc-inset { padding: 48px 20px; } }
@container calc (max-width: 860px) {
  .calc-grid { grid-template-columns: minmax(0, 1fr); }
  .r-head { font-size: clamp(20px, 6.4cqi, 26px); }
  .rcard > .stack.r-in:not([hidden]) { display: contents; }
  .rcard .r-head, .rcard .r-reco, .rcard .bars { order: 1; }
  .rcard .r-foot { order: 2; margin-top: 0; }
  .rcard .r-in > .stack { order: 3; padding-top: 22px; border-top: 1px solid var(--g100); }
}

/* Jogi szövegek */
.legal { display: flex; flex-direction: column; gap: 16px; }
.legal .h3 { margin-top: 24px; }
.legal code { font-size: .92em; background: var(--g50); padding: 1px 5px; border-radius: 3px; }