/* 爱秀飞官网 — 1920×4056 设计稿锁死布局（web页面/网站.png） */
* {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border: none !important;
  outline: none !important;
}

html {
  width: 1920px !important;
  min-width: 1920px !important;
  overflow-x: auto !important;
  scroll-behavior: auto !important;
}

body {
  width: 1920px !important;
  min-width: 1920px !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  background: #050510 !important;
  color: #ffffff !important;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: 16px !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
}

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

img {
  display: block !important;
  max-width: none !important;
}

.page {
  position: relative !important;
  width: 1920px !important;
  height: 3362px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  background: #050510 !important;
  background-image: radial-gradient(ellipse 900px 520px at 960px 0, rgba(142, 45, 226, 0.16), transparent 70%), radial-gradient(ellipse 480px 360px at 1766px 40px, rgba(79, 172, 254, 0.08), transparent 65%) !important;
}

/* —— 顶栏 72px —— */
.site-nav {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1920px !important;
  height: 72px !important;
  z-index: 100 !important;
  background: rgba(5, 5, 16, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.brand {
  position: absolute !important;
  left: 360px !important;
  top: 16px !important;
  width: 220px !important;
  height: 40px !important;
  display: block !important;
}

.brand-logo {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border-radius: 10px !important;
  border: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

.brand-text {
  position: absolute !important;
  left: 52px !important;
  top: 10px !important;
  width: 168px !important;
  height: 20px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  letter-spacing: 0.32px !important;
  color: #ffffff !important;
  white-space: nowrap !important;
}

.brand-en {
  font-weight: 600 !important;
  letter-spacing: 1.6px !important;
}

.nav-links {
  position: absolute !important;
  left: 608px !important;
  top: 26px !important;
  width: 704px !important;
  height: 20px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.nav-links a {
  display: inline-block !important;
  margin-left: 24px !important;
  margin-right: 24px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  letter-spacing: 0.3px !important;
  color: #ffffff !important;
}

.btn-download {
  position: absolute !important;
  left: 1448px !important;
  top: 16px !important;
  width: 112px !important;
  height: 40px !important;
  border-radius: 20px !important;
  background: linear-gradient(90deg, #8e2de2 0%, #4facfe 100%) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 40px !important;
  letter-spacing: 1.12px !important;
  text-align: center !important;
}

.nav-toggle {
  display: none !important;
}

.site-nav .container {
  position: static !important;
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
}

/* —— 主区 top:72 height:3912 —— */
main {
  position: absolute !important;
  left: 0 !important;
  top: 72px !important;
  width: 1920px !important;
  height: 3166px !important;
}

.container {
  position: absolute !important;
  left: 360px !important;
  width: 1200px !important;
  margin: 0 !important;
}

/* Hero 448px */
.hero {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1920px !important;
  height: 448px !important;
}

.hero .container {
  top: 0 !important;
  height: 448px !important;
}

.hero-logo {
  position: absolute !important;
  left: 536px !important;
  top: 64px !important;
  width: 128px !important;
  height: 128px !important;
  border-radius: 28px !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.hero-fx {
  position: absolute !important;
  pointer-events: none !important;
  border: none !important;
}

.hero-fx-aurora {
  left: -28px !important;
  top: -28px !important;
  width: 184px !important;
  height: 184px !important;
  border-radius: 50% !important;
  z-index: -2 !important;
  opacity: 0 !important;
  background:
    radial-gradient(circle at 30% 35%, rgba(142, 45, 226, 0.55) 0%, transparent 52%),
    radial-gradient(circle at 72% 68%, rgba(79, 172, 254, 0.45) 0%, transparent 48%),
    radial-gradient(circle at 50% 50%, rgba(255, 209, 101, 0.2) 0%, transparent 62%) !important;
  filter: blur(8px) !important;
  transition: opacity 0.7s ease !important;
}

.hero-logo.anim-ready .hero-fx-aurora {
  opacity: 1 !important;
  animation: sf-hero-aurora 6s ease-in-out infinite !important;
}

.hero-fx-ripple {
  left: 50% !important;
  top: 50% !important;
  width: 128px !important;
  height: 128px !important;
  margin: -64px 0 0 -64px !important;
  border-radius: 28px !important;
  z-index: -1 !important;
  opacity: 0 !important;
  box-shadow: 0 0 0 0 rgba(142, 45, 226, 0.45) !important;
}

.hero-logo.anim-ready .hero-fx-ripple {
  opacity: 1 !important;
  animation: sf-hero-ripple 3.6s ease-out infinite !important;
}

.hero-fx-ring {
  left: -10px !important;
  top: -10px !important;
  width: 148px !important;
  height: 148px !important;
  border-radius: 34px !important;
  opacity: 0 !important;
  z-index: 0 !important;
  background: conic-gradient(from 0deg, #8e2de2, #4facfe, #ffd165, #ff6bcb, #8e2de2) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  padding: 2px !important;
  filter: blur(0.2px) drop-shadow(0 0 14px rgba(142, 45, 226, 0.55)) !important;
  transition: opacity 0.6s ease !important;
}

.hero-logo.anim-ready .hero-fx-ring {
  opacity: 1 !important;
  animation: sf-hero-ring-spin 5s linear infinite !important;
}

.hero-fx-ring-alt {
  left: -14px !important;
  top: -14px !important;
  width: 156px !important;
  height: 156px !important;
  border-radius: 36px !important;
  padding: 1px !important;
  background: conic-gradient(from 180deg, rgba(79, 172, 254, 0.95), rgba(255, 107, 203, 0.85), rgba(255, 209, 101, 0.9), rgba(79, 172, 254, 0.95)) !important;
  filter: blur(0.5px) drop-shadow(0 0 18px rgba(255, 107, 203, 0.4)) !important;
}

.hero-logo.anim-ready .hero-fx-ring-alt {
  opacity: 0.75 !important;
  animation: sf-hero-ring-spin-rev 7s linear infinite !important;
}

.hero-fx-shine {
  left: 0 !important;
  top: 0 !important;
  width: 128px !important;
  height: 128px !important;
  border-radius: 28px !important;
  z-index: 3 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: opacity 0.6s ease 0.2s !important;
}

.hero-fx-shine::after {
  content: "" !important;
  position: absolute !important;
  top: -40% !important;
  left: -120% !important;
  width: 55% !important;
  height: 180% !important;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%) !important;
  transform: skewX(-18deg) !important;
}

.hero-logo.anim-ready .hero-fx-shine {
  opacity: 1 !important;
}

.hero-logo.anim-ready .hero-fx-shine::after {
  animation: sf-hero-shine-sweep 3.8s ease-in-out 1.1s infinite !important;
}

.hero-fx-orbit {
  left: 50% !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  z-index: 4 !important;
}

.hero-fx-orbit i {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 6px !important;
  height: 6px !important;
  margin: -3px 0 0 -3px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 10px rgba(79, 172, 254, 0.95), 0 0 18px rgba(142, 45, 226, 0.75) !important;
  opacity: 0 !important;
}

.hero-logo.anim-ready .hero-fx-orbit i {
  opacity: 1 !important;
}

.hero-logo.anim-ready .hero-fx-orbit i:nth-child(1) {
  animation: sf-hero-orbit 4.2s linear infinite !important;
}

.hero-logo.anim-ready .hero-fx-orbit i:nth-child(2) {
  animation: sf-hero-orbit 4.2s linear -1.4s infinite !important;
  width: 4px !important;
  height: 4px !important;
  margin: -2px 0 0 -2px !important;
  background: #ffd165 !important;
}

.hero-logo.anim-ready .hero-fx-orbit i:nth-child(3) {
  animation: sf-hero-orbit 4.2s linear -2.8s infinite !important;
  width: 5px !important;
  height: 5px !important;
  margin: -2.5px 0 0 -2.5px !important;
  background: #4facfe !important;
}

.hero-fx-flare {
  left: 50% !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  z-index: 5 !important;
  opacity: 0 !important;
}

.hero-fx-flare::before,
.hero-fx-flare::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.hero-fx-flare::before {
  width: 18px !important;
  height: 18px !important;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 209, 101, 0.5) 35%, transparent 70%) !important;
}

.hero-fx-flare::after {
  width: 42px !important;
  height: 42px !important;
  background: radial-gradient(circle, rgba(79, 172, 254, 0.35) 0%, transparent 72%) !important;
}

.hero-logo.anim-ready .hero-fx-flare {
  animation: sf-hero-flare-move 5s ease-in-out infinite !important;
}

.hero-logo.anim-ready .hero-fx-flare::before {
  animation: sf-hero-flare-core 2.2s ease-in-out infinite !important;
}

.hero-logo::after {
  content: "" !important;
  position: absolute !important;
  inset: -12px !important;
  border-radius: 36px !important;
  background: radial-gradient(circle, rgba(255, 209, 101, 0.28) 0%, rgba(142, 45, 226, 0.18) 45%, transparent 72%) !important;
  opacity: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

.hero-logo.anim-ready::after {
  animation: sf-hero-glow 3.2s ease-in-out infinite !important;
}

.hero-logo img {
  position: relative !important;
  z-index: 2 !important;
  width: 128px !important;
  height: 128px !important;
  max-width: 128px !important;
  max-height: 128px !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 28px !important;
  opacity: 0;
  transform: scale(0.88) translateY(12px);
  filter: drop-shadow(0 0 0 rgba(142, 45, 226, 0));
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.85s ease;
}

.hero-logo.anim-ready img {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: drop-shadow(0 8px 28px rgba(142, 45, 226, 0.45)) drop-shadow(0 0 24px rgba(79, 172, 254, 0.25));
  animation:
    sf-hero-logo-float 4.5s ease-in-out 0.9s infinite,
    sf-hero-logo-pulse 3s ease-in-out 0.9s infinite;
}

.hero-title {
  position: absolute !important;
  left: 0 !important;
  top: 216px !important;
  width: 1200px !important;
  height: 72px !important;
  font-size: 40px !important;
  font-weight: 800 !important;
  line-height: 48px !important;
  letter-spacing: 3.2px !important;
  text-align: center !important;
  color: #ffffff !important;
}

.hero-title-en {
  display: block !important;
  margin-top: 8px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  letter-spacing: 5.6px !important;
  color: #9ca3af !important;
}

.hero-slogan {
  position: absolute !important;
  left: 0 !important;
  top: 296px !important;
  width: 1200px !important;
  height: 28px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 28px !important;
  letter-spacing: 1.8px !important;
  text-align: center !important;
  color: #ffffff !important;
}

.hero-slogan-en {
  position: absolute !important;
  left: 0 !important;
  top: 332px !important;
  width: 1200px !important;
  height: 18px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
  letter-spacing: 2.88px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  color: #6b7280 !important;
}

/* 能力卡片 248px @448 */
.features {
  position: absolute !important;
  left: 360px !important;
  top: 448px !important;
  width: 1200px !important;
  height: 248px !important;
}

.feature-card {
  position: absolute !important;
  top: 0 !important;
  width: 282px !important;
  height: 248px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  text-align: center !important;
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.38s ease,
    box-shadow 0.38s ease,
    background 0.38s ease !important;
}

.feature-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.feature-card:nth-child(1).is-visible {
  transition-delay: 0.1s, 0.1s, 0s, 0s, 0s !important;
}
.feature-card:nth-child(2).is-visible {
  transition-delay: 0.22s, 0.22s, 0s, 0s, 0s !important;
}
.feature-card:nth-child(3).is-visible {
  transition-delay: 0.34s, 0.34s, 0s, 0s, 0s !important;
}
.feature-card:nth-child(4).is-visible {
  transition-delay: 0.46s, 0.46s, 0s, 0s, 0s !important;
}

.feature-card.is-visible:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(255, 209, 101, 0.32) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 209, 101, 0.08),
    0 0 32px rgba(142, 45, 226, 0.18) !important;
}

.feature-card.is-visible:hover .feature-icon {
  transform: scale(1.1) !important;
  border-color: rgba(255, 209, 101, 0.45) !important;
  box-shadow: 0 0 20px rgba(255, 209, 101, 0.2) !important;
}

.feature-card:nth-child(1) { left: 0 !important; }
.feature-card:nth-child(2) { left: 306px !important; }
.feature-card:nth-child(3) { left: 612px !important; }
.feature-card:nth-child(4) { left: 918px !important; }

.feature-icon {
  position: absolute !important;
  left: 117px !important;
  top: 32px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(167, 139, 250, 0.35) !important;
  background: linear-gradient(145deg, rgba(142, 45, 226, 0.4), rgba(79, 172, 254, 0.25)) !important;
  color: #e9d5ff !important;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.38s ease, box-shadow 0.38s ease !important;
}

.feature-icon svg {
  position: absolute !important;
  left: 12px !important;
  top: 12px !important;
  width: 24px !important;
  height: 24px !important;
}

.feature-title {
  position: absolute !important;
  left: 0 !important;
  top: 100px !important;
  width: 282px !important;
  height: 26px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 26px !important;
  letter-spacing: 0.72px !important;
  color: #ffffff !important;
}

.feature-desc {
  position: absolute !important;
  left: 20px !important;
  top: 136px !important;
  width: 242px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
  letter-spacing: 0.26px !important;
  color: #9ca3af !important;
}

/* 产品功能 912px @696 */
.section-screens {
  position: absolute !important;
  left: 0 !important;
  top: 696px !important;
  width: 1920px !important;
  height: 912px !important;
  overflow: visible !important;
}

.section-screens .container {
  top: 0 !important;
  height: 912px !important;
  overflow: visible !important;
}

.section-head {
  position: absolute !important;
  left: 0 !important;
  top: 48px !important;
  width: 1200px !important;
  height: 88px !important;
  text-align: center !important;
}

.section-head h2 {
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 44px !important;
  letter-spacing: 2.56px !important;
  color: #ffffff !important;
}

.section-head p {
  margin-top: 14px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
  letter-spacing: 0.84px !important;
  color: #9ca3af !important;
}

/* 五台手机：flex 等间距居中 */
.screens-grid,
.feature-cards-container {
  position: absolute !important;
  left: 0 !important;
  top: 160px !important;
  width: 100% !important;
  max-width: 1200px !important;
  height: auto !important;
  min-height: 720px !important;
  overflow: visible !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 40px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

.screen-item {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 200px !important;
  height: 720px !important;
  flex: 0 0 200px !important;
  overflow: visible !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 五张手机展示图：仅 #screens 模块，禁止裁剪/遮罩 */
#screens .phone-frame.phone-image-container,
#screens .phone-image-container {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 200px !important;
  height: 408px !important;
  max-width: 200px !important;
  max-height: 408px !important;
  border-radius: 16px !important;
  border: none !important;
  background: transparent !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  clip: none !important;
  clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}

#screens .phone-image-container img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: fill !important;
  object-position: center top !important;
  margin: 0 !important;
  display: block !important;
}

.screen-meta {
  position: absolute !important;
  left: 0 !important;
  top: 432px !important;
  width: 200px !important;
  max-width: 200px !important;
  height: 288px !important;
  max-height: 288px !important;
  text-align: left !important;
  overflow: hidden !important;
}

.screen-num {
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 32px !important;
  color: #a78bfa !important;
  margin-bottom: 6px !important;
}

.screen-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  letter-spacing: 0.64px !important;
  color: #ffffff !important;
  margin-bottom: 10px !important;
}

.screen-desc {
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  letter-spacing: 0.24px !important;
  color: #9ca3af !important;
  width: 200px !important;
  max-width: 200px !important;
  max-height: 216px !important;
  overflow: hidden !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* 产品介绍 670px @1608 */
.section-about {
  position: absolute !important;
  left: 0 !important;
  top: 1608px !important;
  width: 1920px !important;
  height: 670px !important;
}

.section-about .container {
  top: 0 !important;
  height: 670px !important;
}

.about-panel {
  position: absolute !important;
  left: 0 !important;
  top: 48px !important;
  width: 1200px !important;
  height: 574px !important;
  border-radius: 16px !important;
  border: 1px solid #2a2a35 !important;
  background: #08080f !important;
  background-image: radial-gradient(ellipse 55% 45% at 0 0, rgba(244, 114, 182, 0.12), transparent 58%), radial-gradient(ellipse 50% 50% at 100% 100%, rgba(142, 45, 226, 0.1), transparent 55%) !important;
}

.about-copy {
  position: absolute !important;
  left: 44px !important;
  top: 48px !important;
  width: 560px !important;
  height: 478px !important;
}

.about-label {
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 34px !important;
  letter-spacing: 1.44px !important;
  color: #ffffff !important;
  margin-bottom: 14px !important;
}

.about-gradient-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 34px !important;
  letter-spacing: 0.44px !important;
  color: transparent !important;
  background: linear-gradient(90deg, #c084fc 0%, #38bdf8 55%, #f472b6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  margin-bottom: 28px !important;
}

.about-body p {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 27px !important;
  letter-spacing: 0.28px !important;
  color: #d1d5db !important;
  margin-bottom: 18px !important;
  width: 560px !important;
}

.about-body {
  width: 560px !important;
  max-width: 560px !important;
  height: 368px !important;
  max-height: 368px !important;
  overflow: hidden !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.about-body p:last-child {
  margin-bottom: 0 !important;
}

.about-visual {
  position: absolute !important;
  left: 676px !important;
  top: 107px !important;
  width: 480px !important;
  height: 360px !important;
  max-width: 480px !important;
  max-height: 360px !important;
  overflow: visible !important;
  perspective: 900px !important;
  isolation: isolate !important;
}

.about-fx {
  position: absolute !important;
  pointer-events: none !important;
  border: none !important;
}

.about-fx-blob {
  border-radius: 50% !important;
  z-index: 0 !important;
  opacity: 0 !important;
  filter: blur(28px) !important;
  transition: opacity 1s ease !important;
}

.about-fx-blob-a {
  left: -40px !important;
  top: 40px !important;
  width: 280px !important;
  height: 280px !important;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.45) 0%, rgba(142, 45, 226, 0.2) 55%, transparent 72%) !important;
}

.about-fx-blob-b {
  left: 220px !important;
  top: 120px !important;
  width: 260px !important;
  height: 260px !important;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.4) 0%, rgba(79, 172, 254, 0.18) 50%, transparent 70%) !important;
}

