/* ============================================================
   taijun88 — Dark Luxury APK Promotion Theme
   Prefix: mq  |  Naming: BEM  |  Layout: flex-first
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Lexend:wght@400;500;600;700;800&display=swap');

/* ────────────────────────────────────────────────────────────
   1. CUSTOM PROPERTIES
   ──────────────────────────────────────────────────────────── */
:root {
  /* brand palette */
  --mq-accent:    #52e5b4;
  --mq-bg:        #141f1c;
  --mq-ink:       #f3f7f6;
  --mq-muted:     #a3c8be;
  --mq-surface:   #1e342e;
  --mq-btn-ink:   #0e1a16;
  --mq-line:      #2a4a40;
  --mq-radius:    10px;

  /* button gradients */
  --mq-grad-dl:   linear-gradient(135deg, #b77de3 0%, #baa1e8 100%);
  --mq-grad-login: linear-gradient(135deg, #3cd77f 0%, #68e552 100%);
  --mq-grad-reg:  linear-gradient(135deg, #db5771 0%, #d75692 100%);

  /* semi-transparent brand tints via color-mix */
  --mq-accent-5:   color-mix(in srgb, var(--mq-accent) 5%, transparent);
  --mq-accent-8:   color-mix(in srgb, var(--mq-accent) 8%, transparent);
  --mq-accent-10:  color-mix(in srgb, var(--mq-accent) 10%, transparent);
  --mq-accent-14:  color-mix(in srgb, var(--mq-accent) 14%, transparent);
  --mq-accent-18:  color-mix(in srgb, var(--mq-accent) 18%, transparent);
  --mq-accent-22:  color-mix(in srgb, var(--mq-accent) 22%, transparent);
  --mq-accent-30:  color-mix(in srgb, var(--mq-accent) 30%, transparent);
  --mq-accent-40:  color-mix(in srgb, var(--mq-accent) 40%, transparent);

  /* typography */
  --mq-ff-heading: 'Lexend', sans-serif;
  --mq-ff-body:    'Roboto', sans-serif;
  --mq-fs-hero:    clamp(2.2rem, 5vw + 1rem, 4rem);
  --mq-fs-h2:      clamp(1.5rem, 3vw + .5rem, 2.4rem);
  --mq-fs-h3:      clamp(1.15rem, 2vw + .3rem, 1.55rem);
  --mq-fs-body:    clamp(.93rem, 1vw + .4rem, 1.06rem);
  --mq-fs-small:   clamp(.78rem, .8vw + .3rem, .88rem);
  --mq-fs-badge:   .69rem;

  /* layout */
  --mq-max-w: 1200px;
  --mq-gutter: clamp(1rem, 3vw, 2rem);

  /* transitions */
  --mq-ease: cubic-bezier(.4, 0, .2, 1);
  --mq-t-fast: .18s var(--mq-ease);
  --mq-t-mid:  .25s var(--mq-ease);
  --mq-t-slow: .35s var(--mq-ease);
}

/* ────────────────────────────────���───────────────────────────
   2. RESET & BASE
   ──────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--mq-ff-body);
  font-size: var(--mq-fs-body);
  line-height: 1.65;
  color: var(--mq-ink);
  /* GRADIENT #1 #2 #3 — multi-layer radial body bg */
  background:
    radial-gradient(1100px 560px at 82% -12%, color-mix(in srgb, var(--mq-accent) 13%, transparent), transparent 60%),
    radial-gradient(880px 520px at -8% 18%, color-mix(in srgb, var(--mq-accent) 9%, transparent), transparent 55%),
    radial-gradient(600px 600px at 50% 100%, color-mix(in srgb, var(--mq-accent) 6%, transparent), transparent 70%),
    var(--mq-bg);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--mq-accent); text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: transparent; font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mq-ff-heading);
  font-weight: 700;
  line-height: 1.25;
  color: var(--mq-ink);
}

/* ────────────────────────────────────────────────────────────
   3. ACCESSIBILITY & SKIP-LINK
   ──────────────────────────────────────────────────────────── */
.mq-skip {
  position: absolute;
  left: -999rem;
  top: 0;
  z-index: 9999;
  padding: .6rem 1.2rem;
  background: var(--mq-accent);
  color: var(--mq-btn-ink);
  font-weight: 700;
  border-radius: 0 0 var(--mq-radius) var(--mq-radius);
  font-size: .95rem;
}

.mq-skip:focus {
  left: 50%;
  transform: translateX(-50%);
}

:focus-visible {
  outline: 2px solid var(--mq-accent);
  outline-offset: 3px;
}

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

/* ────────────────────────────────────────────────────────────
   4. KEYFRAME ANIMATIONS (5+ groups)
   ──────────────────────────────────────────────────────────── */

/* ANIM 1 — rise: entrance slide-up + fade-in */
@keyframes mq-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ANIM 2 — pulse: CTA breathing glow */
@keyframes mq-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mq-accent) 40%, transparent); }
  50%      { box-shadow: 0 0 22px 6px color-mix(in srgb, var(--mq-accent) 22%, transparent); }
}

/* ANIM 3 — bob: floating micro-motion */
@keyframes mq-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* ANIM 4 — shimmer: stripe / loading sweep */
@keyframes mq-shimmer {
  from { background-position: -400px 0; }
  to   { background-position: 400px 0; }
}

/* ANIM 5 — drip: slow background texture scroll */
@keyframes mq-drip {
  from { background-position: 0 0; }
  to   { background-position: 0 200px; }
}

/* ANIM 6 — cascade hero entrance (stagger-ready via delay) */
@keyframes mq-cascade {
  0%   { opacity: 0; transform: translateY(24px) scale(.97); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ANIM 7 — spin: loading spinner */
@keyframes mq-spin {
  to { transform: rotate(360deg); }
}

/* ────────────────────────────────────────────────────────────
   5. UTILITY CLASSES
   ──────────────────────────────────────────────────────────── */
.mq-container {
  width: 100%;
  max-width: var(--mq-max-w);
  margin-inline: auto;
  padding-inline: var(--mq-gutter);
}

.mq-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.mq-rise-in {
  animation: mq-rise .5s var(--mq-ease) both;
}

/* stagger helpers for cascade hero */
.mq-cascade-1 { animation: mq-cascade .6s var(--mq-ease) .05s both; }
.mq-cascade-2 { animation: mq-cascade .6s var(--mq-ease) .15s both; }
.mq-cascade-3 { animation: mq-cascade .6s var(--mq-ease) .25s both; }
.mq-cascade-4 { animation: mq-cascade .6s var(--mq-ease) .35s both; }
.mq-cascade-5 { animation: mq-cascade .6s var(--mq-ease) .45s both; }

/* gradient text utility — GRADIENT #4 */
.mq-grad-text {
  background: linear-gradient(180deg, #fff 0%, var(--mq-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ────────────────────────────────────────────────────────────
   6. HEADER — sticky
   ──────────────────────────────────────────────────────────── */
.mq-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  /* GRADIENT #5 — header background */
  background:
    linear-gradient(180deg, var(--mq-bg) 0%, color-mix(in srgb, var(--mq-bg) 92%, transparent) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* GRADIENT #6 — header bottom edge line */
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent 0%, var(--mq-accent) 50%, transparent 100%) 1;
  /* SHADOW 1 — sticky header shadow */
  box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
  transition: box-shadow var(--mq-t-mid);
}

.mq-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--mq-max-w);
  margin-inline: auto;
  padding: .75rem var(--mq-gutter);
  gap: 1rem;
}

.mq-logo {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--mq-ff-heading);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--mq-ink);
  text-decoration: none;
  transition: opacity var(--mq-t-fast);
}

