/* ===== 全局重置与基础 ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC', sans-serif; background: #0f0f1a; color: #e0e0e0; line-height: 1.6; min-height: 100vh; }
a { color: #ffd700; text-decoration: none; transition: color 0.3s; }
a:hover, a:focus { color: #ffe44d; outline: none; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.3; color: #ffffff; }
h1 { font-size: clamp(1.8rem, 5vw, 3rem); }
h2 { font-size: clamp(1.4rem, 4vw, 2.2rem); margin-bottom: 1.5rem; }
h3 { font-size: clamp(1.1rem, 3vw, 1.5rem); margin-bottom: 0.75rem; }
p { margin-bottom: 1rem; }
section { padding: 4rem 1.5rem; max-width: 1200px; margin: 0 auto; }
address { font-style: normal; }

/* ===== 暗色模式基础 ===== */
@media (prefers-color-scheme: light) {
  body { background: #f5f5fa; color: #222; }
  h1, h2, h3, h4, h5, h6 { color: #1a1a2e; }
  a { color: #1a1a2e; }
  a:hover { color: #ffd700; }
}

/* ===== Header & Nav ===== */
header { position: sticky; top: 0; z-index: 1000; background: rgba(15, 15, 26, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 215, 0, 0.15); transition: background 0.3s; }
header nav { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0.75rem 1.5rem; flex-wrap: wrap; gap: 1rem; }
header nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: center; }
header nav ul li a { font-size: 0.9rem; padding: 0.3rem 0.6rem; border-radius: 8px; transition: background 0.3s, color 0.3s; white-space: nowrap; }
header nav ul li a:hover { background: rgba(255, 215, 0, 0.15); color: #ffd700; }
@media (prefers-color-scheme: light) {
  header { background: rgba(245, 245, 250, 0.85); }
}

/* ===== Hero Section (渐变Banner + 圆角卡片 + 毛玻璃) ===== */
#hero { position: relative; text-align: center; padding: 6rem 1.5rem 4rem; background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 50%, #1a1a2e 100%); border-radius: 0 0 2rem 2rem; margin: 0 0 2rem; overflow: hidden; }
#hero::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 30% 40%, rgba(255, 215, 0, 0.08) 0%, transparent 60%), radial-gradient(circle at 70% 60%, rgba(255, 215, 0, 0.05) 0%, transparent 50%); animation: heroGlow 12s ease-in-out infinite alternate; z-index: 0; }
@keyframes heroGlow { 0% { transform: translate(0, 0); } 100% { transform: translate(5%, 5%); } }
#hero h1, #hero p, #hero a, #hero div { position: relative; z-index: 1; }
#hero h1 { margin-bottom: 1rem; color: #ffffff; text-shadow: 0 2px 20px rgba(255, 215, 0, 0.3); }
#hero p { font-size: 1.1rem; max-width: 700px; margin: 0 auto 2rem; color: #ccc; }
#hero a[role="button"] { display: inline-block; background: linear-gradient(135deg, #ffd700, #ffaa00); color: #1a1a2e; font-weight: 700; padding: 0.8rem 2.5rem; border-radius: 50px; font-size: 1rem; transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4); }
#hero a[role="button"]:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6); }
#hero div[aria-label="轮播展示"] { margin-top: 2.5rem; display: flex; justify-content: center; }
#hero figure { border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); background: rgba(255, 255, 255, 0.05); max-width: 800px; width: 100%; transition: transform 0.5s ease, opacity 0.5s ease; }
#hero figure img { border-radius: 20px; width: 100%; height: auto; }
@media (prefers-color-scheme: light) {
  #hero { background: linear-gradient(135deg, #e8e8f0, #d0d0e0, #e8e8f0); }
  #hero h1 { color: #1a1a2e; text-shadow: none; }
  #hero p { color: #444; }
}

/* ===== 圆角卡片通用 ===== */
section article, section blockquote, #services ul, #industries ul, #features ul, #benefits ul, #workflow ol, #case-studies article, #knowledge article, #faq details, #howto ol, #contact address { background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 215, 0, 0.1); border-radius: 20px; padding: 1.5rem; margin-bottom: 1.5rem; transition: transform 0.3s, box-shadow 0.3s, background 0.3s; }
section article:hover, section blockquote:hover, #services ul:hover, #industries ul:hover, #features ul:hover, #benefits ul:hover, #workflow ol:hover, #case-studies article:hover, #knowledge article:hover, #faq details:hover, #howto ol:hover, #contact address:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(255, 215, 0, 0.08); background: rgba(255, 255, 255, 0.07); }
#services ul li, #industries ul li, #features ul li, #benefits ul li { padding: 0.5rem 0; border-bottom: 1px solid rgba(255, 215, 0, 0.05); }
#services ul li:last-child, #industries ul li:last-child, #features ul li:last-child, #benefits ul li:last-child { border-bottom: none; }
#workflow ol, #howto ol { counter-reset: step; }
#workflow ol li, #howto ol li { counter-increment: step; padding: 0.5rem 0 0.5rem 2rem; position: relative; }
#workflow ol li::before, #howto ol li::before { content: counter(step); position: absolute; left: 0.5rem; top: 0.5rem; width: 1.5rem; height: 1.5rem; background: #ffd700; color: #1a1a2e; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
@media (prefers-color-scheme: light) {
  section article, section blockquote, #services ul, #industries ul, #features ul, #benefits ul, #workflow ol, #case-studies article, #knowledge article, #faq details, #howto ol, #contact address { background: rgba(255, 255, 255, 0.7); border-color: rgba(26, 26, 46, 0.1); }
  section article:hover, section blockquote:hover, #services ul:hover, #industries ul:hover, #features ul:hover, #benefits ul:hover, #workflow ol:hover, #case-studies article:hover, #knowledge article:hover, #faq details:hover, #howto ol:hover, #contact address:hover { background: rgba(255, 255, 255, 0.9); box-shadow: 0 12px 30px rgba(26, 26, 46, 0.1); }
}

/* ===== 滚动动画 (Intersection Observer 配合) ===== */
section { opacity: 0; transform: translateY(30px); animation: fadeUp 0.8s ease forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
section:nth-child(2) { animation-delay: 0.1s; }
section:nth-child(3) { animation-delay: 0.2s; }
section:nth-child(4) { animation-delay: 0.3s; }
section:nth-child(5) { animation-delay: 0.4s; }
section:nth-child(6) { animation-delay: 0.5s; }
section:nth-child(7) { animation-delay: 0.6s; }
section:nth-child(8) { animation-delay: 0.7s; }
section:nth-child(9) { animation-delay: 0.8s; }
section:nth-child(10) { animation-delay: 0.9s; }
section:nth-child(11) { animation-delay: 1s; }
section:nth-child(12) { animation-delay: 1.1s; }
section:nth-child(13) { animation-delay: 1.2s; }
section:nth-child(14) { animation-delay: 1.3s; }
section:nth-child(15) { animation-delay: 1.4s; }

/* ===== FAQ details ===== */
#faq details summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; padding: 0.5rem 0; display: flex; align-items: center; gap: 0.5rem; }
#faq details summary::marker { color: #ffd700; }
#faq details[open] summary { margin-bottom: 0.75rem; }
#faq details p { padding-left: 1.5rem; color: #bbb; }
@media (prefers-color-scheme: light) {
  #faq details p { color: #555; }
}

/* ===== Footer ===== */
footer { background: rgba(15, 15, 26, 0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid rgba(255, 215, 0, 0.1); padding: 2rem 1.5rem; text-align: center; }
footer nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; margin-bottom: 1.5rem; }
footer nav ul li a { font-size: 0.9rem; color: #aaa; }
footer nav ul li a:hover { color: #ffd700; }
footer p { font-size: 0.85rem; color: #888; }
footer a { color: #ffd700; }
@media (prefers-color-scheme: light) {
  footer { background: rgba(245, 245, 250, 0.9); }
  footer nav ul li a { color: #555; }
}

/* ===== Back to Top ===== */
#back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #ffd700, #ffaa00); color: #1a1a2e; border: none; font-size: 1.5rem; cursor: pointer; box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4); display: none; z-index: 999; transition: transform 0.3s, box-shadow 0.3s; }
#back-to-top:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6); }

/* ===== 响应式布局 ===== */
@media (max-width: 768px) {
  header nav { flex-direction: column; align-items: stretch; }
  header nav ul { justify-content: center; gap: 0.3rem 0.8rem; }
  header nav ul li a { font-size: 0.8rem; padding: 0.2rem 0.4rem; }
  section { padding: 2.5rem 1rem; }
  #hero { padding: 4rem 1rem 2.5rem; border-radius: 0 0 1.5rem 1.5rem; }
  #hero p { font-size: 1rem; }
  section article, section blockquote, #services ul, #industries ul, #features ul, #benefits ul, #workflow ol, #case-studies article, #knowledge article, #faq details, #howto ol, #contact address { padding: 1.2rem; }
  #back-to-top { bottom: 1.5rem; right: 1.5rem; width: 40px; height: 40px; font-size: 1.2rem; }
}

@media (max-width: 480px) {
  header nav ul { gap: 0.2rem 0.5rem; }
  header nav ul li a { font-size: 0.75rem; padding: 0.15rem 0.3rem; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
  #hero a[role="button"] { padding: 0.6rem 1.8rem; font-size: 0.9rem; }
}

/* ===== 辅助 & 隐藏 ===== */
#legal[style*="display:none"] { display: none !important; }
[aria-label] { outline: none; }

/* ===== 平滑过渡 & 性能 ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}