/* 
   DEPOP-EARN HOME SCREEN UPGRADE v4.0 - QUIET LUXURY (WARM RICE GOLD)
   Complete Design System Implementation
*/

/* GLOBAL RESET & BASE */
body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* SECTION COMMONS */
/* SECTION COMMONS */
.section-wrap {
  padding: 56px 20px;
  background: var(--bg-base);
  position: relative;
}

.section-wrap.alt {
  /* Use gradient to blend with surrounding bg-base sections to prevent hard edges */
  background: linear-gradient(to bottom,
      var(--bg-base) 0%,
      var(--bg-surface) 10%,
      var(--bg-surface) 90%,
      var(--bg-base) 100%);
}

.section-tag {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--gold);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  line-height: 1.4;
}

.section-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 12px;
}

.section-body {
  font-size: 13px;
  line-height: 1.85;
  color: var(--text-secondary);
}

.section-divider {
  height: 1px;
  margin: 0 20px;
  background: linear-gradient(to right,
      transparent,
      var(--border) 30%,
      var(--border) 70%,
      transparent);
}

/* 【第1屏】Hero - RE-ARCHITECTED SPLIT LUXURY */
.home-hero {
  position: relative !important;
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  background: var(--bg-deep, #000) !important;
  overflow: hidden !important;
}

.home-hero {
  aspect-ratio: 9 / 16 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

/* 上半部分：视觉媒體区 */
.hero-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

.hero-video,
.hero-media img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.hero-video,
.hero-media img {
  transform: scale(1.15) translateY(-20%) !important;
  /* Zoom in 15% and pull up */
}

/* [① 英雄区顶部遮罩] */
.hero-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 70% !important;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.55) 0%,
      /* 顶部较深 */
      rgba(0, 0, 0, 0.25) 50%,
      transparent 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* [⑦ 图片底部渐变收尾] */
.hero-bottom-fade {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 35% !important;
  background: linear-gradient(to bottom,
      transparent 0%,
      var(--bg-base, #fdfaf4) 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* [文字内容区底部的奶油色渐变保护层] */
.hero-text-backdrop {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 65% !important;
  background: linear-gradient(to bottom,
      transparent 0%,
      var(--bg-base-glass, rgba(253, 250, 244, 0.7)) 60%,
      #fdfaf4 100%) !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

/* 底部过渡渐变：图片 -> 米白 */
.hero-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65%;
  background: linear-gradient(to bottom,
      var(--bg-base-glass, rgba(253, 250, 244, 0)) 0%,
      var(--bg-base-glass, rgba(253, 250, 244, 0.8)) 70%,
      rgba(253, 250, 244, 1) 100%);
  z-index: 5;
}

/* 下半部分：米白文字内容区 */
.hero-content {
  position: absolute !important;
  z-index: 10 !important;
  left: 0 !important;
  right: 0 !important;
  top: 45% !important;
  /* YOU CAN ADJUST THIS */
  padding: 0 20px !important;
  text-align: left !important;
  background: transparent !important;
}

.hero-title {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(1.8rem, 6.5vw, 2.2rem) !important;
  font-weight: 800 !important;
  color: var(--text-primary, #1C1208) !important;
  /* 深棕黑 */
  text-shadow: none !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
}

.hero-tagline {
  font-size: 14px !important;
  color: rgba(28, 18, 8, 0.65) !important;
  /* 半透明深色 */
  text-shadow: none !important;
  letter-spacing: 0.14em !important;
  margin-bottom: 20px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

.hero-steps {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-left: 2px solid var(--gold-light, #C9A227) !important;
  border-radius: 0 !important;
  padding: 8px 0 8px 16px !important;
  margin-bottom: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.hero-steps p {
  color: var(--text-primary, #2C1F0A) !important;
  /* 深棕色 */
  font-size: 15px !important;
  letter-spacing: 0.08em !important;
  line-height: 2 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-shadow: none !important;
  font-weight: 500 !important;
}

.hero-steps p::before {
  content: '◆' !important;
  color: var(--gold-light, #C9A227) !important;
  font-size: 7px !important;
  vertical-align: middle !important;
}

.hero-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 13px 28px !important;
  background: linear-gradient(135deg, var(--gold-light, #B8860B), var(--gold-light, #C9A227)) !important;
  /* 优化：无论什么主题，只要按钮是金色高亮底色，文字就必须是极深的颜色才能保证对比度和清晰度 */
  color: #1C1208 !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: 0.18em !important;
  border-radius: 4px !important;
  border: none !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  transition: 0.3s !important;
  box-shadow:
    0 4px 20px rgba(184, 134, 11, 0.5),
    0 0 40px rgba(184, 134, 11, 0.15) !important;
}

.hero-btn:active {
  transform: scale(0.96);
}

/* Remove legacy overlays/absolute content */
.hero-overlay {
  display: none !important;
}

/* CARDS */
.card,
.promoter-card,
.tier-card,
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 20px;
  transition: 0.3s;
}

/* Elite Partners */
.promoter-carousel {
  overflow: hidden;
  padding: 20px 0;
  width: 100%;
  position: relative;
}

.promoter-carousel::-webkit-scrollbar {
  display: none;
}

.marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  white-space: nowrap;
  animation: marquee-scroll var(--marquee-duration, 25s) linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-50% - 8px));
  }
}

.promoter-card {
  flex: 0 0 280px;
  text-align: center;
  white-space: normal;
}

.stars {
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.promoter-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  object-fit: cover;
  display: block;
  margin: 0 auto 12px;
}

.promoter-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.promoter-role {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  margin: 4px 0 10px;
  text-transform: uppercase;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

.earn-num {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
}

.earn-lbl {
  font-size: 13px;
  color: var(--text-muted);
  margin-left: 4px;
}

.earn-divider {
  height: 1px;
  background: var(--border);
  margin: 12px 0;
}

.promoter-quote {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.75;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}

.promoter-quote::before {
  content: '"';
  font-size: 28px;
  color: var(--gold-pale);
  line-height: 0;
  vertical-align: -10px;
  margin-right: 3px;
}

/* ==== HIGH-END STATS SECTION (Double-Bezel & Antigravity) ==== */
.stats-section {
  position: relative;
  overflow: hidden;
  padding: 60px 0; /* Remove horizontal padding so marquee stretches edge-to-edge */
  background: var(--bg-base); /* Blend seamlessly with sections above/below */
  z-index: 2;
  margin: 0; /* Remove margin to fix disconnected floating box issue */
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--border-gold, rgba(184, 134, 11, 0.15));
  border-bottom: 1px solid var(--border-gold, rgba(184, 134, 11, 0.15));
  box-shadow: none;
}

.stats-bg-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, var(--gold-glow, rgba(184, 134, 11, 0.08)) 0%, transparent 60%);
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}

.stats-container {
  position: relative;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px; /* Constrain text content */
}

.stats-tag-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.stats-tag {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  border: 1px solid var(--border-gold, rgba(184, 134, 11, 0.3));
  color: var(--gold);
  background: var(--bg-surface, rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(8px);
}

.stats-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 800;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: 0.02em;
}

/* Universal Auto-Scrolling Carousel (Mobile & PC) */
.stats-carousel-mobile {
  overflow: hidden;
  padding: 10px 0 24px; /* Space for glow */
  width: 100%;
}

.stats-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: stats-marquee 20s linear infinite;
  will-change: transform;
}

.stats-track:hover, .stats-track:active {
  animation-play-state: paused;
}

@keyframes stats-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 8px)); } /* 16px gap / 2 */
}

