/* ===== CSS VARIABLES ===== */
:root {
  /* Brand greens */
  --color-primary-green: #2FE9A6;
  --color-primary-green-light: #8CFFD9;
  --color-primary-green-mid: #4FE8B0;
  --color-primary-green-deep: #0FBE7C;
  --color-hero-bg: #0A1613;
  --color-footer-bg: #191D1F;

  /* Text */
  --color-text-white: #FFFFFF;
  --color-text-white-soft: rgba(255, 255, 255, 0.86);
  --color-text-dark: #0C2B20;
  --color-text-dark-muted: #1E4A38;

  /* Shadows & glows */
  --shadow-card: rgba(0, 0, 0, 0.28);
  --shadow-btn: rgba(0, 0, 0, 0.35);
  --shadow-text: rgba(0, 0, 0, 0.4);
  --glow-green-soft: rgba(76, 255, 196, 0.45);
  --glow-green-strong: rgba(76, 255, 196, 0.85);
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* DESKTOP CSS */
/* overflow-x:hidden lives on body ONLY. Putting it on html too makes html
   opt out of propagating body's overflow to the viewport (per the CSS
   overflow spec's "propagation to viewport" rule) — so body ends up as its
   own internal overflow-y:auto scroll container instead of the page
   scrolling normally at the viewport level. Keeping it on body alone lets
   the propagation happen as intended. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

body {
  overflow-x: hidden;
  background-color: var(--color-hero-bg);
}

.header {
  width: 100%;
  line-height: 0;
  overflow: hidden;
  margin-bottom: -2px;
}

.top-desktop {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.top-mobile {
  display: none;
  width: 100%;
  height: auto;
  margin-bottom: -3px;
  object-fit: cover;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.desktop {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;

  background-color: var(--color-hero-bg);
  background-image: url("./images/background.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;

  position: relative;
  overflow-y: auto;
}

/* ===== HERO / LOGO ===== */
.menu-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 30px 1.5% 60px;
  justify-content: center;
}

.title-group {
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-img {
  display: inline-flex;
  height: clamp(52px, 7vw, 120px);
  width: auto;
  filter: drop-shadow(0 0 14px var(--glow-green-soft));
}

/* ===== SOCIAL ICON RAIL (desktop) ===== */
.social-icons {
  position: fixed;
  right: 2vw;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 100;
}

.social-icon {
  width: clamp(46px, 3.6vw, 76px);
  height: clamp(46px, 3.6vw, 76px);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.social-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px var(--glow-green-soft));
}

.social-icon:hover {
  transform: scale(1.08);
}