.about-visual.is-visible .about-fx-blob-a {
  opacity: 1 !important;
  animation: sf-about-blob-a 9s ease-in-out infinite !important;
}

.about-visual.is-visible .about-fx-blob-b {
  opacity: 1 !important;
  animation: sf-about-blob-b 11s ease-in-out infinite !important;
}

.about-fx-shadow {
  left: 32px !important;
  top: 328px !important;
  width: 416px !important;
  height: 36px !important;
  border-radius: 50% !important;
  z-index: 0 !important;
  opacity: 0 !important;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55) 0%, transparent 72%) !important;
  filter: blur(6px) !important;
  transition: opacity 0.9s ease !important;
}

.about-visual.is-visible .about-fx-shadow {
  opacity: 0.9 !important;
  animation: sf-about-shadow 5.5s ease-in-out infinite !important;
}

.about-fx-vignette {
  left: 0 !important;
  top: 0 !important;
  width: 480px !important;
  height: 360px !important;
  border-radius: 16px !important;
  z-index: 3 !important;
  opacity: 0 !important;
  box-shadow:
    inset 0 0 48px rgba(142, 45, 226, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  transition: opacity 0.9s ease 0.1s !important;
}

.about-visual.is-visible .about-fx-vignette {
  opacity: 1 !important;
  animation: sf-about-vignette 4s ease-in-out infinite !important;
}

.about-fx-shimmer {
  left: 0 !important;
  top: 0 !important;
  width: 480px !important;
  height: 360px !important;
  border-radius: 16px !important;
  z-index: 4 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: opacity 0.9s ease 0.15s !important;
}

.about-fx-shimmer::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 209, 101, 0.14) 50%, rgba(255, 255, 255, 0.06) 55%, transparent 80%) !important;
  transform: skewX(-12deg) !important;
}

