body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  background-color: #f5f5f7;
  color: #1d1d1f;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

:root {
  --primary: #0071e3;
  --primary-glow: rgba(0, 113, 227, 0.2);
  --accent: #0071e3;
  --bg-white: #ffffff;
  --bg-light: #f5f5f7;
  --glass: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(0, 0, 0, 0.05);
  --text-main: #1d1d1f;
  --text-dim: #86868b;
  --shadow-subtle: 0 8px 30px rgba(0, 0, 0, 0.04);
}

/* 全局动画 */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 导航栏 */
.navbar {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--glass-border);
  position: fixed !important;
  width: 100%;
  top: 0;
  z-index: 1000;
  height: 52px;
}

.navbar-item {
  color: var(--text-main) !important;
  font-size: 13px;
  font-weight: 400;
  transition: all 0.2s ease;
  position: relative;
  margin: 0 1rem;
}

.navbar-item::after {
  content: '';
  position: absolute;
  bottom: 12px;
  left: 50%;
  width: 0;
  height: 1.5px;
  background: var(--primary);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.navbar-item:hover {
  background-color: transparent !important;
  color: #000 !important;
}

.navbar-item:hover::after {
  width: 20px;
}

.navbar-dropdown {
  background-color: #ffffff !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
  padding: 8px !important;
}

.navbar-dropdown .navbar-item {
  border-radius: 6px;
  padding: 8px 16px !important;
}

/* Hero 区域增强 */
.hero.is-pro-max {
  min-height: 100vh; /* 首屏全覆盖 */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: radial-gradient(circle at 80% 20%, rgba(0, 113, 227, 0.05) 0%, #ffffff 100%);
  padding-top: 52px;
  overflow: hidden;
}

.hero-icon-blob {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 113, 227, 0.08) 0%, transparent 70%);
  filter: blur(60px);
  z-index: 0;
}

.hero-body {
  padding: 3rem 1.5rem;
  animation: fade-in-up 1s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  z-index: 1;
}

.streamer-text {
  color: #1d1d1f;
  background: none;
  -webkit-text-fill-color: initial;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

/* 3D 视觉构件 (Nano Style Code-as-Art) */
/* 3D 视觉构件 (Nano Style Code-as-Art) - Replaced by Tech Particles */
#hero-particle-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 全屏覆盖 */
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: transparent;
  /* 智能遮罩：左侧文案区重遮挡，右侧轻遮挡，中间过渡平滑 */
  mask-image: radial-gradient(circle at 15% 50%, transparent 0%, black 60%);
  -webkit-mask-image: radial-gradient(circle at 15% 50%, transparent 0%, black 60%);
}

#hero-canvas {
  width: 100%;
  height: 100%;
}
  z-index: 0;
}

.hero-3d-island svg {
  width: 60%;
  height: 60%;
  filter: drop-shadow(0 10px 20px rgba(0, 113, 227, 0.1));
}

@keyframes blob-morph {
  0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: translateY(-50%) rotate(0deg); }
  100% { border-radius: 60% 40% 30% 70% / 50% 60% 40% 60%; transform: translateY(-50%) rotate(5deg); }
}

/* 各等级 3D 小构件 */
.nano-3d-chip {
  width: 42px;
  height: 42px;
  background: white;
  border-radius: 10px;
  box-shadow: 
    4px 4px 10px rgba(0,0,0,0.05), 
    -2px -2px 5px white,
    inset 0 0 0 1px rgba(0,113,227,0.05);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--primary);
  border: none;
  transition: all 0.3s ease;
}

.glass-card:hover .nano-3d-chip {
  transform: translateZ(20px) scale(1.05);
  box-shadow: 0 15px 30px rgba(0,113,227,0.1);
  background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
}

.section {
  padding: 5rem 1.5rem !important;
}

.glass-card {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 24px;
  padding: 3rem;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(0, 113, 227, 0.01) 0%, transparent 50%);
  transition: all 0.6s ease;
  pointer-events: none;
}

.glass-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.06);
}

/* 高阶交互实验室 (Independent Finale) */
.brand-interactive-lab {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 350px; /* 增加高度以适应全宽 Logo */
  margin: 0;
  background: #f5f5f7; /* 与页面背景一致 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#brand-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.integrated-lab .card-content-overlay {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  width: 100%;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
}

.glitch-text::before {
  left: 2px;
  text-shadow: -2px 0 #0071e3;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch-text::after {
  left: -2px;
  text-shadow: -2px 0 #00d4ff;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% { clip: rect(31px, 9999px, 94px, 0); transform: skew(0.85deg); }
  10% { clip: rect(70px, 9999px, 71px, 0); transform: skew(0.1deg); }
  20% { clip: rect(29px, 9999px, 83px, 0); transform: skew(0.5deg); }
  30% { clip: rect(45px, 9999px, 10px, 0); transform: skew(0.3deg); }
  40% { clip: rect(10px, 9999px, 90px, 0); transform: skew(0.8deg); }
  50% { clip: rect(60px, 9999px, 20px, 0); transform: skew(0.2deg); }
  60% { clip: rect(85px, 9999px, 40px, 0); transform: skew(0.4deg); }
  70% { clip: rect(15px, 9999px, 60px, 0); transform: skew(0.9deg); }
  80% { clip: rect(50px, 9999px, 30px, 0); transform: skew(0.6deg); }
  90% { clip: rect(95px, 9999px, 50px, 0); transform: skew(0.1deg); }
  100% { clip: rect(67px, 9999px, 62px, 0); transform: skew(0.85deg); }
}

@keyframes glitch-anim2 {
  0% { clip: rect(65px, 9999px, 70px, 0); transform: skew(0.55deg); }
  15% { clip: rect(5px, 9999px, 15px, 0); transform: skew(0.2deg); }
  30% { clip: rect(80px, 9999px, 90px, 0); transform: skew(0.7deg); }
  45% { clip: rect(20px, 9999px, 30px, 0); transform: skew(0.4deg); }
  60% { clip: rect(40px, 9999px, 50px, 0); transform: skew(0.9deg); }
  75% { clip: rect(10px, 9999px, 100px, 0); transform: skew(0.1deg); }
  90% { clip: rect(70px, 9999px, 80px, 0); transform: skew(0.3deg); }
  100% { clip: rect(10px, 9999px, 100px, 0); transform: skew(0.55deg); }
}

.glitch-text:hover::before {
  animation: glitch-anim 0.2s infinite linear alternate-reverse;
}
.glitch-text:hover::after {
  animation: glitch-anim2 0.2s infinite linear alternate-reverse;
}

.l7-level {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  background: #f5f5f7;
  color: #1d1d1f;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* 按钮自定义 */
.button.is-dark.pro-btn {
  background: #1d1d1f;
  color: #fff;
  border: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

.button.is-dark.pro-btn:hover {
  background: #000;
  transform: translateY(-1px);
}

/* 底部 */
.footer {
  background: var(--bg-light) !important;
  color: var(--text-dim) !important;
  padding: 3rem 1.5rem !important;
  border-top: 1px solid var(--glass-border);
  font-size: 12px;
}

/* 布局间距压缩修复 */
#expertise {
  margin-top: -2rem;
}

.container.is-max-desktop {
  max-width: 980px !important;
}