/* ===== CSS VARIABLES ===== */
:root {
  /* Brand purples / pinks (FV88 theme) */
  --color-primary-purple: #8B3FFB;
  --color-primary-pink: #FF33C9;

  /* Backgrounds */
  --color-bg-hero: #07021a;
  --color-bg-page: #0a0316;
  --color-bg-panel: #1d0843;
  --color-footer-bg: #2c1a68;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-text-muted: #B9AFD6;
  --color-text-muted-soft: #9C93BE;

  /* Borders / glows */
  --border-glow: rgba(199, 120, 255, 0.4);
  --border-glow-soft: rgba(199, 120, 255, 0.22);
  --shadow-panel: rgba(139, 63, 251, 0.22);
  --shadow-panel-strong: rgba(139, 63, 251, 0.4);
  --glow-pink: rgba(255, 51, 201, 0.55);
  --glow-purple: rgba(139, 63, 251, 0.55);
  --glow-green: rgba(43, 240, 122, 0.55);
  --color-success-green: #2BF07A;
}

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

/* overflow-x:hidden lives on body ONLY, see BC8线路页/style.css for the
   rationale (keeps normal viewport scrolling instead of turning body into
   its own inner scroll container). */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

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

img {
  max-width: 100%;
}

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

/* ===== UTILITIES ===== */
.mw-1300 {
  max-width: 1290px;
}

.text-center {
  text-align: center;
}

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

.text-pink {
  color: var(--color-primary-pink);
}

.text-purple {
  color: var(--color-primary-purple);
}

.mt-30 {
  margin-top: 30px;
}