/* HOVER 1 */
.mq-logo:hover {
  opacity: .85;
}

.mq-logo img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  /* SHADOW 2 — logo icon shadow */
  box-shadow: 0 2px 10px color-mix(in srgb, var(--mq-accent) 30%, rgba(0,0,0,.4));
}

/* ── Navigation ── */
.mq-nav {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.mq-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: var(--mq-radius);
  transition: background var(--mq-t-fast);
}

.mq-nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--mq-ink);
  border-radius: 2px;
  transition: transform var(--mq-t-fast), opacity var(--mq-t-fast);
}

/* HOVER 2 */
.mq-nav-toggle:hover {
  background: var(--mq-accent-14);
}

.mq-nav-menu {
  display: flex;
  align-items: center;
  gap: .15rem;
}

.mq-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .8rem;
  border-radius: var(--mq-radius);
  font-size: var(--mq-fs-small);
  font-weight: 500;
  color: var(--mq-muted);
  text-decoration: none;
  transition: color var(--mq-t-fast), background var(--mq-t-fast), box-shadow var(--mq-t-fast);
}

/* HOVER 3 */
.mq-nav-link:hover {
  color: var(--mq-ink);
  background: var(--mq-accent-14);
}

/* active nav */
.mq-nav-link--active {
  color: var(--mq-accent);
  /* SHADOW 3 — active nav underline */
  box-shadow: inset 0 -2px 0 var(--mq-accent);
}

/* HOVER 4 */
.mq-nav-link--active:hover {
  color: var(--mq-accent);
  background: var(--mq-accent-10);
}

/* ────────────────────────────────────────────────────────────
   7. BUTTONS (GLOBAL)
   ─────────────────────────────────────────��────────────────── */
.mq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.6rem;
  border-radius: var(--mq-radius);
  font-family: var(--mq-ff-heading);
  font-weight: 600;
  font-size: var(--mq-fs-small);
  color: var(--mq-btn-ink);
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--mq-t-fast), box-shadow var(--mq-t-mid), filter var(--mq-t-fast);
  /* SHADOW 4 — generic btn shadow */
  box-shadow: 0 6px 16px rgba(0, 0, 0, .32);
}

/* HOVER 5 */
.mq-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  /* SHADOW 5 — generic btn hover shadow */
  box-shadow: 0 9px 20px color-mix(in srgb, var(--mq-accent) 22%, rgba(0, 0, 0, .32));
}

.mq-btn:active {
  transform: translateY(0);
}

/* download — GRADIENT #7 */
.mq-btn--dl {
  background: var(--mq-grad-dl);
  animation: mq-pulse 2.8s ease-in-out infinite;
}

/* HOVER 6 */
.mq-btn--dl:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  /* SHADOW 6 */
  box-shadow: 0 10px 24px color-mix(in srgb, #b77de3 25%, rgba(0,0,0,.35));
}

/* login — GRADIENT #8 */
.mq-btn--login {
  background: var(--mq-grad-login);
}

/* HOVER 7 */
.mq-btn--login:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  /* SHADOW 7 */
  box-shadow: 0 10px 24px color-mix(in srgb, #3cd77f 25%, rgba(0,0,0,.35));
}

/* register — GRADIENT #9 */
.mq-btn--reg {
  background: var(--mq-grad-reg);
}

/* HOVER 8 */
.mq-btn--reg:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  /* SHADOW 8 */
  box-shadow: 0 10px 24px color-mix(in srgb, #db5771 25%, rgba(0,0,0,.35));
}

/* ghost variant */
.mq-btn--ghost {
  background: transparent;
  border: 1px solid var(--mq-line);
  color: var(--mq-accent);
  box-shadow: none;
}

/* HOVER 9 */
.mq-btn--ghost:hover {
  background: var(--mq-accent-10);
  border-color: var(--mq-accent);
  transform: translateY(-2px);
  /* SHADOW 9 */
  box-shadow: 0 6px 18px color-mix(in srgb, var(--mq-accent) 15%, transparent);
}

/* small btn */
.mq-btn--sm {
  padding: .45rem 1rem;
  font-size: var(--mq-fs-badge);
}

/* ────────────────────────────────────────────────────────────
   8. HERO SECTION
   ──────────────────────────────────────────────────────────── */
.mq-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* GRADIENT #10 #11 — hero multi-layer bg */
  background:
    radial-gradient(900px 500px at 70% 20%, color-mix(in srgb, var(--mq-accent) 16%, transparent), transparent 60%),
    radial-gradient(600px 400px at 20% 80%, color-mix(in srgb, #b77de3 10%, transparent), transparent 55%),
    var(--mq-bg);
  padding: 4rem var(--mq-gutter) 3rem;
}

/* rain/drip particle overlay */
.mq-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* GRADIENT #12 — radial glow particle simulation */
  background:
    radial-gradient(2px 2px at 15% 30%, color-mix(in srgb, var(--mq-accent) 40%, transparent), transparent),
    radial-gradient(2px 2px at 45% 60%, color-mix(in srgb, var(--mq-accent) 30%, transparent), transparent),
    radial-gradient(3px 3px at 75% 25%, color-mix(in srgb, #b77de3 35%, transparent), transparent),
    radial-gradient(2px 2px at 88% 70%, color-mix(in srgb, var(--mq-accent) 25%, transparent), transparent),
    radial-gradient(2px 2px at 30% 85%, color-mix(in srgb, #db5771 20%, transparent), transparent);
  animation: mq-drip 18s linear infinite;
}

.mq-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 780px;
  gap: 1.2rem;
}

/* GRADIENT #13 — hero title gradient text */
.mq-hero__title {
  font-size: var(--mq-fs-hero);
  font-weight: 800;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #ffffff 10%, var(--mq-accent) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mq-hero__sub {
  font-size: clamp(1rem, 1.5vw + .4rem, 1.25rem);
  color: var(--mq-muted);
  max-width: 560px;
  line-height: 1.7;
}

.mq-hero__perks {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  margin-top: .5rem;
}

.mq-hero__perks span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  font-size: var(--mq-fs-badge);
  font-family: var(--mq-ff-heading);
  font-weight: 500;
  color: var(--mq-accent);
  background: var(--mq-accent-10);
  border: 1px solid var(--mq-accent-22);
}

.mq-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: center;
  margin-top: .8rem;
}

/* ── Carousel ── */
.mq-carousel {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin-top: 2rem;
  border-radius: calc(var(--mq-radius) + 4px);
  overflow: hidden;
  /* SHADOW 10 — carousel deep shadow */
  box-shadow: 0 18px 45px rgba(0, 0, 0, .42);
}

.mq-carousel__slide {
  position: relative;
  display: none;
  width: 100%;
}

.mq-carousel__slide--active {
  display: block;
  animation: mq-rise .4s var(--mq-ease) both;
}

.mq-carousel__slide img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* GRADIENT #14 — carousel image overlay */
.mq-carousel__slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--mq-bg) 0%, transparent 50%);
  pointer-events: none;
}

