/* ── Proof of Scam — redesign layer (proto-scrollytelling.html → főoldal)
   Ezt a fájlt a deploy-csomagba kell becsomagolni (index-redesign.html linkeli).
   Forrás: proto-scrollytelling.html inline <style> block (2026-11-05)
   NE módosítsd a közös styles.css-t — az 187 riport-lapot és aloldalakat szolgálja.
   ───────────────────────────────────────────────────────────────────────────── */

/* .wrap szélesség-override — csak ezen az oldalon hat (styles.css nem töltődik be itt kétszer) */
.wrap { max-width: 1470px; }

/* ── Skálázó egység: 1px @ 1920px referencia, arányos viewport-szélességgel, max felső ──────
   SAV 1 (>1920px): --u rögzül 1px-en, dizájn nem nő tovább.
   SAV 2 (900–1920px): --u = vw / 1920, minden méret arányosan skaláz — SOHA nincs layout-break.
   SAV 3 (<900px): a mobil CSS explicit értékeket ad meg; a token értéke itt irreleváns.
   Használat: calc(N * var(--u))  →  N px méretet ad 1920px-en, arányosan kisebbet alatta.
   ─────────────────────────────────────────────────────────────────────────────────────────── */
:root {
  --u: min(calc(100vw / 1920), 1px);
  /* V30: logo függőleges befoglalás — min(szélességi, magassági, 1px) → klaszter 0px klip minden viewporton */
  --logo-u: min(calc(100vw / 1920), calc((92vh - 40px) / 1315), 1px);
}

/* ── HERO v6: Lebegő panel + POS-green glow (minden oldalon) ────────────────
   html: #030305 sötét alap.
   body: a "lebegő panel" — margin:20px 4.5%, border-radius:28px, overflow:clip.
   body::before: position:fixed glow → a panel KÖRÜL, mind a 4 oldalon érvényesül.
         (box-shadow nem érvényesül az oldalsó margókon — v5 bug — ezért ::before)
   nav { top:20px } → sticky nav 20px top-margón belül tapadsz, nem vágja le clip ✅.
   header.hero { min-height: calc(92vh - 20px) } → logó-levagas kompenzálva ✅.
   overflow:clip → lekerekített sarkok, NEM teremt scroll containert ✅.
   Cookie-sáv: nincs a HTML-ben.  Mobil 390px: margin:0, border-radius:0 ✅.
   ─────────────────────────────────────────────────────────────────────────── */
html {
  background: #030305;
  scroll-snap-type: y proximity; /* snap csak az első két panelen; proximity=nem ejt csapdába */
}

body {
  margin: 20px 4.5%;
  border-radius: 28px;
  background: var(--bg);
  overflow: clip;
  min-height: 100vh;
}

/* Glow: fixed pseudo — a panel KÖRÜL mind a 4 oldalon (box-shadow oldalt nem érvényesül) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 14% 80% at 4.5%  50%, rgba(0,229,160,.18) 0%, transparent 100%),
    radial-gradient(ellipse 14% 80% at 95.5% 50%, rgba(0,229,160,.18) 0%, transparent 100%),
    radial-gradient(ellipse 100% 30% at 50%  0%, rgba(0,229,160,.15) 0%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

/* Nav sticky offset: a body 20px top-margóját kompenzálja, a nav a PANELEN BELÜL tapadsz.
   z-index: 100 — minden hero-elem (pill:30, pill[open]:40, logo:10, content:20) FÖLÉ kerül. */
nav { top: 20px; z-index: 100; }

@media (max-width: 899px) {
  body {
    margin: 0 2.5%;
    border-radius: 16px;
  }
  nav { top: 0; }
}

/* ── V51: Nav desktop layout + hamburger kiterjesztés 1000–1280px-re ──────────────
   Probléma: .links block flex-item → .nav-pill + .nav-actions egymás alatt (2 sor),
   navH=96-118px. styles.css hamburger breakpoint=999px, 1000-1280px-en nincs hamburger.
   Fix: (a) .links flex-sor >1280px; (b) hamburger+dropdown 1000-1280px-en.
   Admin-nézet +2 gomb: 1281px-en brandwrap(240)+nav-pill(350)+nav-actions(390)=980px ≤ nav ✓ */

/* (a) Desktop baseline >1280px: nav-pill + nav-actions egy vízszintes sorban */
nav .links {
  display: flex;
  align-items: center;
  white-space: nowrap; /* 'Beta-hozzáférés' nem törik */
}

/* (b) Hamburger kiterjesztés 1000–1280px
   .nav-toggle: !important mert a <style>-blokk base display:none jön utána a cascade-ben */
@media (min-width: 1000px) and (max-width: 1280px) {
  .nav-toggle { display: flex !important; align-items: center; justify-content: center; }
  nav:not(.nav-open) .links { display: none; }
  /* Lenyíló menü: absolute overlay (nem tolja le a tartalmat) */
  nav.nav-open .links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px 16px;
    background: rgba(10,10,12,.97);
    border-top: 1px solid rgba(35,35,42,.9);
    border-bottom: 1px solid rgba(35,35,42,.9);
    z-index: 100;
    white-space: normal;
  }
  nav.nav-open .links .nav-pill,
  nav.nav-open .links .nav-actions { display: flex; flex-direction: column; width: 100%; }
  nav.nav-open .links a:not(.btn) {
    display: block;
    margin-left: 0;
    padding: 11px 6px;
    font-size: 15px;
    border-bottom: 1px solid var(--line);
  }
  nav.nav-open .links .langsel,
  nav.nav-open .links select { margin: 8px 6px 4px; align-self: flex-start; }
  nav.nav-open details { display: block; margin-left: 0; width: 100%; }
  nav.nav-open details summary {
    margin-left: 0;
    padding: 11px 6px;
    font-size: 15px;
    border-bottom: 1px solid var(--line);
    display: block;
  }
  nav.nav-open details[open] .drop-menu {
    position: static;
    border: none;
    border-radius: 0;
    padding: 0 0 4px 16px;
    background: transparent;
    box-shadow: none;
  }
  nav.nav-open details .drop-menu a {
    padding: 9px 6px;
    font-size: 14px;
    border-bottom: 1px solid var(--line);
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  body {
    margin: 0;
    border-radius: 0;
  }
}

