:root{
  --vxg-bg0:#1C1C1C;
  --vxg-bg1:#151515;
  --vxg-card:#232323;

  --vxg-line:rgba(245,232,216,.10);
  --vxg-line2:rgba(245,232,216,.16);

  --vxg-txt:#F5E8D8;
  --vxg-mt:rgba(245,232,216,.70);

  --vxg-a1:#FF6F61; /* muted coral */
  --vxg-a2:#DAA520; /* golden yellow */
  --vxg-a3:#FF4500; /* hover burnt orange */

  --vxg-r:16px;
  --vxg-shadow: 0 16px 52px rgba(0,0,0,.66);

  --vxg-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html{color-scheme:dark}
body.vxg-body{
  margin:0;
  font-family:var(--vxg-font);
  background:
    radial-gradient(1100px 520px at 14% 12%, rgba(218,165,32,.14), transparent 62%),
    radial-gradient(900px 520px at 86% 10%, rgba(255,111,97,.12), transparent 60%),
    radial-gradient(900px 600px at 55% 96%, rgba(255,69,0,.08), transparent 60%),
    linear-gradient(180deg, var(--vxg-bg0), var(--vxg-bg1));
  color:var(--vxg-txt);
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid rgba(218,165,32,.75);outline-offset:3px}

.vxg-skip{
  position:absolute;left:-999px;top:8px;
  background:rgba(218,165,32,.14);
  border:1px solid rgba(218,165,32,.40);
  color:var(--vxg-txt);
  padding:10px 12px;border-radius:12px;
}
.vxg-skip:focus{left:10px;z-index:9999}

.vxg-top{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(10px);
  background:rgba(28,28,28,.76);
  border-bottom:1px solid var(--vxg-line);
}
.vxg-top__bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;
  padding:12px clamp(14px, 3vw, 28px);
}
.vxg-brand{display:flex;align-items:center;gap:10px}
.vxg-brand__logo{filter: drop-shadow(0 10px 22px rgba(218,165,32,.18))}
.vxg-top__actions{display:flex;gap:10px;flex-wrap:wrap}