.mq-carousel__dots {
  display: flex;
  gap: .5rem;
  justify-content: center;
  padding: .8rem 0;
  position: absolute;
  bottom: .5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.mq-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mq-ink) 30%, transparent);
  border: none;
  cursor: pointer;
  transition: background var(--mq-t-fast), transform var(--mq-t-fast);
}

/* HOVER 10 */
.mq-carousel__dot:hover {
  background: color-mix(in srgb, var(--mq-ink) 60%, transparent);
  transform: scale(1.2);
}

.mq-carousel__dot--active {
  background: var(--mq-accent);
  transform: scale(1.15);
}

/* ────────────────────────────────────────────────────────────
   9. SECTION — generic layout
   ──────────────────────────────────────────────────────────── */
.mq-section {
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--mq-gutter);
  position: relative;
}

/* GRADIENT #15 — alternating section tint */
.mq-section--alt {
  background: linear-gradient(180deg, color-mix(in srgb, var(--mq-surface) 55%, transparent) 0%, transparent 100%);
}

/* GRADIENT #16 — section decorative top line */
.mq-section__divider {
  height: 1px;
  border: none;
  background: linear-gradient(90deg, transparent 0%, var(--mq-accent) 50%, transparent 100%);
  margin-bottom: 2.5rem;
}

/* GRADIENT #17 — section title gradient text */
.mq-section__title {
  font-size: var(--mq-fs-h2);
  font-weight: 700;
  text-align: center;
  margin-bottom: 2rem;
  background: linear-gradient(180deg, #fff 0%, var(--mq-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mq-section__inner {
  max-width: var(--mq-max-w);
  margin-inline: auto;
}

/* ─────────────────────────────────���──────────────────────────
   10. CARDS — generic
   ──────────────────────────────────────────────────────────── */
.mq-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--mq-radius);
  border: 1px solid var(--mq-line);
  background: var(--mq-surface);
  overflow: hidden;
  /* SHADOW 11 — card default shadow */
  box-shadow: 0 6px 16px rgba(0, 0, 0, .32);
  transition: transform var(--mq-t-mid), box-shadow var(--mq-t-mid), border-color var(--mq-t-mid);
}

/* HOVER 11 */
.mq-card:hover {
  transform: translateY(-4px);
  border-color: var(--mq-accent-30);
  /* SHADOW 12 — card hover shadow */
  box-shadow: 0 14px 30px color-mix(in srgb, var(--mq-accent) 15%, transparent);
}

.mq-card__img {
  position: relative;
  overflow: hidden;
}

.mq-card__img img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  transition: transform var(--mq-t-slow), filter var(--mq-t-slow);
}

/* HOVER 12 */
.mq-card:hover .mq-card__img img {
  transform: scale(1.03);
  filter: brightness(1.08);
}

/* GRADIENT #18 — card image overlay mask */
.mq-card__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--mq-surface) 0%, transparent 55%);
  pointer-events: none;
}

.mq-card__body {
  padding: 1.1rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}

.mq-card__title {
  font-size: var(--mq-fs-h3);
  font-family: var(--mq-ff-heading);
  font-weight: 600;
  color: var(--mq-ink);
}

/* HOVER 13 */
.mq-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--mq-t-fast);
}
.mq-card__title a:hover {
  color: var(--mq-accent);
}

.mq-card__desc {
  font-size: var(--mq-fs-small);
  color: var(--mq-muted);
  line-height: 1.65;
}

.mq-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1.2rem;
  border-top: 1px solid var(--mq-line);
  font-size: var(--mq-fs-badge);
  color: var(--mq-muted);
}

/* ── Game Card ── */
.mq-game-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--mq-radius);
  border: 1px solid var(--mq-line);
  background: var(--mq-surface);
  overflow: hidden;
  text-align: center;
  /* SHADOW 13 — game card shadow */
  box-shadow: 0 6px 16px rgba(0, 0, 0, .32);
  transition: transform var(--mq-t-mid), box-shadow var(--mq-t-mid), border-color var(--mq-t-mid);
}

/* HOVER 14 */
.mq-game-card:hover {
  transform: translateY(-3px);
  border-color: var(--mq-accent-30);
  /* SHADOW 14 — game card hover */
  box-shadow: 0 12px 28px color-mix(in srgb, var(--mq-accent) 18%, transparent);
}

.mq-game-card__img {
  position: relative;
  overflow: hidden;
}

.mq-game-card__img img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform var(--mq-t-slow);
}

/* HOVER 15 */
.mq-game-card:hover .mq-game-card__img img {
  transform: scale(1.05);
}

.mq-game-card__info {
  padding: .9rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.mq-game-card__name {
  font-family: var(--mq-ff-heading);
  font-size: var(--mq-fs-body);
  font-weight: 600;
}

.mq-game-card__meta {
  font-size: var(--mq-fs-badge);
  color: var(--mq-muted);
}

/* ────────────────────────────────────────────────────────────
   11. CARD GRID LAYOUTS
   ──────────────────────────────────────────────────────────── */
.mq-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .mq-grid { grid-template-columns: repeat(2, 1fr); }
  .mq-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .mq-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .mq-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ────────────────────────────────────────────────────────────
   12. MODULE: COMPARE (comparison table)
   ──────────────────────────────────────────────────────────── */
.mq-compare {
  max-width: var(--mq-max-w);
  margin-inline: auto;
}

.mq-compare__wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--mq-radius);
  border: 1px solid var(--mq-line);
  /* SHADOW 15 — compare table shadow */
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}

.mq-compare__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
  font-size: var(--mq-fs-small);
}

.mq-compare__table th,
.mq-compare__table td {
  padding: .8rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--mq-line);
}

.mq-compare__table th {
  font-family: var(--mq-ff-heading);
  font-weight: 600;
  color: var(--mq-accent);
  /* GRADIENT #19 — table header bg */
  background: linear-gradient(135deg, color-mix(in srgb, var(--mq-accent) 8%, var(--mq-surface)), var(--mq-surface));
  position: sticky;
  top: 0;
  z-index: 2;
}

.mq-compare__table td {
  background: var(--mq-surface);
}

/* alternating row — GRADIENT #20 */
.mq-compare__table tr:nth-of-type(even) td {
  background: linear-gradient(90deg, color-mix(in srgb, var(--mq-accent) 4%, var(--mq-surface)), var(--mq-surface));
}