@media (min-width: 768px) {
  .stats-track {
    gap: 32px;
    animation: stats-marquee-desktop 25s linear infinite; /* Slower on PC */
  }
}

@keyframes stats-marquee-desktop {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 16px)); } /* 32px gap / 2 */
}

/* Double-Bezel Architecture */
.stat-wrapper {
  flex: 0 0 260px; /* Mobile width */
  padding: 6px; 
  border-radius: 2rem;
  background: var(--stat-shell-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--stat-shell-border, rgba(0, 0, 0, 0.05));
  transition: transform 0.7s cubic-bezier(0.32, 0.72, 0, 1);
  cursor: default;
}

@media (min-width: 768px) {
  .stat-wrapper {
    flex: 0 0 320px; /* PC width */
  }
}

.stat-wrapper:hover {
  transform: scale(0.97); /* Magnetic hover physics */
}

/* Inner Core */
.stat-card-inner {
  position: relative;
  height: 100%;
  border-radius: calc(2rem - 6px); /* Concentric curves */
  background: var(--stat-core-bg, rgba(255, 255, 255, 0.6));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 1px 1px var(--stat-inner-glow, rgba(255, 255, 255, 0.5)), 0 20px 40px var(--stat-shadow, rgba(0, 0, 0, 0.03));
}