/* Scroll-snap letiltva mobilon (pricing magasabb mint viewport → csapdává válna) */
@media (max-width: 480px) {
  html { scroll-snap-type: none; }
  section#pricing { min-height: unset !important; }
}

/* Scroll-snap letiltva reduced-motion esetén */
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
}

/* .trust statisztika-sor: bal-igazítás (styles.css text-align:center override) */
.trust .stat { text-align: left; }

/* ── Layout — Section 2 (#how) ─────────────────────────────────────────── */
/* steps-svg magasság-override — csak a #how-ban, styles.css 24px-ét felülírja */
#how .steps-svg { height: 48px; }

#how { padding: 0; }

/* Task 4 (V13): #how lépéskártyák — Credly-stílus (vizuális zóna felül, lépésszám kiemelve).
   Szöveg és data-i18n kulcsok változatlanok; csak a wrapper-struktúra és az osztályok módosulnak.
   .card és .step a styles.css-ből jön (érinthetetlen); az override-ok #how-on belül hatnak. */
#how .how-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.how-card-visual {
  background: rgba(0,229,160,.06);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: clamp(20px, calc(28 * var(--u)), 28px) clamp(16px, calc(20 * var(--u)), 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(80px, calc(100 * var(--u)), 100px);
}
.how-card-step {
  font-size: clamp(36px, calc(48 * var(--u)), 48px);
  font-weight: 700;
  color: var(--mint);
  letter-spacing: -.02em;
  opacity: .85;
  font-variant-numeric: tabular-nums;
}
.how-card-body {
  padding: clamp(14px, calc(18 * var(--u)), 18px) clamp(16px, calc(20 * var(--u)), 20px);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#how .how-card h3 {
  font-size: clamp(14px, calc(15 * var(--u)), 15px);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  margin: 0;
}
#how .how-card p {
  font-size: clamp(12px, calc(13 * var(--u)), 13px);
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 899px) {
  .how-card-visual { min-height: 70px; }
}

.st-intro {
  padding: clamp(48px, 8vw, 96px) 24px clamp(32px, 5vw, 56px);
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.st-intro h2 {
  font-size: clamp(26px, 4.5vw, 38px);
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.st-intro .lead {
  color: var(--muted);
  font-size: clamp(15px, 2.2vw, 19px);
}

/* ── Scroll track ────────────────────────────────────────────────────── */
.st-scroll-track { position: relative; }
.st-sticky-view  { padding: 0 24px; max-width: 1320px; margin: 0 auto; }

/* ── Step panels — DEFAULT: full-contrast block layout ──────────────── */
/* [E-10] Without JS panels MUST be fully visible. .gsap-on only set after GSAP init. */
.st-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: clamp(40px, 7vh, 72px) 0;
  border-top: 1px solid var(--line);
  align-items: center;
}
.st-panel:first-child { border-top: none; }

/* ── sx-word safety ─────────────────────────────────────────────────── */
.sx-word {
  display: inline-block;
  opacity: 1;
  color: var(--fg);
  will-change: opacity;
}
.gsap-on .sx-word { opacity: .35; }
@media (prefers-reduced-motion: reduce) {
  .gsap-on .sx-word { opacity: 1 !important; }
}

/* ── GSAP-on: pinned overlay mode (desktop only) ───────────────────── */
@media (min-width: 900px) {
  .gsap-on .st-scroll-track { /* height set by JS */ }

  .gsap-on .st-sticky-view {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    padding: 0;
    max-width: 100%;
    margin: 0;
    display: block;
  }

  .gsap-on .st-panel {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    padding: 0 clamp(24px, 5vw, 80px);
    align-items: center;
    border-top: none;
    opacity: 0;
    pointer-events: none;
  }

  .gsap-on .st-panel.is-active {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .st-panel {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 0;
  }
  .st-visual { order: 2; }
  .st-text-block { order: 1; }
}

/* ── Visual graphic box ─────────────────────────────────────────────── */
.st-graphic {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.st-graphic svg { width: 100%; height: 100%; display: block; }

/* ── Text block ─────────────────────────────────────────────────────── */
.st-text-block { display: flex; flex-direction: column; gap: 14px; }

.step-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,229,160,.09);
  border: 1.5px solid rgba(0,229,160,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  font-size: 12px;
  color: var(--mint);
  font-weight: 700;
  flex-shrink: 0;
}

.st-text-block h3 {
  font-size: clamp(19px, 2.4vw, 26px);
  line-height: 1.25;
  letter-spacing: -.01em;
}

.st-text-block p {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.65;
}

/* ── Progress bar (right side, fixed, desktop only) ────────────────── */
.st-progress {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 180px;
  background: rgba(35,35,42,.9);
  border-radius: 3px;
  z-index: 150;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.gsap-on .st-progress { opacity: 1; }

.st-progress-fill {
  width: 100%;
  height: 0%;
  background: var(--mint);
  border-radius: 3px;
}
.st-progress-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--mint);
  border-radius: 50%;
  left: -3.5px;
  top: 0%;
  box-shadow: 0 0 8px rgba(0,229,160,.55);
}
@media (max-width: 900px) { .st-progress { display: none; } }
@media (prefers-reduced-motion: reduce) { .st-progress { display: none; } }

/* ── Step counter (decorative, desktop scroll mode) ─────────────────── */
.st-step-counter {
  position: fixed;
  left: 20px;
  bottom: 32px;
  font-family: monospace;
  font-size: 12px;
  color: var(--muted);
  z-index: 150;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.gsap-on .st-step-counter { opacity: 1; }
@media (max-width: 900px) { .st-step-counter { display: none; } }
@media (prefers-reduced-motion: reduce) { .st-step-counter { display: none; } }

/* ── Background glow per step ───────────────────────────────────────── */
.st-bg-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}
.gsap-on .st-bg-glow { opacity: 1; }
.st-glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0;
  will-change: opacity, transform;
}

