/* OKVIP8 landing page — built from okvip8.fig (artboard 375 x 614).
   Design px map 1:1 to 0.1rem, so 12px in Figma = 1.2rem here. */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/inter-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Surfaces */
  --c-page: #000000;
  --c-cream: #fcfbe9;
  --c-ink: #101010;

  /* Brand gold */
  --gold-lite: #fcd946;
  --gold-deep: #cf8300;
  --gold-title-2: #c77b01;
  --gold-btn-1: #f6d764;
  --gold-btn-2: #ca8800;
  --gold-stat-1: #eab336;
  --gold-stat-2: #9f5c08;

  /* Value colours */
  --amber-1: #fff9bc;
  --amber-2: #ffbd13;
  --purple-1: #ec7eff;
  --purple-2: #7e3ce2;
  --purple-3: #9147ea;
  --purple-label-1: #552292;
  --purple-label-2: #674998;

  /* Warm card shells */
  --shell-warm: #3a2800;
  --shell-inner-1: #282111;
  --shell-inner-2: #0b0d08;

  /* Motion */
  --dur-fast: 150ms;
  --dur-slide: 420ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* 1rem = 10 design px; the whole artboard scales with the viewport up to 480px. */
  font-size: min(2.66667vw, 12.8px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-page);
  color: #ffffff;
  font-family: Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 0.2rem solid var(--gold-lite);
  outline-offset: 0.2rem;
}

.page {
  width: 37.5rem;
  margin-inline: auto;
  padding-bottom: 1.5rem;
  overflow: clip;
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: relative;
  height: 5.6rem;
  background: var(--c-page);
}

.site-header__brand {
  position: absolute;
  left: 1.6rem;
  top: 1.4rem;
  display: block;
  width: 11rem;
  height: 3.4rem;
}

.site-header__brand img {
  width: 100%;
  height: 100%;
}

.header-actions {
  position: absolute;
  right: 2.4rem;
  top: 1.3rem;
  display: flex;
  gap: 2rem;
}

.icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.4rem;
}

.icon-btn__tile {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.6rem;
  transition: transform var(--dur-fast) var(--ease-out-expo), background-color var(--dur-fast) linear;
}

/* Figma leaves these glyphs near-black on a black bar; recoloured to the brand gold. */
.icon-btn__tile svg {
  width: 1.5rem;
  height: 1.7rem;
  fill: var(--gold-lite);
}

.icon-btn:hover .icon-btn__tile,
.icon-btn:focus-visible .icon-btn__tile {
  background: rgba(252, 217, 70, 0.14);
  transform: translateY(-0.1rem);
}

.icon-btn__label {
  margin-top: 0.2rem;
  font-size: 0.7rem;
  line-height: 0.8rem;
  color: #ffffff;
  white-space: nowrap;
}

/* -------------------------------------------------------------- carousel */

.carousel {
  position: relative;
  margin: 0.8rem 1.2rem 0;
}

.carousel__viewport {
  overflow: hidden;
  border-radius: 1.2rem;
  background: #000000;
}

.carousel__track {
  display: flex;
  transition: transform var(--dur-slide) var(--ease-out-expo);
  will-change: transform;
}

.carousel__slide {
  flex: 0 0 100%;
}

.carousel__slide img {
  width: 100%;
  height: 13.1rem;
  object-fit: cover;
}

.carousel__dots {
  position: absolute;
  left: 50%;
  bottom: 0.7rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dot {
  position: relative;
  width: 0.4rem;
  height: 0.4rem;
  padding: 0;
  border: 0;
  border-radius: 0.3rem;
  background: #7f7d79;
  cursor: pointer;
  transition: width var(--dur-fast) var(--ease-out-expo), background-color var(--dur-fast) linear;
}

/* Keeps the 4px dot visual while giving thumbs a real target. */
.dot::before {
  content: "";
  position: absolute;
  inset: -0.8rem -0.35rem;
}

.dot[aria-current="true"] {
  width: 1rem;
  background: #fe9a00;
}

/* --------------------------------------------------------------- alliance */

.alliance {
  position: relative;
  margin: 0.8rem 1.2rem 0;
  height: 20.5rem;
  border-radius: 1.2rem;
  background:
    url("assets/alliance-sparkle.webp") no-repeat right -0.1rem top -2.2rem / 13.6rem 13.5rem,
    radial-gradient(14rem 8rem at 84% 6%, rgba(255, 176, 48, 0.22) 0%, rgba(255, 176, 48, 0) 70%),
    radial-gradient(16rem 7rem at 50% 106%, rgba(122, 84, 20, 0.3) 0%, rgba(0, 0, 0, 0) 70%),
    #000000;
  overflow: hidden;
}

.alliance__streak {
  position: absolute;
  top: -0.1rem;
  width: 8.2rem;
  height: 0.5rem;
  background: url("assets/light-streak.webp") no-repeat center / 100% 100%;
}

.alliance__streak--left {
  left: 1.7rem;
}

.alliance__streak--right {
  left: 22.8rem;
}

.alliance__title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  padding-top: 1rem;
  height: 1.9rem;
  font-size: 1.6rem;
  line-height: 1.9rem;
}