/* HOVER 16 */
.mq-compare__table tr:hover td {
  background: var(--mq-accent-8);
}

.mq-compare__check {
  color: var(--mq-accent);
  font-weight: 700;
}

.mq-compare__cross {
  color: var(--mq-muted);
  opacity: .5;
}

/* ────────────────────────────────────────────────────────────
   13. MODULE: CODE TABS
   ──────────────────────────────────────────────────────────── */
.mq-code-tabs {
  max-width: 720px;
  margin-inline: auto;
  border-radius: var(--mq-radius);
  border: 1px solid var(--mq-line);
  overflow: hidden;
  /* SHADOW 16 — code tabs container shadow */
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}

.mq-code-tabs__nav {
  display: flex;
  background: color-mix(in srgb, var(--mq-surface) 80%, var(--mq-bg));
  border-bottom: 1px solid var(--mq-line);
  overflow-x: auto;
}

.mq-code-tab {
  padding: .6rem 1.2rem;
  font-size: var(--mq-fs-badge);
  font-family: var(--mq-ff-heading);
  font-weight: 500;
  color: var(--mq-muted);
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--mq-t-fast), border-color var(--mq-t-fast), background var(--mq-t-fast);
  white-space: nowrap;
}

/* HOVER 17 */
.mq-code-tab:hover {
  color: var(--mq-ink);
  background: var(--mq-accent-8);
}

.mq-code-tab--active {
  color: var(--mq-accent);
  border-bottom-color: var(--mq-accent);
}

.mq-code-panel {
  display: none;
  position: relative;
}

.mq-code-panel--active {
  display: block;
}

.mq-code-panel pre {
  margin: 0;
  padding: 1.2rem 1.4rem;
  font-family: 'Roboto Mono', 'SF Mono', monospace;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--mq-muted);
  background: var(--mq-bg);
  overflow-x: auto;
  tab-size: 2;
}

.mq-copy-btn {
  position: absolute;
  top: .6rem;
  right: .6rem;
  padding: .3rem .7rem;
  font-size: var(--mq-fs-badge);
  font-family: var(--mq-ff-heading);
  border-radius: 6px;
  color: var(--mq-muted);
  background: var(--mq-accent-10);
  border: 1px solid var(--mq-line);
  cursor: pointer;
  transition: background var(--mq-t-fast), color var(--mq-t-fast);
}

/* HOVER 18 */
.mq-copy-btn:hover {
  background: var(--mq-accent-22);
  color: var(--mq-accent);
}

/* ────────────────────────────────────────────────────────────
   14. MODULE: EDITOR PICKS
   ──────────────────────────────────────────────────────────── */
.mq-editor-picks .mq-card {
  position: relative;
}

.mq-editor-picks .mq-card::before {
  content: '⭐ Biên tập viên chọn';
  position: absolute;
  top: .8rem;
  left: .8rem;
  z-index: 3;
  padding: .25rem .7rem;
  font-size: var(--mq-fs-badge);
  font-family: var(--mq-ff-heading);
  font-weight: 600;
  color: var(--mq-btn-ink);
  /* GRADIENT #21 — editor pick badge */
  background: linear-gradient(135deg, var(--mq-accent), #3cd77f);
  border-radius: 999px;
}

/* ────────────────────────────────────────────────────────────
   15. MODULE: SCREENSHOTS / GALLERY
   ──────────────────────────────────────────────────────────── */
.mq-screenshots {
  max-width: var(--mq-max-w);
  margin-inline: auto;
}

.mq-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.mq-gallery__item {
  position: relative;
  border-radius: var(--mq-radius);
  overflow: hidden;
  border: 1px solid var(--mq-line);
  cursor: pointer;
  /* SHADOW 17 — gallery item shadow */
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  transition: transform var(--mq-t-mid), box-shadow var(--mq-t-mid);
}

/* HOVER 19 */
.mq-gallery__item:hover {
  transform: translateY(-3px);
  /* SHADOW 18 — gallery hover */
  box-shadow: 0 10px 26px color-mix(in srgb, var(--mq-accent) 14%, rgba(0,0,0,.35));
}

.mq-gallery__item img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform var(--mq-t-slow), filter var(--mq-t-slow);
}

/* HOVER 20 */
.mq-gallery__item:hover img {
  transform: scale(1.04);
  filter: brightness(1.1);
}

/* GRADIENT #22 — gallery overlay */
.mq-gallery__item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 100%);
  pointer-events: none;
}

.mq-gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: .6rem .8rem;
  font-size: var(--mq-fs-badge);
  font-weight: 500;
  color: var(--mq-ink);
}

/* ────────────────────────────────────────────────────────────
   16. MODULE: FORUM
   ──────────────────────────────────────────────────────────── */
.mq-forum {
  max-width: var(--mq-max-w);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.mq-forum__post {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: var(--mq-radius);
  border: 1px solid var(--mq-line);
  background: var(--mq-surface);
  transition: background var(--mq-t-fast), border-color var(--mq-t-fast), box-shadow var(--mq-t-mid);
}

/* HOVER 21 */
.mq-forum__post:hover {
  background: color-mix(in srgb, var(--mq-surface) 85%, var(--mq-accent));
  border-color: var(--mq-accent-22);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--mq-accent) 10%, rgba(0,0,0,.2));
}

.mq-forum__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  /* SHADOW 19 — avatar shadow */
  box-shadow: 0 2px 8px color-mix(in srgb, var(--mq-accent) 18%, rgba(0,0,0,.3));
}

.mq-forum__content {
  flex: 1;
  min-width: 0;
}

.mq-forum__author {
  font-family: var(--mq-ff-heading);
  font-weight: 600;
  font-size: var(--mq-fs-small);
  color: var(--mq-accent);
}

.mq-forum__text {
  font-size: var(--mq-fs-small);
  color: var(--mq-muted);
  line-height: 1.6;
  margin-top: .25rem;
}

.mq-forum__time {
  font-size: var(--mq-fs-badge);
  color: color-mix(in srgb, var(--mq-muted) 60%, transparent);
  margin-top: .35rem;
}

/* ────────────────────────────────────────────────────────────
   17. MODULE: QUICK START (Steps)
   ──────────────────────────────────────────────────────────── */
.mq-steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 680px;
  margin-inline: auto;
  counter-reset: step;
}

.mq-steps__item {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  counter-increment: step;
  padding: 1.2rem 1.4rem;
  border-radius: var(--mq-radius);
  border: 1px solid var(--mq-line);
  background: var(--mq-surface);
  transition: transform var(--mq-t-mid), box-shadow var(--mq-t-mid), border-color var(--mq-t-mid);
}

/* HOVER 22 */
.mq-steps__item:hover {
  transform: translateY(-2px);
  border-color: var(--mq-accent-30);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--mq-accent) 12%, rgba(0,0,0,.25));
}