/* ===== HERO CONTENT ROW (mascot + link grid) ===== */
.section-desktop {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 44px;
  /* width:100% is required here, not just max-width: on a flex item,
     width:auto + margin:0 auto makes it shrink-to-fit its content and
     hand ALL leftover space to the auto margins instead of stretching —
     so section-desktop was rendering ~900px wide with ~260px dead margin
     on each side at 1920px, squeezing the mascot art into a much smaller
     column than the layout actually had room for. width:100% claims the
     full available width up front; max-width then clamps *that* back
     down, which is what actually gives the auto margins real space to
     center it in. */
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

.section-mascot {
  position: relative;
  flex: 0 1 52%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

picture {
  width: 100%;
}

.section-mascot img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.link-section {
  flex: 0 1 41%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.link-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.8vw, 30px);
  width: 100%;
}

/* Desktop: cap the grid so each hex-badge renders smaller instead of
   stretching to fill the whole (now wider) link-section column.

   Sizes below are pinned to the Figma desktop frame, confirmed 1920px
   wide: the exported link-item group measures 479x459 there, i.e. the
   grid is ~24.95% of the frame's width. A flat `max-width: 480px` matches
   that ONLY at exactly 1920px viewport — on any narrower desktop/laptop
   screen (1366, 1440, 1536...) the row still has room to spare, so the
   grid (and mascot) sit pinned at their 1920-design pixel size instead of
   scaling down with the viewport, reading as oversized ("quá to") against
   the Figma comp on real laptop widths. `min(PXpx, VWvw)` keeps the exact
   Figma px value at 1920px and up, and scales fluidly below it. */
@media (min-width: 1025px) {
  .link-items {
    max-width: min(480px, 24.95vw);
  }

  /* .link-section itself was still flex: 0 1 41% (~656px in the 1600px
     container) while .link-items inside it caps below — align-items:
     center then centers that grid inside the much wider box, leaving dead
     padding between the mascot and the visible link grid on top of the
     44px row gap. Shrink the section to hug the grid it actually holds
     (same min(px, vw) scaling as .link-items, plus ~40px slack) so the
     two halves sit close together at every desktop width. */
  .link-section {
    flex: 0 1 min(520px, 27.08vw);
    max-width: min(520px, 27.08vw);
  }

  /* Base .section-mascot is flex: 0 1 52%, which at the 1600px container
     cap renders the mascot art at ~830px — noticeably oversized next to
     the link grid. Shrink the desktop basis and cap its pixel width so
     it stays balanced against .link-section instead of dominating the
     row — scaling the same way as the link grid above so the two halves
     shrink together below 1920px instead of the mascot staying pinned at
     600px while the grid shrinks out from under it. */
  .section-mascot {
    flex: 0 1 min(600px, 31.25vw);
    max-width: min(600px, 31.25vw);
  }

  /* Base .hex-num/.hex-unit (further below in this file) use clamp(min,
     preferred, max) with min > max (40px > 34px, 20px > 15px) — an
     inverted clamp always resolves to the min bound (browsers compute
     max(MIN, min(PREFERRED, MAX)), so once MIN > MAX the MAX can never
     win), pinning the numbers at a flat 40px/20px on every screen. Since
     that base rule sits LATER in the file than this override at equal
     ".hex-num"/".hex-unit" specificity, plain source order would let the
     base rule win the cascade even inside this matching media query —
     so this qualifies with the ".link-item" ancestor to outrank it
     instead of depending on source position. min(px, vw) sets the exact
     Figma-matched size at 1920px (60px/26px) and scales it down with the
     hex-badge itself below that, instead of a fixed floor that would
     oversize the text once the hex shrinks on narrower desktops. */
  .link-item .hex-num {
    font-size: min(60px, 3.125vw);
  }

  .link-item .hex-unit {
    font-size: min(26px, 1.354vw);
  }
}

.link-item {
  position: relative;
  width: 100%;
  /* .link-pill is position:absolute below, taken out of flow, so this
     margin reserves the space it hangs into (keeps grid rows from
     overlapping the next hex-badge down). */
  margin-bottom: 36px;
  cursor: pointer;
  transition: transform 0.25s ease, filter 0.25s ease;
}

/* The bottom row doesn't have a next row to protect from pill overlap,
   so the margin-bottom above was pure trailing dead space there — grid
   items don't collapse trailing margins the way normal-flow block
   elements do, so it counted toward .link-items' full height. That
   pushed the grid's real (bottom-heavy) height past .section-mascot's,
   and .section-desktop's `align-items: center` centers by that box
   height — not by where the hexes visually sit — so the extra 36px only
   the grid had made its hexes read as sitting higher than the mascot's
   own vertical center instead of lining up with it. :nth-last-child(-n+2)
   targets the last row of this 2-column grid (however many .link-item
   rows precede it) so it stays correct if items are ever added. The
   .link-pill under this row still renders fine with no margin to reserve
   — it's position:absolute and nothing in this layout clips overflow, so
   it simply overflows below .link-items' box instead of being budgeted
   into it, same as it visually did before. */
.link-item:nth-last-child(-n + 2) {
  margin-bottom: 0;
}

.link-item:hover {
  transform: translateY(-4px);
  filter: brightness(1.12);
}

/* ===== HEX PING BADGE =====
   images/link-bg.png already IS the glowing hexagon frame (art asset),
   so it is used as-is here instead of drawing the shape with clip-path. */
.hex-badge {
  position: relative;
  width: 100%;
  aspect-ratio: 228 / 217;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: url("./images/link-bg.png") center / contain no-repeat;
}

.hex-num {
  color: var(--color-text-white);
  font-family: "Anton", "Montserrat", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 2.4vw, 34px);
  line-height: 1;
  text-shadow: 0 0 10px var(--glow-green-strong), 0 2px 3px var(--shadow-text);
}

.hex-unit {
  color: var(--color-text-white);
  font-weight: 700;
  font-size: clamp(20px, 1vw, 15px);
  line-height: 1;
  transition: opacity 0.3s ease;
}

/* Pinned via position instead of flex stacking, so it overlaps the hex's
   bottom point exactly like the design instead of just sitting under it
   with a flex gap. top:100% == hex-badge's bottom edge, since hex-badge is
   .link-item's only in-flow child. */
.link-pill {
  position: absolute;
  left: 50%;
  top: 80%;
  transform: translateX(-50%);
  z-index: 2;
  width: 84%;
  max-width: 200px;
  padding: 12px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--color-primary-green-light) 0%, var(--color-primary-green-mid) 100%);
  color: #1D4C38;
  font-weight: 800;
  font-size: clamp(24px, 1.1vw, 24px);
  text-align: center;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 14px var(--shadow-card);
}

/* ===== DOWNLOAD APP BAR =====
   images/image 1712.png already IS the glowing chamfered bar (art asset),
   icons/text just sit on top of it — no hand-drawn shape needed. */
.download-app {
  margin: 10px auto 0;
  max-width: 700px;
  width: 100%;
  aspect-ratio: 906 / 198;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Fixed px, not %: percentage padding resolves against the CONTAINING
     BLOCK's width (.menu-container, ~1368px on a 1440px screen), not this
     element's own max-width:700px box — "9%" was silently computing to
     ~123px instead of the intended ~63px, so content overflowed the
     padding box and threw the whole bar off-center. 63px is that intended
     9%-of-700 value, now correct regardless of the parent's width. */
  padding: 0 63px;
  background: url("./images/image 1712.png") center / 100% 100% no-repeat;
}

