@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500&display=swap");

#mj-hero {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: flex-start;
  position: relative; overflow: hidden;
  padding: 0 52px;
  background: #060608;
  font-family: 'DM Sans', sans-serif;
  box-sizing: border-box;
}
#mj-hero *, #mj-hero *::before, #mj-hero *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* 背景图层 */
#mj-hero .mj-h-bg-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .55;
}
/* 噪点纹理层（不要修改这里） */
#mj-hero .mj-h-noise {
  position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px;
}
/* 左侧文字遮罩 — 让文字在任何背景图上都清晰可读 */
#mj-hero .mj-h-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to right,
    rgba(6,6,8,.82) 0%,
    rgba(6,6,8,.65) 35%,
    rgba(6,6,8,.2) 60%,
    transparent 100%
  );
}

/* 红色光晕 */
#mj-hero .mj-h-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 65% at 65% 50%, rgba(217,48,32,.11) 0%, transparent 70%),
    radial-gradient(ellipse 30% 40% at 20% 90%, rgba(240,180,41,.06) 0%, transparent 60%);
}
/* 扫描线 */
#mj-hero .mj-h-lines {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,.012) 3px, rgba(255,255,255,.012) 4px);
}
/* 背景大数字 */
#mj-hero .mj-h-ghost {
  position: absolute; right: -30px; top: 50%;
  transform: translateY(-52%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 340px; line-height: 1;
  color: rgba(255,255,255,.025);
  pointer-events: none; user-select: none;
}

/* 主内容区 */
#mj-hero .mj-h-content { position: relative; z-index: 2; max-width: 640px; }

#mj-hero .mj-h-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: #ff3d2e; margin-bottom: 24px;
  opacity: 0; animation: mjFadeUp .7s ease .05s forwards;
}
#mj-hero .mj-h-eyebrow::before {
  content: ''; display: block; width: 28px; height: 1.5px; background: #ff3d2e;
}
#mj-hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(80px, 11vw, 148px);
  line-height: .92; letter-spacing: .01em; color: #f2f0eb;
  opacity: 0; animation: mjFadeUp .7s ease .15s forwards;
}
#mj-hero h1 .mj-h-accent { color: #d93020; display: block; }
#mj-hero .mj-h-sub {
  margin-top: 26px; font-size: 15px; font-weight: 300;
  line-height: 1.75; color: #6b6b75; max-width: 400px;
  opacity: 0; animation: mjFadeUp .7s ease .27s forwards;
}
#mj-hero .mj-h-ctas {
  margin-top: 46px; display: flex; align-items: center; gap: 24px;
  opacity: 0; animation: mjFadeUp .7s ease .4s forwards;
}
#mj-hero .mj-h-btn1 {
  font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: .1em;
  background: #d93020; color: #060608; padding: 14px 40px;
  text-decoration: none; position: relative; overflow: hidden; display: inline-block;
}
#mj-hero .mj-h-btn1::before {
  content: ''; position: absolute; inset: 0; background: #f0b429;
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s cubic-bezier(.4,0,.2,1); z-index: 0;
}
#mj-hero .mj-h-btn1:hover::before { transform: scaleX(1); }
#mj-hero .mj-h-btn1 span { position: relative; z-index: 1; }

/* 右下角数据区 */
#mj-hero .mj-h-specs-block {
  position: absolute; right: 52px; bottom: 52px; z-index: 2;
  display: flex; gap: 36px; align-items: flex-end;
}
#mj-hero .mj-h-stat { text-align: right; }
#mj-hero .mj-h-stat-n {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 44px; line-height: 1; color: #f2f0eb;
}
#mj-hero .mj-h-stat-n sup { font-size: 22px; color: #d93020; vertical-align: super; }
#mj-hero .mj-h-stat-l {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: #6b6b75; margin-top: 3px;
}

@keyframes mjFadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  #mj-hero {
    padding: 80px 24px 52px;
    align-items: flex-start;
    min-height: unset;
  }
  #mj-hero .mj-h-ghost { display: none; }
  #mj-hero .mj-h-content { max-width: 100%; }
  #mj-hero h1 { font-size: clamp(52px, 14vw, 80px); }
  #mj-hero .mj-h-sub { font-size: 13px; max-width: 100%; }
  #mj-hero .mj-h-ctas { margin-top: 28px; }
  #mj-hero .mj-h-specs-block {
    position: static;
    margin-top: 28px;
    gap: 20px 28px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  #mj-hero .mj-h-stat { text-align: left; }
  #mj-hero .mj-h-stat-n { font-size: 32px; }
  #mj-hero .mj-h-stat-n sup { font-size: 16px; }
  #mj-hero .mj-h-stat-l { font-size: 9px; }
}