:root{--gold:#d5aa55;--gold-light:#f0d18a;--green:#79b75d;--ink:#070706;--panel:#12100c;--line:#4c3b21;--text:#e5dbc7;--muted:#9b9284}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#050504;color:var(--text);font-family:Outfit,Arial,sans-serif;overflow-x:hidden}button,input{font:inherit}a{text-decoration:none;color:inherit}[hidden]{display:none!important}
body:before{content:"";position:fixed;inset:0;z-index:-3;background:radial-gradient(circle at 50% 10%,rgba(177,132,47,.10),transparent 32%),repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 1px,transparent 1px 8px),#050504}
.showcase-ambient{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}.showcase-ambient i{position:absolute;width:4px;height:4px;border-radius:50%;background:#d8ab51;box-shadow:0 0 16px #e1b45c;animation:ember 11s linear infinite}.showcase-ambient i:nth-child(1){left:12%;bottom:-10px}.showcase-ambient i:nth-child(2){left:71%;bottom:-20px;animation-delay:-4s;animation-duration:14s}.showcase-ambient i:nth-child(3){left:89%;bottom:-10px;animation-delay:-8s;animation-duration:9s}

/* fejléc */
.showcase-nav{position:absolute;left:0;top:0;z-index:20;width:100%;height:82px;padding:0 clamp(18px,4vw,70px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid rgba(203,156,66,.2);background:linear-gradient(rgba(4,4,3,.92),rgba(4,4,3,.10))}
.showcase-back{justify-self:start;display:flex;align-items:center;gap:10px;color:#bcb19d;font-size:13px;letter-spacing:1px;text-transform:uppercase;transition:.2s}.showcase-back i{color:var(--gold)}.showcase-back:hover{color:#fff;transform:translateX(-3px)}
.showcase-brand img{display:block;width:110px;height:68px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(205,158,65,.18))}
.showcase-language{position:relative;justify-self:end}.showcase-language>button{height:40px;padding:0 12px;display:flex;align-items:center;gap:8px;border:1px solid #4d3c22;background:rgba(8,7,5,.88);color:#d7ccb9;cursor:pointer}.showcase-language img{width:21px}.showcase-language>button i{font-size:8px;color:var(--gold)}.showcase-language>div{position:absolute;right:0;top:46px;width:185px;max-height:330px;padding:6px;border:1px solid #574326;background:#0a0907;box-shadow:0 16px 34px #000;overflow:auto;opacity:0;visibility:hidden;transform:translateY(-7px);transition:.2s}.showcase-language.open>div{opacity:1;visibility:visible;transform:none}.showcase-language>div a{padding:8px;display:flex;gap:9px;align-items:center;color:#a79e90;font-size:13px}.showcase-language>div a:hover,.showcase-language>div a.active{background:#1b160e;color:#efd99e}

/* rövidebb hero */
.showcase-hero{position:relative;min-height:620px;display:grid;place-items:center;isolation:isolate;overflow:hidden;border-bottom:1px solid #5b4525}
.showcase-hero-art{position:absolute;inset:0;z-index:-3;background-image:linear-gradient(90deg,rgba(3,3,2,.92),rgba(3,3,2,.27) 48%,rgba(3,3,2,.9)),linear-gradient(0deg,#050504 0,transparent 35%),url('/images/joint-hero.webp');background-size:cover;background-position:center 20%;animation:heroBreath 18s ease-in-out infinite alternate}
.showcase-hero:before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at center,transparent 0 20%,rgba(0,0,0,.16) 58%,rgba(0,0,0,.82))}
.showcase-emblem{position:absolute;top:155px;left:50%;transform:translateX(-50%)}.showcase-emblem span{width:52px;height:52px;display:grid;place-items:center;border:1px solid #9a7538;background:rgba(6,5,4,.72);transform:rotate(45deg);box-shadow:0 0 28px rgba(211,165,72,.16);animation:emblemFloat 4s ease-in-out infinite}.showcase-emblem i{transform:rotate(-45deg);color:#e2bd6d;font-size:18px}
.showcase-hero-copy{width:min(830px,calc(100% - 36px));padding-top:105px;text-align:center}.showcase-hero-copy small,.showcase-heading small{color:var(--green);font-weight:700;font-size:10px;letter-spacing:3.5px;text-transform:uppercase}.showcase-hero-copy h1{margin:14px 0 10px;font-family:Cinzel,Georgia,serif;font-size:clamp(38px,5vw,62px);font-weight:600;line-height:1.04;color:#f0e6d3;text-shadow:0 5px 24px #000}.showcase-hero-copy p{max-width:680px;margin:0 auto;color:#bdb4a5;font-size:17px;line-height:1.6}.showcase-hero-copy>a{width:185px;height:48px;margin:26px auto 0;padding:0 15px;display:flex;align-items:center;justify-content:space-between;border:1px solid #987239;background:linear-gradient(135deg,rgba(38,29,15,.9),rgba(8,7,5,.9));color:#d8c59e;font-size:11px;letter-spacing:1px;text-transform:uppercase;transition:.2s}.showcase-hero-copy>a b{color:var(--gold-light);font-size:15px}.showcase-hero-copy>a i{color:var(--gold);animation:arrowDrop 1.6s ease-in-out infinite}.showcase-hero-copy>a:hover{border-color:#e0b762;transform:translateY(-2px)}

/* katalógus */
.showcase-catalog{width:min(1540px,calc(100% - 42px));margin:auto;padding:74px 0 80px}.showcase-heading{text-align:center}.showcase-heading h2{margin:10px 0 16px;font-family:Cinzel,Georgia,serif;font-size:clamp(27px,3vw,42px);font-weight:600;color:#e9dec9}.showcase-heading>i{display:block;width:140px;height:1px;margin:auto;background:linear-gradient(90deg,transparent,var(--gold),transparent);position:relative}.showcase-heading>i:after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;background:var(--gold);transform:translate(-50%,-50%) rotate(45deg)}
.showcase-tools{margin:34px 0 42px}.showcase-tools>label{max-width:620px;height:48px;margin:0 auto 16px;display:flex;align-items:center;border:1px solid #574426;background:rgba(11,10,8,.91);transition:.2s}.showcase-tools>label:focus-within{border-color:#ca9e4c;box-shadow:0 0 0 3px rgba(202,158,76,.07)}.showcase-tools>label i{padding:0 17px;color:var(--gold)}.showcase-tools input{width:100%;height:100%;border:0;outline:0;background:none;color:#eee2ca;font-size:15px}.showcase-tools input::placeholder{color:#756e63}
.showcase-filters{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}.showcase-filters button{min-height:34px;padding:6px 12px;border:1px solid #44351f;background:#0d0c0a;color:#999083;font-size:10px;font-weight:600;letter-spacing:.65px;text-transform:uppercase;cursor:pointer;transition:.2s}.showcase-filters button:hover,.showcase-filters button.is-active{border-color:#bd9144;background:linear-gradient(180deg,#94703a,#59401d);color:#fff0ca;transform:translateY(-1px)}

/* fő rendszertípusok között látható tér */
.showcase-system-section{margin:0 0 58px}.showcase-system-section:last-child{margin-bottom:0}
.showcase-section-title{display:grid;grid-template-columns:42px auto 1fr;align-items:center;gap:13px;margin:0 0 18px;padding:0 0 11px;border-bottom:1px solid rgba(164,124,54,.32)}
.showcase-section-icon{width:40px;height:40px;display:grid;place-items:center;border:1px solid #70552d;background:linear-gradient(145deg,#211b11,#090806);color:#ddb45d;font-size:15px;box-shadow:inset 0 0 16px rgba(220,174,78,.05)}
.showcase-section-title small{display:block;margin-bottom:2px;color:#6d9e58;font-size:8px;font-weight:700;letter-spacing:1.9px;text-transform:uppercase}.showcase-section-title h3{margin:0;font-family:Cinzel,Georgia,serif;font-size:22px;font-weight:600;color:#e5dac5}.showcase-section-divider{height:1px;background:linear-gradient(90deg,rgba(183,139,62,.4),transparent)}

/* kompakt 3 oszlopos rendszerkártyák */
.showcase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.showcase-card{position:relative;align-self:start;padding:15px 15px 13px;border:1px solid #3d311e;background:radial-gradient(circle at 100% 0,rgba(170,122,39,.07),transparent 32%),linear-gradient(145deg,#17140f,#080807);box-shadow:0 9px 22px rgba(0,0,0,.32);overflow:hidden;opacity:0;transform:translateY(14px);transition:opacity .45s var(--reveal-delay,0ms),transform .45s var(--reveal-delay,0ms),border-color .2s,box-shadow .2s}
.showcase-card.is-visible{opacity:1;transform:none}.showcase-card:hover,.showcase-card.is-open{border-color:#775b2c;box-shadow:0 13px 28px rgba(0,0,0,.46),0 0 18px rgba(195,146,56,.05)}
.showcase-card-head{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center}.showcase-card-icon{width:36px;height:36px;display:grid;place-items:center;border:1px solid #6a4f29;background:#090806;color:#deb663;font-size:14px}.showcase-card-title{min-width:0}.showcase-card-title>span{display:block;color:var(--green);font-size:7px;font-weight:700;letter-spacing:1.35px;text-transform:uppercase}.showcase-card-title h4{margin:3px 0 0;font-family:Cinzel,Georgia,serif;font-size:15px;font-weight:600;line-height:1.18;color:#eadfc9;overflow-wrap:anywhere}
.showcase-card-head em{display:flex;align-items:center;gap:4px;padding:3px 5px;border:1px solid rgba(82,70,48,.46);background:rgba(7,6,5,.7);color:#91897c;font-size:6px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;font-style:normal}.showcase-card-head em i{width:5px;height:5px;border-radius:50%;background:#78b45c;box-shadow:0 0 6px #78b45c}.showcase-card-head .status-coming i{background:#888;box-shadow:none}.showcase-card-head .status-reworked i{background:#d3a24e;box-shadow:0 0 6px #d3a24e}
.showcase-card-summary{margin:10px 0 0;color:#aaa294;font-size:12px;line-height:1.48}

/* egy fő rendszerhez tartozó kisebb részek */
.showcase-card-parts{margin-top:10px;padding-top:9px;border-top:1px solid #2f271b}.showcase-parts-caption{display:flex;align-items:center;gap:6px;margin-bottom:7px;color:#987b49;font-size:7px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase}.showcase-parts-caption i{color:#c69b4b;font-size:8px}.showcase-parts-list{display:flex;flex-wrap:wrap;gap:4px}.showcase-parts-list span{padding:4px 6px;border:1px solid #3a3122;background:#0d0c09;color:#a79f91;font-size:9px;line-height:1.2}.showcase-parts-list span:before{content:"";display:inline-block;width:3px;height:3px;margin:0 5px 2px 0;border-radius:50%;background:#a27c3c}

.joint-system-more{width:100%;margin-top:10px;padding:8px 0 1px;display:flex;justify-content:space-between;border:0;border-top:1px solid #30281c;background:none;color:#d1aa58;font-size:7px;font-weight:700;letter-spacing:1.15px;text-transform:uppercase;cursor:pointer}.joint-system-more i{font-size:8px;transition:.2s}.joint-system-more[aria-expanded=true] i{transform:rotate(180deg)}
.joint-system-detail{margin-top:8px;padding:10px 0 1px;border-top:1px solid #30281c;color:#beb5a6;font-size:12px;line-height:1.65}
.showcase-empty{padding:55px 20px;text-align:center;color:#8d8577}.showcase-empty i{font-size:30px;color:#a17c3e}

footer{min-height:165px;padding:30px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-top:1px solid #40321e;background:#070706;color:#726b60;font-size:12px}footer img{width:90px;height:58px;object-fit:contain;opacity:.62}footer p{margin:8px 0}footer a{color:#b89a61;text-transform:uppercase;letter-spacing:1px}

@keyframes heroBreath{to{transform:scale(1.035);filter:brightness(1.06)}}@keyframes emblemFloat{50%{transform:rotate(45deg) translate(-4px,4px);box-shadow:0 0 38px rgba(211,165,72,.28)}}@keyframes arrowDrop{50%{transform:translateY(4px)}}@keyframes ember{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:.7}100%{opacity:0;transform:translate(45px,-105vh) scale(1.4)}}

@media(max-width:1120px){.showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.showcase-nav{height:72px;padding:0 14px}.showcase-brand img{width:94px;height:60px}.showcase-back span{display:none}.showcase-hero{min-height:560px}.showcase-emblem{top:135px}.showcase-catalog{width:calc(100% - 28px);padding-top:58px}.showcase-system-section{margin-bottom:42px}.showcase-grid{grid-template-columns:1fr}.showcase-section-title{grid-template-columns:36px auto 1fr}.showcase-section-icon{width:34px;height:34px}.showcase-section-title h3{font-size:18px}}
@media(max-width:520px){.showcase-hero-copy{padding-top:85px}.showcase-hero-copy h1{font-size:34px}.showcase-hero-copy p{font-size:15px}.showcase-filters{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px}.showcase-filters button{flex:0 0 auto}.showcase-card{padding:13px}.showcase-card-head{grid-template-columns:34px minmax(0,1fr)}.showcase-card-head em{grid-column:2;justify-self:start}.showcase-card-icon{width:32px;height:32px}.showcase-card-title h4{font-size:14px}.showcase-language>div{position:fixed;right:10px;top:66px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.showcase-ambient{display:none}.showcase-hero-art,.showcase-emblem span,.showcase-hero-copy>a i{animation:none!important}.showcase-card{opacity:1;transform:none;transition:none}}

/* =========================================================
   RENDSZER RÉSZLETES LEÍRÁS - KÖZÉPRE NYÍLÓ NAGY MODAL
   ========================================================= */
body.system-modal-open{overflow:hidden}

.system-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease,visibility .28s ease;
}
.system-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.system-modal-backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 40%,rgba(173,126,45,.10),transparent 35%),
    rgba(0,0,0,.82);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.system-modal-shell{
  position:relative;
  width:min(980px,calc(100vw - 56px));
  max-height:min(84vh,900px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #80602f;
  background:
    radial-gradient(circle at 82% 0,rgba(215,163,66,.10),transparent 29%),
    radial-gradient(circle at 8% 100%,rgba(86,122,58,.05),transparent 30%),
    linear-gradient(145deg,#19150f 0%,#0d0b08 48%,#080706 100%);
  box-shadow:
    0 30px 90px rgba(0,0,0,.72),
    0 0 0 1px rgba(237,197,112,.06) inset,
    0 0 55px rgba(195,145,55,.10);
  transform:translateY(26px) scale(.94);
  opacity:0;
  transition:
    transform .40s cubic-bezier(.16,1,.3,1),
    opacity .30s ease;
}
.system-modal.is-open .system-modal-shell{
  transform:translateY(0) scale(1);
  opacity:1;
}

.system-modal-shell:before,
.system-modal-shell:after{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  height:1px;
  z-index:2;
  background:linear-gradient(90deg,transparent,#a97d39 15%,#e0b961 50%,#a97d39 85%,transparent);
  opacity:.72;
}
.system-modal-shell:before{top:8px}
.system-modal-shell:after{bottom:8px}

.system-modal-ornament{
  position:absolute;
  top:-70px;
  width:180px;
  height:180px;
  border:1px solid rgba(191,143,58,.12);
  transform:rotate(45deg);
  pointer-events:none;
}
.system-modal-ornament-left{left:-110px}
.system-modal-ornament-right{right:-110px}

.system-modal-close{
  position:absolute;
  right:15px;
  top:15px;
  z-index:8;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid #594329;
  background:#0a0806;
  color:#bcaa8c;
  cursor:pointer;
  transition:.2s ease;
}
.system-modal-close:hover{
  border-color:#c99a4a;
  color:#f3d38b;
  transform:rotate(90deg);
  box-shadow:0 0 20px rgba(209,158,70,.12);
}

.system-modal-head{
  position:relative;
  flex:0 0 auto;
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:20px;
  align-items:start;
  padding:34px 66px 24px 34px;
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent);
}

.system-modal-icon{
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  border:1px solid #7a5a2c;
  background:linear-gradient(145deg,#21190e,#0a0805);
  color:#e1b866;
  font-size:25px;
  box-shadow:
    inset 0 0 22px rgba(218,165,71,.05),
    0 8px 25px rgba(0,0,0,.26);
}
.system-modal-heading{min-width:0}

.system-modal-meta{
  min-height:20px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:7px;
}
.system-modal-meta>span{
  color:#78ae5e;
  font-size:9px;
  font-weight:700;
  letter-spacing:1.8px;
  text-transform:uppercase;
}
.system-modal-meta em{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 7px;
  border:1px solid #453823;
  background:rgba(8,7,5,.7);
  color:#9c9385;
  font-size:8px;
  font-weight:700;
  font-style:normal;
  letter-spacing:.7px;
  text-transform:uppercase;
}
.system-modal-meta em i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#78b55c;
  box-shadow:0 0 7px #78b55c;
}
.system-modal-meta em.status-coming i{
  background:#888;
  box-shadow:none;
}
.system-modal-meta em.status-reworked i{
  background:#d4a24e;
  box-shadow:0 0 7px #d4a24e;
}

.system-modal-heading h2{
  margin:0;
  color:#f0e5cf;
  font-family:Cinzel,Georgia,serif;
  font-size:clamp(27px,3vw,39px);
  line-height:1.13;
  font-weight:600;
  text-shadow:0 4px 18px #000;
}
.system-modal-heading>p{
  max-width:760px;
  margin:10px 0 0;
  color:#b7ad9d;
  font-size:14px;
  line-height:1.55;
}

.system-modal-divider{
  flex:0 0 auto;
  height:1px;
  margin:0 34px;
  background:linear-gradient(90deg,transparent,#604923 15%,#9b7436 50%,#604923 85%,transparent);
  position:relative;
}
.system-modal-divider span{
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  background:#c39748;
  transform:translate(-50%,-50%) rotate(45deg);
  box-shadow:0 0 12px rgba(221,177,86,.26);
}

.system-modal-content{
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  padding:25px 38px 38px;
  scrollbar-width:thin;
  scrollbar-color:#765725 #17130d;
}
.system-modal-content::-webkit-scrollbar{width:8px}
.system-modal-content::-webkit-scrollbar-track{background:#17130d}
.system-modal-content::-webkit-scrollbar-thumb{
  background:#765725;
  border:2px solid #17130d;
}
.system-modal-content-label{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  color:#b38b47;
  font-size:9px;
  font-weight:700;
  letter-spacing:1.8px;
}
.system-modal-content-label i{color:#d2a653}

.system-modal-text{
  color:#d1c7b6;
  font-size:15px;
  line-height:1.82;
  letter-spacing:.05px;
}
.system-modal-text p{
  margin:0 0 16px;
}
.system-modal-text p:last-child{margin-bottom:0}

.joint-system-more{
  transition:color .2s ease,border-color .2s ease,transform .2s ease;
}
.joint-system-more:hover{
  color:#f0c86f;
  border-color:#554020;
}
.joint-system-more:hover i{
  transform:scale(1.16);
}

@media(max-width:760px){
  .system-modal{padding:14px}
  .system-modal-shell{
    width:calc(100vw - 28px);
    max-height:90vh;
  }
  .system-modal-head{
    grid-template-columns:52px minmax(0,1fr);
    gap:13px;
    padding:27px 52px 18px 22px;
  }
  .system-modal-icon{
    width:50px;
    height:50px;
    font-size:19px;
  }
  .system-modal-heading h2{font-size:24px}
  .system-modal-heading>p{font-size:13px}
  .system-modal-content{
    padding:20px 22px 28px;
  }
  .system-modal-text{
    font-size:14px;
    line-height:1.72;
  }
  .system-modal-divider{margin:0 22px}
}
@media(max-width:480px){
  .system-modal{
    align-items:flex-end;
    padding:8px;
  }
  .system-modal-shell{
    width:100%;
    max-height:92vh;
    border-radius:0;
    transform:translateY(55px) scale(.98);
  }
  .system-modal.is-open .system-modal-shell{
    transform:none;
  }
  .system-modal-head{
    grid-template-columns:44px minmax(0,1fr);
    gap:11px;
    padding:23px 46px 15px 16px;
  }
  .system-modal-icon{
    width:42px;
    height:42px;
    font-size:17px;
  }
  .system-modal-heading h2{font-size:21px}
  .system-modal-content{padding:17px 16px 24px}
  .system-modal-text{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .system-modal,
  .system-modal-shell,
  .system-modal-close,
  .joint-system-more{
    transition:none!important;
  }
}

/* =========================================================
   RENDSZERKÁRTYA / RÉSZLETES LEÍRÁS - JOINT FÉNYCSÍK ANIMÁCIÓ
   A főoldali Letöltés gomb effektjéhez igazítva.
   ========================================================= */

/* A kártyán is végigfut egy finom arany fény hoverkor */
.showcase-card::after{
  content:"";
  position:absolute;
  z-index:3;
  top:-45%;
  bottom:-45%;
  left:-55%;
  width:22%;
  transform:skewX(-22deg);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,225,151,.04),
    rgba(255,225,151,.36),
    rgba(255,244,207,.58),
    rgba(255,225,151,.28),
    transparent
  );
  opacity:0;
  pointer-events:none;
}

.showcase-card:hover::after{
  animation:jointSystemCardShine .92s ease-out 1;
}

/* Maga a Részletes leírás gomb is kap egy erősebb fénycsíkot */
.joint-system-more{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.joint-system-more::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:-80%;
  bottom:-80%;
  left:-48%;
  width:25%;
  transform:skewX(-22deg);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,225,151,.10),
    rgba(255,225,151,.52),
    rgba(255,244,207,.72),
    rgba(255,225,151,.30),
    transparent
  );
  opacity:0;
  pointer-events:none;
}

.joint-system-more:hover::after{
  animation:jointSystemButtonShine .82s ease-out 1;
}

.joint-system-more:hover{
  text-shadow:0 0 10px rgba(222,182,99,.42);
}

.joint-system-more:hover i{
  color:#f1ca72;
  filter:drop-shadow(0 0 6px rgba(222,182,99,.52));
}

@keyframes jointSystemCardShine{
  0%{
    left:-55%;
    opacity:0;
  }
  16%{
    opacity:1;
  }
  100%{
    left:128%;
    opacity:0;
  }
}

@keyframes jointSystemButtonShine{
  0%{
    left:-48%;
    opacity:0;
  }
  18%{
    opacity:1;
  }
  100%{
    left:126%;
    opacity:0;
  }
}

@media(prefers-reduced-motion:reduce){
  .showcase-card:hover::after,
  .joint-system-more:hover::after{
    animation:none!important;
  }
}

/* =========================================================
   JOINT BEMUTATÓ — LÁTOGATÓ SZÁMLÁLÓ
   ========================================================= */
.showcase-visitor-count{
  position:relative;
  width:185px;
  min-height:54px;
  margin:8px auto 0;
  padding:7px 12px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid rgba(152,114,57,.48);
  background:
    radial-gradient(circle at 50% 0,rgba(202,158,76,.07),transparent 58%),
    linear-gradient(135deg,rgba(24,19,12,.82),rgba(8,7,5,.88));
  box-shadow:
    inset 0 1px 0 rgba(255,232,177,.025),
    0 8px 22px rgba(0,0,0,.22);
}

.showcase-visitor-count:before,
.showcase-visitor-count:after{
  content:"";
  position:absolute;
  top:50%;
  width:26px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(206,164,79,.48));
}

.showcase-visitor-count:before{left:7px}
.showcase-visitor-count:after{
  right:7px;
  transform:scaleX(-1);
}

.showcase-visitor-label{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:4px;
  color:#958b7a;
  font-size:7px;
  font-weight:700;
  letter-spacing:1.65px;
  line-height:1;
  text-transform:uppercase;
}

.showcase-visitor-label i{
  color:#b99149;
  font-size:8px;
}

.showcase-floating-number{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1px;
  min-height:22px;
  color:#e5c87f;
  font-family:Cinzel,Georgia,serif;
  font-size:18px;
  font-weight:600;
  line-height:1;
  letter-spacing:2px;
  text-shadow:
    0 0 8px rgba(210,164,73,.18),
    0 3px 8px rgba(0,0,0,.72);
}

.showcase-floating-number>span{
  display:inline-block;
  min-width:.64em;
  text-align:center;
  animation:
    showcaseDigitFloat 2.7s ease-in-out infinite,
    showcaseDigitGlow 3.8s ease-in-out infinite;
  animation-delay:
    calc(var(--digit-index) * -0.19s),
    calc(var(--digit-index) * -0.27s);
  will-change:transform,filter;
}

.showcase-floating-number>span:nth-child(2n){
  animation-duration:3.05s,4.25s;
}

.showcase-floating-number>span:nth-child(3n){
  animation-duration:2.45s,3.55s;
}

@keyframes showcaseDigitFloat{
  0%,100%{transform:translateY(1px)}
  50%{transform:translateY(-4px)}
}

@keyframes showcaseDigitGlow{
  0%,100%{
    color:#d4b66f;
    filter:drop-shadow(0 0 0 rgba(217,172,82,0));
  }
  50%{
    color:#f0d991;
    filter:drop-shadow(0 0 5px rgba(217,172,82,.25));
  }
}

@media(max-width:520px){
  .showcase-visitor-count{
    width:175px;
    min-height:50px;
  }

  .showcase-floating-number{
    font-size:17px;
  }
}

@media(prefers-reduced-motion:reduce){
  .showcase-floating-number>span{
    animation:none!important;
  }
}



/* =========================================================
   RENDSZER BEMUTATÓ VIDEÓ - a /bemutato részletes modal alján
   ========================================================= */
.system-video-block{
  margin:32px 0 4px;
  padding-top:26px;
  border-top:1px solid rgba(194,145,57,.28);
}
.system-video-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  color:#e0b45d;
}
.system-video-head>span{
  width:42px;height:42px;
  display:grid;place-items:center;
  border:1px solid rgba(210,166,83,.48);
  background:linear-gradient(145deg,rgba(210,166,83,.11),rgba(0,0,0,.16));
  box-shadow:inset 0 0 18px rgba(210,166,83,.05);
}
.system-video-head i{font-size:18px}
.system-video-head div{display:flex;flex-direction:column;gap:2px}
.system-video-head small{
  font:700 10px/1.2 Outfit,sans-serif;
  letter-spacing:.22em;
  color:#887044;
}
.system-video-head strong{
  font:600 15px/1.3 Cinzel,serif;
  letter-spacing:.04em;
  color:#d8c9ad;
}
.system-video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid rgba(200,150,61,.48);
  background:#070706;
  box-shadow:0 18px 48px rgba(0,0,0,.38), inset 0 0 40px rgba(216,164,66,.025);
}
.system-video-frame:before,
.system-video-frame:after{
  content:"";
  position:absolute;
  z-index:3;
  pointer-events:none;
}
.system-video-frame:before{
  inset:7px;
  border:1px solid rgba(224,180,93,.13);
}
.system-video-frame:after{
  left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,#d7a64d,transparent);
  box-shadow:0 0 16px rgba(215,166,77,.35);
}
.system-video-frame video,
.system-video-placeholder,
.system-video-placeholder img{
  width:100%;height:100%;display:block;
}
.system-video-frame video{object-fit:contain;background:#000}
.system-video-placeholder{position:relative}
.system-video-placeholder[hidden],.system-video-frame video[hidden]{display:none!important}
.system-video-placeholder img{object-fit:cover;opacity:.72;filter:saturate(.82) contrast(1.08)}
.system-video-placeholder:after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at center,transparent 0 18%,rgba(0,0,0,.1) 38%,rgba(0,0,0,.65) 100%);
}
.system-video-play{
  position:absolute;z-index:4;
  left:50%;top:47%;transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:50%;
  display:grid;place-items:center;
  color:#e5b85c;
  border:1px solid rgba(229,184,92,.68);
  background:rgba(9,8,6,.68);
  box-shadow:0 0 0 8px rgba(213,164,72,.045),0 0 30px rgba(213,164,72,.13);
}
.system-video-play i{margin-left:4px;font-size:24px}
.system-video-placeholder-copy{
  position:absolute;z-index:4;
  left:28px;right:28px;bottom:24px;
  display:flex;flex-direction:column;gap:4px;
}
.system-video-placeholder-copy strong{
  color:#e0b45d;
  font:700 13px/1.2 Outfit,sans-serif;
  letter-spacing:.18em;
}
.system-video-placeholder-copy span{
  color:#c9bea9;
  font:400 13px/1.4 Outfit,sans-serif;
}
@media(max-width:700px){
  .system-video-block{margin-top:24px;padding-top:20px}
  .system-video-play{width:58px;height:58px}
  .system-video-play i{font-size:19px}
  .system-video-placeholder-copy{left:18px;right:18px;bottom:16px}
}

/* =========================================================
   TÖBB BEMUTATÓ VIDEÓ / RENDSZER
   Desktop: 2 videó / sor, mobil: 1 videó / sor
   ========================================================= */
.system-video-section-head{
  display:flex;align-items:center;gap:12px;margin-bottom:16px;color:#e0b45d;
}
.system-video-section-head>span{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid rgba(210,166,83,.48);
  background:linear-gradient(145deg,rgba(210,166,83,.11),rgba(0,0,0,.16));
}
.system-video-section-head div{display:flex;flex-direction:column;gap:2px}
.system-video-section-head small{font:700 10px/1.2 Outfit,sans-serif;letter-spacing:.22em;color:#887044}
.system-video-section-head strong{font:600 15px/1.3 Cinzel,serif;letter-spacing:.04em;color:#d8c9ad}
.system-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.system-video-item{min-width:0;padding:12px;border:1px solid rgba(200,150,61,.22);background:linear-gradient(145deg,rgba(213,164,72,.035),rgba(0,0,0,.12))}
.system-video-item-title{display:flex;align-items:center;gap:10px;min-height:32px;margin-bottom:10px}
.system-video-item-title span{font:700 10px/1 Outfit,sans-serif;letter-spacing:.12em;color:#9a783b;border-right:1px solid rgba(210,166,83,.25);padding-right:10px}
.system-video-item-title strong{font:600 12px/1.3 Cinzel,serif;color:#d8c9ad;letter-spacing:.025em}
.system-video-grid .system-video-frame{aspect-ratio:16/9}
.system-video-grid .system-video-placeholder-copy{left:16px;right:16px;bottom:14px}
.system-video-grid .system-video-placeholder-copy strong{font-size:10px}
.system-video-grid .system-video-placeholder-copy span{font-size:11px}
@media(max-width:760px){.system-video-grid{grid-template-columns:1fr;gap:14px}.system-video-item{padding:9px}}


/* =========================================================
   VIDEÓ LIGHTBOX - kattintásra nagy, középre nyíló videó
   ========================================================= */
.system-video-frame{cursor:zoom-in}
.system-video-lightbox{
  position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;
  padding:clamp(16px,3vw,44px);
}
.system-video-lightbox.is-open{display:flex}
.system-video-lightbox-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.88);backdrop-filter:blur(8px);
  animation:systemVideoFadeIn .18s ease-out both;
}
.system-video-lightbox-shell{
  position:relative;z-index:1;width:min(1180px,94vw);max-height:92vh;
  padding:18px;border:1px solid rgba(215,166,77,.62);
  background:linear-gradient(145deg,rgba(18,16,12,.98),rgba(5,5,5,.99));
  box-shadow:0 28px 90px rgba(0,0,0,.72),0 0 55px rgba(213,164,72,.09),inset 0 0 34px rgba(213,164,72,.035);
  animation:systemVideoZoomIn .2s cubic-bezier(.2,.8,.2,1) both;
}
.system-video-lightbox-shell:before{
  content:"";position:absolute;inset:7px;pointer-events:none;border:1px solid rgba(224,180,93,.12);
}
.system-video-lightbox-head{
  position:relative;display:flex;align-items:center;gap:11px;padding:2px 54px 14px 2px;
  color:#dfb25a;
}
.system-video-lightbox-head>span{
  width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(210,166,83,.42);
  background:rgba(210,166,83,.06);
}
.system-video-lightbox-head strong{
  font:600 14px/1.35 Cinzel,serif;color:#ded0b4;letter-spacing:.04em;
}
.system-video-lightbox-close{
  position:absolute;z-index:3;right:14px;top:14px;width:38px;height:38px;display:grid;place-items:center;
  border:1px solid rgba(215,166,77,.4);background:rgba(7,7,6,.9);color:#d9ad56;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.system-video-lightbox-close:hover{background:rgba(210,166,83,.12);border-color:rgba(224,180,93,.76);transform:scale(1.04)}
.system-video-lightbox-media{
  position:relative;width:100%;aspect-ratio:16/9;max-height:calc(92vh - 90px);overflow:hidden;
  border:1px solid rgba(200,150,61,.46);background:#000;
  box-shadow:inset 0 0 30px rgba(213,164,72,.025);
}
.system-video-lightbox-media video,
.system-video-lightbox-media .system-video-placeholder,
.system-video-lightbox-media .system-video-placeholder img{width:100%;height:100%;display:block}
.system-video-lightbox-media video{object-fit:contain;background:#000}
.system-video-lightbox-media .system-video-placeholder{position:relative}
.system-video-lightbox-media .system-video-placeholder img{object-fit:cover}
.system-video-lightbox-media .system-video-placeholder-copy{left:30px;right:30px;bottom:24px}
body.system-video-lightbox-open{overflow:hidden}
@keyframes systemVideoFadeIn{from{opacity:0}to{opacity:1}}
@keyframes systemVideoZoomIn{from{opacity:0;transform:translateY(12px) scale(.975)}to{opacity:1;transform:none}}
@media(max-width:760px){
  .system-video-lightbox{padding:10px}
  .system-video-lightbox-shell{width:100%;padding:10px}
  .system-video-lightbox-head{padding-right:46px;padding-bottom:10px}
  .system-video-lightbox-head>span{width:32px;height:32px}
  .system-video-lightbox-head strong{font-size:12px}
  .system-video-lightbox-close{right:9px;top:9px;width:34px;height:34px}
  .system-video-lightbox-media{max-height:78vh}
  .system-video-lightbox-media .system-video-placeholder-copy{left:18px;right:18px;bottom:16px}
}
@media(prefers-reduced-motion:reduce){
  .system-video-lightbox-backdrop,.system-video-lightbox-shell{animation:none!important}
}

.system-video-frame .system-youtube-embed {
  width:100%;
  height:100%;
  min-height:315px;
  display:block;
  border:0;
  background:#000;
}


/* JOINT - nagyobb rendszer-videó előnézet */
.system-video-frame {
  width: 100%;
  min-height: 360px;
  aspect-ratio: 16 / 9;
}

.system-video-frame .system-youtube-embed {
  width: 100%;
  height: 100%;
  min-height: 360px;
}

@media (max-width: 768px) {
  .system-video-frame {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .system-video-frame .system-youtube-embed {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}


/* JOINT - rendszerleírás utolsó frissítési dátuma */
.system-modal-updated {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  color: #8f8576;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .02em;
}
.system-modal-updated i {
  color: #b89455;
  font-size: 11px;
}