.vxg-nav{
  display:flex;gap:10px;flex-wrap:wrap;
  padding:0 clamp(14px, 3vw, 28px) 12px;
}
.vxg-nav__link{
  font-size:13px;
  padding:9px 12px;border-radius:999px;
  border:1px solid rgba(245,232,216,.12);
  background:rgba(245,232,216,.04);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.vxg-nav__link:hover{
  transform: translateY(-1px);
  border-color:rgba(218,165,32,.42);
  background:rgba(218,165,32,.10);
  box-shadow: 0 0 0 1px rgba(218,165,32,.10);
}

.vxg-shell{
  display:grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap:18px;
  padding:18px clamp(14px, 3vw, 28px) 30px;
}

.vxg-side{
  position:sticky;top:96px;
  align-self:start;
  background:rgba(35,35,35,.72);
  border:1px solid rgba(245,232,216,.10);
  border-radius: var(--vxg-r);
  box-shadow: var(--vxg-shadow);
  padding:14px;
}
.vxg-side__title{
  font-weight:760;
  letter-spacing:.2px;
  margin:2px 0 10px;
  color:rgba(245,232,216,.92);
}
.vxg-side__link{
  display:block;
  padding:10px 10px;
  border-radius: 12px;
  border:1px solid transparent;
  color:rgba(245,232,216,.82);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.vxg-side__link:hover{
  transform: translateX(2px);
  background:rgba(255,111,97,.10);
  border-color:rgba(255,111,97,.32);
}

.vxg-main{min-width:0}

.vxg-h1{
  font-size: clamp(26px, 2.3vw, 40px);
  line-height:1.12;
  margin:0 0 12px;
  text-shadow: 0 0 22px rgba(218,165,32,.18), 0 0 26px rgba(255,111,97,.12);
}
.vxg-h2{font-size: clamp(20px, 1.8vw, 28px);margin:0 0 10px}
.vxg-h3{font-size: 18px;margin:0 0 10px}
.vxg-h4{font-size: 15px;margin:18px 0 8px}
.vxg-p{margin:0 0 12px;color:var(--vxg-mt);max-width: 78ch}

.vxg-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.vxg-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:11px 14px;
  border-radius: 14px;
  border:1px solid rgba(245,232,216,.14);
  font-weight:700;
  letter-spacing:.15px;
  background:rgba(245,232,216,.05);
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, filter .18s ease;
  user-select:none;
  will-change: transform;
}
.vxg-btn:hover{transform: translateY(-1px);box-shadow: 0 14px 32px rgba(0,0,0,.48)}
.vxg-btn:active{transform: translateY(0px) scale(.99)}

.vxg-btn--primary{
  background: linear-gradient(135deg, rgba(218,165,32,.92), rgba(255,111,97,.70));
  border-color: rgba(218,165,32,.50);
  box-shadow: 0 0 0 1px rgba(218,165,32,.18), 0 18px 46px rgba(218,165,32,.16);
}
.vxg-btn--primary:hover{
  border-color: rgba(255,69,0,.55);
  box-shadow: 0 0 0 1px rgba(255,69,0,.18), 0 18px 50px rgba(255,69,0,.14);
}
.vxg-btn--accent{
  background: linear-gradient(135deg, rgba(255,111,97,.85), rgba(218,165,32,.35));
  border-color: rgba(255,111,97,.42);
}
.vxg-btn--ghost{
  background: rgba(245,232,216,.04);
  border-color: rgba(245,232,216,.14);
}
.vxg-btn--ghost:hover{
  border-color: rgba(218,165,32,.42);
  background: rgba(218,165,32,.08);
}

.vxg-icnbtn{
  width:44px;height:44px;border-radius: 999px;
  border:1px solid rgba(245,232,216,.14);
  background: rgba(245,232,216,.04);
  color: rgba(245,232,216,.95);
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.vxg-icnbtn:hover{
  transform: translateY(-1px);
  border-color: rgba(218,165,32,.40);
  background: rgba(218,165,32,.10);
  box-shadow: 0 0 0 1px rgba(218,165,32,.10);
}

.vxg-section{margin: 22px 0 0}
.vxg-card{
  background: rgba(35,35,35,.74);
  border:1px solid rgba(245,232,216,.10);
  border-radius: var(--vxg-r);
  box-shadow: var(--vxg-shadow);
  padding: 16px;
}
.vxg-card--glow{
  box-shadow: 0 0 0 1px rgba(218,165,32,.14), 0 0 30px rgba(218,165,32,.10), var(--vxg-shadow);
}

.vxg-hero{
  padding: 16px;
  border-radius: calc(var(--vxg-r) + 6px);
  border:1px solid rgba(245,232,216,.10);
  background: rgba(35,35,35,.58);
  box-shadow: var(--vxg-shadow);
}

.vxg-carousel{margin-top: 10px}
.vxg-carousel__viewport{
  overflow:hidden;
  border-radius: calc(var(--vxg-r) + 8px);
  border:1px solid rgba(245,232,216,.10);
}
.vxg-carousel__track{
  display:flex;
  transform: translate3d(0,0,0);
  transition: transform .55s cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}
.vxg-slide{
  position:relative;
  min-width:100%;
  height: clamp(240px, 28vw, 420px);
  overflow:hidden;
  background: rgba(245,232,216,.02);
}
.vxg-slide__bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter: saturate(1.06) contrast(1.04) brightness(.80);
  transform: scale(1.02);
}
.vxg-slide__content{
  position:absolute;inset:auto 14px 14px 14px;
  max-width: 680px;
  padding: 14px;
  border-radius: var(--vxg-r);
  background: linear-gradient(180deg, rgba(28,28,28,.18), rgba(28,28,28,.82));
  border:1px solid rgba(245,232,216,.12);
  backdrop-filter: blur(10px);
  animation: vxgFadeUp .55s ease both;
}
@keyframes vxgFadeUp{
  from{opacity:0;transform: translateY(6px)}
  to{opacity:1;transform: translateY(0)}
}

.vxg-carousel__controls{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  padding: 12px 4px 0;
}
.vxg-dots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.vxg-dot{
  width:38px;height:30px;border-radius: 999px;
  border:1px solid rgba(245,232,216,.12);
  background: rgba(245,232,216,.04);
  color: rgba(245,232,216,.9);
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.vxg-dot:hover{transform: translateY(-1px);border-color: rgba(218,165,32,.55)}
.vxg-dot.is-on{
  background: rgba(218,165,32,.16);
  border-color: rgba(255,111,97,.46);
}

.vxg-pay{
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--vxg-r);
  border:1px solid rgba(245,232,216,.10);
  background: rgba(35,35,35,.64);
}
.vxg-pay__row{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.vxg-pay__list{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.vxg-pay__logo{
  padding:10px 12px;

  border-radius: 14px;
  border:1px solid rgba(245,232,216,.10);
  background: rgba(245,232,216,.03);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.vxg-pay__logo:hover{
  transform: translateY(-1px);
  border-color: rgba(218,165,32,.40);
  box-shadow: 0 0 0 1px rgba(218,165,32,.10);
}

.vxg-slotslab{margin-top: 14px}
.vxg-slotgrid{
  display:grid;
  grid-template-columns: repeat(11, 200px);
  gap: 10px;
  overflow:auto;
  padding: 8px 2px 10px;
  scroll-snap-type: x proximity;
}
.vxg-slot{
  width:200px;height:300px;
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(245,232,216,.10);
  background: rgba(245,232,216,.02);
  box-shadow: 0 14px 34px rgba(0,0,0,.46);
  transform: translateZ(0);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
  scroll-snap-align: start;
}
.vxg-slot img{width:200px;height:300px;object-fit:cover}
.vxg-slot:hover{
  transform: translateY(-2px);
  border-color: rgba(255,69,0,.34);
  box-shadow: 0 0 0 1px rgba(255,69,0,.14), 0 18px 46px rgba(0,0,0,.62);
}

.vxg-duo{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.vxg-feed{display:flex;flex-direction:column;gap:8px}
.vxg-feed__item{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(245,232,216,.10);
  background: rgba(245,232,216,.03);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.vxg-feed__item:hover{
  transform: translateY(-1px);
  border-color: rgba(255,111,97,.32);
  box-shadow: 0 0 0 1px rgba(255,111,97,.10);
}
.vxg-feed__l{display:flex;flex-direction:column;gap:2px;min-width:0}
.vxg-feed__t{font-weight:760;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vxg-feed__s{font-size:12px;color:var(--vxg-mt)}
.vxg-feed__v{font-weight:860;color:rgba(218,165,32,.92)}

.vxg-banners{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.vxg-banner{
  position:relative;
  border-radius: calc(var(--vxg-r) + 6px);
  overflow:hidden;
  border:1px solid rgba(245,232,216,.10);
  background: rgba(245,232,216,.02);
  box-shadow: var(--vxg-shadow);
  min-height: 220px;
  transform: translateZ(0);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.vxg-banner:hover{
  transform: translateY(-2px);
  border-color: rgba(218,165,32,.30);
  box-shadow: 0 0 0 1px rgba(218,165,32,.10), var(--vxg-shadow);
}
.vxg-banner img{
  width:100%;height:240px;object-fit:cover;
  filter: brightness(.78) contrast(1.05) saturate(1.02);
}
.vxg-banner__box{
  position:absolute;left:12px;right:12px;bottom:12px;
  padding:12px;
  border-radius: var(--vxg-r);
  border:1px solid rgba(245,232,216,.12);
  background: linear-gradient(180deg, rgba(28,28,28,.14), rgba(28,28,28,.84));
  backdrop-filter: blur(10px);
}

.vxg-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow:hidden;
  border-radius: 14px;
  border:1px solid rgba(245,232,216,.10);
}
.vxg-table th,.vxg-table td{
  text-align:left;
  padding:12px 12px;
  border-bottom:1px solid rgba(245,232,216,.08);
  background: rgba(245,232,216,.02);
}
.vxg-table thead th{
  background: rgba(218,165,32,.14);
  border-bottom:1px solid rgba(218,165,32,.22);
}
.vxg-table tbody tr:hover td{background: rgba(255,111,97,.06)}

.vxg-ul,.vxg-ol{margin:10px 0 0;padding-left: 18px;color:rgba(245,232,216,.84)}
.vxg-ul li,.vxg-ol li{margin:6px 0}

.vxg-faq{
  margin-top: 10px;
  border-radius: var(--vxg-r);
  border:1px solid rgba(245,232,216,.10);
  background: rgba(35,35,35,.70);
  overflow:hidden;
}
.vxg-faq__q{
  cursor:pointer;
  padding: 12px 14px;
  font-weight:780;
  transition: background .18s ease;
}
.vxg-faq[open] .vxg-faq__q{background: rgba(255,69,0,.10)}
.vxg-faq__a{padding: 0 14px 12px}

.vxg-mosaic{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
}
.vxg-tile{
  border-radius: calc(var(--vxg-r) + 4px);
  overflow:hidden;
  border:1px solid rgba(245,232,216,.10);
  background: rgba(245,232,216,.02);
  box-shadow: var(--vxg-shadow);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.vxg-tile:hover{
  transform: translateY(-2px);
  border-color: rgba(255,69,0,.26);
  box-shadow: 0 0 0 1px rgba(255,69,0,.10), var(--vxg-shadow);
}
.vxg-tile img{width:100%;height:100%;object-fit:cover;filter: brightness(.84) saturate(1.06)}
.vxg-tile--xl{grid-column: span 7; min-height: 340px}
.vxg-tile--md{grid-column: span 5; min-height: 340px}
.vxg-tile--sm{grid-column: span 6; min-height: 165px}

.vxg-foot{
  border-top:1px solid rgba(245,232,216,.10);
  background: rgba(28,28,28,.80);
  padding: 26px clamp(14px, 3vw, 28px);
}
.vxg-foot__grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 14px;
}
.vxg-foot__brand{font-weight:880;letter-spacing:.25px;margin-bottom:8px}
.vxg-foot__ttl{font-weight:780;margin-bottom:8px}
.vxg-foot__txt{margin:0;color:rgba(245,232,216,.66)}
.vxg-foot__lnk{display:block;color:rgba(245,232,216,.82);padding:6px 0}
.vxg-foot__lnk:hover{color:rgba(218,165,32,.92)}

@media (max-width: 1100px){
  .vxg-shell{grid-template-columns: 1fr}
  .vxg-side{position:relative;top:auto}
  .vxg-duo{grid-template-columns: 1fr}
  .vxg-banners{grid-template-columns: 1fr}
  .vxg-foot__grid{grid-template-columns: 1fr}
}
@media (max-width: 640px){
  .vxg-nav{padding-bottom: 10px}
  .vxg-slide__content{inset:auto 10px 10px 10px}
  .vxg-dot{width:34px}
  .vxg-slotgrid{grid-template-columns: repeat(6, 200px)}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}