.mq-steps__item::before {
  content: counter(step);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-family: var(--mq-ff-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--mq-btn-ink);
  /* GRADIENT #23 — step number circle */
  background: linear-gradient(135deg, var(--mq-accent), #3cd77f);
  /* SHADOW 20 — step circle shadow */
  box-shadow: 0 3px 10px color-mix(in srgb, var(--mq-accent) 35%, rgba(0,0,0,.25));
}

.mq-steps__title {
  font-family: var(--mq-ff-heading);
  font-weight: 600;
  font-size: var(--mq-fs-body);
  color: var(--mq-ink);
  margin-bottom: .25rem;
}

.mq-steps__desc {
  font-size: var(--mq-fs-small);
  color: var(--mq-muted);
  line-height: 1.6;
}

/* ────────────────────────────────────────────────────────────
   18. MODULE: ROADMAP
   ──────────────────────────────────────────────────────────── */
.mq-roadmap {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 700px;
  margin-inline: auto;
  position: relative;
}

/* vertical timeline line — GRADIENT #24 */
.mq-roadmap::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--mq-accent) 0%, color-mix(in srgb, var(--mq-accent) 20%, transparent) 100%);
  border-radius: 2px;
}

.mq-roadmap__item {
  display: flex;
  gap: 1.2rem;
  padding: 1.2rem 0;
  position: relative;
}

.mq-roadmap__dot {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--mq-accent);
  border: 3px solid var(--mq-bg);
  position: relative;
  left: 14px;
  top: .3rem;
  z-index: 1;
  box-shadow: 0 0 0 3px var(--mq-accent-22);
  animation: mq-bob 3s ease-in-out infinite;
}

.mq-roadmap__dot--done {
  background: var(--mq-accent);
}

.mq-roadmap__dot--upcoming {
  background: var(--mq-muted);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mq-muted) 20%, transparent);
}

.mq-roadmap__body {
  padding-left: .8rem;
}

.mq-roadmap__date {
  font-size: var(--mq-fs-badge);
  color: var(--mq-accent);
  font-family: var(--mq-ff-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.mq-roadmap__title {
  font-family: var(--mq-ff-heading);
  font-weight: 600;
  font-size: var(--mq-fs-body);
  color: var(--mq-ink);
  margin-top: .2rem;
}

.mq-roadmap__desc {
  font-size: var(--mq-fs-small);
  color: var(--mq-muted);
  margin-top: .2rem;
  line-height: 1.6;
}

/* ────────────────────────────────────────────────────────────
   19. PERKS / FEATURES
   ──────────────────────────────────────────────────────────── */
.mq-perks {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
  max-width: var(--mq-max-w);
  margin-inline: auto;
}

@media (min-width: 600px) {
  .mq-perks { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .mq-perks { grid-template-columns: repeat(3, 1fr); }
}

.mq-perks__card {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.3rem 1.4rem;
  border-radius: var(--mq-radius);
  border: 1px solid var(--mq-line);
  background: var(--mq-surface);
  transition: transform var(--mq-t-mid), box-shadow var(--mq-t-mid), border-color var(--mq-t-mid);
}

/* HOVER 23 */
.mq-perks__card:hover {
  transform: translateY(-3px);
  border-color: var(--mq-accent-30);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--mq-accent) 14%, rgba(0,0,0,.25));
}

.mq-perks__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--mq-radius) - 2px);
  font-size: 1.5rem;
  background: var(--mq-accent-10);
  color: var(--mq-accent);
}

.mq-perks__title {
  font-family: var(--mq-ff-heading);
  font-weight: 600;
  font-size: var(--mq-fs-body);
}

.mq-perks__desc {
  font-size: var(--mq-fs-small);
  color: var(--mq-muted);
  line-height: 1.6;
}

/* ────────────────────────────────────────────────────────────
   20. BREADCRUMB
   ──────────────────────────────────────────────────────────── */
.mq-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  padding: .8rem var(--mq-gutter);
  max-width: var(--mq-max-w);
  margin-inline: auto;
  font-size: var(--mq-fs-badge);
  color: var(--mq-muted);
}

.mq-breadcrumb a {
  color: var(--mq-muted);
  transition: color var(--mq-t-fast);
}

/* HOVER 24 */
.mq-breadcrumb a:hover {
  color: var(--mq-accent);
}

.mq-breadcrumb__sep {
  opacity: .4;
}

.mq-breadcrumb__current {
  color: var(--mq-ink);
  font-weight: 500;
}

/* ────────────────────────────────────────────────────────────
   21. CHANNEL HERO
   ──────────────────────────────────────────────────────────── */
.mq-ch-hero {
  padding: clamp(2rem, 4vw, 3.5rem) var(--mq-gutter);
  text-align: center;
  /* GRADIENT #25 — channel hero bg */
  background:
    radial-gradient(700px 400px at 50% 30%, color-mix(in srgb, var(--mq-accent) 12%, transparent), transparent 60%),
    var(--mq-surface);
  border-bottom: 1px solid var(--mq-line);
}

.mq-ch-hero__title {
  font-size: var(--mq-fs-h2);
  font-weight: 700;
  margin-bottom: .6rem;
  /* GRADIENT #26 — channel hero title gradient */
  background: linear-gradient(135deg, #fff 0%, var(--mq-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mq-ch-hero__desc {
  font-size: var(--mq-fs-body);
  color: var(--mq-muted);
  max-width: 560px;
  margin-inline: auto;
}

/* ────────────────────────────────────────────────────────────
   22. ARTICLE CARD
   ──────────────────────────────────────────────────────────── */
.mq-article-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--mq-radius);
  border: 1px solid var(--mq-line);
  background: var(--mq-surface);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: transform var(--mq-t-mid), box-shadow var(--mq-t-mid), border-color var(--mq-t-mid);
}

/* HOVER 25 */
.mq-article-card:hover {
  transform: translateY(-3px);
  border-color: var(--mq-accent-22);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--mq-accent) 12%, rgba(0,0,0,.28));
}

.mq-article-card__img {
  position: relative;
  overflow: hidden;
}

.mq-article-card__img img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform var(--mq-t-slow);
}

/* HOVER 26 */
.mq-article-card:hover .mq-article-card__img img {
  transform: scale(1.03);
}

.mq-article-card__body {
  padding: 1rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex: 1;
}

.mq-article-card__tag {
  display: inline-block;
  padding: .15rem .5rem;
  font-size: var(--mq-fs-badge);
  font-family: 'Roboto Mono', monospace;
  border-radius: 4px;
  background: var(--mq-accent-10);
  border: 1px solid var(--mq-accent-22);
  color: var(--mq-accent);
  width: fit-content;
}

.mq-article-card__title {
  font-family: var(--mq-ff-heading);
  font-weight: 600;
  font-size: var(--mq-fs-body);
}

.mq-article-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--mq-t-fast);
}

/* HOVER 27 */
.mq-article-card__title a:hover {
  color: var(--mq-accent);
}

.mq-article-card__excerpt {
  font-size: var(--mq-fs-small);
  color: var(--mq-muted);
  line-height: 1.6;
}