/* ── CTA section 2 ────────────────────────────────────────────────────── */
.st-cta {
  padding: clamp(48px, 8vh, 88px) 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 10;
}
.muted-note { color: var(--muted); font-size: 13px; max-width: 500px; }

/* ══════════════════════════════════════════════════════════════════════
   SECTION 3 — Sticky scrollytelling
   ══════════════════════════════════════════════════════════════════════ */

.sx-word-s3 { display: inline-block; opacity: 1; color: var(--fg); will-change: opacity; }
.gsap-on-s3 .sx-word-s3 { opacity: .35; }
@media (prefers-reduced-motion: reduce) { .gsap-on-s3 .sx-word-s3 { opacity: 1 !important; } }

#investigation {
  padding: 0;
  border-top: 2px solid var(--line);
  margin-top: 64px;
}
.st3-intro {
  padding: clamp(48px, 8vw, 88px) 24px clamp(32px, 5vw, 52px);
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.st3-intro h2 { font-size: clamp(26px, 4.5vw, 38px); letter-spacing: -.02em; margin-bottom: 10px; }
.st3-intro .lead { color: var(--muted); font-size: clamp(15px, 2.2vw, 19px); }

.st3-step-indicator {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 151;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.gsap-on-s3 .st3-step-indicator { opacity: 1; }
@media (max-width: 900px) { .st3-step-indicator { display: none; } }
@media (prefers-reduced-motion: reduce) { .st3-step-indicator { display: none; } }

.st3-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2a2a34; border: 1.5px solid #3a3a44;
  flex-shrink: 0;
  transition: background .25s, border-color .25s, transform .25s;
}
.st3-dot.is-active { background: var(--mint); border-color: var(--mint); transform: scale(1.5); }
.st3-dot.is-done   { background: rgba(0,229,160,.28); border-color: rgba(0,229,160,.4); }

.st3-scroll-track { position: relative; }
.st3-sticky-view  { padding: 0 24px; max-width: 1320px; margin: 0 auto; }

.st3-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: clamp(40px, 7vh, 72px) 0;
  border-top: 1px solid var(--line);
  align-items: center;
}
.st3-panel:first-child { border-top: none; }
.st3-panel.is-risk     { border-color: rgba(232,185,74,.25); }
.st3-panel.is-findings { border-color: rgba(0,229,160,.2); }

@media (min-width: 900px) {
  .gsap-on-s3 .st3-sticky-view {
    position: sticky; top: 0; height: 100vh;
    overflow: hidden; padding: 0; max-width: 100%; margin: 0; display: block;
  }
  .gsap-on-s3 .st3-panel {
    position: absolute; inset: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
    padding: 0 clamp(24px, 5vw, 80px);
    align-items: center; border-top: none;
    opacity: 0; pointer-events: none;
  }
  .gsap-on-s3 .st3-panel.is-risk     { background: rgba(232,185,74,.03); }
  .gsap-on-s3 .st3-panel.is-findings { background: rgba(0,229,160,.025); }
  .gsap-on-s3 .st3-panel.is-active   { opacity: 1; pointer-events: auto; }
}
@media (max-width: 900px) {
  .st3-panel { grid-template-columns: 1fr; gap: 28px; }
  .st3-visual-col { order: 2; }
  .st3-text-col   { order: 1; }
}

