/* =========================================================
   THE FOUR STAGES (T4S) — TABLE CLOSURE
   Values below are taken from Homepage.png (1920px artboard).
   ========================================================= */

:root {
  --gold:   #eeb02f;
  --white:  #fbfbfb;
  --black:  #000;

  --container: 1380px;   /* hero + footer content width */
  --stage-w:   960px;    /* card grid + trophy panel width */
  --radius:    12px;     /* cards and trophy panel */
  --radius-btn: 4px;     /* buttons */

  /* How far the background video is zoomed in. 1 = native size (particles
     at their filmed scale); raise for coarser, larger specks. */
  --video-zoom: 1.5;

  /* How far down the page the footage reaches before fading to black. */
  --video-h: clamp(760px, 72vw, 1380px);

  /* The chips photo used along the bottom of every page. Its top row is
     not black, so it would otherwise cut a hard line across the page —
     --bg-fade is laid over it, matched to its height, to blend the edge
     away. 55.5vw keeps that overlay the same height as the 1920x1064
     photo at `100% auto`. */
  --bg-chips: url("assets/realistic-casino-background-with-flying-chips-golden-coins-dice-ai 1.png");
  --bg-chips-h: 55.5vw;
  --bg-chips-pos: center bottom;
  --bg-fade: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0, 0, 0, .82) 6%,
    rgba(0, 0, 0, .45) 14%,
    rgba(0, 0, 0, 0) 26%
  );
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: "Nunito", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

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

sup {
  font-size: .6em;
  vertical-align: super;
  line-height: 0;
}

p { margin: 0; }

.is-gold { color: var(--gold); }
.is-bold { font-weight: 700; }
.nowrap  { white-space: nowrap; }

/* 1380px at >=1428px viewport (content starts at x=270 on the 1920 artboard),
   with a 24px gutter below that. */
.container {
  width: min(100% - 48px, var(--container));
  margin-inline: auto;
}

/* ---------------------------------------------------------
   SHELL — holds both background layers
   Video is pinned to the top; the casino-chip photo is the
   shell's own background, pinned to the bottom edge so it
   ends exactly where the gold footer begins (as in the PSD).
   --------------------------------------------------------- */
.shell {
  position: relative;
  overflow: hidden;
  background:
    var(--bg-fade)  var(--bg-chips-pos) / 100% var(--bg-chips-h) no-repeat,
    var(--bg-chips) var(--bg-chips-pos) / 100% auto no-repeat,
    var(--black);
}

.shell__videowrap,
.shell__veil {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--video-h);
  z-index: 0;
  pointer-events: none;
}

/* Clips the zoomed video so it can't spill past the veil below it. */
.shell__videowrap { overflow: hidden; }

.shell__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--video-zoom));
}

/* Keeps the burst bright at top-centre, darkens the sides and fades
   the footage into the black page — matching the artboard's falloff. */
.shell__veil {
  background:
    radial-gradient(88% 72% at 50% -8%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .22) 60%, rgba(0, 0, 0, .55) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .22) 45%, rgba(0, 0, 0, .68) 82%, #000 99%);
}

/* Home: the bottom of the page is a seascape rather than the chips photo.
   Its own top ~60% is already black, so it needs no extra blending.
   1468/1920 = 76.5vw keeps --bg-fade matched to its height. */
.shell--home {
  --bg-chips: url("assets/fantastic-seascape-with-ripples.png");
  --bg-chips-h: 76.5vw;
}

/* About: no video, and the chips sit 234px above the footer, not flush to it. */
.shell--about { --bg-chips-pos: center bottom 234px; }

.hero,
.stages,
.about-hero,
.procedure {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
.hero__inner {
  display: grid;
  /* minmax(0,…) drops the automatic min-content floor, so a wide
     grid item can never push the track past the container. */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 40px;
  padding-top: 148px;
}

.hero__title {
  margin: 0 0 29px;
  font-size: clamp(30px, 3.47vw, 50px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.013em;   /* the hero type is tracked tighter than the body */
}

/* 62px against the 50px h1 in the artboard; 54px line box for both */
.hero__title-gold {
  display: block;
  color: var(--gold);
  font-size: 1.24em;
  line-height: .871;
}

.hero__text {
  max-width: 645px;
  margin-bottom: 50px;
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  letter-spacing: -.013em;
}

.hero__art {
  margin-top: -49px;    /* artwork rises above the headline */
  margin-right: 77px;   /* not flush to the container edge in the artboard */
  justify-self: end;
}

/* ---------------------------------------------------------
   BUTTONS — outlined, gold hairline, 4px radius
   --------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 11px 24px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--gold);
  color: #14100a;
}

.btn--wide {
  min-width: 572px;
  max-width: 100%;
}

/* ---------------------------------------------------------
   STAGES
   --------------------------------------------------------- */
.stages {
  padding: 145px 0 53px;
}

.stages__inner {
  width: min(100% - 48px, var(--stage-w));
  margin-inline: auto;
}

.stages__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 153px 76px;
}

/* ---- Stage card ---- */
.card {
  position: relative;
  padding: 100px 44px 42px;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, .66);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  text-align: center;
}