/* ────────────────────────────────────────────────────────────
   23. GUIDE CARD
   ──────────────────────────────────────────────────────────── */
.mq-guide-card {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: var(--mq-radius);
  border: 1px solid var(--mq-line);
  background: var(--mq-surface);
  text-decoration: none;
  color: var(--mq-ink);
  transition: transform var(--mq-t-mid), box-shadow var(--mq-t-mid), border-color var(--mq-t-mid);
}

/* HOVER 28 */
.mq-guide-card:hover {
  transform: translateY(-2px);
  border-color: var(--mq-accent-22);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--mq-accent) 10%, rgba(0,0,0,.2));
}

.mq-guide-card__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--mq-radius) - 2px);
  background: var(--mq-accent-10);
  color: var(--mq-accent);
  font-size: 1.2rem;
}

.mq-guide-card__title {
  font-family: var(--mq-ff-heading);
  font-weight: 600;
  font-size: var(--mq-fs-small);
}

.mq-guide-card__desc {
  font-size: var(--mq-fs-badge);
  color: var(--mq-muted);
  margin-top: .15rem;
}

/* ──────────────────────────────────────────────��─────────────
   24. FAQ — details/summary
   ──────────────────────────────────────────────────────────── */
.mq-faq-list {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.mq-faq-item {
  border-radius: var(--mq-radius);
  border: 1px solid var(--mq-line);
  background: var(--mq-surface);
  overflow: hidden;
  transition: border-color var(--mq-t-fast);
}

/* HOVER 29 */
.mq-faq-item:hover {
  border-color: var(--mq-accent-22);
}

.mq-faq-item[open] {
  border-color: var(--mq-accent-30);
}

.mq-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.2rem;
  cursor: pointer;
  font-family: var(--mq-ff-heading);
  font-weight: 600;
  font-size: var(--mq-fs-body);
  color: var(--mq-ink);
  list-style: none;
  transition: color var(--mq-t-fast);
}

.mq-faq-item summary::-webkit-details-marker { display: none; }

.mq-faq-item summary::after {
  content: '+';
  font-size: 1.3rem;
  color: var(--mq-accent);
  transition: transform var(--mq-t-fast);
}

.mq-faq-item[open] summary::after {
  content: '−';
  transform: rotate(180deg);
}

/* HOVER 30 */
.mq-faq-item summary:hover {
  color: var(--mq-accent);
}

.mq-faq-item__answer {
  padding: 0 1.2rem 1rem;
  font-size: var(--mq-fs-small);
  color: var(--mq-muted);
  line-height: 1.7;
}

/* ────────────────────────────────────────────────────────────
   25. SEARCH
   ──────────────────────────────────────────────────────────── */
.mq-search-input {
  width: 100%;
  padding: .7rem 1rem .7rem 2.6rem;
  border-radius: var(--mq-radius);
  border: 1px solid var(--mq-line);
  background: var(--mq-surface);
  color: var(--mq-ink);
  font-size: var(--mq-fs-body);
  transition: border-color var(--mq-t-fast), box-shadow var(--mq-t-fast);
  outline: none;
}

.mq-search-input::placeholder {
  color: color-mix(in srgb, var(--mq-muted) 50%, transparent);
}

.mq-search-input:focus {
  border-color: var(--mq-accent);
  box-shadow: 0 0 0 3px var(--mq-accent-14);
}

.mq-search-results {
  margin-top: .5rem;
  border-radius: var(--mq-radius);
  border: 1px solid var(--mq-line);
  background: var(--mq-surface);
  overflow: hidden;
}

.mq-search-results__item {
  display: block;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--mq-line);
  color: var(--mq-ink);
  font-size: var(--mq-fs-small);
  text-decoration: none;
  transition: background var(--mq-t-fast);
}

/* HOVER 31 */
.mq-search-results__item:hover {
  background: var(--mq-accent-10);
}

.mq-search-results__item:last-child {
  border-bottom: none;
}

/* ────────────────────────────────────────────────────────────
   26. HELP SECTION
   ──────────────────────────────────────────────────────────── */
.mq-help-section {
  max-width: var(--mq-max-w);
  margin-inline: auto;
}

.mq-help-section__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .mq-help-section__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ────────────────────────────────────────────────────────────
   27. TABLE OF CONTENTS (TOC)
   ────────────────────────────────────���─────────────────────── */
.mq-toc {
  padding: 1rem 1.3rem;
  border-radius: var(--mq-radius);
  border: 1px solid var(--mq-line);
  background: var(--mq-surface);
  margin-bottom: 2rem;
}

.mq-toc__title {
  font-family: var(--mq-ff-heading);
  font-weight: 600;
  font-size: var(--mq-fs-small);
  color: var(--mq-accent);
  margin-bottom: .6rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.mq-toc__list {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.mq-toc__link {
  display: block;
  padding: .3rem .5rem;
  border-radius: 4px;
  font-size: var(--mq-fs-small);
  color: var(--mq-muted);
  text-decoration: none;
  transition: color var(--mq-t-fast), background var(--mq-t-fast);
}

/* HOVER 32 */
.mq-toc__link:hover {
  color: var(--mq-accent);
  background: var(--mq-accent-8);
}

.mq-toc__link--active {
  color: var(--mq-accent);
  background: var(--mq-accent-10);
}

/* ────────────────────────────────────────────────────────────
   28. BYLINE & SOURCE BOX
   ──────────────────────────────────────────────────────────── */
.mq-byline {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: var(--mq-fs-small);
  color: var(--mq-muted);
  margin-bottom: 1.5rem;
}

.mq-byline__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.mq-byline__name {
  font-weight: 600;
  color: var(--mq-ink);
}

.mq-src-box {
  padding: .8rem 1rem;
  border-radius: var(--mq-radius);
  border-left: 3px solid var(--mq-accent);
  background: var(--mq-accent-8);
  font-size: var(--mq-fs-small);
  color: var(--mq-muted);
  margin: 1.5rem 0;
}

.mq-src-box a {
  color: var(--mq-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* HOVER 33 */
.mq-src-box a:hover {
  color: var(--mq-ink);
}

/* ────────────────────────────────────────────────────────────
   29. STORY IMAGES
   ──────────────────────────────────────────────────────────── */
.mq-story-images {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin: 1.5rem 0;
}

@media (min-width: 600px) {
  .mq-story-images { grid-template-columns: repeat(2, 1fr); }
}

.mq-story-images figure {
  border-radius: var(--mq-radius);
  overflow: hidden;
  border: 1px solid var(--mq-line);
}

.mq-story-images img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  transition: transform var(--mq-t-slow);
}

/* HOVER 34 */
.mq-story-images figure:hover img {
  transform: scale(1.03);
}

.mq-story-images figcaption {
  padding: .5rem .8rem;
  font-size: var(--mq-fs-badge);
  color: var(--mq-muted);
  background: var(--mq-surface);
}

/* ────────────────────────────────────────────────────────────
   30. FOOTER
   ──────────────────────────────────────────────────────────── */
.mq-footer {
  /* GRADIENT #27 — footer top edge */
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent 0%, var(--mq-accent) 50%, transparent 100%) 1;
  /* GRADIENT #28 — footer bg */
  background: linear-gradient(180deg, var(--mq-surface) 0%, var(--mq-bg) 100%);
  padding: clamp(2rem, 4vw, 3.5rem) var(--mq-gutter) 1.5rem;
  margin-top: auto;
}

.mq-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: var(--mq-max-w);
  margin-inline: auto;
  justify-content: space-between;
}

.mq-footer__col {
  min-width: 180px;
  flex: 1;
}

.mq-footer__heading {
  font-family: var(--mq-ff-heading);
  font-weight: 600;
  font-size: var(--mq-fs-small);
  color: var(--mq-ink);
  margin-bottom: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.mq-footer__link {
  display: block;
  padding: .2rem 0;
  font-size: var(--mq-fs-small);
  color: var(--mq-muted);
  text-decoration: none;
  transition: color var(--mq-t-fast), padding-left var(--mq-t-fast);
}

/* HOVER 35 */
.mq-footer__link:hover {
  color: var(--mq-accent);
  padding-left: .3rem;
}

.mq-footer__bottom {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--mq-line);
  text-align: center;
  font-size: var(--mq-fs-badge);
  color: color-mix(in srgb, var(--mq-muted) 60%, transparent);
}

.mq-footer__bottom a {
  color: var(--mq-accent);
  text-decoration: none;
}

/* HOVER 36 */
.mq-footer__bottom a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ────────────────────────────────────────────────────────────
   31. MOBILE BANNER (fixed bottom)
   ──────────────────────────────────────────────────────────── */
.mq-mobile-banner {
  display: none;
}

@media (max-width: 767px) {
  .mq-mobile-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .6rem var(--mq-gutter);
    /* GRADIENT #29 — mobile banner bg */
    background: linear-gradient(180deg, color-mix(in srgb, var(--mq-bg) 95%, transparent), var(--mq-bg));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--mq-line);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .35);
  }

  .mq-mobile-banner .mq-btn {
    flex: 1;
    text-align: center;
    font-size: var(--mq-fs-badge);
    padding: .6rem .8rem;
  }
}