.st3-text-col { display: flex; flex-direction: column; gap: 12px; }
.st3-step-label { font-family: monospace; font-size: 11px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.st3-text-col h3 { font-size: clamp(18px, 2.3vw, 24px); line-height: 1.25; letter-spacing: -.01em; }
.st3-text-col p  { color: var(--muted); font-size: 15px; line-height: 1.65; }

.st3-ev-badge {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 4px 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  border: 1px solid; width: fit-content;
}
.st3-ev-badge.ev-registry { background: rgba(100,160,255,.07); border-color: rgba(100,160,255,.3); color: #8ab4f8; }
.st3-ev-badge.ev-chain    { background: rgba(0,229,160,.07);   border-color: rgba(0,229,160,.3);   color: var(--mint); }
.st3-ev-badge.ev-source   { background: rgba(200,200,220,.05); border-color: rgba(200,200,220,.2); color: #b0b0c0; }
.st3-ev-badge.ev-risk     { background: rgba(232,185,74,.08);  border-color: rgba(232,185,74,.35); color: #E8B94A; }
.st3-ev-badge.ev-findings { background: rgba(0,229,160,.05);   border-color: rgba(0,229,160,.22);  color: var(--mint); }

.st3-callout {
  margin-top: 8px; padding: 9px 13px; border-radius: 7px;
  font-size: 12px; line-height: 1.5; border: 1px solid;
}
.st3-callout.risk-note     { background: rgba(232,185,74,.07); border-color: rgba(232,185,74,.28); color: #E8B94A; }
.st3-callout.findings-note { background: rgba(138,138,148,.06); border-color: rgba(138,138,148,.2); color: var(--muted); }

.st3-visual-col { display: flex; flex-direction: column; gap: 8px; }
.st3-graphic {
  width: 100%; aspect-ratio: 4/3;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.st3-graphic svg { width: 100%; height: 100%; display: block; }
.st3-demo-label { text-align: right; font-size: 10px; color: var(--muted); letter-spacing: .04em; opacity: .6; }
.st3-panel.is-risk     .st3-graphic { border-color: rgba(232,185,74,.22); }
.st3-panel.is-findings .st3-graphic { border-color: rgba(0,229,160,.18); }
.st3-cta { padding: clamp(40px, 8vh, 72px) 24px; text-align: center; }


/* ══════════════════════════════════════════════════════════════════════
   HERO SECTION — network SVG background animation
   ══════════════════════════════════════════════════════════════════════ */

/* Network illustration layer + POS-green bloom */
.hero-bg-net {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Soft bloom: alpha=0.080 → bloom center RGB(10,28,25), after overlay RGB(10,20,19), G−R≈10 (target 8–14) */
  background: radial-gradient(ellipse 60% 55% at 68% 42%, rgba(0,229,160,.080) 0%, transparent 100%);
}
/* Perspektívás padlórács — v11.
   HORGONY: bottom:0 — az elem alulra rögzített, az elülső él (legalsó sor) a néző közelében.
   DŐLÉS: rotateX(-70deg) — negatív szög: felső él befelé (képernyőbe), padlósík, nem fal.
   PERSPEKTÍVA: 600px ≈ 1.4× az elem magasságának — erős összefutás, teljes padló-hatás.
   TRANSFORM-ORIGIN: 50% 100% — a forgástengely az elem alján, az enyészpont a hero alján van.
   CELLÁK: 80×80px (1920-on; --u arányosan kisebb) — transzformálatlanul négyzetes → vetítés után szabályos rács.
   SZÉLESSÉG: 200%, translateX(-50%) — oldalsó élek a hero overflow:hidden-en kívülre esnek → nem vágódnak le "szemmel láthatóan". */
.hero-bg-net::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 200%;
  height: 60%;
  transform: translateX(-50%) perspective(600px) rotateX(-70deg);
  transform-origin: 50% 100%;
  background-image:
    linear-gradient(rgba(0,229,160,.080) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,160,.080) 1px, transparent 1px);
  background-size: calc(80 * var(--u)) calc(80 * var(--u)); /* négyzetes cella; --u-arányos */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%); /* horizont elsimítás */
  mask-image: linear-gradient(to bottom, transparent 0%, black 25%);
  pointer-events: none;
}
.hero-bg-net svg { width: 100%; height: 100%; max-height: 100vh; opacity: .18; }
.hero-net-label {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-family: monospace;
  font-size: 9px;
  color: rgba(138,138,148,.35);
  letter-spacing: .07em;
  pointer-events: none;
  user-select: none;
}

/* Hero section: full-cover layout */
header.hero {
  position: relative;
  overflow: hidden;
  min-height: calc(92vh - 20px); /* 20px = body margin-top kompenzáció → logó-levagas nem jön vissza */
  padding: 0;
  text-align: left;
  scroll-snap-align: start; /* Panel 1: hero snap-pont */
  animation: heroFloat 7s ease-in-out infinite; /* --hero-float-y forrása; logo + pillek inherits: true */
}

/* Panel 2: library-cta snap-pont (owner-döntés 2026-11-07 — library-cta egyedül a hero után);
   background: var(--bg) → blokkolja a hero body::before derengés átszivárgását a section padding-on át */
section#library-cta {
  scroll-snap-align: start;
  background: var(--bg);
}

/* #library-cta — pos-logo-diag háttér (assets/pos-logo-diag-1600.webp)
   Rétegzés: panel (bg) → ::before diag 12% → ::after sötét scrim → tartalom (z:2)
   Kontrasztkalkulus legrosszabb eset (--muted #8A8A94, L=0.281 / diag-max mint #00E5A0, L=0.585):
     L_mid = 0.00616 + (0.585-0.00616)×.12 = 0.0757  (diag over panel)
     L_fin = 0.0757×.08 + 0.00616×.92 = 0.0117       (scrim 92% over L_mid)
     CR = (0.281+.05)/(0.0117+.05) = 5.33:1  ✅ WCAG AA (≥4.5) */
section#library-cta > div {
  position: relative;
  overflow: hidden;
}
section#library-cta > div::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/pos-logo-diag-1600.webp');
  background-size: clamp(220px, calc(480 * var(--u)), 480px);
  background-position: center;
  background-repeat: no-repeat;
  opacity: .12;
  pointer-events: none;
  z-index: 0;
}
/* Sötét radial scrim: a szöveg mögött sötét, az éleken átlátszó → diag az éleken látható */
section#library-cta > div::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 72% 65% at 50% 50%,
    rgba(20,20,24,.92) 0%,
    rgba(20,20,24,.92) 50%,
    rgba(20,20,24,0) 100%
  );
  pointer-events: none;
  z-index: 1;
}
section#library-cta > div > * {
  position: relative;
  z-index: 2;
}

/* Hero content — always above logo layer */
.hero-content {
  position: relative;
  z-index: 20;
}

/* Network SVG node/edge defaults (visible statically without JS) */
.hn-tracer  { opacity: 0; }
.hn-pulse   { opacity: 0; }
.gsap-on-hero .hn-node { opacity: 0 !important; }
.gsap-on-hero .hn-edge { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .gsap-on-hero .hn-node { opacity: inherit !important; }
  .gsap-on-hero .hn-edge { opacity: inherit !important; }
}

/* ── Utility ────────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION 5 — Services (s5-* classes)
   ══════════════════════════════════════════════════════════════════════ */
#services {
  padding: 72px 24px 56px;
  border-top: 1px solid var(--line);
}
.s5-inner {
  max-width: 1050px;
  margin: 0 auto;
}
.s5-header {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}
.s5-eyebrow {
  display: block;
  font-family: monospace;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--mint);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.s5-header h2 {
  font-size: clamp(22px, 3.5vw, 32px);
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.s5-lead {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.s5-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0 0 36px;
}
.s5-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 20px;
}
.s5-card-icon { font-size: 20px; margin-bottom: 10px; }
.s5-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--fg);
}
.s5-card p {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}
.gsap-on-s5 .s5-card {
  opacity: 0.35;
  transform: translateY(14px);
}

.s5-flags-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 0 0 44px;
}
.s5-flags-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.s5-flags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 28px;
}
.s5-flags li {
  font-size: 13.5px;
  color: #d4d4da;
  padding: 3px 0 3px 20px;
  position: relative;
  line-height: 1.4;
}
.s5-flags li::before {
  content: "🔴";
  position: absolute;
  left: 0;
  font-size: 9px;
  top: 6px;
}