.card__badge {
  position: absolute;
  top: -70px;                       /* 145px badge straddles the top edge */
  left: 50%;
  transform: translateX(-50%);
  width: 239px;
  max-width: calc(100% - 32px);
}

.card__lead {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.card__rule {
  height: 0;
  margin: 21px 0 20px;
  border: 0;
  border-top: 1px solid var(--gold);
}

.card__line {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.card__line strong { font-weight: 700; }

/* ---------------------------------------------------------
   TROPHY PANEL
   --------------------------------------------------------- */
.summary {
  display: grid;
  grid-template-columns: 193px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-top: 49px;
  padding: 43px 43px 43px 46px;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, .66);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.summary__art { width: 193px; }

.summary__copy p {
  font-size: 18px;
  line-height: 27px;
}

.summary__copy strong { font-weight: 700; }

/* ---------------------------------------------------------
   "THE FOUR STAGES AT SEA" panel
   Opaque black, unlike the trophy panel above it: the copy sits
   over the bright seascape and needs a solid ground.
   --------------------------------------------------------- */
.atsea {
  position: relative;
  margin-top: 49px;
  padding: 34px 44px;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: var(--black);
}

.atsea__copy {
  position: relative;
  z-index: 1;
  max-width: 545px;   /* keeps the copy clear of the sea photo */
}

.atsea__copy p {
  font-size: 18px;
  line-height: 27px;
}

.atsea__copy strong { font-weight: 700; }

/* Exported pre-masked to the panel's rounded corners, so it needs no
   clipping here — which matters, because the ship must overflow.
   The left edge is faded instead: in the artboard the sea dissolves into
   the black copy area on a slight diagonal rather than butting against it.
   Masking each image separately (not a shared wrapper) keeps the ship's
   overflow visible — a wrapper mask would cut it off at the box edge. */
.atsea__sea,
.atsea__ship {
  position: absolute;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(80deg, transparent 2%, #000 20%);
          mask-image: linear-gradient(80deg, transparent 2%, #000 20%);
}

/* Both are anchored to the panel's BOTTOM at their natural size — never
   scaled and never `cover`. That is what keeps the ship lined up with the
   ship already inside the sea photo: the moment either one is scaled or
   cropped independently (e.g. height:100% + cover on a panel that grew
   taller), the two drift apart and the ship breaks out sideways. */
.atsea__sea {
  bottom: 3px;
  right: 0;
  width: 388px;
  height: auto;
}

/* Deliberately breaks out past the panel's bottom-right corner. */
.atsea__ship {
  bottom: -64px;
  right: -72px;
  width: 466px;
  height: auto;
}

/* ---------------------------------------------------------
   CTA
   --------------------------------------------------------- */
.cta {
  margin-top: 44px;
  text-align: center;
}

/* Extra room so the ship's bow clears the button. */
.atsea + .cta { margin-top: 53px; }

/* A transparent button would show the sea straight through here. */
.atsea + .cta .btn { background: rgba(0, 0, 0, .6); }

/* Must repeat the hover here: the selector above is more specific than
   `.btn:hover` (0,3,0 vs 0,2,0), so without this the background stayed
   dark while the label turned near-black — invisible on hover. */
.atsea + .cta .btn:hover,
.atsea + .cta .btn:focus-visible { background: var(--gold); }

.cta--left { text-align: left; }

/* =========================================================
   ABOUT PAGE
   ========================================================= */

/* Shared display heading — "ABOUT" / "PROCEDURE" (62px gold). */
.display {
  margin: 0;
  color: var(--gold);
  font-size: clamp(34px, 4.3vw, 62px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.013em;
}

/* Shared body copy — 18px/27px, also used inside the closing panel. */
.prose {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 27px;
}

.prose:last-of-type { margin-bottom: 0; }

.prose strong { font-weight: 700; }

.link {
  color: var(--gold);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link:hover { text-decoration: none; }

/* ---- Hero ---- */
.about-hero { padding-top: 144px; }

/* The chip photo is drawn at natural size, hard against the top of the
   page and right-aligned to the container, exactly as in the artboard. */
.about-hero__art {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  display: flex;
  justify-content: flex-end;
  width: min(100% - 48px, var(--container));
  transform: translateX(-50%);
  pointer-events: none;
}

.about-hero__inner > .display { margin-bottom: 33px; }

.about-hero .prose { max-width: 625px; }

.about-hero .btn { margin-top: 16px; }

/* ---- Procedure ---- */
.procedure { padding: 175px 0 33px; }

.procedure__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 975px;
}

.procedure__title { padding-top: 3px; }

/* ---- Stage panel ---- */
.proc,
.outro {
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, .66);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.proc {
  display: grid;
  grid-template-columns: 377px minmax(0, 1fr);
  padding: 43px;
}

.proc + .proc,
.outro,
.cta--left { margin-top: 33px; }

.proc__heading {
  margin: 0;
  font-size: 36px;
  font-weight: 600;
  line-height: 44px;
  letter-spacing: -.013em;
}

/* The hairline between the stage name and its bullets. */
.proc__list {
  margin: 0;
  padding: 0 0 0 73px;
  border-left: 1px solid var(--gold);
  list-style: none;
}

.proc__list li {
  position: relative;
  padding-left: 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.proc__list li + li { margin-top: 24px; }

.proc__list li::before {
  content: "\2022";
  position: absolute;
  left: 0;
}

/* ---- Closing panel ---- */
.outro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 282px;
  align-items: center;
  gap: 20px;
  padding: 43px;
}

.outro .prose { margin-bottom: 27px; }

.outro .prose:last-of-type { margin-bottom: 0; }

.outro__art { width: 282px; }

/* =========================================================
   T4S BUY-IN VOUCHERS PAGE
   ========================================================= */

/* NOTE: the artboard uses a brighter gold chips/coins photo that is not
   in assets/. The shared chips photo stands in for it — set --bg-chips
   here once the real file is dropped in and nothing else needs to change
   (adjust --bg-chips-h too if its aspect ratio differs from 1920x1064). */
/* The glitter also reads as a particle field here rather than the home
   page's light burst, so it sits lower and is veiled more evenly. */
.shell--vouchers {
  --video-h: clamp(660px, 62vw, 1180px);

  /* The artboard is brightest right above the footer, but the stand-in
     photo's lowest ~260px are pure black. Pushing it down crops that away
     so the page ends in texture instead of a void. Reset this to
     `center bottom` once the real, brighter photo is in place. */
  --bg-chips-pos: center bottom -400px;
  /* --bg-chips: url("assets/<real-file>.png"); */
}

.shell--vouchers .shell__veil {
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .42) 60%, rgba(0, 0, 0, .70) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, .42) 45%, rgba(0, 0, 0, .82) 80%, #000 99%);
}

.v-hero,
.phases {
  position: relative;
  z-index: 1;
}

/* ---- Hero ---- */
.v-hero { padding-top: 144px; }

.v-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 40px;
}

/* Flex column so the inline-block button contributes no line-box strut
   below it — the hero's height is then exactly h1 + gap + button. */
.v-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.v-hero__title {
  margin-bottom: 31px;
  line-height: 1.06;
}

/* Rises above the headline; the negative margin also keeps the artwork
   from driving the hero's height, which the copy column governs. */
.v-hero__art {
  width: 389px;
  margin-top: -52px;
  margin-right: 225px;   /* not flush to the container edge */
}

/* ---- Phase panels ---- */
.phases { padding: 59px 0 114px; }

/* Pulled left so each panel's padding box lines up with the container. */
.phases__grid {
  display: grid;
  grid-template-columns: repeat(2, 501px);
  gap: 32px;
  align-items: start;
  margin-left: -49px;
}

/* A warm translucent wash rather than an outlined card — it fades out
   slightly toward the bottom, so the FAST REFUND box can hang below it. */
/* No backdrop-filter here on purpose: these panels are large and sit right
   over the playing video, and a 2px blur cost real frames for no visible
   gain. The translucent wash alone matches the artboard. */
.phase {
  padding: 44px 49px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(88, 68, 22, .46) 0%, rgba(88, 68, 22, .34) 100%);
}

.phase__title {
  margin: 0 0 16px;
  color: var(--gold);
  font-size: 30px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -.013em;
}

.phase__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.phase__list li {
  position: relative;
  padding-left: 27px;
  font-size: 16px;
  line-height: 24px;
}

.phase__list li::before {
  content: "\2022";
  position: absolute;
  left: 10px;
}

.phase__list li + li { margin-top: 15px; }

.phase__list--tight li + li { margin-top: 0; }

.phase__list + .phase__list { margin-top: 15px; }

.phase__list p { margin: 24px 0 0; }

.phase__btn { margin-top: 17px; }

.phase__note {
  margin-top: 18px;
  font-size: 16px;
  line-height: 24px;
}

/* ---- FAST REFUND box — 14px/21px, a step down from the panel body ---- */
.refund {
  margin-top: 35px;
  padding: 23px;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, .66);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.refund__title {
  margin: 0 0 21px;
  color: var(--gold);
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
}

.refund__list,
.refund__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.refund__list > li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
}