.stat-num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 5vw, 48px);
  font-weight: 800;
  color: var(--gold);
  background: linear-gradient(135deg, var(--gold-light, #C9A227), var(--gold, #B8860B));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  text-shadow: 0 2px 10px var(--stat-text-shadow, rgba(184, 134, 11, 0.2));
}

.stat-wrapper:hover .stat-num {
  transform: scale(1.06) translateY(-2px); /* Inner kinetic tension */
}

.stat-lbl {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.15em;
  margin-top: 12px;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.85;
}

/* Entry Animation */
[data-animate="stagger-reveal"] .stats-title,
[data-animate="stagger-reveal"] .stats-tag-wrap,
[data-animate="stagger-reveal"] .stat-wrapper {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(8px);
  transition: opacity 1s cubic-bezier(0.32, 0.72, 0, 1), transform 1s cubic-bezier(0.32, 0.72, 0, 1), filter 1s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform, opacity, filter;
}

[data-animate="stagger-reveal"].animate .stats-title,
[data-animate="stagger-reveal"].animate .stats-tag-wrap,
[data-animate="stagger-reveal"].animate .stat-wrapper {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

[data-animate="stagger-reveal"].animate .stats-title { transition-delay: 0.1s; }
[data-animate="stagger-reveal"].animate .stats-tag-wrap { transition-delay: 0s; }
[data-animate="stagger-reveal"].animate .stat-wrapper:nth-child(1) { transition-delay: 0.2s; }
[data-animate="stagger-reveal"].animate .stat-wrapper:nth-child(2) { transition-delay: 0.35s; }
[data-animate="stagger-reveal"].animate .stat-wrapper:nth-child(3) { transition-delay: 0.5s; }

/* THEME SPECIFIC OVERRIDES */

[data-theme="premium-dark"] .stat-wrapper {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="premium-dark"] .stat-card-inner {
  background: rgba(15, 23, 42, 0.4); 
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 20px 40px rgba(0, 0, 0, 0.5);
}
[data-theme="premium-dark"] .stats-bg-glow {
  background: radial-gradient(circle at 50% 50%, rgba(250, 204, 21, 0.15) 0%, transparent 60%);
}

[data-theme="amazon-classic"] .stat-wrapper {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(255, 255, 255, 0.05);
}
[data-theme="amazon-classic"] .stat-card-inner {
  background: rgba(35, 47, 62, 0.6); 
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 10px 30px rgba(0, 0, 0, 0.3);
}
[data-theme="amazon-classic"] .stats-bg-glow {
  background: radial-gradient(circle at 50% 50%, rgba(255, 153, 0, 0.1) 0%, transparent 60%);
}
[data-theme="amazon-classic"] .stat-num {
  background: linear-gradient(135deg, #FFB84D, #FF9900);
  -webkit-background-clip: text;
  text-shadow: 0 2px 10px rgba(255, 153, 0, 0.2);
}
[data-theme="amazon-classic"] .stats-tag {
  color: #FF9900;
  border-color: rgba(255, 153, 0, 0.3);
}
/* ======================================================== */

/* Monetization Path */
.tier-card {
  margin-bottom: 12px;
  position: relative;
}

.tier-card.featured {
  border: 2px solid var(--gold);
  background: var(--bg-surface);
}

.most-popular {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--gold);
  color: var(--text-white, #FFF);
  font-size: 14px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 3px;
}

.tier-stage {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
}

.tier-amount {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1.1;
  margin-bottom: 12px;
}

.tier-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 16px;
}

.tier-btn {
  width: 100%;
  min-height: 46px;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--border-gold);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
}

.tier-card.featured .tier-btn {
  background: var(--gold);
  color: var(--text-white, #FFF);
  border: none;
}

/* Culture */
.culture-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}

.culture-card {
  border-left: 3px solid var(--gold);
  background: var(--bg-surface);
}

/* CTA & Footer */
.cta-section {
  background: var(--bg-base);
  padding: 64px 20px 80px;
  text-align: center;
  border-top: 1px solid var(--border-gold);
  /* 细微的琥珀金分隔线 */
}

.cta-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 8vw, 36px);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