.cursor-pointer {
  cursor: pointer;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 3vw 56px;
  overflow: hidden;

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

/* Mobile/tablet uses the portrait background export, same swap technique
   as the reference project's .top-desktop / .top-mobile pairing. */
@media (max-width: 1024px) {
  .hero {
    background-image: url("./images/background-h5.png");
  }
}

.hero-logo {
  display: block;
  margin: 6px auto 30px;
  text-align: center;
}

.hero-logo img {
  height: clamp(64px, 8vw, 132px);
  width: auto;
}

/* Fallback CSS wordmark shown only if images/logo.png fails to load
   (see the onerror handler on .hero-logo img in the HTML). */
.hero-logo-text {
  display: inline-flex;
  align-items: baseline;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(48px, 7vw, 108px);
  line-height: 1;
  letter-spacing: -2px;
}

.hero-logo-text .lg-fv {
  background: linear-gradient(180deg, #ff8ef0 0%, #ff2fc8 45%, #b41fef 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px var(--glow-pink));
}

.hero-logo-text .lg-88 {
  background: linear-gradient(180deg, #e9ff7a 0%, #8be62c 55%, #4c9e12 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(139, 230, 44, 0.55));
}

/* ---- Link badges (left / right rails flanking the hero art) ---- */
.hero-links {
  width: 100%;
  max-width: 1520px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.hero-links-col {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 21%;
  max-width: 340px;
}

.hero-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  min-width: 0;
  padding: 0 8px;
}

.hero-character {
  width: 100%;
  max-width: 900px;
  line-height: 0;
}

.hero-character img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Placeholder box shown while images/hero-characters.png is missing, so the
   layout keeps its intended footprint instead of collapsing to 0 height. */
.hero-character-placeholder {
  width: 100%;
  aspect-ratio: 900 / 640;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 35%, rgba(199, 120, 255, 0.18), rgba(10, 3, 22, 0) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted-soft);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

/* Each link-item is a single pre-composited image (badge fused into the
   card shape — see images/hero-jili.png etc.) with the "LINK N / 999MS"
   text overlaid on the blank half of that image. .link-item--right is used
   for the right-hand column, where the badge sits on the right edge of the
   image instead of the left. */
.link-item {
  position: relative;
  display: block;
  cursor: pointer;
  transition: transform 0.25s ease, filter 0.25s ease;
}

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

.link-item-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Coordinates measured directly from the current source PNGs (badge +
   flame ring fused into a taller card shape): the flat, empty part of the
   card runs from ~57% to ~97% of the image width when the badge sits on
   the left, mirrored (~4% to ~44%) on the right, and is vertically
   centered around ~63% of the image height (the flame art adds more
   transparent padding above the card than below it). These are intrinsic
   to the artwork, not the viewport, so the same percentages hold at every
   breakpoint — no per-breakpoint override needed. */
.link-item-text {
  position: absolute;
  top: 59%;
  left: 61%;
  right: 4%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}

.link-item--right .link-item-text {
  left: 7%;
  right: 57%;
}

.link-card-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-white);
  font-weight: 800;
  font-size: clamp(11px, 1vw, 19px);
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.link-card-name-row i {
  color: var(--color-success-green);
  font-size: 1em;
  filter: drop-shadow(0 0 5px var(--glow-green));
}

.link-card-ms {
  color: var(--color-white);
  font-weight: 800;
  font-size: clamp(12px, 1.15vw, 23px);
  letter-spacing: 0.3px;
  transition: opacity 0.3s ease;
}

/* ---- App download bar ---- */
/* Negative margin pulls the bar up snug against .hero-character (and lets
   it overlap the art a bit) — the character artwork's own transparent
   padding already reads as visual space, so the .hero-center `gap` on top
   of that leaves it floating otherwise. One clamp()-based value replaces
   separate desktop/tablet/mobile overrides: it scales continuously with
   viewport width instead of jumping at breakpoints, from -35px on narrow
   phones (~375px) up to -150px at the 1920px desktop baseline. */
.app-bar {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 20px;
  padding: 18px 30px;
  margin-top:  clamp(-150px, calc(-6px - 7.5vw), -35px);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(30, 8, 58, 0.92) 0%, rgba(8, 2, 20, 0.95) 100%);
  border: 1px solid var(--border-glow);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 24px var(--shadow-panel);
  position: relative;
  z-index: 1;
}

/* 50/50 with .app-bar-main (equal flex:1 columns) made the QR a square
   half as wide as the whole bar — since .app-bar-main then stretches to
   match, the *whole bar* ballooned to nearly that width in height too.
   Back to a fixed width sized off the actual .app-btn img height instead,
   so the QR reads as proportional to the download buttons beside it
   rather than to the bar's width. */
.app-bar-qr {
  position: relative;
  flex-shrink: 0;
  width: clamp(100px, calc(60px + 5vw), 140px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Height is pinned to 100% of .app-bar-qr's own height (stretched via
   .app-bar's align-items:stretch), width auto from the image's own aspect
   ratio and capped by max-width so it can't push past this fixed-width
   column into the buttons next to it — the cap is what keeps this stable
   despite the height:100% (see the equal-width note above for what goes
   wrong once that cap is removed or made too generous). */
.app-bar-qr img {
  position: static;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.app-bar-qr-placeholder {
  position: static;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 10px;
  text-align: center;
  padding: 6px;
}

/* Caption removed at every breakpoint (desktop included) — the QR now
   just centers in .app-bar-qr on its own. Rule kept (rather than deleting
   the element/class) in case it's reused later. */
.app-bar-qr-label {
  display: none;
}

.app-bar-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  min-width: 0;
}

.app-bar-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--color-white);
  font-weight: 800;
  font-size: clamp(18px, 1.9vw, 26px);
  letter-spacing: 1px;
  text-shadow: 0 0 12px var(--glow-purple);
}

.app-bar-title .diamond {
  width: 8px;
  height: 8px;
  background: var(--color-primary-pink);
  transform: rotate(45deg);
  box-shadow: 0 0 8px var(--glow-pink);
  flex-shrink: 0;
}

/* Short dash flanking the diamonds: one before the first, one after the
   second — "— ◆ TẢI APP FV88 ◆ —". */
.app-bar-title .dash {
  width: 42px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary-pink));
  box-shadow: 0 0 6px var(--glow-pink);
  flex-shrink: 0;
}

.app-bar-title .dash:last-child {
  background: linear-gradient(90deg, var(--color-primary-pink), transparent);
}

.app-bar-buttons {
  display: flex;
  flex-direction: row;
  gap: 1px;
}

/* download-ios.png / download-android.png already bake in the icon, label
   and pill styling, so the button itself is just a plain, clickable frame. */
