/* ZX Studios homepage additions: scrolling resource showcase + FAQ */

.zx-featured-section{
  position:relative;
  overflow:hidden;
  padding:92px 0 104px;
  background:
    radial-gradient(800px 420px at 50% 8%,rgba(109,93,252,.09),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.012),transparent 18%,transparent 82%,rgba(255,255,255,.012));
  border-bottom:1px solid rgba(255,255,255,.055);
}

.zx-featured-section:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.24;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%);
}

.zx-featured-head{position:relative;z-index:2;margin-bottom:34px}
.zx-featured-head h2{font-size:clamp(34px,4vw,48px)}
.zx-featured-head p{max-width:660px}

.zx-marquee-shell{
  position:relative;
  z-index:2;
  width:min(1680px,100vw);
  margin:0 auto;
}

.zx-marquee-viewport{
  overflow:hidden;
  padding:8px 0 18px;
  touch-action:pan-y;
}

.zx-marquee-track{
  display:flex;
  align-items:stretch;
  gap:18px;
  width:max-content;
  will-change:transform;
}

.zx-marquee-group{
  display:flex;
  align-items:stretch;
  gap:18px;
  flex:0 0 auto;
}

.zx-marquee-edge{
  position:absolute;
  z-index:5;
  top:0;
  bottom:0;
  width:min(13vw,180px);
  pointer-events:none;
}
.zx-marquee-edge-left{left:0;background:linear-gradient(90deg,var(--bg),rgba(8,10,15,.86) 32%,transparent)}
.zx-marquee-edge-right{right:0;background:linear-gradient(270deg,var(--bg),rgba(8,10,15,.86) 32%,transparent)}

.zx-featured-card{
  width:370px;
  flex:0 0 370px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.085);
  background:linear-gradient(155deg,rgba(18,22,34,.96),rgba(10,13,21,.97));
  box-shadow:0 18px 52px rgba(0,0,0,.26);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.zx-featured-card:hover,
.zx-featured-card:focus-within{
  transform:translateY(-5px);
  border-color:rgba(129,110,255,.34);
  box-shadow:0 28px 72px rgba(0,0,0,.38),0 0 0 1px rgba(109,93,252,.06);
}