.refund__list > li + li { margin-top: 21px; }

.refund__list > li::before {
  content: "\2022";
  position: absolute;
  left: 10px;
  color: var(--gold);
}

.refund__list p { margin: 21px 0 0; }

.refund__sublist li {
  position: relative;
  padding-left: 24px;
}

.refund__sublist li::before {
  content: "\2022";
  position: absolute;
  left: 10px;
  color: var(--white);
}

/* ---------------------------------------------------------
   FOOTER — flat gold bar
   --------------------------------------------------------- */
.footer {
  background: var(--gold);
  color: var(--black);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 54px;
  font-size: 14px;
  line-height: 20px;
}

.footer__nav {
  display: flex;
  align-items: center;
  gap: 9px;
}

.footer__nav a {
  color: inherit;
  text-decoration: none;
}

.footer__nav a:hover { text-decoration: underline; }

.footer__sep { opacity: .6; }

/* ---------------------------------------------------------
   SCROLL REVEAL
   Gated on the `js` class that script.js sets, so the content
   is never left invisible if the script fails to run.
   --------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 1500px) {
  .hero__art { margin-right: 0; }
}

@media (max-width: 1200px) {
  .hero__art { max-width: 44vw; }
  .hero__art img { width: 100%; }

  /* Give the stage panels the width the fixed 975px column can no
     longer afford, and let the heading sit above them. */
  .procedure__inner { grid-template-columns: minmax(0, 1fr); }

  .procedure__title { padding-top: 0; margin-bottom: 40px; }

  .procedure { padding-top: 120px; }

  .about-hero__art { opacity: .5; }

  .about-hero__art img { width: 60vw; height: auto; }

  /* The fixed 484px columns no longer fit — let them share the row. */
  .phases__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin-left: 0;
  }

  .v-hero__art { margin-right: 0; width: min(389px, 30vw); }
}