.app-btn {
  flex: 1;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.app-btn img {
  width: 82%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.app-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

/* ---- Social row (desktop pill buttons) ---- */
.social-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: nowrap;
}

/* hero-facebok.png / hero-telegram.png / hero-support.png are complete pill
   button graphics (icon + label + border baked in). */
.social-pill {
  display: block;
  min-width: 0;
  flex-shrink: 1;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.social-pill img {
  height: 72px;
  width: auto;
  max-width: 100%;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}

.social-pill:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
}

/* ---- Social grid (mobile circular badges) ---- */
.social-grid {
  display: none;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  gap: 10px;
}

/* btn-facebook.png / btn-support.png / btn-tele-chanel.png / btn-tele-chat.png
   are complete circular badges (flame ring + icon + label already baked
   in), so each social-badge is just a clickable image — no extra markup.
   Source art is only 98x151 — on tablet-width columns 1fr stretches well
   past that, so the badge is capped near its native size (rather than
   filling the grid cell) to stop it upscaling into a blurry mess; mobile
   columns are already narrower than the cap so this is a no-op there. */
.social-badge {
  display: block;
  width: 100%;
  max-width: 124px;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.social-badge img {
  width: 100%;
  height: auto;
  display: block;
}

.social-badge:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

/* ---- Hero fills exactly one screen on the 1920x1080 desktop baseline ----
   Content keeps its real, designed size (no shrinking-to-fit) — at the
   1920x1080 baseline that content's natural height is what fills this
   100vh box. On any other viewport the box still asks for a full 100vh,
   but since the content itself isn't rescaled, it may run taller (or
   leave empty space, shorter) than that box; the page simply scrolls to
   show the rest rather than squeezing everything smaller to force a fit. */
@media (min-width: 1025px) {
  .hero {
    min-height: 100vh;
    padding-top: 20px;
    padding-bottom: 32px;
  }

  .hero-logo {
    margin: 4px auto 16px;
  }

  .hero-links-col {
    gap: 10px;
  }

  /* Shrinks the badge itself (not the column's own box width) so the
     freed vertical space isn't fed back into .hero-center as extra width
     — .hero-character would otherwise grow to fill it and cancel out the
     height saved here. Right-column badges hug the right edge (mirror of
     the left column hugging its own edge) so both rails stay visually
     aligned to the outer edge of the row instead of drifting inward. */
  .hero-links-col .link-item {
    width: 76%;
  }

  .hero-links-col--right .link-item {
    margin-left: auto;
  }
}

/* ============================================================
   SEO SECTION
   ============================================================ */
.seo {
  background: var(--color-bg-page);
}

.seo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 56px 80px 80px;
}

.seo-block {
  width: 100%;
  max-width: 1290px;
  margin: 0 auto;
}

/* -- Section headers -- */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 26px;
}

