:root{
  --bg:#09090B; --bg2:#17171B; --card:#202024;
  --gold:#D4AF37; --gold-l:#F3E2B5; --gold-d:#8B6914;
  --text:#fff; --muted:#A1A1AA; --border:#514329;
  --radius:18px;
  --gold-grad:linear-gradient(135deg,#F3E2B5 0%,#D4AF37 45%,#B78A25 100%);
  --line:rgba(243,226,181,.22);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; color:var(--text); background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Segoe UI",Roboto,sans-serif;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
h1,h2,p,ul{margin:0;padding:0}
ul{list-style:none}

.page{
  max-width:480px; margin:0 auto; min-height:100vh; overflow-x:hidden;
  --bgh:calc(min(100vw,480px) * 1.5); /* rendered image height (1024x1536 = 2:3) */
  background-color:var(--bg);
  background-image:
    linear-gradient(180deg,rgba(9,9,11,0),var(--bg)),            /* fade image bottom into page colour */
    url("../assets/backgrounds/luxury-black-gold.png");
  background-repeat:no-repeat;
  background-size:100% calc(var(--bgh) * .14), 100% auto;
  background-position:0 calc(var(--bgh) * .86), top center;
  box-shadow:0 0 0 1px rgba(81,67,41,.25), 0 0 60px rgba(0,0,0,.6);
}

/* Header */
.header{
  position:sticky; top:0; z-index:10; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px;
  padding:10px 16px 8px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(9,9,11,.97),rgba(9,9,11,.88));
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,var(--gold-d),var(--gold),var(--gold-d),transparent) 1;
}
.header__brand{text-decoration:none;color:var(--text);line-height:1}
.wordmark{
  font-size:22px;font-weight:800;letter-spacing:.14em;
  background:linear-gradient(180deg,#fff 20%,#d8d1bf);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6));
}
.wordmark b{
  font-weight:800;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Language switcher: one segmented pill on its own centred row (never competes with brand + Contact Us width at 375px) */
.lang{
  flex:0 0 100%; max-width:fit-content; margin:0 auto; display:flex; gap:2px; padding:2px;
  background:rgba(255,255,255,.035); border:1px solid rgba(243,226,181,.16); border-radius:999px;
}
.lang__btn{
  display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:3px 13px;
  font-family:inherit;font-size:12px;font-weight:600;line-height:1;letter-spacing:.02em;color:var(--muted);background:none;
  border:1px solid transparent;border-radius:999px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.lang__flag{font-size:14px;line-height:1}
.lang__btn:hover{color:var(--gold-l)}
.lang__btn.is-active{color:var(--gold-l);border-color:rgba(212,175,55,.65);background:linear-gradient(180deg,rgba(212,175,55,.22),rgba(212,175,55,.08))}
.lang__btn:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  font-weight:600; border-radius:999px; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, filter .2s ease;
}
.btn:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
/* Contact Us (customer service): metallic champagne-gold pill. Static (no looping animation). */
.btn--cs{
  position:relative; gap:7px; padding:10px 16px 10px 13px; font-size:13px; font-weight:700; line-height:1; letter-spacing:.01em; white-space:nowrap;
  color:#17120A; border:1px solid var(--gold-l);
  background:linear-gradient(135deg,#F3E2B5 0%,#D4AF37 45%,#B78A25 100%);
  box-shadow:0 3px 12px rgba(0,0,0,.5), 0 0 12px rgba(212,175,55,.27), 0 0 25px rgba(212,175,55,.12), inset 0 1px 1px rgba(255,255,255,.5);
  transition:filter .22s ease, box-shadow .22s ease, transform .22s ease;
}
.btn--cs::after{content:"";position:absolute;inset:-4px -2px}   /* invisible hit area: ~36px visual -> 44px tap target */
.btn__icon{width:16px;height:16px;flex:none;fill:none;stroke:#17120A;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn--cs:hover,.btn--cs:focus-visible{
  filter:brightness(1.1) saturate(1.05);
  box-shadow:0 5px 16px rgba(0,0,0,.5), 0 0 16px rgba(212,175,55,.5), 0 0 36px rgba(212,175,55,.28), inset 0 1px 1px rgba(255,255,255,.6);
}
.btn--cs:hover{transform:translateY(-2px)}
.btn--cs:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px}
/* No URL configured: identical gold look (not dimmed/grey); the click is simply inert (pointer-events:none, no href). */
.btn.btn--cs[aria-disabled="true"]{opacity:1;filter:none;cursor:default;box-shadow:0 3px 12px rgba(0,0,0,.5), 0 0 12px rgba(212,175,55,.27), 0 0 25px rgba(212,175,55,.12), inset 0 1px 1px rgba(255,255,255,.5)}
/* Join Now (brand cards): metallic gold, slightly softer glow than the header Contact Us button */
.btn--gold{
  position:relative; width:100%; padding:9px 12px; font-size:15px; font-weight:700; letter-spacing:.02em; line-height:1.2; text-align:center;
  color:#17120A; border:1px solid var(--gold-l);
  background:linear-gradient(135deg,#F3E2B5 0%,#D4AF37 45%,#B78A25 100%);
  box-shadow:0 3px 10px rgba(0,0,0,.4), 0 0 10px rgba(212,175,55,.25), 0 0 20px rgba(212,175,55,.12), inset 0 1px 1px rgba(255,255,255,.45);
  transition:filter .22s ease, box-shadow .22s ease, transform .22s ease;
}
.btn--gold::after{content:"";position:absolute;inset:-3px 0}  /* invisible hit area: 38px visual -> 44px tap target */
.btn--gold:hover,.btn--gold:focus-visible{
  filter:brightness(1.08) saturate(1.04);
  box-shadow:0 5px 14px rgba(0,0,0,.45), 0 0 14px rgba(212,175,55,.45), 0 0 28px rgba(212,175,55,.22), inset 0 1px 1px rgba(255,255,255,.55);
}
.btn--gold:hover{transform:translateY(-2px)}
.btn--gold:active{transform:translateY(1px) scale(.98);filter:brightness(.97);transition-duration:.08s;
  box-shadow:0 1px 5px rgba(0,0,0,.45), 0 0 8px rgba(212,175,55,.2), inset 0 1px 2px rgba(0,0,0,.18)}
.btn--gold:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
/* No URL configured: stays gold (never grey/dim). Clearly inert instead: no glow boost, no lift, no press,
   not-allowed cursor, flatter shadow. Has no href, is skipped by Tab, and carries aria-disabled="true". */
.btn.btn--gold[aria-disabled="true"]{
  opacity:1; filter:none; pointer-events:auto; cursor:not-allowed; transform:none;
  box-shadow:0 2px 6px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.35);
}
.btn[aria-disabled="true"]{cursor:not-allowed;pointer-events:none;opacity:.45;filter:grayscale(.6);box-shadow:none}

/* VIP carousel – images are ~2.5:1; box reserves 5:2 so there is no layout shift */
.carousel{margin:14px 16px 2px}
.carousel__viewport{
  position:relative; border-radius:var(--radius); overflow:hidden;
  border:1.5px solid transparent;   /* gradient champagne-gold edge */
  background:linear-gradient(var(--bg),var(--bg)) padding-box, linear-gradient(135deg,#F3E2B5,#8B6914 38%,#D4AF37 68%,#6e4f10) border-box;
  box-shadow:0 12px 28px rgba(0,0,0,.6), 0 0 22px rgba(212,175,55,.14);
}
.carousel__slides{display:grid;aspect-ratio:5/2;touch-action:pan-y}
.slide{
  grid-area:1/1; margin:0; opacity:0; visibility:hidden;
  transition:opacity .6s ease, visibility 0s linear .6s;
}
.slide.is-active{opacity:1;visibility:visible;transition:opacity .6s ease}
.slide img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.carousel__arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:30px; height:30px; padding:0;
  display:none; align-items:center; justify-content:center; cursor:pointer;
  color:var(--gold-l); background:rgba(9,9,11,.5); border:1px solid rgba(243,226,181,.5); border-radius:50%;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); box-shadow:0 2px 8px rgba(0,0,0,.45);
  -webkit-tap-highlight-color:transparent; transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.carousel__arrow--prev{left:6px}
.carousel__arrow--next{right:6px}
.carousel__arrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.carousel__arrow:hover{background:var(--gold);border-color:var(--gold-l);color:#17120A}
.carousel__arrow:active{background:var(--gold-d);color:#17120A}
.carousel__arrow:focus-visible,.carousel__dot:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
.carousel__dots{display:flex;justify-content:center;gap:2px;padding-top:6px;visibility:hidden} /* space reserved up front: no layout shift */
.carousel.is-ready .carousel__arrow{display:flex}
.carousel.is-ready .carousel__dots{visibility:visible}
.carousel__dot{
  position:relative; width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.carousel__dot::before{
  content:""; position:absolute; top:50%; left:50%; width:8px; height:8px; border-radius:999px;
  transform:translate(-50%,-50%); background:rgba(243,226,181,.28); transition:width .3s ease, background .3s ease;
}
.carousel__dot.is-active::before{width:20px;background:linear-gradient(90deg,var(--gold-l),var(--gold) 55%,var(--gold-d))}

/* Section divider (decorative, no text): hairline with a gold centre dot */
main > section[aria-label="Brands"]::before{
  content:""; display:block; height:7px; margin:8px 36px 14px;
  background:
    radial-gradient(circle,#D4AF37 0 2.5px,transparent 3px) center/7px 7px no-repeat,
    linear-gradient(90deg,transparent,rgba(243,226,181,.45) 28%,rgba(243,226,181,.45) 72%,transparent) center/100% 1px no-repeat;
}

/* Brand grid */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;padding:0 16px 24px}
.card{
  position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:12px 10px 12px; border-radius:var(--radius); min-height:188px;
  background:
    radial-gradient(120% 62% at 50% 0%,rgba(212,175,55,.10),transparent 62%),
    linear-gradient(165deg,#222226 0%,#17171B 55%,#0F0F12 100%);
  border:1px solid var(--line);
  box-shadow:0 8px 20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  animation:rise .5s ease backwards; animation-delay:calc(var(--i) * 70ms); /* backwards: no fill after the entrance, so :hover transform works */
}
.card::before{ /* champagne hairline along the top edge */
  content:""; position:absolute; top:0; left:16%; right:16%; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(243,226,181,.65),transparent);
}
@media (hover:hover){
  .card:hover{
    transform:translateY(-3px); border-color:rgba(243,226,181,.5);
    box-shadow:0 14px 28px rgba(0,0,0,.55), 0 0 20px rgba(212,175,55,.18), inset 0 1px 0 rgba(255,255,255,.1);
  }
}
.card > *{position:relative}
.card__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* logo "stage": consistent recessed plate so every logo sits on the same surface */
.card__logo{
  width:100%;height:84px;display:flex;align-items:center;justify-content:center;border-radius:12px;
  background:radial-gradient(75% 95% at 50% 50%,rgba(255,255,255,.07),rgba(255,255,255,0) 70%),rgba(0,0,0,.30);
  border:1px solid rgba(243,226,181,.10); box-shadow:inset 0 1px 6px rgba(0,0,0,.45);
}
.card__logo img{max-width:82%;max-height:78%;width:auto;height:auto;object-fit:contain}
.card[data-id="m2"] .card__logo img{max-width:61.5%;max-height:58.5%} /* M2 logo 25% smaller than the shared size (82% / 78%) */
.card__logo.is-pending{border:1px dashed var(--border);color:var(--muted);font-size:12px;text-align:center;line-height:1.3}
.card__name{font-size:15px;font-weight:700;letter-spacing:.03em;line-height:1.25;color:var(--gold-l);text-align:center;overflow-wrap:anywhere}
.card__sub{font-size:12px;color:var(--muted);text-align:center}
.card .btn{margin-top:auto}

html:not(.is-ready) .footer{visibility:hidden} /* avoid a footer jump before the cards are built */
.footer{text-align:center;padding:4px 16px 28px;color:var(--muted);font-size:12px;letter-spacing:.08em}

@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .card:hover{transform:none}
  .carousel__arrow:hover{transform:translateY(-50%)}
  .btn--cs:hover{transform:none}
  .btn--gold:hover,.btn--gold:active{transform:none}
}
@media (max-width:359px){.card{min-height:196px}}