.alliance__crown {
  width: 3rem;
  height: 1.9rem;
}

.alliance__title-text {
  background: linear-gradient(180deg, var(--gold-lite) 0%, var(--gold-title-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.01em;
}

/* ----------------------------------------------------------- brand cards */

.brands {
  position: absolute;
  left: 1rem;
  top: 3.3rem;
  display: flex;
  gap: 0.5rem;
}

.brand {
  position: relative;
  width: 10.7rem;
}

/* Every element below is placed on the card's own 107 x 162 grid. */
.brand__link {
  position: relative;
  display: block;
  height: 16.2rem;
  background: url("assets/brand-card-bg.webp") no-repeat center / 100% 100%;
  transition: transform var(--dur-fast) var(--ease-out-expo);
}

.brand__link:hover,
.brand__link:focus-visible {
  transform: translateY(-0.3rem);
}

.brand__badge {
  position: absolute;
  left: 9rem;
  top: -0.2rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #fbf59c 100%);
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.45);
}

.brand__badge img {
  width: 0.9rem;
  height: 0.8rem;
}

.brand__logo {
  position: absolute;
  left: 2.15rem;
  top: 1rem;
  width: 6.4rem;
  height: 1.5rem;
  object-fit: contain;
}

.brand__plate {
  position: absolute;
  z-index: 1;
  left: 2.6rem;
  top: 3rem;
  display: grid;
  place-items: center;
  width: 5.6rem;
  height: 1.4rem;
  background: url("assets/nameplate.webp") no-repeat center / 100% 100%;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--c-ink);
}

.brand__stats,
.brand__box {
  position: absolute;
  left: 0.8rem;
  width: 9.1rem;
  border-radius: 0.5rem;
  background: var(--c-cream);
}

.brand__stats {
  top: 3.7rem;
  height: 2.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.5rem;
  padding-bottom: 0.3rem;
}