.s5-scan-wrap {
  max-width: 540px;
  margin: 0 auto 36px;
  text-align: center;
  padding: 32px 28px;
  background: linear-gradient(160deg, rgba(0,229,160,.06), var(--panel) 60%);
  border: 1px solid var(--mint);
  border-radius: 16px;
  box-shadow: 0 0 48px rgba(0,229,160,.06);
}
.s5-scan-eyebrow {
  display: block;
  font-family: monospace;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--mint);
  opacity: .6;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.s5-scan-title { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.s5-scan-sub   { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.s5-scan-form  { display: flex; flex-direction: column; gap: 10px; }
.s5-scan-input {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--fg);
  outline: none;
  box-sizing: border-box;
}
.s5-scan-input:focus { border-color: var(--mint); }
.s5-scan-btn { width: 100%; font-size: 15px; padding: 13px; }
.s5-consent  { font-size: 12px; color: var(--muted); margin: 10px 0 0; line-height: 1.5; }
.s5-consent a { color: var(--muted); text-decoration: underline; }

.s5-cta-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 32px;
}
.s5-disc {
  font-size: 12px;
  color: rgba(138,138,148,.55);
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (max-width: 899px) {
  .s5-cards { grid-template-columns: 1fr; }
  .s5-flags  { grid-template-columns: 1fr; }
  .s5-scan-wrap { padding: 24px 16px; }
  .s5-cta-row { flex-direction: column; align-items: center; }
  .s5-cta-row .btn { width: 100%; max-width: 320px; text-align: center; }
}

/* V16: funnel → három önálló blokk. Desktop: flex sor. Mobil: column, blokkok egymás alatt egyben.
   Nyilak (funnel-arrow-sep) mobilon elrejtve — a sorrend egyértelmű, a "→" blokk közepe zavaró lenne. */
.funnel-wrap {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
}
.funnel-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  border-right: 1px solid var(--line);
}
.funnel-block:first-child { padding-left: 0; }
.funnel-block:last-child  { border-right: none; padding-right: 0; }
.funnel-block-stat {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.funnel-block-stage {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--mint);
  font-weight: 700;
}
/* reset styles.css .funnel-col padding/border belső blokkban */
.funnel-block .funnel-col {
  padding: 12px 0 0 !important;
  border-right: none !important;
  border-bottom: none !important;
}
/* szeparátor nyilak blokkok között */
.funnel-arrow-sep {
  flex-shrink: 0;
  align-self: center;
  margin-top: 20px;
  color: var(--muted);
  font-size: 14px;
  padding: 0 4px;
}

@media (max-width: 640px) {
  .funnel-wrap { flex-direction: column; }
  .funnel-block {
    width: 100%; /* flex-column-ban a főtengely a magasság → width explicite kell */
    padding: 0 !important;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 16px !important;
    margin-bottom: 16px;
  }
  .funnel-block:last-child { border-bottom: none; padding-bottom: 0 !important; margin-bottom: 0; }
  .funnel-arrow-sep { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   HERO — Full-cover 3D logo, text overlay
   ══════════════════════════════════════════════════════════════════════ */

/* Logo image: dominant, centered (overlaps text for reference-style composition) */
.hero-img-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(1315 * var(--logo-u));   /* V30: --logo-u = min(szélességi, magassági) → 0px vertikális klip */
  height: calc(1315 * var(--logo-u));
  z-index: 10;
  pointer-events: none;
}
.hero-img-wrap::before {
  content: '';
  position: absolute;
  inset: -15%;
  background: radial-gradient(ellipse at center, rgba(0,229,160,.20) 0%, rgba(0,229,160,.06) 40%, transparent 70%);
  border-radius: 50%;
  animation: heroGlowPulse 4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
.hero-img-wrap img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  translate: 0 var(--hero-float-y, 0px); /* 1 forrásból olvas — nulla drift garantált */
}
/* @property: animatable custom property a megosztott lebegéshez.
   header.hero-n fut EGY animáció → logo + pillek azonos interpolált értéket olvasnak.
   Phase drift fizikailag lehetetlen (nem két külön animation, hanem egy shared property). */
@property --hero-float-y {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}
@keyframes heroFloat {
  /* --hero-float-y animálódik; logo + pill egyaránt translate: 0 var(--hero-float-y) → szinkron */
  0%, 100% { --hero-float-y: 0px; }
  50% { --hero-float-y: -8px; }
}
@keyframes heroGlowPulse {
  from { opacity: 0.75; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  header.hero { animation: none; } /* --hero-float-y → initial-value 0px → logo + pillek befagynak */
  .hero-img-wrap::before { animation: none; }
}

/* Text overlay layer */
.hero-overlay {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-height: 92vh;
  padding: clamp(28px, calc(52 * var(--u)), 52px) 0 clamp(80px, calc(110 * var(--u)), 110px);
  box-sizing: border-box;
}
/* Dark gradient: stronger left-center for overlap zone text legibility */
.hero-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(10,10,12,.95) 0%,
    rgba(10,10,12,.85) 25%,
    rgba(10,10,12,.70) 50%,
    rgba(10,10,12,.40) 70%,
    rgba(10,10,12,.15) 85%,
    transparent 100%);
  z-index: -1;
  pointer-events: none;
}
/* kick chip inside frosted panel: add margin below before sub paragraphs */
.hero-sub-wrap .kick {
  display: block;
  margin-bottom: 12px;
}
.hero-bottom-row {
  display: grid;
  grid-template-columns: 1fr;             /* badge+bekezdés a cím ALA (nem mellé) */
  /* V30/d: szöveg jobb széle < Kripto pill vizuális bal széle − 30px
     272 = 180 (center_x) + 92 (forgott BBox félszélesség: (143×cos40+119×sin40)/2)
     50% = header félszélessége; szöveg bal = 0 (body margóval egységes) */
  max-width: calc(50% - 272 * var(--logo-u) - 30px);
  gap: calc(24 * var(--u));
  align-items: start;
  margin-top: auto;
  padding-top: calc(32 * var(--u));
}
.hero-h1-wrap h1 {
  font-size: calc(56 * var(--u));         /* V23: 56px@1920, 26.25px@900 — nincs padló desktop-sávban */
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0;
  text-wrap: balance; /* V31: árva sor ("benne." egyedül) megelőzése */
  text-shadow: 0 2px 24px rgba(0,0,0,.85), 0 0 48px rgba(0,0,0,.60);
}
.hero-sub-wrap {
  background: rgba(10,10,12,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: calc(12 * var(--u));
  padding: calc(16 * var(--u)) calc(20 * var(--u));
  align-self: auto;
}
.hero-sub-wrap .sub {
  /* V23 explicit kivétel: törzszöveg 13px padlóval — owner döntés (8.9px @ 900 olvasható lenne) */
  font-size: clamp(13px, calc(15.5 * var(--u)), 15.5px);
  margin-bottom: 8px;
  line-height: 1.6;
}
.hero-sub-wrap .sub:last-child { margin-bottom: 0; }


/* Mobile (≤699px) — 700px+ a desktop ágat kapja; tablet portré (768-899px) is desktop */
/* Mobile (<700px) — V40: logo viewport-kitöltő, kártyák rajta mint desktopon */
@media (max-width: 699px) {
  /* V46: 1.9× scale → kockák 86% viewport sz.; min(45svh,100vw) alapra (45svh≈100vw keskenyen) */
  :root { --logo-u: calc(min(45svh, 100vw) * 1.9 / 1315); }
  /* V45: min-height:0 → styles.css min-height legyőzve; V47: height:auto → hero nő a tartalommal
     V47: logo top rögzítve (25.5svh = 50% - 12svh @ 75svh heroban) → decoupled, dead space stabil
     V46: clip-path → logo oldal/teteje vágva (alul nincs overflow, hero auto-magasságú) */
  header.hero {
    height: auto;
    min-height: 0;
    overflow: visible;
    clip-path: inset(0 0 0 0);
    justify-content: flex-start;
    align-items: flex-start;
  }
  /* V40: logo centrálva; V43: 12svh-val felfelé tolva → V47: rögzített 25.5svh (≡ V43 @ 75svh hero) */
  .hero-img-wrap {
    right: auto;
    left: 50%;
    top: calc(25.5svh);
    transform: translate(-50%, -50%);
    width: calc(1315 * var(--logo-u));
    height: calc(1315 * var(--logo-u));
    max-width: unset;
    opacity: 0.95;
  }
  .hero-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* V43: PNG blank területek levágása — tartalom y:207–1378 / 1600 (top 12.9%, bottom 13.9%) */
    clip-path: inset(12.9% 2.25% 13.9% 0.81%);
  }
  .hero-overlay {
    min-height: 75svh;
  }
  /* Gradiens CSAK a szövegzónán sötétít; a logo felső ~45% átlátszó marad */
  .hero-overlay::before {
    background: linear-gradient(to bottom,
      transparent 0%,
      transparent 45%,
      rgba(10,10,12,.70) 70%,
      rgba(10,10,12,.92) 100%);
  }
  .hero-bottom-row {
    max-width: unset; /* V39: mobilon ~117px lett → teljes szélességen */
    grid-template-columns: 1fr;
    gap: 16px;
    /* V44: h1 a kocka-tartalom alá (cube bottom ~41.74svh); 35px overlay/row padding hozzáadódik */
    margin-top: calc(42svh);
  }
  .hero-h1-wrap h1 {
    /* V23: 2.5rem=40px volt → nem-monoton ugrás; 26px ≈ calc(56*(699/1920)) */
    font-size: clamp(20px, 7vw, 26px);
  }
  /* sub-wrap alfa 0.18 < 0.25 — nem fedi át opákan a logót (marveen ellenőrzés) */
  .hero-sub-wrap {
    align-self: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(10,10,12,.18);
  }
}