/* ────────────────────────────────────────────────────────────
   32. CODE BLOCKS (standalone)
   ──────────────────────────────────────────────────────────── */
.mq-code-block {
  border-radius: var(--mq-radius);
  border: 1px solid var(--mq-line);
  overflow: hidden;
  margin: 1rem 0;
}

.mq-code-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem .9rem;
  background: color-mix(in srgb, var(--mq-surface) 80%, var(--mq-bg));
  border-bottom: 1px solid var(--mq-line);
  font-size: var(--mq-fs-badge);
  color: var(--mq-muted);
  font-family: var(--mq-ff-heading);
}

.mq-code-block pre {
  margin: 0;
  padding: 1rem 1.2rem;
  font-family: 'Roboto Mono', 'SF Mono', 'Cascadia Code', monospace;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--mq-muted);
  background: var(--mq-bg);
  overflow-x: auto;
}

.mq-code-block code {
  font-family: inherit;
  color: inherit;
}

/* inline code */
code:not(.mq-code-block code, .mq-code-panel code) {
  padding: .12rem .4rem;
  border-radius: 4px;
  background: var(--mq-accent-10);
  color: var(--mq-accent);
  font-family: 'Roboto Mono', monospace;
  font-size: .88em;
}

/* ────────────────────────────────────────────────────────────
   33. TABLES (responsive)
   ────���─────────────────────────────────────────────────────── */
.mq-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--mq-radius);
  border: 1px solid var(--mq-line);
  margin: 1rem 0;
}

.mq-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
  font-size: var(--mq-fs-small);
}

.mq-table-wrap th,
.mq-table-wrap td {
  padding: .7rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--mq-line);
}

.mq-table-wrap th {
  font-family: var(--mq-ff-heading);
  font-weight: 600;
  color: var(--mq-accent);
  background: color-mix(in srgb, var(--mq-accent) 6%, var(--mq-surface));
  position: sticky;
  top: 0;
}

.mq-table-wrap td {
  background: var(--mq-surface);
}

/* alternating rows */
.mq-table-wrap tr:nth-of-type(even) td {
  background: color-mix(in srgb, var(--mq-accent) 3%, var(--mq-surface));
}

/* ────────────────────────────────────────────────────────────
   34. BADGES & TAGS
   ──────────────────────────────────────────────────────────── */
.mq-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .55rem;
  font-size: var(--mq-fs-badge);
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  border-radius: 4px;
  color: var(--mq-accent);
  background: var(--mq-accent-10);
  border: 1px solid var(--mq-accent-22);
  white-space: nowrap;
}

.mq-badge--hot {
  color: #db5771;
  background: color-mix(in srgb, #db5771 10%, transparent);
  border-color: color-mix(in srgb, #db5771 22%, transparent);
}

.mq-badge--new {
  color: #b77de3;
  background: color-mix(in srgb, #b77de3 10%, transparent);
  border-color: color-mix(in srgb, #b77de3 22%, transparent);
}

/* ────────────────────────────────────────────────────────────
   35. SHIMMER / LOADING STATE
   ──────────────────────────────────────────────────────────── */
.mq-shimmer {
  /* GRADIENT #30 — shimmer loading effect */
  background: linear-gradient(
    90deg,
    var(--mq-surface) 0%,
    color-mix(in srgb, var(--mq-accent) 8%, var(--mq-surface)) 40%,
    var(--mq-surface) 80%
  );
  background-size: 800px 100%;
  animation: mq-shimmer 1.6s linear infinite;
  border-radius: var(--mq-radius);
}

.mq-shimmer--text {
  height: 1em;
  margin: .3rem 0;
  border-radius: 4px;
}

.mq-shimmer--img {
  aspect-ratio: 16/9;
  width: 100%;
}

/* ────────────────────────────────────────────────────────────
   36. SCROLL-TO-TOP
   ──────────────────────────────────────────────────────────── */
.mq-scroll-top {
  position: fixed;
  bottom: 5rem;
  right: 1.2rem;
  z-index: 900;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mq-accent);
  color: var(--mq-btn-ink);
  font-size: 1.2rem;
  border: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--mq-t-mid), transform var(--mq-t-mid), box-shadow var(--mq-t-mid);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--mq-accent) 30%, rgba(0,0,0,.3));
}

.mq-scroll-top--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* HOVER 37 */
.mq-scroll-top:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--mq-accent) 40%, rgba(0,0,0,.3));
}

/* ────────────────────────────────────────────────────────────
   37. DECORATIVE ELEMENTS
   ──────────────────────────────────────────────────────────── */

/* glow orb (decorative) */
.mq-glow-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  opacity: .15;
  /* GRADIENT #31 — decorative orb */
  background: radial-gradient(circle, var(--mq-accent), transparent 70%);
  animation: mq-bob 6s ease-in-out infinite;
}