/* Mobile/tablet: icon + bold caption + the small pre-baked store badge,
   stacked in a column — matches Group 2147223966.png. Desktop swaps this
   for just the single larger badge (icon/caption hidden below). */
.download-app-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: transform 0.2s ease;
  /* Grid items default to min-height/min-width:auto, which floors their
     size at their content's min-content contribution — for an <img>
     sized by percentage (width/height:100% on .download-app-item-pc
     below), that min-content contribution falls back to the image's
     raw intrinsic size (down-ios-pc.png/down-android-pc.png are
     301x91px) since percentages don't count toward it. That silently
     stopped the mobile/tablet grid's button rows from shrinking below
     ~48px even when their fr share was cut well under that, which is
     why shrinking grid-template-rows' button tracks didn't visibly
     shrink the rendered button. Zeroing both lets the tracks' fr sizing
     actually govern, the same fix pattern as .download-app-qr's
     align-self:stretch blowup a few rounds of tuning back. */
  min-height: 0;
  min-width: 0;
}

.download-app-item:hover {
  transform: translateY(-2px);
}

/* Fluid clamp() sizing, not fixed px per breakpoint bucket: scales
   smoothly across the whole mobile/tablet range (320–1024px) instead of
   jumping between 2-3 hardcoded sizes — a 768px tablet no longer looks
   like an awkward in-between of the phone and desktop numbers. */
.download-app-icon {
  width: clamp(28px, 6vw, 40px);
  height: auto;
  object-fit: contain;
}

.download-app-caption {
  color: var(--color-text-dark);
  font-weight: 800;
  font-size: clamp(10px, 2.2vw, 13px);
  letter-spacing: 0.4px;
  text-align: center;
  line-height: 1.2;
  /* Was white-space:nowrap: "DOWNLOAD ANDROID" at one line is wider than
     the badge below it, so on a narrow phone it forced the item wider
     than the frame and ran outside the background art. Capping width to
     the badge's own clamp (below) makes both text and badge share one
     column width, wrapping to "DOWNLOAD / ANDROID" instead of overflowing. */
  max-width: clamp(72px, 14vw, 110px);
}

/* Small App-Store/Google-Play badge for mobile/tablet — dedicated
   pre-baked art (down-ios-mobile.png / down-android-mobile.png) made to
   stay crisp at this size, unlike down-ios-pc.png / down-android-pc.png
   shrunk down (text goes soft/illegible), which is desktop-only below. */
.download-app-badge {
  width: clamp(72px, 14vw, 110px);
  height: auto;
  object-fit: contain;
}

/* Pre-baked badge (down-ios-pc.png / down-android-pc.png) — desktop only,
   where it's large enough to hold up (see .download-app-badge above for
   the dedicated mobile-sized art it doesn't fit). */
.download-app-item-pc {
  display: none;
}

.download-app-qr {
  flex-shrink: 0;
  width: clamp(56px, 12vw, 100px);
  line-height: 0;
}