@media (max-width: 1000px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 90px;
    text-align: center;
  }

  .hero__art {
    order: -1;
    width: 100%;
    max-width: 460px;
    margin: 0 auto 36px;
  }

  .hero__text {
    margin-inline: auto;
    margin-bottom: 36px;
  }

  .stages { padding-top: 120px; }

  .stages__grid { gap: 130px 40px; }

  .btn--wide { min-width: 0; width: 100%; }

  /* Stack the stage name above its bullets and drop the hairline. */
  .proc { grid-template-columns: minmax(0, 1fr); padding: 32px 24px; }

  .proc__heading { margin-bottom: 24px; font-size: 30px; line-height: 38px; }

  .proc__list { padding-left: 0; border-left: 0; }

  .outro { grid-template-columns: minmax(0, 1fr); padding: 32px 24px; }

  .outro__art { margin: 8px auto 0; }

  .about-hero { padding-top: 96px; }

  .about-hero__art { display: none; }

  .v-hero { padding-top: 96px; }

  .v-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .v-hero__art {
    order: -1;
    width: min(389px, 60vw);
    margin: 0 0 32px;
  }

  .phases { padding: 40px 0 80px; }

  .phases__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }

  .phase { padding: 32px 24px; }

  /* The sea keeps its natural 388px, so only the copy has to give way —
     no scaling, which is what keeps the ship aligned. */
  .atsea__copy { max-width: calc(100% - 344px); }
}

@media (max-width: 780px) {
  /* Too narrow to keep the copy beside a 388px photo. Stack instead:
     copy first, then the sea photo below it. The separate ship overlay
     goes — "Mask group.png" already contains the ship, so it stays
     visible and nothing needs to hang outside the panel here. */
  .atsea__copy {
    max-width: none;
    margin-bottom: 28px;
  }

  .atsea__sea {
    position: static;
    width: 100%;
    max-width: 388px;      /* shrinks on small screens, never enlarges */
    height: auto;
    margin-left: auto;     /* stays on the right, as in the design */
    -webkit-mask-image: none;
            mask-image: none;
  }

  .atsea__ship { display: none; }
}

@media (max-width: 700px) {
  .atsea { padding: 28px 24px; }
}

@media (max-width: 820px) {
  .stages__grid { grid-template-columns: minmax(0, 1fr); gap: 120px; }

  .summary {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 24px;
    padding: 32px 24px;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .card { padding: 88px 20px 32px; }

  .card__badge { top: -60px; width: 200px; }

  .hero__text { font-size: 17px; line-height: 24px; }

  .summary__copy p { font-size: 16px; line-height: 25px; }

  .prose { font-size: 16px; line-height: 25px; }

  .outro .prose { margin-bottom: 22px; }

  .proc__heading { font-size: 26px; line-height: 33px; }

  .outro__art { width: 100%; max-width: 240px; }

  .footer__inner {
    flex-direction: column;
    gap: 6px;
    padding-block: 14px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal { opacity: 1; transform: none; transition: none; }
}