/* V26+V29+V30/d — Desktop overlay: padding-left=0 (normál body bal margóról indul, nem logo szélétől).
   V30/d: a szövegoszlop bal határa a többi szekció bal margójával egyezik, jobb határa a
   legbalsos kártya vizuális bal széle − 30px biztonsági sáv.
   V29: a 700px-es alsó határ a tablet portrét (768-899px) is a desktop ágba vonja. */
@media (min-width: 700px) {
  .hero-overlay {
    padding-left: 0; /* normál bal margó — a body 4.5% margója adja a viewport-szintű eltolást */
  }
  /* Soft panel: a kemény téglalap-él eltűnik — jobb szél felé elhalványodik.
     Kontrasztszámítás: overlay::before (70%) + panel (62%) a szöveg bal felén ~ 0.98 opacity → ✅
     A jobb szél felé csak overlay::before sötétít: h1 text-shadow biztosítja >= 3.0 CR. */
  .hero-sub-wrap {
    background: linear-gradient(to right,
      rgba(10,10,12,.62) 0%,
      rgba(10,10,12,.62) 58%,
      rgba(10,10,12,.28) 80%,
      transparent 100%);
  }
}

/* Short viewport: overlay padding-bottom csökkentve rövid képernyőkön.
   h1 font-size NINCS override-olva — a --u token arányosan skálázza szélesség szerint,
   nem magasság szerint (height-alapú override töréspontot okozott). */
@media (max-height: 920px) and (min-width: 700px) {
  .hero-overlay {
    padding-bottom: clamp(100px, 14vh, 130px);
  }
}
@media (max-height: 800px) and (min-width: 700px) {
  .hero-overlay {
    padding-bottom: clamp(90px, 13vh, 120px);
  }
}

/* Floating hero pill cards — PILL = KOCKA-LAP (owner-döntés, 2026-11-07)
   A kártya határa EGYBEESIK a kocka lapjával (nem kisebb pill a kockán belül).
   Méretezés: width = --cube-w, min-height = --cube-h (per-pill CSS változók lentebb).
   Cube CSS px @ 1920: #1 = 143×119px (rot.-40°, BB→251px), #9 = 138×112px, #5 = 128×105px.
   Háttér: 44% opaque (owner: 15% rel. csökkentés 0.52→0.44) → text-shadow kontrasztvédelem.
   Kontraszt: ellenőrizd .44-nél (volt 5.6:1 @.52); szöveg text-shadow megmarad védelemként.
   Zárva: justify-center → tartalom vertikálisan középre a kocka-lapon.
   Nyitva: justify-start → leírás felülről indul, kocka-lapon túl is nőhet. */