.qr-code {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Desktop: hide the icon+caption+hand-built-badge trio and show only the
   pre-baked badge image, sized up to be the sole element on the bar. */
@media (min-width: 1025px) {
  .download-app-icon,
  .download-app-caption,
  .download-app-badge {
    display: none;
  }

  .download-app-item-pc {
    display: block;
    width: clamp(120px, 15vw, 210px);
    height: auto;
    object-fit: contain;
  }
}

/* ===== SOCIAL GRID (tablet/mobile only) ===== */
.social {
  display: none;
  width: clamp(240px, 92vw, 442px);
  margin: 0 auto;
}

.social-row-top,
.social-row {
  display: contents;
}

/* images/icon 1.png is the glowing hex chip used as the frame — the real
   button art sits smaller, centered on top of it. */
.social-btn-link {
  aspect-ratio: 105 / 107;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.social-btn-link img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.social-btn-link:hover {
  transform: scale(1.06);
  filter: brightness(1.05);
}

/* ===== TEXT UTILITY CLASSES ===== */
.text-center {
  text-align: center;
}

.font-bold {
  font-weight: bold;
}

/* ===== SEO / BODY CONTENT ===== */
.seo-container {
  background: var(--color-hero-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 50px 80px 70px;
}

.hl-panel {
  width: 100%;
  max-width: 1290px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hl-divider {
  display: block;
  width: 70px;
  height: 3px;
  background: var(--color-primary-green);
  box-shadow: 0 0 10px var(--glow-green-soft);
}

.hl-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

.hl-title {
  font-family: "Anton", "Montserrat", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 32px);
  line-height: 1.3;
  color: var(--color-primary-green);
  text-transform: uppercase;
  text-shadow: 0 0 16px var(--glow-green-soft);
}

.hl-title-lg {
  font-size: clamp(24px, 2.6vw, 40px);
}

.hl-subtitle {
  color: var(--color-text-white-soft);
  font-size: 15px;
  line-height: 1.75;
  max-width: 900px;
}

/* -- Intro block -- */
.hl-intro-panel {
  align-items: center;
  gap: 18px;
  text-align: center;
}

.hl-intro-lead {
  display: block;
  color: var(--color-text-white);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
  max-width: 900px;
}

/* -- Reason cards (mint gradient panels) -- */
.hl-reason-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hl-reason-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  padding: 40px 48px;
  border-radius: 26px;
  background: linear-gradient(160deg, var(--color-primary-green-light) 0%, var(--color-primary-green-mid) 55%, var(--color-primary-green-deep) 100%);
  box-shadow: 0 14px 32px var(--shadow-card);
}

/* .hl-reason-card-reverse needs no flex-direction override: the second
   card already swaps icon/body order in the DOM (icon first), so plain
   row (inherited from .hl-reason-card) already mirrors card one — adding
   row-reverse here would flip it right back to matching card one. */

.hl-reason-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.hl-reason-title {
  font-family: "Anton", "Montserrat", Arial, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  color: var(--color-text-dark);
}

.hl-reason-text {
  color: var(--color-text-dark-muted);
  font-size: 14px;
  line-height: 1.75;
  font-weight: 500;
}

.hl-reason-icon {
  flex: 0 0 auto;
  width: 190px;
  height: 190px;
  object-fit: contain;
}

/* -- Great games panel -- */
.hl-game-panel {
  display: flex;
  flex-direction: row;
  gap: 32px;
  width: 100%;
  padding: 44px 48px;
  border-radius: 26px;
  background: linear-gradient(160deg, var(--color-primary-green-light) 0%, var(--color-primary-green-mid) 55%, var(--color-primary-green-deep) 100%);
  box-shadow: 0 14px 32px var(--shadow-card);
}

.hl-game-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

/* Hexagon chip reused from images/icon 1.png as the backing shape for the
   game-category icons (cards / football / slot glyphs). */
.hl-game-icon {
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("./images/icon 1.png") center / contain no-repeat;
  color: var(--color-text-white);
  font-size: 24px;
}

.hl-game-title {
  font-family: "Anton", "Montserrat", Arial, sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.3;
  color: var(--color-text-dark);
}

.hl-game-text {
  color: var(--color-text-dark-muted);
  font-size: 13.5px;
  line-height: 1.7;
  font-weight: 500;
}

/* -- Bonus rows (image + text, alternating, directly on dark bg) -- */
.hl-bonus-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 44px;
  width: 100%;
  margin-bottom: 36px;
}

.hl-bonus-row:last-child {
  margin-bottom: 0;
}

/* .hl-bonus-row-reverse needs no override — the second row already
   swaps media/body order in the DOM, so plain row mirrors row one. */

.hl-bonus-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hl-bonus-title {
  font-family: "Anton", "Montserrat", Arial, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  color: var(--color-text-white);
}

.hl-bonus-text {
  color: var(--color-text-white-soft);
  font-size: 14.5px;
  line-height: 1.8;
}

.hl-bonus-media {
  flex: 0 0 42%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 32px var(--shadow-card);
}

.hl-bonus-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -- Mobile app steps: one wide mint card, text left + two tilted phone
   mockups centered + text right (matches Group 2147223968.png) -- */
.hl-steps-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hl-steps-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
  padding: 40px 56px;
  border-radius: 26px;
  background: linear-gradient(160deg, var(--color-primary-green-light) 0%, var(--color-primary-green-mid) 55%, var(--color-primary-green-deep) 100%);
  box-shadow: 0 14px 32px var(--shadow-card);
}

.hl-steps-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hl-steps-title {
  font-family: "Anton", "Montserrat", Arial, sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
  color: var(--color-text-dark);
}

.hl-steps-text {
  color: var(--color-text-dark-muted);
  font-size: 14px;
  line-height: 1.75;
  font-weight: 500;
}

/* phone-profile.png / phone-deposit.png already carry their own tilt and
   drop shadow baked into the art, so they just sit side by side here. */
.hl-steps-phones {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
}

.hl-steps-phone {
  height: 260px;
  width: auto;
  object-fit: contain;
}

/* .hl-steps-mobile is the pair of old-style separate cards (icon + text,
   alternating sides) — hidden on desktop where .hl-steps-desktop's single
   unified card (above) is shown instead. Toggled in the min/max-width:1024
   breakpoints below. .hl-steps-icon reuses the same phone art, just one
   per card instead of the desktop pair. */
.hl-steps-mobile {
  display: none;
}

.hl-steps-icon {
  flex: 0 0 auto;
  height: 220px;
  width: auto;
  object-fit: contain;
}

/* -- Conclusion -- */
.hl-conclusion {
  align-items: center;
  gap: 16px;
  text-align: center;
}

/* ===== FOOTER ===== */
.footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  background: var(--color-footer-bg);
  padding: 40px 0 30px;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 12px;
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
  box-sizing: border-box;
}