.mq-glow-orb--lg {
  width: 400px;
  height: 400px;
}

.mq-glow-orb--sm {
  width: 200px;
  height: 200px;
}

/* decorative accent stripe */
.mq-stripe {
  height: 3px;
  /* GRADIENT #32 — decorative stripe */
  background: linear-gradient(90deg, transparent, var(--mq-accent), transparent);
  border-radius: 2px;
  margin: 2rem auto;
  width: 80px;
}

/* ────────────────────────────────────────────────────────────
   38. PROSE / ARTICLE CONTENT
   ──────────────────────────────────────────────────────────── */
.mq-prose {
  max-width: 720px;
  margin-inline: auto;
  font-size: var(--mq-fs-body);
  line-height: 1.75;
  color: var(--mq-ink);
}

.mq-prose h2 {
  font-size: var(--mq-fs-h2);
  margin: 2rem 0 .8rem;
  padding-top: 1rem;
  /* GRADIENT #33 — prose h2 gradient */
  background: linear-gradient(180deg, #fff 0%, var(--mq-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mq-prose h3 {
  font-size: var(--mq-fs-h3);
  margin: 1.5rem 0 .6rem;
  color: var(--mq-ink);
}

.mq-prose p {
  margin-bottom: 1rem;
}

.mq-prose ul,
.mq-prose ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.mq-prose ul { list-style: disc; }
.mq-prose ol { list-style: decimal; }

.mq-prose li {
  margin-bottom: .3rem;
  color: var(--mq-muted);
}

.mq-prose a {
  color: var(--mq-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--mq-accent) 30%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--mq-t-fast);
}

/* HOVER 38 */
.mq-prose a:hover {
  text-decoration-color: var(--mq-accent);
}

.mq-prose blockquote {
  margin: 1.2rem 0;
  padding: .8rem 1.2rem;
  border-left: 3px solid var(--mq-accent);
  background: var(--mq-accent-8);
  border-radius: 0 var(--mq-radius) var(--mq-radius) 0;
  color: var(--mq-muted);
  font-style: italic;
}

.mq-prose img {
  border-radius: var(--mq-radius);
  margin: 1.2rem 0;
}

.mq-prose hr {
  border: none;
  height: 1px;
  background: var(--mq-line);
  margin: 2rem 0;
}

/* ────────────────────────────────────────────────────────────
   39. RESPONSIVE — MOBILE
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* nav toggle visible */
  .mq-nav-toggle { display: flex; }

  .mq-nav-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    max-width: 80vw;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4rem 1rem 2rem;
    background: var(--mq-bg);
    border-left: 1px solid var(--mq-line);
    box-shadow: -8px 0 30px rgba(0, 0, 0, .5);
    transform: translateX(100%);
    transition: transform var(--mq-t-slow);
    z-index: 998;
    overflow-y: auto;
  }

  .mq-nav-menu--open {
    transform: translateX(0);
  }

  .mq-nav-link {
    padding: .7rem .8rem;
    font-size: var(--mq-fs-body);
    border-radius: var(--mq-radius);
  }

  /* hero adjustments */
  .mq-hero { min-height: 420px; padding: 3rem var(--mq-gutter) 2rem; }

  /* single column */
  .mq-grid,
  .mq-perks,
  .mq-help-section__grid,
  .mq-story-images {
    grid-template-columns: 1fr;
  }

  /* footer stacked */
  .mq-footer__inner {
    flex-direction: column;
    gap: 1.5rem;
  }

  /* mobile banner spacing */
  body { padding-bottom: 60px; }

  /* roadmap adjust */
  .mq-roadmap::before { left: 14px; }
  .mq-roadmap__dot { left: 8px; }
}

@media (max-width: 599px) {
  .mq-hero__cta {
    flex-direction: column;
    width: 100%;
  }

  .mq-hero__cta .mq-btn {
    width: 100%;
    justify-content: center;
  }

  .mq-gallery {
    grid-template-columns: 1fr;
  }

  .mq-carousel {
    border-radius: var(--mq-radius);
  }
}

/* ────────────────────────────────────────────────────────────
   40. PRINT STYLES
   ──────────────────────────────────────────────────────────── */
@media print {
  body { background: #fff; color: #111; }
  .mq-header, .mq-footer, .mq-mobile-banner, .mq-scroll-top, .mq-particles { display: none; }
  .mq-card, .mq-faq-item, .mq-code-block { box-shadow: none; border: 1px solid #ccc; }
  a { color: #111; text-decoration: underline; }
}

/* ────────────────────────────────────────────────────────────
   41. ADDITIONAL HOVER INTERACTIONS (topping off count)
   ──────────────────────────────────────────────────────────── */

/* HOVER 39 — generic anchor hover within sections */
.mq-section a:not(.mq-btn):not(.mq-nav-link) {
  transition: color var(--mq-t-fast);
}
.mq-section a:not(.mq-btn):not(.mq-nav-link):hover {
  color: var(--mq-accent);
}

/* HOVER 40 — badge hover */
.mq-badge {
  transition: background var(--mq-t-fast), transform var(--mq-t-fast);
  cursor: default;
}
.mq-badge:hover {
  background: var(--mq-accent-18);
  transform: translateY(-1px);
}

/* HOVER 41 — perks icon hover */
.mq-perks__card:hover .mq-perks__icon {
  background: var(--mq-accent-22);
  transform: scale(1.08);
  transition: background var(--mq-t-fast), transform var(--mq-t-fast);
}

/* HOVER 42 — roadmap item hover */
.mq-roadmap__item {
  transition: background var(--mq-t-fast);
  border-radius: var(--mq-radius);
  padding-left: .5rem;
  padding-right: .5rem;
}
.mq-roadmap__item:hover {
  background: var(--mq-accent-5);
}

/* HOVER 43 — table row highlight */
.mq-table-wrap tr {
  transition: background var(--mq-t-fast);
}
.mq-table-wrap tr:hover td {
  background: var(--mq-accent-8);
}

/* ────────────────────────────────────────────────────────────
   42. NAV OVERLAY (mobile)
   ──────────────────────────────────────────────────────────── */
.mq-nav-overlay {
  display: none;
}

@media (max-width: 767px) {
  .mq-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 997;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px);
    display: none;
    opacity: 0;
    transition: opacity var(--mq-t-mid);
  }
  .mq-nav-overlay--visible {
    display: block;
    opacity: 1;
  }
}

/* ────────────────────────────────────────────────────────────
   43. ADDITIONAL GRADIENT DECORATIONS
   ──────────────────────────────────────────────────────────── */

/* GRADIENT #34 — section bottom fade */
.mq-section--fade-bottom::after {
  content: '';
  display: block;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--mq-bg));
  margin-top: 2rem;
  pointer-events: none;
}

/* GRADIENT #35 — hero bottom gradient blend */
.mq-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--mq-bg));
  pointer-events: none;
  z-index: 0;
}