.hero-pill {
  position: absolute;
  z-index: 30;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(10,10,12,.44);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: clamp(6px, calc(8 * var(--u)), 8px);
  padding: clamp(8px, calc(10 * var(--u)), 10px) clamp(10px, calc(12 * var(--u)), 12px);
  width: var(--cube-w, calc(182 * var(--u)));
  min-height: var(--cube-h, calc(182 * var(--u)));
  box-sizing: border-box;
  container-type: inline-size; /* V50: cqw = kártya-szélességhez arányos font */
  color: var(--fg);
  cursor: pointer;
  translate: 0 var(--hero-float-y, 0px); /* header.hero animálja, inherits: true → nulla drift */
}
.hero-pill:hover,
.hero-pill[open] {
  border-color: rgba(0,229,160,.40);
  background: rgba(10,10,12,.68);
}
/* V14: nyitott panel — opák háttér, szélesebb, kocka-határon túl is nőhet.
   pill-1: 0°-ra visszafordul, counter-rotation nem kell → vízszintes, olvasható panel. */
.hero-pill[open] {
  justify-content: flex-start;
  background: rgba(10,10,12,.92);
  border-color: rgba(0,229,160,.40);
  width: clamp(200px, calc(240 * var(--u)), 240px);
  z-index: 40;
  overflow: visible;
}
.hero-pill[open] > .hero-pill-fullname { display: none; } /* summary title már mutatja */
.hero-pill-1[open] {
  transform: translate(-50%, -50%) rotate(0deg); /* nyitva: vízszintes panel */
  overflow: visible;
}
.hero-pill-1[open] > summary,
.hero-pill-1[open] > .hero-pill-fullname,
.hero-pill-1[open] > .hero-pill-desc {
  transform: none;
  width: auto;
}
.hero-pill > summary {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  user-select: none;
  outline: none;
}
.hero-pill > summary::-webkit-details-marker { display: none; }
.hero-pill-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mint);
}
.hero-pill-title {
  font-weight: 600;
  word-break: normal;
  hyphens: none;
  letter-spacing: -.01em;
  line-height: 1.3;
  width: 100%;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.80), 0 2px 8px rgba(0,0,0,.70);
}
/* V32: zárt pill → mindig rövid cimke (belefér a kártyába minden méretarányban,
   mert a kártya mérete 2D-s: width + height → logo-u); nyitott pill → teljes cimke */
.hero-pill-title-long  { display: none; }
.hero-pill-title-short { display: block; font-size: clamp(12px, calc(16 * var(--u)), 16px); }
.hero-pill[open] .hero-pill-title-long  { display: block; font-size: clamp(12px, calc(13 * var(--u)), 13px); }
.hero-pill[open] .hero-pill-title-short { display: none; }
/* V50: font kötve a kártya méretéhez (cqw) — gyökér-ok volt: --u=viewport-szél, kártya=--logo-u,
   height-constrained képernyőkön (768px) szétvált a kettő.
   14cqw×74px(1440×768)=10.4px: "Business"@10.4px≈48.5px ≤ inner 54px (tér 5.5px ✓)
   13cqw×69px(1440×768)=9→10px: "Bizonyíték"@10px≈53px > inner 49px → word-break (2×26.5px ✓)
   Globális word-break pill-3-on: csak ott aktivál ahol a szöveg nem fér be. */
.hero-pill-2 .hero-pill-title-short { font-size: clamp(10px, 14cqw, 14px); }
.hero-pill-3 .hero-pill-title-short { font-size: clamp(10px, 13cqw, 12px); word-break: break-word; overflow-wrap: anywhere; }
.hero-pill-arrow { display: none; } /* nyíl elrejtve; hover cue = perem-szín változás */
.hero-pill-arrow {
  color: var(--mint);
  font-size: 10px;
  transition: transform .2s;
  flex-shrink: 0;
}
.hero-pill[open] .hero-pill-arrow { transform: rotate(90deg); }
.hero-pill-fullname {
  display: block;
  font-size: clamp(10px, calc(11 * var(--u)), 11px);
  font-weight: 600;
  color: var(--fg);
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 2px 0 2px;
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
}
.hero-pill-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  margin: 2px 0 0; /* column layout: nincs bal offset */
}
/* Pills kocka-horgonnyal + méretezés (PILL = KOCKA-LAP, owner-döntés 2026-11-07):
   Pozíció: left/top = kocka középpont hero-koordinátában (képlet lentebb).
   Méret: --cube-w / --cube-h = kocka lapjának PONTOS kiterjedése (BB vagy forgott négyzet oldala).
   V20 koordináták (2026-11-09, 0.35 küszöb, szűk ablak): #1 (-40° dőlt, BB 19.12%=251px):
     side=251/1.409=178px; 10% inset: 143px. #9 (tengelypar., 13.12%×12.93%): 138×112px.
     #5 (tengelypar., 12.17%×12.23%): 128×105px.
   Képlet: left = 50% ± (cube_x_pct − 0.5)×1315×--u, top = 50% ± (cube_y_pct − 0.5)×1315×--u */

/* #1 kocka x:26.75–45.87%, y:24.88–44.00% → center(36.31%,34.44%), dőlt -40°
   V48: 85% belső → 13.57%×0.85 = 11.53% → 11.53%×1315 = 152u */
.hero-pill-1 {
  --cube-w: calc(152 * var(--logo-u));
  --cube-h: calc(152 * var(--logo-u));
  left: calc(50% - calc(180.0 * var(--logo-u)));
  top:  calc(50% - calc(204.6 * var(--logo-u)));
  transform: translate(-50%, -50%) rotate(-40deg);
}
/* #9 kocka x:59.69–72.81%, y:57.19–70.12% → center(66.25%,63.655%)
   V48: 85% belső → 13.03%×0.85 = 11.08% → 11.08%×1315 = 146u */
.hero-pill-2 {
  --cube-w: calc(146 * var(--logo-u));
  --cube-h: calc(146 * var(--logo-u));
  left: calc(50% + calc(213.7 * var(--logo-u)));
  top:  calc(50% + calc(180.2 * var(--logo-u)));
  transform: translate(-50%, -50%);
}
/* #5 kocka x:46.07–58.24%, y:43.26–55.49% → center(52.155%,49.375%)
   V48: 85% belső → 12.20%×0.85 = 10.37% → 10.37%×1315 = 136u */
