.hero{
  padding:90px 0 70px;
}
.hero-inner{max-width:760px}

.badge{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(212,179,90,.35);
  font-size:12px;
  margin-bottom:18px;
}

.hero-title{
  font-size:clamp(34px,5vw,56px);
  margin:0 0 14px;
}
.hero-title .gold{color:var(--gold)}

.hero-sub{
  color:rgba(243,243,247,.7);
  line-height:1.7;
  max-width:620px;
}

/* MARKET */
.market-tabs{
  display:flex;
  gap:8px;
  margin-bottom:14px;
}

.tab-btn{
  padding:8px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:rgba(243,243,247,.7);
  cursor:pointer;
}
.tab-btn.active{
  background:rgba(212,179,90,.18);
  border-color:rgba(212,179,90,.35);
  color:#fff;
}

.tab-panel{display:none}
.tab-panel.show{display:block}

.tv-box{
  height:420px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.tv{width:100%;height:100%}

.index-mini-markets{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:16px;
}
.mini-market{
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:10px;
  background:rgba(255,255,255,.03);
}
.mini-title{
  font-size:12px;
  font-weight:600;
  margin-bottom:6px;
  color:rgba(243,243,247,.7);
}
.mini-tv{
  height:220px;
  border-radius:10px;
  overflow:hidden;
}

@media(max-width:768px){
  .tv-box{height:320px}
  .index-mini-markets{grid-template-columns:1fr}
  .mini-tv{height:200px}
}
/* ================= SKELETON ================= */
.tv-skeleton{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      100deg,
      rgba(255,255,255,.04) 40%,
      rgba(255,255,255,.08) 50%,
      rgba(255,255,255,.04) 60%
    );
  background-size:200% 100%;
  animation:skeleton 1.2s ease-in-out infinite;
  z-index:2;
}

@keyframes skeleton{
  from{background-position:200% 0}
  to{background-position:-200% 0}
}

.tv-box,
.mini-tv{
  position:relative;
}
.tab-panel{
  display:none;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
}

.tab-panel.show{
  display:block;
  opacity:1;
  transform:translateY(0);
}