.section-head--split {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.section-head--center {
  align-items: center;
  text-align: center;
}

.section-title {
  color: var(--color-white);
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.25;
}

.section-head--split .section-title {
  flex: 1;
  max-width: 620px;
}

.section-head--center .section-title {
  max-width: 760px;
}

.section-desc {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.75;
}

.section-head--split .section-desc {
  flex: 1;
  max-width: 560px;
  padding-top: 6px;
}

.section-head--center .section-desc {
  max-width: 780px;
}

/* -- Intro block -- */
.intro {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 48px;
  padding: 0 0 40px;
}

.intro-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.intro-eyebrow {
  color: var(--color-primary-pink);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.65;
}

.intro-title {
  background: linear-gradient(90deg, var(--color-primary-purple) 0%, var(--color-primary-pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.25;
}

.intro-desc {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.75;
}

.intro-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--border-glow);
  color: var(--color-white);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.intro-media {
  flex: 0.85;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-media img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.media-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 30%, rgba(199, 120, 255, 0.16), rgba(10, 3, 22, 0) 70%);
  border: 1px dashed var(--border-glow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted-soft);
  font-size: 12px;
  text-align: center;
  padding: 16px;
}

/* -- Panels / cards -- */
.panel {
  border-radius: 24px;
  background: linear-gradient(160deg, var(--color-bg-panel) 0%, #170430 100%);
  border: 1px solid var(--border-glow);
  box-shadow: 0 10px 30px var(--shadow-panel);
}

.panel-pad {
  padding: 36px;
}

.stack-gap {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Big single card with icon (PAGCOR / conclusion) */
.feature-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 36px;
  padding: 40px;
}

.feature-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feature-tag {
  color: var(--color-primary-pink);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.feature-title {
  color: var(--color-white);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.3;
}

.feature-text {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.8;
}

.feature-link {
  color: var(--color-primary-pink);
  font-weight: 700;
  font-size: 14px;
}

.feature-icon {
  flex-shrink: 0;
  width: 220px;
  height: 220px;
  object-fit: contain;
}

.feature-icon-placeholder {
  flex-shrink: 0;
  width: 220px;
  height: 220px;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 40%, rgba(199, 120, 255, 0.18), rgba(10, 3, 22, 0) 72%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted-soft);
  font-size: 11px;
  text-align: center;
  padding: 10px;
}

.feature-card--reverse {
  flex-direction: row-reverse;
}

/* Two-up stat cards (20% / 3 PHÚT) */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.stat-card {
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat-number {
  font-weight: 900;
  font-size: 44px;
  line-height: 1;
}

.stat-number--pink {
  color: var(--color-primary-pink);
}

.stat-number--purple {
  color: var(--color-primary-purple);
}

.stat-title {
  color: var(--color-white);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.35;
}

.stat-text {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.75;
}

/* -- Game category triptych banner -- */
.category-banner {
  position: relative;
  border-radius: 45px;
  overflow: hidden;
  border: 1px solid var(--border-glow);
}

/* Matches the source photo's own ratio (1600x439) so object-fit:cover has
   nothing to crop — the previous flatter 1920/350 ratio was chopping the
   top off the player and shark/fish scenes. */
.category-banner-img {
  width: 100%;
  aspect-ratio: 1600 / 439;
  object-fit: cover;
  display: block;
}

.category-banner-placeholder {
  width: 100%;
  aspect-ratio: 1600 / 439;
  background: linear-gradient(90deg, #2a0a4d, #150632, #0a1a3d);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted-soft);
  font-size: 12px;
}

/* Floating pill labels sitting on the lower edge of the artwork (not a
   solid bar below it) — see the reference crop: three translucent rounded
   pills with gaps between them, image visible through the gaps. */
.category-tabs {
  position: absolute;
  left: clamp(10px, 2vw, 20px);
  right: clamp(10px, 2vw, 20px);
  bottom: clamp(8px, 1.8vw, 18px);
  display: flex;
  flex-direction: row;
  gap: clamp(6px, 1.2vw, 14px);
}

.category-tab {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: clamp(8px, 1.4vw, 16px) 6px;
  background: rgba(10, 4, 26, 0.62);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: clamp(8px, 1.2vw, 14px);
  color: var(--color-white);
  font-weight: 800;
  font-size: clamp(10px, 1.1vw, 16px);
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sport card with circular stat */
.sport-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 40px;
}

.sport-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stat-circle {
  flex-shrink: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #c04dff 0%, #6a12c9 60%, #3a0a86 100%);
  box-shadow: 0 0 40px var(--shadow-panel-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

.stat-circle-number {
  font-weight: 900;
  font-size: 46px;
  line-height: 1;
}

.stat-circle-label {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  margin-top: 6px;
}

/* Two-up plain text cards (Casino / Bắn cá) */
.duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.duo-card {
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* -- Promotions -- */
.promo-layout {
  display: flex;
  flex-direction: row;
  gap: 22px;
  align-items: stretch;
}

/* No longer a .panel — plain frame, no background/border/shadow, just a
   clipping box. The image fills it completely: `aspect-ratio` gives the
   box its own intrinsic height (matching the source image, 648x879) so it
   never collapses when nothing else drives its size (e.g. the mobile
   stacked layout), and the image is absolutely positioned with
   object-fit:cover so it fills the box edge-to-edge in any layout —
   including the desktop row, where align-items:stretch on .promo-layout
   grows the box taller than its aspect-ratio to match .promo-side; an
   in-flow img can't do that without the sizing back-reference problem
   noted before (the same trap the QR code in .app-bar-qr hit), but an
   absolutely positioned one is out of flow, so it just covers whatever
   height the box ends up with. */
.promo-media {
  flex: 0 0 40%;
  position: relative;
  aspect-ratio: 648 / 879;
  border-radius: 24px;
  overflow: hidden;
}

.promo-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.promo-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.promo-card {
  flex: 1;
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

/* -- Steps -- */
.step-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 40px;
  padding: 40px;
}

.step-number {
  flex-shrink: 0;
  font-weight: 900;
  font-size: 56px;
  line-height: 1;
}

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

.step-media {
  flex-shrink: 0;
  width: 260px;
  height: 220px;
  object-fit: contain;
}

.step-media-placeholder {
  flex-shrink: 0;
  width: 260px;
  height: 220px;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 40%, rgba(199, 120, 255, 0.16), rgba(10, 3, 22, 0) 72%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted-soft);
  font-size: 11px;
  text-align: center;
  padding: 10px;
}

/* -- Conclusion -- */
.conclusion-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 36px;
  padding: 44px;
}

.conclusion-icon {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  object-fit: contain;
}

.conclusion-icon-placeholder {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 210, 90, 0.18), rgba(10, 3, 22, 0) 72%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted-soft);
  font-size: 11px;
  text-align: center;
  padding: 10px;
}

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

.conclusion-title {
  color: var(--color-white);
  font-weight: 800;
  font-size: 30px;
}

.conclusion-text {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.8;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--color-footer-bg);
  padding: 44px 20px 30px;
}

/* Flexbox (not a fixed-column grid) so each logo sits only as far from
   its neighbor as `gap` says — a grid track sized to fill 1/8 of the row
   leaves a big empty margin around every narrow logo and reads as
   scattered. Flex-wrap packs them tight, keyed off natural image width,
   the same way the reference project's footer does. */
.footer-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 32px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  transition: transform 0.25s ease;
}

.footer-logo img {
  height: 34px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

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

.footer-support {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
}

.footer-support-label {
  color: var(--color-white);
  font-size: 15px;
  opacity: 0.85;
}

.footer-support-row {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-support-row img {
  height: 38px;
  width: auto;
  object-fit: contain;
}

.footer-copyright {
  color: var(--color-white);
  font-size: clamp(11px, 2vw, 15px);
  text-align: center;
  margin-top: 30px;
  opacity: 0.9;
}

.footer-mobile-hide {
  display: flex;
}

/* ============================================================
   RESPONSIVE — breakpoints follow the reference project
   (BC8线路页/style.css): 1024px tablet/mobile switch,
   768–1024px tablet refinements, <=767px mobile, <=320px small phones.
   ============================================================ */
@media (max-width: 1024px) {
  .hero {
    padding: 24px 4vw 40px;
  }

  /* Two link columns side by side on row 1 (order:1/2), the character +
     app-bar + social block spans full width on row 2 (order:3) — matches
     mobile-main.png: logo, 2x4 link grid, character, app-bar, socials. */
  .hero-links {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 10px;
    margin-top: 10px;
  }

  .hero-logo {
    margin: 6px auto 8px;
  }

  .hero-links-col {
    order: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    width: calc(50% - 5px);
    max-width: none;
    gap: 1px;
  }

  .hero-links-col--right {
    order: 2;
  }

  /* Smaller than the column's own width — centered — so the badge/card
     art doesn't dominate the row at tablet/mobile sizes. */
  .hero-links-col .link-item {
    width: 86%;
    margin: 0 auto;
  }

  .link-card-name-row {
    font-size: 17px;
  }

  .link-card-ms {
    font-size: 19px;
  }

  .hero-center {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    margin-top: 8px;
  }

  .app-bar {
    padding: 14px 18px;
    flex-direction: row;
  }

  .app-bar-qr {
    width: clamp(130px, calc(30px + 9.5vw), 130px);
  }

  .app-bar-title {
    font-size: 21px;
  }

  .app-bar-buttons {
    flex-direction: row;
    gap: 1px;
  }

  .app-btn img {
    width: 90%;
  }

  .social-row {
    display: none;
  }

  .social-grid {
    display: grid;
  }

  .seo-container {
    padding: 32px 4vw 56px;
  }

  .intro {
    flex-direction: column;
    gap: 22px;
  }

  .section-head--split {
    flex-direction: column;
    gap: 14px;
  }

  .section-head--split .section-title,
  .section-head--split .section-desc {
    max-width: none;
  }

  .feature-card,
  .feature-card--reverse {
    flex-direction: column;
    text-align: center;
  }

  .feature-card-body {
    align-items: center;
  }

  .stat-grid,
  .duo-grid {
    grid-template-columns: 1fr;
  }

  .sport-card {
    flex-direction: column;
    text-align: center;
  }

  .sport-card-body {
    align-items: center;
  }

  .promo-layout {
    flex-direction: column;
  }

  /* Stacked layout: flex-basis is the item's HEIGHT in column direction,
     so the 40% from the row layout no longer means anything useful here —
     reset to full width. Height still comes from aspect-ratio (set on the
     base rule), so the box keeps a sensible shape and the cover'd image
     fills it edge-to-edge. */
  .promo-media {
    flex-basis: auto;
    width: 100%;
  }

  .step-card {
    flex-direction: column;
    text-align: center;
  }

  .step-body {
    align-items: center;
  }

  .step-card:nth-child(even) {
    flex-direction: column;
  }

  .conclusion-card {
    flex-direction: column;
    text-align: center;
  }

  .conclusion-body {
    align-items: center;
  }

  .footer-content {
    gap: 18px 24px;
  }

  .footer-mobile-hide {
    display: none;
  }
}

@media (max-width: 767px) {
  .hero-logo-text {
    font-size: clamp(40px, 15vw, 64px);
  }

  /* Phones are narrow enough that the 86%-wide item from the tablet rule
     leaves too little room in the ~35%-wide text zone for "LINK N" at a
     bigger font without wrapping — ease the shrink back up a bit here. */
  .hero-links-col .link-item {
    width: 98%;
  }

  /* Same row layout as desktop/tablet (QR left, title+buttons right) —
     just scaled down. The QR box shrinks a bit to leave the two download
     buttons enough width to stay legible. */
  .app-bar {
    gap: 12px;
    padding: 12px 14px;
    margin-top:  clamp(-150px, calc(-6px - 7.5vw), -75px);
  }

  .app-bar-qr {
    width: clamp(55px, calc(25px + 13vw), 100px);
  }

  .app-bar-title {
    gap: 8px;
    font-size: 19px;
    white-space: nowrap;
  }

  .app-bar-title .dash {
    width: 18px;
  }

  .link-card-name-row {
    font-size: 13px;
  }

  .link-card-ms {
    font-size: 16px;
  }

  .panel-pad,
  .feature-card,
  .feature-card--reverse,
  .sport-card,
  .step-card,
  .conclusion-card {
    padding: 22px;
  }

  .stat-card,
  .duo-card,
  .promo-card {
    padding: 22px;
  }

  .feature-icon,
  .feature-icon-placeholder {
    width: 160px;
    height: 160px;
  }

  .step-media,
  .step-media-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 260 / 220;
  }

  .stat-circle {
    width: 150px;
    height: 150px;
  }

  .stat-circle-number {
    font-size: 34px;
  }

  .section-title {
    font-size: 24px;
  }

  .intro-title {
    font-size: 26px;
  }

  .app-bar-buttons {
    gap: 6px;
  }

  .app-btn img {
    width: 94%;
  }

  .footer-content {
    gap: 14px 18px;
  }

  .footer-logo img {
    height: 28px;
  }
}

@media (max-width: 320px) {
  .hero-links-col {
    gap: 10px;
  }

  .app-bar-qr {
    width: 46px;
  }

  .app-bar-title {
    gap: 5px;
    font-size: 17px;
  }

  .app-bar-title .dash {
    width: 8px;
  }
}

@media (width: 1024px) {
  .app-bar-qr {
    width: clamp(160px, calc(30px + 9.5vw), 130px);
  }
}