.hero-pill-3 {
  --cube-w: calc(136 * var(--logo-u));
  --cube-h: calc(136 * var(--logo-u));
  left: calc(50% + calc(28.3 * var(--logo-u)));
  top:  calc(50% - calc(7.9 * var(--logo-u)));
  transform: translate(-50%, -50%);
}
/* V15: pill-1 tartalom counter-rotate — kártya -40°, tartalom +40° → 0° nettó képernyőn.
   V48: 152u × cos(40°) = 116u; --logo-u-ban, hogy 1.9× mobilon és asztali méreteken is jó legyen */
.hero-pill-1 > summary,
.hero-pill-1 > .hero-pill-fullname,
.hero-pill-1 > .hero-pill-desc {
  transform: rotate(40deg);
  transform-origin: center center;
  width: calc(116 * var(--logo-u));
}
.hero-pill-1 {
  overflow: hidden;
  align-items: center;
}

/* V32: NEW badge — summary flex-column első gyereke → a cimke FELETT jelenik meg,
   jobb oldalra igazítva; position:static → nem takarja a szövegbetűket */
.badge-new {
  position: static;
  align-self: flex-end;
  background: var(--mint);
  color: #0A0A0C;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: .05em;
  pointer-events: none;
}

/* Wrapper átlátszó ≥700px-en: a pillek az abszolút pozicionálást a header-ből öröklik.
   Nincs 700–1365-ös compact row — a --u token garantálja az arányos skalázást töréspontok nélkül. */
.hero-pills-wrap { display: contents; }
/* Mobile (≤699px): V40+V43 — pills a logón (desktop-stílusú absolute pozíció), 12svh-val felfelé tolva */
@media (max-width: 699px) {
  /* wrapper eltűnik: pillek közvetlenül a hero position:relative contextjébe kerülnek */
  .hero-pills-wrap { display: contents; }
  /* V40: backdrop-filter törlése — blur+overflow:hidden kombó sötét foltot okoz mobilon */
  .hero-pill {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* V47: 25.5svh = logo center rögzítve; ≡ 50%-12svh @ 75svh hero; hero változásakor is stabil */
  .hero-pill-1 { top: calc(25.5svh - calc(204.6 * var(--logo-u))); }
  .hero-pill-2 { top: calc(25.5svh + calc(180.2 * var(--logo-u))); }
  .hero-pill-3 { top: calc(25.5svh - calc(7.9 * var(--logo-u))); }
}

/* Nav: reference pill layout */
nav .links {
  flex: 1;
  display: flex;
  align-items: center;
}
.nav-pill {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 100px;
  padding: 3px 8px;
  gap: 2px;
  margin: 0 auto;
}
.nav-pill > a,
.nav-pill > details > summary {
  margin-left: 0 !important;
  padding: 6px 14px;
  border-radius: 100px;
  transition: background .15s, color .15s;
  color: var(--muted);
}
.nav-pill > a:hover,
.nav-pill > details > summary:hover {
  background: rgba(255,255,255,.09);
  color: var(--fg) !important;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-actions a:not(.btn) {
  margin-left: 0 !important;
  font-size: 14px;
  color: var(--mint) !important;
}
.nav-actions a:not(.btn)::after { content: ' →'; }
nav .brand { opacity: 0.55; font-size: 12px !important; }

@media (max-width: 999px) {
  nav { position: relative; } /* .links position:absolute;top:100% anchors here */
  nav .links { flex: unset; }
  .nav-pill {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* reset from base align-items:center → uniform left-align */
    width: 100%;
    gap: 0;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }
  .nav-pill > a,
  .nav-pill > details > summary {
    padding: 8px 0 !important;
    border-radius: 0 !important;
    color: var(--muted);
  }
  .nav-actions {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(35,35,42,.6);
    margin-top: 4px;
  }
  .nav-actions a:not(.btn)::after { content: ''; }
  nav .brand { opacity: 1; font-size: inherit !important; }
}

/* V37: Nav hamburger 1000-1279px savban — 900-999px: styles.css fedezi; >=1280px: teljes desktop nav */
@media (min-width: 1000px) and (max-width: 1279px) {
  nav { position: relative; }
  .nav-toggle { display: inline-flex !important; align-items: center; justify-content: center; }
  nav .links {
    display: none;
    flex: unset;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(10,10,12,.97);
    border-top: 1px solid rgba(35,35,42,.9);
    border-bottom: 1px solid rgba(35,35,42,.9);
    padding: 12px 16px 16px;
    flex-direction: column;
    gap: 4px;
    z-index: 100;
  }
  nav.nav-open .links { display: flex; }
  nav .links details { width: 100%; }
  nav .links .drop-menu { position: static; box-shadow: none; border: none; background: transparent; padding: 4px 0 4px 12px; }
  .nav-pill {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }
  .nav-pill > a,
  .nav-pill > details > summary {
    padding: 8px 0 !important;
    border-radius: 0 !important;
    color: var(--muted);
  }
  .nav-actions {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(35,35,42,.6);
    margin-top: 4px;
  }
  .nav-actions a:not(.btn)::after { content: ''; }
  nav .brand { opacity: 1; font-size: inherit !important; }
}

/* V19 — #why két-réteg blokk (Automated / Investigative) */
.why-layers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}
.why-layer {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px 24px;
}
.why-layer-title {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 12px;
}
.why-layer-title--auto {
  background: rgba(0,229,160,.12);
  color: var(--mint);
  border: 1px solid rgba(0,229,160,.28);
}
.why-layer-title--invest {
  background: rgba(255,255,255,.07);
  color: var(--fg);
  border: 1px solid var(--line);
}
.why-layer p {
  font-size: clamp(13px, calc(14 * var(--u)), 14px);
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 640px) {
  .why-layers { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   V42: MOBILE SCROLL-SZEKVENCIA TÖRÖLVE
   Sticky valódi mobilon nem tartott ki (body overflow:clip gyanú is él).
   Kártyák már mind láthatók a logón → szekvencia nem ad értéket, csak
   550px fekete sávot okoz. Desktop/tablet ≥700px: változatlan.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 699px) {
  .m-seq-wrap { padding-bottom: 0; }
}

/* V52: ATLA-kártya forrás-link */
.rb-source { margin: 10px 0 0; font-size: 13px; }
.rb-source a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.rb-source a:hover { opacity: .8; }