.footer-content img {
  width: calc(10% - 11px);
  height: auto;
  object-fit: contain;
  transition: transform 0.25s ease;
  transform-origin: center;
}

.footer-content img:hover {
  transform: scale(1.08);
}

.footer-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px;
  margin-top: 10px;
  /* .footer's align-items:center means, without this, .footer-end also
     shrink-wraps to its own content instead of .footer's real width —
     .footer-end-content's max-width:100% below needs an actual definite
     width to resolve against, not another shrink-wrapped ancestor. */
  width: 100%;
  box-sizing: border-box;
}

.footer-end-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 18px;
  /* .footer uses align-items:center (column axis), so without a width cap
     this row sizes to its own content and ignores the viewport entirely —
     on a narrow phone the row would silently clip against body's
     overflow-x:hidden with no way to reach the hidden part. max-width
     pins it to .footer's actual (viewport-wide) box, then overflow-x lets
     it scroll internally if the row still doesn't fit. */
  max-width: 100%;
  overflow-x: auto;
}

.footer-end-content img {
  height: 34px;
  width: auto;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.footer-end-content img:hover {
  transform: scale(1.08);
}

.footer-badge-text {
  color: var(--color-text-white-soft);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.footer-copyright {
  color: var(--color-primary-green);
  font-size: clamp(11px, 3.2vw, 16px);
  text-align: center;
  white-space: nowrap;
  width: 100%;
}

/* LAPTOP NHỎ (1025PX - 1290PX) */
@media (min-width: 1025px) and (max-width: 1290px) {
  .menu-container {
    padding: 30px 2.5% 60px;
  }

  .seo-container {
    padding-left: 2.5%;
    padding-right: 2.5%;
  }
}

/* MÀN HÌNH NHỎ (MAX-WIDTH: 1024PX) — stacked mobile/tablet layout */
@media (max-width: 1024px) {
  .menu-container {
    padding: 20px 2.5% 40px;
  }

  .section-desktop {
    flex-direction: column;
    gap: 0;
  }

  /* Mobile order: logo (default DOM order) > link grid > mascot + CTA > download bar > social grid */
  .link-section {
    order: 1;
    width: 100%;
    margin-bottom: 40px;
  }

  .section-mascot {
    order: 2;
    width: 84%;
    margin: 0 auto 20px;
  }

  /* .download-app is no longer set up here. Three earlier attempts
     (padding-based centering, then align-self:stretch sizing) kept
     drifting from Group 2147223966.png's actual proportions because
     mobile and tablet were forced through ONE shared ruleset with only
     small width/padding tweaks between them. It's now defined completely
     separately in the mobile-only (max-width:767px) and tablet-only
     (min-width:768px and max-width:1024px) blocks below, each with its
     own grid measured directly off that reference image — see the
     comment on .download-app in the mobile block for the full method. */

  .social-icons {
    display: none;
  }

  .social {
    order: 4;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 12px;
    width: 84%;
    max-width: 360px;
    margin: 32px auto 10px;
  }

  .desktop {
    background: url('./images/background-h5.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .seo-container {
    gap: 30px;
    padding: 16px 16px 40px;
  }

  /* -- Reason / games / steps mint panels stack vertically -- */
  .hl-reason-card,
  .hl-reason-card-reverse {
    flex-direction: column;
    text-align: center;
    padding: 28px 24px;
    gap: 20px;
  }

  .hl-reason-icon {
    width: 140px;
    height: 140px;
  }

  .hl-game-panel {
    flex-direction: column;
    padding: 28px 24px;
    gap: 30px;
  }

  .hl-bonus-row,
  .hl-bonus-row-reverse {
    flex-direction: column;
    gap: 20px;
  }

  .hl-bonus-media {
    width: 100%;
  }

  .hl-bonus-body {
    text-align: center;
    align-items: center;
  }

  /* Swap back to the two separate old-style cards on mobile/tablet — the
     desktop three-column card doesn't have room to breathe this narrow. */
  .hl-steps-desktop {
    display: none;
  }

  .hl-steps-mobile {
    display: flex;
  }

  .hl-steps-card {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 24px;
    gap: 20px;
  }

  .hl-steps-icon {
    width: 120px;
    height: auto;
  }
}

/* MÁY TÍNH BẢNG (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .top-desktop {
    display: none;
  }

  .top-mobile {
    display: block;
  }

  /* No cap here meant .link-items simply filled the row (~95% of the
     viewport once .menu-container's own padding is subtracted), so each
     hex-badge column ran ~46.6vw wide — same width as it'd be on a phone
     screen twice as narrow. Capping it back down (min(px, vw), same
     pattern as the desktop grid) shrinks the whole 2x2 link grid on
     tablet; the hex-num/hex-unit font-size and .hex-badge width below
     are scaled down by the same ~74% factor so the text still fills the
     hex the way it did before, just smaller overall. */
  .link-items {
    max-width: min(440px, 56vw);
    margin: 0 auto;
  }

  /* Was 440/217 (~2:1) — way wider than the link-bg.png source's real
     228/217 (~1.05:1) ratio. .hex-badge's WIDTH is fixed by its grid
     column (2-col grid, no max-width here, so it's ~46% of the viewport);
     aspect-ratio only derives the HEIGHT from that width. A too-wide ratio
     forced a short box, and since the background is `center/contain`
     (preserving the image's own 228:217 shape), the hex-badge graphic
     rendered far smaller than its column and letterboxed in the middle,
     leaving a big dead gap between the two hexes in each row instead of
     them filling their columns like the desktop/mobile grids do. Matching
     the source ratio lets the hex fill its full column width again. */
  .hex-badge {
    aspect-ratio: 228 / 217;
  }

  /* Was 51% of the hex-badge width — tuned against the old letterboxed
     (much-narrower-looking) hex above, so it read as a reasonably-sized
     pill at the time. Once the hex fills its real column width, 51% is
     noticeably thinner than the ~78-84% pill-to-hex ratio used on both
     the desktop grid (84%) and the Figma comp (~78%). Bumped further to
     88% (plus the bigger font-size/padding below) per direct feedback
     that the pill should read as a bigger, more prominent button next
     to the now-smaller hex. */
  .link-pill {
    width: 88%;
    font-size: clamp(20px, 1.8vw, 20px);
    padding: 9px 12px;
  }

  /* Base .hex-num/.hex-unit clamp() has min > max (see the desktop-grid
     comment further up), so it always resolves to a flat 40px/20px
     regardless of screen size — far too small once the hex-badge above
     actually fills its grid column on tablet. Scale with the hex's own
     width using the same font-to-hex ratio as the desktop grid (~0.267
     for the number, ~0.116 for the unit), mirrored with the same
     min(px, vw) cap as .link-items above (7.34vw/3.18vw = the same
     ~80% shrink applied to .link-items' 56vw/440px cap) so the text
     keeps tracking the smaller hex instead of overflowing it. */
  .link-item .hex-num {
    font-size: min(55px, 7.34vw);
  }

  .link-item .hex-unit {
    font-size: min(24px, 3.18vw);
  }

  /* Was 56% — much smaller than mobile's 84/92%, so the mascot art
     shrank hard right at the tablet breakpoint instead of scaling down
     gradually from desktop. */
  .section-mascot {
    width: 80%;
  }

  /* Full, self-contained download-app card for tablet — see the mobile
     block's .download-app comment for how the grid-template numbers
     below were measured off Group 2147223966.png. Only the outer
     width/max-width differ from the mobile version (bigger, confirmed
     OK on real iPad — narrower than mobile's 92% share of a much wider
     tablet viewport would otherwise give it); every internal proportion
     (padding, gap, button/QR size) is identical, driven by the same
     fixed aspect-ratio + fr grid so it scales as one unit. */
  .download-app {
    order: 3;
    width: 80%;
    max-width: min(80%, 620px);
    aspect-ratio: 378 / 141;
    display: grid;
    /* The base (desktop) rule's align-items:center is never overridden
       by display:grid/etc. above, so it was still cascading through —
       align-items:center makes grid items size to their own CONTENT
       instead of stretching to fill their row track. With that, the
       button's height (and the QR's) came from the <img>'s own intrinsic
       aspect-ratio via its (correctly track-driven) WIDTH, completely
       ignoring grid-template-rows — which is why shrinking the button
       rows below had no visible effect until this was added. stretch
       lets a row's fr size actually reach the item that fills it. */
    align-items: stretch;
    grid-template-columns: 20fr 185fr 22fr 100fr 50fr;
    /* Button rows (2nd/4th) shrunk from 50fr to 40fr and the gap between
       them (3rd row) from 13fr to 8fr, per direct feedback — makes
       .download-app-item-pc (object-fit:contain, so it scales down with
       its now-shorter row) read smaller, and tightens the space between
       the two buttons. The QR (grid-row:2/5, i.e. exactly these three
       rows) shrinks by the same amount automatically, staying matched
       to the buttons' combined height without being touched directly. */
    grid-template-rows: 15fr 40fr 8fr 40fr 13fr;
    /* The base (desktop) rule's padding:0 63px and gap:16px are never
       overridden by width/display/etc. above, so they were still
       cascading through here — box-sizing:border-box then shrank the
       grid's actual content box by 126px of padding plus 4×16px of
       gap on top of that, eating nearly two-thirds of the fr tracks'
       intended space (they're the padding/gap already, encoded as the
       20fr/22fr/50fr/13fr spacer tracks — adding real padding/gap on
       top double-counts it). Zeroing both lets the fr tracks alone
       control 100% of the box, matching the measured reference. */
    padding: 0;
    gap: 0;
    background: url("./images/image 1713.png") center / 100% 100% no-repeat;
  }

  .download-app-icon,
  .download-app-caption,
  .download-app-badge {
    display: none;
  }

  .download-app-item-pc {
    display: block;
    width: 100%;
    height: 100%;
    /* min-height:0 here too — as a flex item inside .download-app-item's
       column flex container, this <img> has its own default
       min-height:auto on the main (vertical) axis, which floors it at
       its intrinsic 91px-tall source (down-ios-pc.png/down-android-pc.png)
       independently of the min-height:0 already set on .download-app-item
       itself (that one only unblocked the GRID row from shrinking; this
       one is needed to stop the IMG from then overflowing that shrunk
       row). */
    min-height: 0;
    min-width: 0;
    object-fit: contain;
  }

  .download-app-item:first-of-type {
    grid-column: 2;
    grid-row: 2;
  }

  .download-app-item:last-of-type {
    grid-column: 2;
    grid-row: 4;
  }

  .download-app-qr {
    grid-column: 4;
    grid-row: 2 / 5;
    width: 100%;
    height: 100%;
  }

  .download-app-qr .qr-code {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Shared mobile/tablet rule caps .social at max-width:360px, noticeably
     smaller than .download-app right above it (which scales unclamped at
     92%, ~670-895px on tablet). Matching that width outright (92%) made
     each btn-*.png icon render 250-280px wide — those source images are
     only 114x101px, so stretching them that far upscaled past ~2.5x and
     visibly pixelated ("vỡ hình"). 520px keeps each icon column around
     ~160px (~1.4x the source, still crisp) while still landing noticeably
     bigger than the old 360px cap. */
  .social {
    max-width: 520px;
    gap: 14px 18px;
  }

  .footer-content img {
    width: calc(16.66% - 11px);
  }

  .hl-reason-card,
  .hl-reason-card-reverse {
    flex-direction: row;
    text-align: left;
  }

  .hl-bonus-row,
  .hl-bonus-row-reverse {
    flex-direction: row;
  }

  .hl-bonus-body {
    text-align: left;
    align-items: flex-start;
  }

  .hl-game-panel {
    flex-direction: row;
  }
}

/* MOBILE (<= 767px) */
@media (max-width: 767px) {
  .top-desktop {
    display: none;
  }

  .top-mobile {
    display: block;
  }

  .title-img {
    height: clamp(40px, 12vw, 66px);
  }

  /* Confirmed against Figma: this mobile frame is 375px wide and the
     link-item group there is ~357px (~95% of the frame) — i.e. filling
     nearly the full row IS the intended mobile design, unlike the
     tablet grid (whose Figma source is the 1920px desktop frame at
     ~25% width, so it needed capping down instead) — but per direct
     feedback the link-item should still read smaller than a full-bleed
     ~95vw fill even on a genuine mobile frame, so cap it down here too
     (same min(px, vw) pattern as the tablet/desktop grids) rather than
     leaving it unbounded. */
  .link-items {
    max-width: min(500px, 76vw);
    margin: 0 auto;
  }

  /* Was 330/217 (~1.52:1) — wider than the link-bg.png source's real
     228/217 (~1.05:1) ratio, so the background (`center/contain`, which
     preserves the image's own shape) rendered smaller than its grid
     column and letterboxed, leaving dead space between the two hexes in
     each row instead of them filling their columns — same root cause as
     the tablet grid's aspect-ratio bug above. */
  .hex-badge {
    aspect-ratio: 228 / 217;
  }

  /* Was 64%, tuned against the old letterboxed (narrower-looking) hex
     above. Figma's own mobile export measures the pill at ~78% of the
     hex width — same ratio already used for the desktop and tablet
     grids. Bumped further to 88% (plus the bigger font-size/padding
     below), same as the tablet grid, per direct feedback that the pill
     should read as a bigger, more prominent button next to the now-
     smaller hex. */
  .link-pill {
    width: 88%;
    font-size: clamp(18px, 3.6vw, 18px);
    padding: 8px 12px;
  }

  /* Base .hex-num/.hex-unit clamp() has min > max (see the desktop-grid
     comment further up), so it always resolves to a flat 40px/20px
     regardless of screen size — far too small once the hex-badge above
     fills its real grid column. Scale with the hex's own width using the
     same font-to-hex ratio as the other breakpoints (~0.267 for the
     number, ~0.116 for the unit), mirrored with the same min(px, vw)
     cap as .link-items above (9.95vw/4.32vw = the same ~80% shrink
     applied to .link-items' 76vw/500px cap). */
  .link-item .hex-num {
    font-size: min(63px, 9.95vw);
  }

  .link-item .hex-unit {
    font-size: min(28px, 4.32vw);
  }

  .section-mascot {
    width: 100%;
  }

  .section-mascot picture {
    width: 100%;
  }

  /* Full, self-contained download-app card, replacing the padding-based
     approximation that used to live in the shared max-width:1024px
     block (three rounds of tuning there — padding percentages, then
     align-self:stretch — kept drifting from Group 2147223966.png
     because mobile and tablet were forced through one shared ruleset).

     Numbers below are read directly off that reference export
     (378x141px) with a pixel grid overlay: button block left edge at
     x≈20, each button ≈185x50, the two stacked with a 13px gap between
     them, then a 22px gap before the QR block (≈100x100, roughly
     square), with 50px clear to the right edge — and 15px above the
     first button / 13px below the second. Encoding those as fr tracks
     on a fixed-aspect-ratio grid (rather than padding + gap + a
     stretched QR, all separate properties fighting to agree) makes the
     whole card one unit that reproduces the reference exactly at any
     size: aspect-ratio keeps the frame's proportions locked to the
     source art, and every fr track scales together with it, so there's
     no percentage/auto-height edge case left to fight (that's what
     caused the align-self:stretch attempt's blowup previously — see
     the .download-app-qr history if that rule still has it). */
  .download-app {
    order: 3;
    width: 92%;
    max-width: min(92%, 420px);
    aspect-ratio: 378 / 141;
    display: grid;
    /* The base (desktop) rule's align-items:center is never overridden
       by display:grid/etc. above, so it was still cascading through —
       align-items:center makes grid items size to their own CONTENT
       instead of stretching to fill their row track. With that, the
       button's height (and the QR's) came from the <img>'s own intrinsic
       aspect-ratio via its (correctly track-driven) WIDTH, completely
       ignoring grid-template-rows — which is why shrinking the button
       rows below had no visible effect until this was added. stretch
       lets a row's fr size actually reach the item that fills it. */
    align-items: stretch;
    grid-template-columns: 20fr 185fr 22fr 100fr 50fr;
    /* Button rows (2nd/4th) shrunk from 50fr to 40fr and the gap between
       them (3rd row) from 13fr to 8fr, per direct feedback — makes
       .download-app-item-pc (object-fit:contain, so it scales down with
       its now-shorter row) read smaller, and tightens the space between
       the two buttons. The QR (grid-row:2/5, i.e. exactly these three
       rows) shrinks by the same amount automatically, staying matched
       to the buttons' combined height without being touched directly. */
    grid-template-rows: 15fr 40fr 8fr 40fr 13fr;
    /* The base (desktop) rule's padding:0 63px and gap:16px are never
       overridden by width/display/etc. above, so they were still
       cascading through here — box-sizing:border-box then shrank the
       grid's actual content box by 126px of padding plus 4×16px of
       gap on top of that, eating nearly two-thirds of the fr tracks'
       intended space (they're the padding/gap already, encoded as the
       20fr/22fr/50fr/13fr spacer tracks — adding real padding/gap on
       top double-counts it). Zeroing both lets the fr tracks alone
       control 100% of the box, matching the measured reference. */
    padding: 0;
    gap: 0;
    background: url("./images/image 1713.png") center / 100% 100% no-repeat;
  }

  /* The icon+caption+small-badge trio (down-ios-mobile.png etc.) is gone
     from this design — the pre-baked .download-app-item-pc badge (same
     art the ≥1025px desktop rule uses) is the only thing shown now. */
  .download-app-icon,
  .download-app-caption,
  .download-app-badge {
    display: none;
  }

  .download-app-item-pc {
    display: block;
    width: 100%;
    height: 100%;
    /* min-height:0 here too — as a flex item inside .download-app-item's
       column flex container, this <img> has its own default
       min-height:auto on the main (vertical) axis, which floors it at
       its intrinsic 91px-tall source (down-ios-pc.png/down-android-pc.png)
       independently of the min-height:0 already set on .download-app-item
       itself (that one only unblocked the GRID row from shrinking; this
       one is needed to stop the IMG from then overflowing that shrunk
       row). */
    min-height: 0;
    min-width: 0;
    object-fit: contain;
  }

  /* :first-of-type/:last-of-type key off element (div) position among
     .download-app's children, not DOM adjacency to a matching class, so
     these correctly grab the ios item (1st div child, column 2/row 2 —
     column/row 1 are the left/top padding tracks) and the android item
     (3rd/last div child, row 4) without needing to reorder the QR div
     that sits between them in the markup. */
  .download-app-item:first-of-type {
    grid-column: 2;
    grid-row: 2;
  }

  .download-app-item:last-of-type {
    grid-column: 2;
    grid-row: 4;
  }

  /* grid-row:2/5 spans exactly the two button rows plus the gap row
     between them (rows 2, 3, 4) — i.e. the QR reproduces the reference's
     "roughly as tall as both buttons together" sizing structurally,
     via track placement, instead of a percentage/stretch calculation
     that has to be re-verified against an indefinite container height. */
  .download-app-qr {
    grid-column: 4;
    grid-row: 2 / 5;
    width: 100%;
    height: 100%;
  }

  .download-app-qr .qr-code {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .hl-title {
    font-size: clamp(19px, 5.5vw, 24px);
  }

  .hl-title-lg {
    font-size: clamp(20px, 6vw, 26px);
  }

  .hl-steps-icon {
    width: 90px;
    height: auto;
  }

  .footer-content img {
    width: calc(25% - 10px);
  }
}

/* ĐIỆN THOẠI HẸP (<= 320PX) */
@media (max-width: 320px) {
  .menu-container {
    padding: 16px 2.5% 30px;
  }

  .link-items {
    gap: 10px;
  }
}