.brand__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.9rem;
  line-height: 1.1rem;
  background: linear-gradient(180deg, var(--gold-stat-1) 0%, var(--gold-stat-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand__stat + .brand__stat {
  position: relative;
  padding-left: 0.5rem;
}

.brand__stat + .brand__stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 0.1rem;
  height: 0.8rem;
  background: rgba(16, 16, 16, 0.22);
}

.brand__stat img {
  width: 0.8rem;
  height: 1rem;
}

.brand__box {
  height: 3.6rem;
}

.brand__box--signup {
  top: 6.3rem;
}

.brand__box--deposit {
  top: 10rem;
}

.brand__label {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.6rem;
  line-height: 0.7rem;
  color: var(--c-ink);
}

.brand__box--signup .brand__label {
  top: 0.4rem;
}

.brand__box--deposit .brand__label {
  top: 0.3rem;
}

.brand__label--purple {
  background: linear-gradient(180deg, var(--purple-label-1) 0%, var(--purple-label-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand__value {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 2.1rem;
  line-height: 2.5rem;
  font-weight: 900;
}

.brand__box--signup .brand__value {
  top: 0.9rem;
}

.brand__box--deposit .brand__value {
  top: 1rem;
}

.brand__value--gold {
  background: linear-gradient(180deg, var(--amber-1) 0%, var(--amber-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand__value--purple {
  background: linear-gradient(180deg, var(--purple-1) 0%, var(--purple-2) 55%, var(--purple-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand__cta {
  position: absolute;
  left: 0.8rem;
  top: 13.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 9.1rem;
  height: 1.7rem;
  border-radius: 0.5rem;
  font-size: 0.6rem;
  line-height: 0.7rem;
  color: #ffffff;
  background: var(--cta-bg);
  overflow: hidden;
}

/* Colour bloom clipped to the button's bottom edge, as the Figma mask does. */
.brand__cta::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  bottom: -0.3rem;
  width: 7.8rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--cta-glow);
  filter: blur(0.2rem);
}

.brand__arrow {
  width: 0.8rem;
  height: 0.8rem;
  flex: none;
}

.brand__arrow circle {
  fill: #fdfeea;
}

.brand__arrow path {
  stroke: var(--cta-arrow);
}

.brand--jin88 {
  --cta-bg: linear-gradient(97deg, #0b85f5 0%, #0039b1 55%, #0a5dd4 100%);
  --cta-glow: #38fcff;
  --cta-arrow: #0450c6;
}

.brand--ak68 {
  --cta-bg: linear-gradient(97deg, #f91609 0%, #a30201 55%, #c40101 100%);
  --cta-glow: #ff6200;
  --cta-arrow: #c40101;
}

.brand--ks168 {
  --cta-bg: linear-gradient(97deg, #00a201 0%, #025902 55%, #006400 100%);
  --cta-glow: #b0ff38;
  --cta-arrow: #025902;
}

/* ------------------------------------------------------------ coming soon */

.coming {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0.8rem 1.2rem 0;
  height: 11.1rem;
  padding: 0.1rem;
  border-radius: 1.2rem;
  background: linear-gradient(135deg, var(--shell-warm) 0%, #000000 42%, #000000 100%);
}

.coming::before {
  content: "";
  position: absolute;
  inset: 0.1rem;
  border-radius: 1.2rem;
  background: linear-gradient(168deg, var(--shell-inner-1) -20%, var(--shell-inner-2) 45%, #050604 100%);
}

/* Vertical hairline splitting artwork from copy. */
.coming::after {
  content: "";
  position: absolute;
  left: 14.7rem;
  top: 1.2rem;
  width: 0.1rem;
  height: 8.7rem;
  background: linear-gradient(180deg, rgba(193, 193, 193, 0.05) 0%, rgba(91, 91, 91, 0.45) 45%, rgba(91, 91, 91, 0.45) 55%, rgba(193, 193, 193, 0.05) 100%);
}

.coming__visual {
  position: relative;
  width: 14rem;
  height: 10.9rem;
  border-radius: 1.2rem 0 0 1.2rem;
  overflow: hidden;
}

/* Burst glow behind the badge, at the 37% opacity the design uses. */
.coming__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/burst-gold.webp") no-repeat center / cover;
  opacity: 0.37;
}

.coming__visual::after {
  content: "";
  position: absolute;
  left: 5.4rem;
  top: 3.2rem;
  width: 4.1rem;
  height: 4.1rem;
  border-radius: 50%;
  background: #000000;
}

.coming__badge {
  position: absolute;
  z-index: 1;
  left: 0.7rem;
  top: 0.1rem;
  width: 13rem;
  height: 10rem;
  object-fit: contain;
}

.coming__body {
  position: relative;
  flex: 1;
  text-align: center;
}

.coming__kicker {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2rem;
  background: linear-gradient(180deg, #ffffff 0%, #c3dcdb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.coming__title {
  margin: 0.4rem 0 0;
  font-size: 0;
}

.coming__title img {
  width: 15.6rem;
  height: 2.5rem;
  margin: 0 auto;
  object-fit: contain;
}

.coming__desc {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  line-height: 1rem;
  color: #ffffff;
}

.coming__pill {
  position: relative;
  display: grid;
  place-items: center;
  width: 12.7rem;
  height: 2.6rem;
  margin: 0.6rem auto 0;
  border-radius: 0.8rem;
  background: #000000;
  font-size: 0.9rem;
  line-height: 1rem;
  color: #ffffff;
  overflow: hidden;
}

/* Two clipped ellipses leave a hairline of light on the pill's top and bottom edges. */
.coming__pill::before,
.coming__pill::after {
  content: "";
  position: absolute;
  left: 1.4rem;
  width: 10.2rem;
  height: 0.31rem;
  border-radius: 50%;
  background: #d9d9d9;
}

.coming__pill::before {
  top: -0.24rem;
  opacity: 0.32;
}

.coming__pill::after {
  bottom: -0.25rem;
  opacity: 0.36;
}

/* -------------------------------------------------------------- join bar */

.join {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0.8rem 1.2rem 0;
  height: 6.4rem;
  border-radius: 1.2rem;
  background: linear-gradient(96deg, var(--shell-warm) 0%, #000000 34%, #000000 100%);
  overflow: hidden;
}

/* Burst behind the chest, at the 24% fill opacity the design uses. */
.join::before {
  content: "";
  position: absolute;
  left: -0.3rem;
  top: -1.3rem;
  width: 9.3rem;
  height: 9.4rem;
  background: url("assets/burst-orange.webp") no-repeat center / 100% 100%;
  opacity: 0.24;
}

.join__chest {
  width: 8.2rem;
  height: 6.2rem;
  margin-left: 0.1rem;
  margin-right: -0.1rem;
  object-fit: contain;
}

.join__body {
  flex: 1;
  margin-left: 0;
}

.join__title {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.7rem;
  background: linear-gradient(180deg, var(--gold-lite) 0%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.join__desc {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  line-height: 1rem;
  font-weight: 400;
  color: #ffffff;
}

.join__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 10.2rem;
  height: 2.8rem;
  margin-right: 1.8rem;
  border-radius: 0.7rem;
  background: linear-gradient(180deg, var(--gold-btn-1) 0%, var(--gold-btn-2) 100%);
  font-size: 1.2rem;
  line-height: 1.5rem;
  color: #0c070d;
  transition: transform var(--dur-fast) var(--ease-out-expo), filter var(--dur-fast) linear;
}

.join__btn:hover,
.join__btn:focus-visible {
  transform: translateY(-0.1rem);
  filter: brightness(1.08);
}

.join__btn:active {
  transform: translateY(0);
}

.join__arrow {
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
}

.join__arrow circle {
  fill: #000000;
}

.join__arrow path {
  stroke: #e0af32;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}