/* ============================================================
   HuiYing Theme Override — Tech / Material Design 3
   作用: 叠加于原有 index.css 之上，升级颜色/字体/效果
   ============================================================ */

/* --- Global body & bg --- */
body, html {
  background-color: var(--bg-base, #050818) !important;
  font-family: var(--font-primary, 'Inter', 'HarmonyOSHans-Light', 'Arial', sans-serif);
}

/* ————————————————————————————————
   Banner Section 01
———————————————————————————————— */
.banner_01 .banner_main {
  background: linear-gradient(
    180deg,
    rgba(5,8,24,0.55) 0%,
    rgba(5,8,24,0.20) 50%,
    rgba(5,8,24,0.70) 100%
  );
}

.banner_01 .title {
  font-family: var(--font-display, 'Space Grotesk', 'Inter', sans-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  /* Gradient text effect */
  background: linear-gradient(135deg, #FFFFFF 0%, rgba(0,229,255,0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

/* CTA Button upgrade */
.banner_01 .btn svg path {
  fill: var(--gradient-primary, #2979FF) !important;
}
.banner_01 .btn a {
  color: #fff !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 15px;
}
.banner_01 .btn:hover svg path {
  fill: var(--accent-cyan, #00E5FF) !important;
}

/* ————————————————————————————————
   Why Section (stats / numbers)
———————————————————————————————— */
.why {
  background-image: url("/huiying/img/home/2.jpg");
  background-size: cover;
  background-position: center;
}
/* Dark overlay for better readability */
.why::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(5,8,24,0.60) 0%,
    rgba(5,8,24,0.30) 50%,
    rgba(5,8,24,0.80) 100%
  );
  z-index: 0;
  pointer-events: none;
}
.why > section {
  z-index: 1;
}

.why .title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  /* Gradient text */
  background: linear-gradient(135deg, #FFFFFF 0%, var(--accent-cyan, #00E5FF) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.why .dec {
  color: rgba(255,255,255,0.80);
  line-height: 1.7;
}

/* Stat numbers: gradient + glow */
.why .num-itemBox .num {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-weight: 700;
  background: var(--gradient-primary, linear-gradient(135deg, #2979FF 0%, #00E5FF 100%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(41,121,255,0.4));
}

.why .num-itemBox .text {
  color: rgba(255,255,255,0.75);
  font-weight: 400;
}

/* ————————————————————————————————
   Monetization / Abundant sections (top_tip upgrade)
———————————————————————————————— */
.monetization .top_tip,
.abundant .top_tip,
.diversified .top_tip {
  color: var(--accent-cyan, #00E5FF);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 14px !important;
}

.monetization .title,
.abundant .title,
.diversified .title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

.monetization .below_tip,
.abundant .below_tip,
.diversified .below_tip {
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
}

/* ————————————————————————————————
   Privacy Section
———————————————————————————————— */
.privacy {
  background: linear-gradient(
    135deg,
    #0A1030 0%,
    #0D1640 100%
  );
  /* Left accent border */
  position: relative;
}
.privacy::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gradient-primary);
  opacity: 0.6;
}

.privacy_textBox .title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.privacy_textBox .tip {
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
}
.privacy_textBox .tip strong {
  color: var(--accent-cyan, #00E5FF);
  font-weight: 600;
}

/* ————————————————————————————————
   Quicker Section (Features list)
———————————————————————————————— */
.quicker {
  background: linear-gradient(
    180deg,
    #0A1030 0%,
    #0D1640 100%
  );
}

.quicker_textBox .title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

.quicker_dec_item {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  background: var(--gradient-glow, rgba(41,121,255,0.06));
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.quicker_dec_item:hover {
  border-color: var(--border-glow, rgba(41,121,255,0.35));
  background: rgba(41,121,255,0.10);
  box-shadow: 0 0 20px rgba(41,121,255,0.12);
}

.quicker_dec_item .font-title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-weight: 600;
  color: #fff;
  font-size: 22px;
}

.quicker_dec_item .font-tip {
  color: rgba(255,255,255,0.68);
  line-height: 1.6;
}

/* ————————————————————————————————
   Partner Section
———————————————————————————————— */
.partner {
  background: linear-gradient(
    135deg,
    #1565C0 0%,
    #2979FF 50%,
    #1A237E 100%
  );
  position: relative;
  overflow: hidden;
}

/* Mesh grid background */
.partner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.partner .title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

.partner_item {
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  z-index: 1;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.partner_item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

.partner_itemBox {
  position: relative;
  z-index: 1;
}

/* ————————————————————————————————
   Integrate Section (How to Integrate cards)
———————————————————————————————— */
.integrate {
  background: linear-gradient(
    180deg,
    #0A1030 0%,
    #0D1640 100%
  );
}

.integrate .title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  letter-spacing: -0.01em;
}

.integrate_item {
  background: linear-gradient(
    180deg,
    rgba(41, 121, 255, 0.18) 0%,
    rgba(14, 12, 117, 0.60) 100%
  ) !important;
  box-shadow:
    inset 0px 1px 0px rgba(108, 123, 255, 0.6),
    0 4px 24px rgba(41, 121, 255, 0.10) !important;
  border: 1px solid var(--border-glow, rgba(41,121,255,0.25)) !important;
  border-radius: 20px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.integrate_item:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0px 1px 0px rgba(108,123,255,0.8),
    0 12px 40px rgba(41,121,255,0.20) !important;
  border-color: rgba(41,121,255,0.5) !important;
}

.integrateItem_num {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(41,121,255,0.5));
}

.integrateItem_tip {
  color: rgba(255,255,255,0.80);
  font-weight: 400;
  line-height: 1.6;
}

/* ————————————————————————————————
   Journey CTA Section
———————————————————————————————— */
.journey {
  background: linear-gradient(
    135deg,
    #1565C0 0%,
    #2979FF 40%,
    #00BCD4 100%
  ) !important;
  position: relative;
  overflow: hidden;
}

.journey::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(0,229,255,0.15) 0%, transparent 60%),
    radial-gradient(circle at 80% 50%, rgba(124,77,255,0.10) 0%, transparent 60%);
  pointer-events: none;
}

.journey .title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

/* Override the white SVG button to use glassmorphism */
.journey .contactUs {
  position: relative;
  z-index: 1;
}

.journey .contact-middle {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(8px);
  transition: background 0.2s ease;
}
.journey .contact-middle:hover {
  background: #fff !important;
}
.journey .contact-middle a {
  color: var(--primary, #2979FF) !important;
  font-weight: 600 !important;
}

/* ————————————————————————————————
   Posts / Recent Reports
———————————————————————————————— */
.posts {
  background: linear-gradient(
    180deg,
    #0A1030 0%,
    #0D1640 100%
  ) !important;
}

.posts .title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  letter-spacing: -0.01em;
}

.posts_item {
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06)) !important;
  background: var(--bg-elevated, #0D1428);
  box-shadow: none !important;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.posts_item:hover {
  border-color: var(--border-glow, rgba(41,121,255,0.35)) !important;
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(41,121,255,0.12) !important;
}

.postsItem_img {
  background-color: rgba(41, 121, 255, 0.12) !important;
  border-radius: 20px 20px 0 0 !important;
  overflow: hidden;
}

.postsItem_tip {
  background: linear-gradient(
    180deg,
    rgba(41,121,255,0.10) 0%,
    rgba(21,101,192,0.15) 100%
  ) !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 400;
  border-radius: 0 0 20px 20px !important;
}
.postsItem_tip a {
  color: rgba(255,255,255,0.85) !important;
  transition: color 0.2s ease;
}
.postsItem_tip a:hover {
  color: var(--accent-cyan, #00E5FF) !important;
}

/* ————————————————————————————————
   Swiper pagination upgrade
———————————————————————————————— */
#mySwiper .swiper-pagination-bullets .swiper-pagination-bullet {
  background: rgba(255,255,255,0.25);
  transition: background 0.2s ease, transform 0.2s ease;
}

#mySwiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
  background: var(--gradient-primary) !important;
  background: var(--primary, #2979FF) !important;
  transform: scale(1.3);
  box-shadow: 0 0 8px rgba(41,121,255,0.6);
}

/* ————————————————————————————————
   Cookies card upgrade
———————————————————————————————— */
.accept-card {
  background: var(--bg-elevated, #0D1428) !important;
  border: 1px solid var(--border-glow, rgba(41,121,255,0.3)) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(5,8,24,0.6) !important;
}

/* ————————————————————————————————
   Fix: Force scroll-animated sections to always be visible.
   Original index.css sets opacity:0 / top:-60px waiting for JS.
   Override ensures content is always readable on scroll.
———————————————————————————————— */
.privacy > section,
.quicker > section,
.integrate > section,
.posts > section {
  opacity: 1 !important;
  top: 0 !important;
  transition: none !important;
}

/* ————————————————————————————————
   Section title shared style
———————————————————————————————— */
.why .title,
.monetization .title,
.abundant .title,
.diversified .title,
.privacy_textBox .title,
.quicker_textBox .title,
.partner .title,
.integrate .title,
.posts .title,
.journey .title {
  font-family: var(--font-display, 'Space Grotesk', 'Inter', sans-serif) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* ————————————————————————————————
   Smooth image transitions in partner section
———————————————————————————————— */
.partner_item img {
  transition: transform 0.3s ease;
}
.partner_item:hover img {
  transform: scale(1.05);
}