.zx-featured-image{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  background:
    radial-gradient(circle at 25% 25%,rgba(109,93,252,.28),transparent 34%),
    linear-gradient(145deg,#171b29,#090b11);
}
.zx-featured-image:after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:58%;
  background:linear-gradient(transparent,rgba(9,11,17,.72));
  pointer-events:none;
}
.zx-featured-image img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.zx-featured-card:hover .zx-featured-image img{transform:scale(1.035)}
.zx-featured-placeholder{height:100%;display:grid;place-items:center;font-size:42px;font-weight:900;letter-spacing:-.06em;color:#f2efff}

.zx-featured-badge{
  position:absolute;
  z-index:2;
  top:13px;
  left:13px;
  padding:6px 9px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(8,10,15,.74);
  backdrop-filter:blur(10px);
  color:#ece9ff;
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.zx-featured-body{display:flex;flex-direction:column;flex:1;padding:19px 19px 18px}
.zx-featured-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.zx-featured-category{color:#a79cff;font-size:10px;font-weight:900;letter-spacing:.095em;text-transform:uppercase}
.zx-featured-version{color:#737d90;font-size:10px;font-weight:700}
.zx-featured-card h3{margin:0 0 8px;font-size:20px;line-height:1.2;letter-spacing:-.035em}
.zx-featured-card h3 a:hover{color:#c9c1ff}
.zx-featured-copy{margin:0;color:#929bac;font-size:12px;line-height:1.68;min-height:41px}

.zx-featured-chips{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 18px}
.zx-featured-chips span{
  padding:5px 8px;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.075);
  background:#0a0d14;
  color:#8f98aa;
  font-size:9px;
  font-weight:700;
}

.zx-featured-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:15px;border-top:1px solid rgba(255,255,255,.065)}
.zx-featured-price{display:flex;align-items:baseline;gap:7px;font-weight:900;font-size:21px;letter-spacing:-.035em}
.zx-featured-price s{color:#697284;font-size:11px;font-weight:700;text-decoration-thickness:1px}
.zx-featured-price small{color:#9a8eff;font-size:9px;letter-spacing:.03em;font-weight:800}
.zx-featured-view{min-height:38px;padding:0 13px;border-radius:10px;font-size:11px;white-space:nowrap}

.zx-featured-foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:8px;color:#697386;font-size:10px}
.zx-featured-foot span{display:inline-flex;align-items:center;gap:7px}
.zx-featured-foot i{width:6px;height:6px;border-radius:50%;background:var(--good);box-shadow:0 0 12px rgba(69,212,131,.55)}
.zx-featured-loading{min-height:370px;display:grid;place-items:center;align-content:center;gap:10px;color:#717b8d;font-size:11px}
.zx-featured-empty{width:min(720px,calc(100vw - 36px));margin:0 auto;padding:42px;text-align:center;border:1px dashed rgba(255,255,255,.1);border-radius:18px;color:var(--muted)}

/* FAQ */
.zx-home-faq{
  position:relative;
  padding:104px 0 110px;
  border-top:1px solid rgba(255,255,255,.055);
  background:
    radial-gradient(700px 380px at 18% 28%,rgba(109,93,252,.08),transparent 70%),
    #080a0f;
}
.zx-faq-layout{display:grid;grid-template-columns:minmax(0,.72fr) minmax(520px,1.28fr);gap:78px;align-items:start}
.zx-faq-intro{position:sticky;top:120px}
.zx-faq-intro h2{margin:8px 0 13px;font-size:clamp(34px,4vw,48px);line-height:1.03;letter-spacing:-.045em}
.zx-faq-intro p{margin:0 0 25px;color:#8f98aa;font-size:14px;line-height:1.75;max-width:430px}

.zx-faq-list{display:grid;gap:11px;will-change:height}
.zx-faq-list details{
  border:1px solid rgba(255,255,255,.075);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(18,22,33,.84),rgba(10,13,20,.9));
  overflow:hidden;
  backface-visibility:hidden;
  transform:translateZ(0);
  transition:border-color .22s ease,background .22s ease;
}
.zx-faq-list details:hover{border-color:rgba(130,112,255,.2)}
.zx-faq-list details[open]{border-color:rgba(130,112,255,.27);background:linear-gradient(145deg,rgba(22,25,40,.94),rgba(11,14,23,.96))}
.zx-faq-list summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  min-height:68px;
  padding:0 20px;
  cursor:pointer;
  color:#eef0f6;
  font-size:14px;
  font-weight:800;
  letter-spacing:-.01em;
}
.zx-faq-list summary::-webkit-details-marker{display:none}
.zx-faq-list summary i{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.08);
  background:#0a0d15;
  color:#9f93ff;
  font-size:21px;
  line-height:1;
  font-style:normal;
  transition:transform .2s ease,background .2s ease;
}
.zx-faq-list details[open] summary i{transform:rotate(45deg);background:rgba(109,93,252,.1)}
.zx-faq-answer{padding:0 68px 19px 20px}
.zx-faq-answer p{margin:0;color:#9099aa;font-size:13px;line-height:1.78}
.zx-faq-answer a{color:#b6adff;text-decoration:underline;text-underline-offset:3px}

@media(max-width:980px){
  .zx-featured-card{width:330px;flex-basis:330px}
  .zx-marquee-edge{width:58px}
  .zx-faq-layout{grid-template-columns:1fr;gap:34px}
  .zx-faq-intro{position:static}
  .zx-faq-intro p{max-width:650px}
}

@media(max-width:620px){
  .zx-featured-section{padding:70px 0 80px}
  .zx-featured-head{align-items:flex-start}
  .zx-featured-card{width:286px;flex-basis:286px;border-radius:17px}
  .zx-featured-body{padding:16px}
  .zx-featured-card h3{font-size:18px}
  .zx-featured-copy{font-size:11px}
  .zx-marquee-track,.zx-marquee-group{gap:12px}
  .zx-marquee-edge{width:28px}
  .zx-featured-foot{padding:0 3px}.zx-featured-foot span:last-child{display:none}
  .zx-home-faq{padding:76px 0 82px}
  .zx-faq-intro h2{font-size:36px}
  .zx-faq-list summary{min-height:64px;padding:0 15px;font-size:13px}
  .zx-faq-answer{padding:0 52px 17px 15px}
  .zx-faq-answer p{font-size:12px}
}

@media(prefers-reduced-motion:reduce){
  .zx-marquee-viewport{overflow-x:auto;scrollbar-width:none;padding-bottom:12px}
  .zx-marquee-viewport::-webkit-scrollbar{display:none}
  .zx-marquee-track{transform:none!important}
  .zx-marquee-edge{display:none}
  .zx-featured-foot span:first-child{display:none}
}