.about-visual.is-visible .about-fx-shimmer {
  opacity: 1 !important;
}

.about-visual.is-visible .about-fx-shimmer::after {
  animation: sf-about-shimmer 8s ease-in-out 1.2s infinite !important;
}

.about-visual::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 440px !important;
  height: 340px !important;
  margin-left: -220px !important;
  margin-top: -170px !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse, rgba(244, 114, 182, 0.14) 0%, rgba(79, 172, 254, 0.1) 45%, transparent 72%) !important;
  opacity: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.about-visual.is-visible::before {
  animation: sf-about-ambient 6s ease-in-out infinite !important;
}

.about-visual img {
  position: relative !important;
  z-index: 2 !important;
  width: 480px !important;
  height: 360px !important;
  max-width: 480px !important;
  max-height: 360px !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 16px !important;
  opacity: 0;
  transform: translateY(28px) scale(0.93);
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1s ease;
  transform-origin: center center !important;
}

.about-visual.is-visible img {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: drop-shadow(0 20px 48px rgba(0, 0, 0, 0.5));
  animation: sf-about-card-float 6.5s ease-in-out 1s infinite;
}

/* 法律区 @2278（用户协议全文展示，高度随内容扩展） */
.section-legal {
  position: absolute !important;
  left: 0 !important;
  top: 2278px !important;
  width: 1920px !important;
  height: auto !important;
  min-height: 888px !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
}