.cta-sub {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 32px;
  opacity: 0.8;
}

.btn-cta-primary {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto 12px;
  min-height: 52px;
  background: var(--gold);
  color: var(--text-white, #FFF);
  border-radius: 8px;
  font-weight: 800;
  border: none;
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.btn-cta-secondary {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  min-height: 48px;
  background: transparent;
  color: var(--gold);
  border-radius: 8px;
  font-weight: 700;
  border: 1.5px solid var(--gold);
  font-size: 15px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.footer {
  background: var(--bg-base, #fdfaf4) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  /* Padding moved to inner elements */
  border-top: none !important;
  /* Removing border to seamlessly connect with cta-section which already has border-top */
  position: relative !important;
  overflow: hidden !important;
}

/* 16. 全球化底图背景 (Footer Background Map) */
.footer-map-backdrop {
  order: 2 !important;
  /* Move map to middle */
  position: relative !important;
  height: 280px !important;
  /* physical space for map */
  width: 100% !important;
  pointer-events: none !important;
  margin-bottom: 20px !important;
}

.footer-map-backdrop::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--footer-map-bg, url('../img/map-light.png')) center top no-repeat !important;
  background-size: contain !important;
  opacity: 1 !important;
}

/* 16. Global Business Hub (Footer Redesign) */
.footer-hub {
  order: 3 !important;
  /* Force to bottom */
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  max-width: 500px !important;
  margin: 0 auto !important;
  padding: 0 20px 40px !important;
  /* Padding for the text block */
  background: transparent !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.hub-title {
  order: 1 !important;
  /* Title at the very top */
  font-family: 'Playfair Display', serif !important;
  /* Use elegant serif like sketch */
  font-size: 32px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  margin: 60px auto 20px !important;
  /* spacing from top */
  text-align: center !important;
  width: 100% !important;
}

.red-dot {
  position: absolute !important;
  width: 5px !important;
  height: 5px !important;
  background: var(--gold-light, #C9A227) !important;
  border-radius: 50% !important;
  z-index: 2 !important;
  opacity: 0.8 !important;
  /* 点可以稍微亮一点 */
}

.red-dot::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  border: 1px solid var(--gold-light, #C9A227) !important;
  border-radius: 50% !important;
  animation: redPulse 2s infinite !important;
}

@keyframes redPulse {
  0% {
    width: 5px;
    height: 5px;
    opacity: 1;
  }

  100% {
    width: 15px;
    height: 15px;
    opacity: 0;
  }
}

/* 红色网点分布 (相对于整个页脚) */
.dot-na-1 {
  top: 35%;
  left: 15%;
}

.dot-na-2 {
  top: 42%;
  left: 22%;
}

.dot-na-3 {
  top: 38%;
  left: 28%;
}

.dot-eu-1 {
  top: 30%;
  left: 48%;
}

.dot-eu-2 {
  top: 34%;
  left: 52%;
}

.dot-eu-3 {
  top: 38%;
  left: 50%;
}

.dot-as-1 {
  top: 35%;
  left: 78%;
}

.dot-as-2 {
  top: 40%;
  left: 82%;
}

.dot-as-3 {
  top: 45%;
  left: 75%;
}

.dot-as-4 {
  top: 52%;
  left: 78%;
}

.dot-au {
  top: 75%;
  left: 88%;
}

.hub-info-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  margin-bottom: 32px !important;
  text-align: left !important;
}

.hub-info-item {
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
}

.hub-icon {
  font-size: 22px !important;
  margin-top: 2px !important;
}

.hub-text strong {
  display: block !important;
  font-size: 16px !important;
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}

.hub-text p {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.hub-divider {
  height: 1px !important;
  background: var(--border-gold, rgba(0, 0, 0, 0.1)) !important;
  margin-bottom: 20px !important;
}

.hub-copyright {
  text-align: center !important;
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  line-height: 1.6 !important;
}

/* ── Responsive Fixes for Content Images ── */
.origin-img {
  width: 100% !important;
  height: auto !important;
  border-radius: 12px;
  object-fit: cover;
  margin-top: 24px;
  box-shadow: 0 4px 16px rgba(184, 134, 11, 0.08);
  display: block;
}

.global-img-wrap {
  width: 100% !important;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(184, 134, 11, 0.08);
  margin-top: 20px;
}

.global-bg {
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
  display: block;
}