/* =====================================================================
   GB – stiluri comune pentru sectiunile cu prezentare (gbr, gep, ...)
   GB – közös stílusok a bemutató szekciókhoz (gbr, gep, ...)

   Structura / Felépítés:
   1. Comun / Közös            .gb-*
   2. Specific GBR (laptop + telefon)   .gbr .gb-*
   3. Specific GEP (casa POS + ecran client)  .gep .gb-*
   4. Responsive
   5. Reduced motion

   HTML: <section class="gb-section gbr"> ... </section>
         <section class="gb-section gep"> ... </section>
   ===================================================================== */

/* ---------- 1. COMUN / KÖZÖS ---------- */
.gb-section { position: relative; overflow: hidden; }
.gb-section .gb-sub { font-size: 20px; color: var(--gb-theme-muted, rgba(255,255,255,.85)); }
.gb-badge { display: inline-block; background: var(--yellow-1, #feb101); color: #000; font-size: 13px; font-weight: 700;
  letter-spacing: 1px; padding: 2px 10px; border-radius: 30px; vertical-align: 3px; margin-right: 6px; }

/* RO: lumini difuze in miscare lenta in fundal / HU: lassan mozgó, elmosódott fények a háttérben */
.gb-glow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gb-glow span { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(80px); opacity: .28;
  background: #48a6ff; top: -120px; left: -120px; animation: gbFloat 18s ease-in-out infinite alternate; }
.gb-glow span + span { width: 420px; height: 420px; background: #feb101; opacity: .12; top: auto; left: auto; right: -100px; bottom: -80px; animation-duration: 22s; }
@keyframes gbFloat { to { transform: translate(260px, 180px) scale(1.15); } }

.gb-row { display: flex; align-items: center; gap: 48px; }
.gb-stage { flex: 1.35; min-width: 0; }
.gb-text { flex: 1; min-width: 0; }
.gb-text .bi-check-lg { color: var(--gb-theme-accent, var(--yellow-1, #feb101)); }

/* RO: pasii (1, 2) / HU: lépések (1, 2) */
.gb-steps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gb-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px;
  background: var(--gb-theme-panel-bg, rgba(255,255,255,.08)); border: 1px solid var(--gb-theme-border, rgba(138,239,255,.28)); font-size: 16px; line-height: 1.55; }
.gb-steps li > span { flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gb-theme-accent, var(--yellow-1, #feb101)); color: #000; font-weight: 700; font-size: 15px; }

/* RO: dispozitive – baza comuna / HU: eszközök – közös alap */
.gb-devices { position: relative; perspective: 1600px; }
.gb-screen { position: relative; border: 2px solid #2b3442; }
.gb-laptop, .gb-pos { position: relative; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); animation: gbHover 7s ease-in-out infinite; }
.gb-phone, .gb-cd { animation: gbHover 6s ease-in-out -2s infinite; }
@keyframes gbHover { 50% { transform: translateY(-8px) rotateX(1.2deg); } }

/* RO: cadrele; imaginile au latimea ecranului, inaltimea proprie (paginile lungi se deruleaza)
   HU: jelenetek; a képek a képernyő szélességét kapják, saját magasságukkal (a hosszú oldalak görgetődnek) */
.gb-slides { position: relative; overflow: hidden; contain: paint; background: #f4f4f2; }
/* RO: imaginile nu primesc clicuri / HU: a képek nem kapnak kattintást */
.gb-slides img { position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; visibility: hidden;
  transform-origin: 50% 50%; will-change: transform, opacity, clip-path; pointer-events: none; }
.gb-slides img.on { opacity: 1; visibility: visible; z-index: 1; }
.gb-slides img.wipe-in { z-index: 2; opacity: 1; visibility: visible; animation: gbWipe .95s cubic-bezier(.7,0,.2,1) both; }
@keyframes gbWipe { from { clip-path: inset(0 0 0 100%); filter: brightness(1.15); } to { clip-path: inset(0 0 0 0); filter: none; } }

/* RO: stratul care intuneca ecranul intre cadre (inset-ul se seteaza per sectiune)
   HU: a jelenetek között a képernyőt elsötétítő réteg (az inset szekciónként van beállítva) */
.gb-dim { position: absolute; inset: 0; background: #05070b; opacity: 0; pointer-events: none; z-index: 3; transition: opacity .45s ease; border-radius: 3px; }
.gb-dim.on { opacity: 1; }

/* RO: eticheta care "sare" peste ecran (pozitia se seteaza per sectiune) / HU: a képernyő fölé "felugró" címke (a pozíció szekciónként van beállítva) */
.gb-chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 30px; background: rgba(9,22,45,.88); color: #fff; font-size: 15px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 0 1px rgba(254,177,1,.6); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(14px) scale(.9); transition: opacity .4s ease, transform .5s cubic-bezier(.2,1.6,.4,1); }
.gb-chip .bi { color: var(--yellow-1, #feb101); }
.gb-chip.on { opacity: 1; transform: none; }

/* RO: legenda: titlu + descriere care alunecă, puncte, bara de progres / HU: felirat: becsúszó cím + leírás, pontok, folyamatjelző */
.gb-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; min-height: 52px; }
.gb-caption-box { display: flex; flex-direction: column; gap: 2px; transition: opacity .35s ease, transform .35s ease; }
.gb-caption-box.out { opacity: 0; transform: translateX(-16px); }
.gb-cap-t { font-size: 19px; color: var(--gb-theme-text, #fff); }
.gb-cap-d { font-size: 15px; color: var(--gb-theme-muted-2, rgba(255,255,255,.82)); }
.gb-dots { display: flex; gap: 7px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; max-width: 45%; }
.gb-dots button { width: 9px; height: 9px; padding: 0; border-radius: 10px; border: 1px solid var(--gb-theme-border, rgba(255,255,255,.6));
  background: transparent; cursor: pointer; transition: all .3s ease; }
.gb-dots button.on { width: 24px; background: var(--yellow-1, #feb101); border-color: var(--yellow-1, #feb101); }
.gb-dots button:focus-visible { outline: 2px solid var(--gb-theme-text, #fff); outline-offset: 2px; }
.gb-prog { height: 3px; margin-top: 8px; background: var(--gb-theme-panel-border, rgba(255,255,255,.15)); border-radius: 3px; overflow: hidden; }
.gb-prog span { display: block; height: 100%; width: 0; background: var(--yellow-1, #feb101); }

/* RO: cifre animate / HU: animált számok */
.gb-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; text-align: center; }
.gb-nums > div { padding: 18px 10px; border-radius: 18px; background: var(--gb-theme-panel-bg, rgba(255,255,255,.06)); border: 1px solid var(--gb-theme-panel-border, rgba(138,239,255,.22)); }
.gb-nums b { display: block; font-size: 46px; line-height: 1.1; font-weight: 800; color: var(--gb-theme-accent, var(--yellow-1, #feb101)); }
.gb-nums span { font-size: 15px; color: var(--gb-theme-muted, rgba(255,255,255,.85)); }

/* RO: cele 4 functii principale (dale apasabile) / HU: a 4 fő funkció (kattintható csempék) */
.gb-feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; text-align: center; }
.gb-feats > a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 12px; border-radius: 18px; text-decoration: none;
  background: var(--gb-theme-panel-bg, rgba(255,255,255,.06)); border: 1px solid var(--gb-theme-panel-border, rgba(138,239,255,.22)); color: var(--gb-theme-text, #fff); transition: transform .3s ease, background .3s ease, border-color .3s ease; }
.gb-feats > a:hover, .gb-feats > a:focus-visible { transform: translateY(-5px); background: var(--gb-theme-panel-hover-bg, rgba(255,255,255,.12)); border-color: var(--gb-theme-accent, var(--yellow-1, #feb101)); color: var(--gb-theme-text, #fff); }
.gb-feats .bi { font-size: 34px; color: var(--gb-theme-accent, var(--yellow-1, #feb101)); line-height: 1; }
.gb-feats b { font-size: 24px; line-height: 1.2; font-weight: 800; color: var(--gb-theme-accent, var(--yellow-1, #feb101)); }
.gb-feats span { font-size: 15px; color: var(--gb-theme-muted, rgba(255,255,255,.85)); }

/* RO: video / HU: videó */
.gb-video-wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; align-items: center; }
.gb-video-text h3 { font-size: 30px; font-weight: 700; color: var(--gb-theme-text, #fff); margin: 12px 0; }
.gb-video-text p { font-size: 17px; color: var(--gb-theme-muted, rgba(255,255,255,.85)); line-height: 1.55; }
.gb-video { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.15); background: #000; }
.gb-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.gb-play { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; border: 0;
  background: var(--yellow-1, #feb101); color: #000; font-size: 46px; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 0 0 0 rgba(254,177,1,.6); animation: gbPulse 2s infinite; }
.gb-play .bi { margin-left: 6px; }
.gb-video.playing .gb-play { display: none; }
@keyframes gbPulse { 70% { box-shadow: 0 0 0 26px rgba(254,177,1,0); } 100% { box-shadow: 0 0 0 0 rgba(254,177,1,0); } }

/* RO: carduri / HU: kártyák */
.gb-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  border-top: 1px solid rgba(255,255,255,.12); }
.gb-card { border-radius: 18px; padding: 22px 20px; color: #fff; transition: transform .3s ease, box-shadow .3s ease;
  background: var(--gb-theme-card-bg, linear-gradient(130deg, rgba(0,0,0,.22) 0%, rgba(255,255,255,.07) 45%, rgba(0,0,0,.13) 100%));
  border: 1px solid var(--gb-theme-card-border, rgba(138,239,255,.28)); box-shadow: rgba(0,0,0,.18) 0 25px 50px -20px; }
.gb-card:hover { transform: translateY(-6px); box-shadow: rgba(0,0,0,.3) 0 30px 60px -20px; }
.gb-card .bi { font-size: 30px; color: var(--gb-theme-accent, var(--blue-2, #90f9ff)); }
.gb-card h3 { font-size: 20px; font-weight: 600; margin: 10px 0 8px; color: var(--gb-theme-text, #fff); }
.gb-card p { font-size: 15px; margin: 0; color: var(--gb-theme-muted-2, rgba(255,255,255,.82)); line-height: 1.5; }


/* Theme-aware GB section details */
.gb-section .gb-steps li { color: var(--gb-theme-text, inherit); }
.gb-section .gb-steps li > span { background: var(--gb-theme-accent, var(--yellow-1, #feb101)); }
.gb-section .gb-dots button.on { background: var(--gb-theme-accent, var(--yellow-1, #feb101)); border-color: var(--gb-theme-accent, var(--yellow-1, #feb101)); }
.gb-section .gb-prog span { background: var(--gb-theme-accent, var(--yellow-1, #feb101)); }
.gb-section .gb-feats > a:hover, .gb-section .gb-feats > a:focus-visible { color: var(--gb-theme-text, #fff); }
.gb-section .gb-card { color: var(--gb-theme-text, #fff); }

/* ---------- 2. GBR: laptop + telefon / laptop + telefon ---------- */
.gbr .gb-devices { padding: 0 6% 34px 0; }
.gbr .gb-screen { background: #0d1117; border-bottom: 0; border-radius: 18px 18px 0 0; padding: 3.2% 2.6% 2.2%; }
.gbr .gb-screen .gb-slides { aspect-ratio: 1440 / 900; border-radius: 3px; }
.gbr .gb-screen .gb-dim { inset: 3.2% 2.6% 2.2%; }
.gbr .gb-cam { position: absolute; top: 1.3%; left: 50%; width: 7px; height: 7px; margin-left: -3px; border-radius: 50%;
  background: #1f2a38; box-shadow: inset 0 0 0 2px #10161f; }
.gbr .gb-base { position: relative; height: 0; padding-bottom: 3.6%; margin: 0 -7%;
  background: linear-gradient(180deg, #d9dee6 0%, #aeb6c2 55%, #7d8796 100%); border-radius: 0 0 14px 14px / 0 0 60% 60%; }
.gbr .gb-base span { position: absolute; top: 0; left: 50%; width: 15%; height: 38%; transform: translateX(-50%);
  background: #8f99a8; border-radius: 0 0 10px 10px; }

.gbr .gb-phone { position: absolute; right: 0; bottom: 0; width: 23%; background: #0d1117; border: 2px solid #2b3442;
  border-radius: 28px; padding: 9px 7px; box-shadow: 0 25px 45px -10px rgba(0,0,0,.6); z-index: 2; }
.gbr .gb-phone .gb-slides { aspect-ratio: 390 / 844; border-radius: 20px; }
.gbr .gb-phone .gb-dim { inset: 9px 7px; border-radius: 20px; }
.gbr .gb-notch { position: absolute; top: 13px; left: 50%; width: 30%; height: 12px; transform: translateX(-50%);
  background: #0d1117; border-radius: 10px; z-index: 3; }

.gbr .gb-chip { left: 6%; bottom: 9%; max-width: 70%; }


/* ---------- 3. GEP: casa POS + ecranul clientului / POS kassza + vevőkijelző ---------- */
.gep .gb-devices { padding: 0 9% 0 0; }
.gep .gb-pos { width: 100%; }
/* RO: ecranul cu rama neagra si "barbia" de jos (ca HP RP9) / HU: kijelző fekete kerettel és alsó "állal" (mint a HP RP9) */
.gep .gb-screen { background: #0b0e13; border-radius: 16px; padding: 2.2% 2.2% 4.6%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.gep .gb-screen .gb-slides { aspect-ratio: 1366 / 768; border-radius: 3px; }
.gep .gb-screen .gb-dim { inset: 2.2% 2.2% 4.6%; }
.gep .gb-logo { position: absolute; left: 50%; bottom: 1.5%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  border: 1.5px solid #3a4556; }
/* RO: piciorul si talpa / HU: láb és talp */
.gep .gb-neck { width: 17%; height: 0; padding-bottom: 7.5%; margin: -1px auto 0; background: linear-gradient(90deg, #11161d 0%, #2a323d 45%, #10141a 100%);
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.gep .gb-foot { width: 46%; height: 0; padding-bottom: 3.2%; margin: 0 auto; border-radius: 10px 10px 16px 16px;
  background: linear-gradient(180deg, #2c3440 0%, #12161c 100%); box-shadow: 0 14px 22px -8px rgba(0,0,0,.6); }
/* RO: ecranul clientului (al doilea ecran al casei) / HU: vevőkijelző (a kassza második kijelzője) */
.gep .gb-cd { position: absolute; right: 0; bottom: 0; width: 32%; z-index: 2; filter: drop-shadow(0 24px 30px rgba(0,0,0,.55)); }
.gep .gb-cd .gb-screen { border-radius: 12px; padding: 3% 3% 6%; }
.gep .gb-cd .gb-dim { inset: 3% 3% 6%; }
.gep .gb-cd .gb-neck { width: 14%; padding-bottom: 9%; }
.gep .gb-cd .gb-foot { width: 52%; padding-bottom: 5%; }
.gep .gb-cd-label { position: absolute; left: 50%; top: -14px; transform: translate(-50%, -100%); white-space: nowrap; z-index: 3;
  font-size: 13px; font-weight: 700; letter-spacing: .5px; color: #000; background: var(--yellow-1, #feb101); padding: 3px 12px; border-radius: 30px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.gep .gb-cd-label::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--yellow-1, #feb101); }

.gep .gb-chip { left: 5%; bottom: 10%; max-width: 56%; }


/* ---------- 4. RESPONSIVE: telefon / tableta / telefon / tablet ---------- */
@media (max-width: 991.98px) {
  .gb-row { flex-direction: column; gap: 32px; }
  .gb-stage, .gb-text { width: 100%; }
  .gb-cards, .gb-nums, .gb-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gb-video-wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 575.98px) {
  /* comun / közös */
  .gb-section .gb-sub { font-size: 17px; }
  .gb-chip { font-size: 12px; padding: 6px 11px; }
  .gb-caption { flex-direction: column; align-items: flex-start; gap: 6px; }
  .gb-dots { max-width: 100%; justify-content: flex-start; }
  .gb-cap-t { font-size: 16px; } .gb-cap-d { font-size: 13px; }
  .gb-cards { grid-template-columns: minmax(0, 1fr); }
  .gb-nums b { font-size: 34px; }
  .gb-feats b { font-size: 19px; } .gb-feats .bi { font-size: 28px; }
  .gb-play { width: 70px; height: 70px; margin: -35px 0 0 -35px; font-size: 34px; }

  /* GBR */
  .gbr .gb-devices { padding: 0 4% 26px 0; }
  .gbr .gb-screen { border-radius: 10px 10px 0 0; }
  .gbr .gb-phone { border-radius: 16px; padding: 5px 4px; width: 26%; }
  .gbr .gb-phone .gb-slides { border-radius: 12px; }
  .gbr .gb-phone .gb-dim { inset: 5px 4px; }
  .gbr .gb-notch { top: 8px; height: 7px; }

  /* GEP */
  .gep .gb-devices { padding: 0 6% 0 0; }
  .gep .gb-screen { border-radius: 9px; }
  .gep .gb-cd { width: 38%; }
  .gep .gb-cd .gb-screen { border-radius: 7px; }
  .gep .gb-cd-label { font-size: 11px; padding: 2px 8px; top: -10px; }
  .gep .gb-logo { width: 7px; height: 7px; margin-left: -3px; }
}


/* ---------- 5. REDUCED MOTION: fara animatii / animációk nélkül ---------- */
@media (prefers-reduced-motion: reduce) {
  .gb-laptop, .gb-pos, .gb-phone, .gb-cd, .gb-glow span, .gb-play { animation: none; }
  .gb-slides img { transition: none !important; }
}