.section-legal .container {
  top: 0 !important;
  height: auto !important;
  min-height: 888px !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
}

.legal-grid {
  position: absolute !important;
  left: 0 !important;
  top: 48px !important;
  width: 1200px !important;
  height: auto !important;
  min-height: 840px !important;
  max-height: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
}

.legal-card {
  position: absolute !important;
  top: 0 !important;
  width: 588px !important;
  max-width: 588px !important;
  height: 576px !important;
  max-height: 576px !important;
  padding: 36px 32px !important;
  border-radius: 12px !important;
  border: 1px solid #2a2a35 !important;
  background: #0c0c14 !important;
  overflow: hidden !important;
}

.legal-card--owner {
  left: 0 !important;
}

.legal-card--agreement {
  left: 612px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.legal-card--agreement h3 {
  position: relative !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.legal-card--agreement .legal-prose {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.legal-card h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 26px !important;
  letter-spacing: 0.72px !important;
  color: #ffffff !important;
  margin-bottom: 22px !important;
  width: 524px !important;
  max-width: 524px !important;
  height: 26px !important;
  max-height: 26px !important;
  overflow: hidden !important;
}

.legal-card ol {
  position: absolute !important;
  left: 32px !important;
  top: 84px !important;
  width: 524px !important;
  max-width: 524px !important;
  height: 456px !important;
  max-height: 456px !important;
  padding-left: 20px !important;
  list-style: decimal !important;
  overflow: hidden !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.legal-card li {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 25px !important;
  letter-spacing: 0.26px !important;
  color: #9ca3af !important;
  margin-bottom: 16px !important;
  width: 504px !important;
  max-width: 504px !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.legal-card li strong {
  color: #d1d5db !important;
  font-weight: 600 !important;
}

.legal-prose {
  position: absolute !important;
  left: 32px !important;
  top: 84px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 23px !important;
  letter-spacing: 0.24px !important;
  color: #9ca3af !important;
  width: 524px !important;
  max-width: 524px !important;
  height: 456px !important;
  max-height: 456px !important;
  overflow: hidden !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.legal-prose p {
  margin-bottom: 14px !important;
  width: 524px !important;
  max-width: 524px !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.legal-prose strong {
  color: #d1d5db !important;
  font-weight: 600 !important;
}

.legal-watermark {
  position: absolute !important;
  right: 20px !important;
  bottom: 16px !important;
  width: 80px !important;
  height: 80px !important;
  opacity: 0.1 !important;
  color: #38bdf8 !important;
  pointer-events: none !important;
}

.legal-card--agreement .legal-watermark {
  color: #a855f7 !important;
}

.legal-card--agreement .legal-watermark + .legal-watermark {
  right: 56px !important;
  width: 64px !important;
  height: 64px !important;
  opacity: 0.08 !important;
}

/* 页脚 100px @3262（法律区底 3166 + 24px） */
.site-footer {
  position: absolute !important;
  left: 0 !important;
  top: 3262px !important;
  width: 1920px !important;
  height: 100px !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  text-align: center !important;
}

.site-footer .container {
  top: 0 !important;
  left: 360px !important;
  width: 1200px !important;
  height: 100px !important;
}

.site-footer .contact {
  position: absolute !important;
  left: 0 !important;
  top: 14px !important;
  width: 1200px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  letter-spacing: 0.56px !important;
  color: #9ca3af !important;
  text-align: center !important;
}

.copyright {
  position: absolute !important;
  left: 0 !important;
  top: 40px !important;
  width: 1200px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
  letter-spacing: 0.48px !important;
  color: #6b7280 !important;
  text-align: center !important;
}

.icp {
  position: absolute !important;
  left: 0 !important;
  top: 62px !important;
  width: 1200px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
  letter-spacing: 0.48px !important;
  text-align: center !important;
}

.icp a {
  color: #6b7280 !important;
}

/* —— 动效 —— */
@keyframes sf-hero-aurora {
  0%, 100% {
    transform: scale(0.92) rotate(0deg);
    opacity: 0.75;
  }
  33% {
    transform: scale(1.06) rotate(8deg);
    opacity: 1;
  }
  66% {
    transform: scale(0.98) rotate(-6deg);
    opacity: 0.85;
  }
}

@keyframes sf-hero-ripple {
  0% {
    transform: scale(0.85);
    box-shadow: 0 0 0 0 rgba(142, 45, 226, 0.5), 0 0 0 0 rgba(79, 172, 254, 0.35);
    opacity: 0.9;
  }
  70% {
    transform: scale(1.18);
    box-shadow: 0 0 0 18px rgba(142, 45, 226, 0), 0 0 0 32px rgba(79, 172, 254, 0);
    opacity: 0;
  }
  100% {
    transform: scale(1.18);
    box-shadow: 0 0 0 18px rgba(142, 45, 226, 0), 0 0 0 32px rgba(79, 172, 254, 0);
    opacity: 0;
  }
}

@keyframes sf-hero-ring-spin-rev {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes sf-hero-flare-move {
  0%, 100% {
    opacity: 0;
    transform: translate(-18px, -22px);
  }
  15% {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
    transform: translate(28px, 18px);
  }
  85% {
    opacity: 0;
  }
}

@keyframes sf-hero-flare-core {
  0%, 100% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
}

@keyframes sf-about-blob-a {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(18px, -14px) scale(1.08);
  }
}

@keyframes sf-about-blob-b {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-16px, 12px) scale(1.06);
  }
}

@keyframes sf-about-shadow {
  0%, 100% {
    opacity: 0.65;
    transform: scaleX(0.92);
  }
  50% {
    opacity: 0.95;
    transform: scaleX(1.06);
  }
}

@keyframes sf-about-vignette {
  0%, 100% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
}

@keyframes sf-about-shimmer {
  0%, 100% {
    left: -100%;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  42% {
    left: 140%;
    opacity: 1;
  }
  52% {
    opacity: 0;
  }
}

@keyframes sf-about-ambient {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.04);
  }
}

@keyframes sf-about-card-float {
  0%, 100% {
    transform: translateY(0) rotate(-0.6deg) scale(1);
    filter: drop-shadow(0 20px 48px rgba(0, 0, 0, 0.5));
  }
  33% {
    transform: translateY(-8px) rotate(0.8deg) scale(1.012);
    filter: drop-shadow(0 28px 56px rgba(0, 0, 0, 0.55));
  }
  66% {
    transform: translateY(-4px) rotate(-0.4deg) scale(1.006);
    filter: drop-shadow(0 24px 52px rgba(0, 0, 0, 0.52));
  }
}

@keyframes sf-hero-ring-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes sf-hero-shine-sweep {
  0%, 72%, 100% {
    left: -120%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  38% {
    left: 130%;
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
}

@keyframes sf-hero-orbit {
  from {
    transform: rotate(0deg) translateX(78px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(78px) rotate(-360deg);
  }
}

@keyframes sf-hero-logo-float {
  0%, 100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: translateY(-10px) scale(1.04) rotate(1.5deg);
  }
}

@keyframes sf-hero-logo-pulse {
  0%, 100% {
    filter: drop-shadow(0 8px 28px rgba(142, 45, 226, 0.45)) drop-shadow(0 0 24px rgba(79, 172, 254, 0.25));
  }
  50% {
    filter: drop-shadow(0 12px 36px rgba(142, 45, 226, 0.65)) drop-shadow(0 0 36px rgba(255, 209, 101, 0.35));
  }
}

@keyframes sf-hero-glow {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.95);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo img,
  .hero-logo::after,
  .hero-fx,
  .hero-fx-shine::after,
  .hero-fx-orbit i,
  .hero-fx-flare::before,
  .hero-fx-flare::after,
  .feature-card,
  .about-visual::before,
  .about-fx,
  .about-fx-shimmer::after,
  .about-visual img {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}