/* ===== CSS Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC', sans-serif; background: #0b0d17; color: #e0e0e0; line-height: 1.6; min-height: 100vh; overflow-x: hidden; }
a { color: #f0b429; text-decoration: none; transition: color 0.3s ease; }
a:hover { color: #ffd966; }
ul, ol { list-style: none; padding-left: 0; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 1.5rem; }
h3 { font-size: clamp(1.2rem, 3vw, 1.75rem); margin-bottom: 0.75rem; }
p { margin-bottom: 1rem; }
section { padding: 4rem 1.5rem; max-width: 1200px; margin: 0 auto; }
section:nth-child(even) { background: rgba(255,255,255,0.02); border-radius: 2rem; }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0b0d17; }
::-webkit-scrollbar-thumb { background: #f0b429; border-radius: 4px; }

/* ===== Header & Nav ===== */
header { position: sticky; top: 0; z-index: 1000; background: rgba(11,13,23,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(240,180,41,0.15); }
nav { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.5rem; max-width: 1200px; margin: 0 auto; }
nav > a { font-size: 1.5rem; font-weight: 800; color: #f0b429; letter-spacing: 1px; }
nav > a:hover { color: #ffd966; }
nav ul { display: flex; gap: 1rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
nav ul::-webkit-scrollbar { display: none; }
nav ul li { flex-shrink: 0; }
nav ul li a { padding: 0.4rem 0.8rem; border-radius: 2rem; font-size: 0.9rem; font-weight: 500; background: rgba(240,180,41,0.08); transition: all 0.3s ease; white-space: nowrap; }
nav ul li a:hover { background: #f0b429; color: #0b0d17; transform: translateY(-2px); box-shadow: 0 4px 20px rgba(240,180,41,0.3); }

/* ===== Hero Section (渐变Banner) ===== */
#hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 70vh; padding: 6rem 2rem; background: linear-gradient(135deg, #0b0d17 0%, #1a1d2e 40%, #2a1f3d 70%, #0b0d17 100%); border-radius: 0 0 3rem 3rem; overflow: hidden; }
#hero::before { content: ''; position: absolute; top: -30%; left: -20%; width: 140%; height: 140%; background: radial-gradient(circle at 30% 50%, rgba(240,180,41,0.08) 0%, transparent 50%), radial-gradient(circle at 70% 30%, rgba(255,107,107,0.05) 0%, transparent 50%); pointer-events: none; }
#hero h1 { background: linear-gradient(135deg, #f0b429, #ffd966, #f0b429); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1rem; position: relative; z-index: 1; }
#hero p { max-width: 700px; font-size: 1.15rem; color: #b0b8d1; margin-bottom: 2.5rem; position: relative; z-index: 1; }
#hero a { display: inline-block; padding: 0.85rem 2.5rem; border-radius: 3rem; font-weight: 600; font-size: 1rem; background: #f0b429; color: #0b0d17; transition: all 0.3s ease; margin: 0.5rem; position: relative; z-index: 1; }
#hero a:last-child { background: transparent; border: 2px solid #f0b429; color: #f0b429; }
#hero a:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(240,180,41,0.35); }
#hero a:last-child:hover { background: rgba(240,180,41,0.1); }

/* ===== About / Company / Products ===== */
#about article, #company, #products article { background: rgba(255,255,255,0.04); border-radius: 1.5rem; padding: 2rem; margin-bottom: 1.5rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(240,180,41,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; }
#about article:hover, #products article:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(240,180,41,0.1); }
#company p { padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); }

/* ===== Services / Solutions / Industries ===== */
#services ul li, #solutions article, #industries ul li { background: rgba(255,255,255,0.04); border-radius: 1.25rem; padding: 1.25rem 1.5rem; margin-bottom: 1rem; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-left: 4px solid #f0b429; transition: all 0.3s ease; }
#services ul li:hover, #solutions article:hover, #industries ul li:hover { background: rgba(240,180,41,0.08); transform: translateX(6px); border-left-color: #ffd966; }
#industries ul li { border-left-color: #6c63ff; }

/* ===== Features / Benefits (毛玻璃效果) ===== */
#features ul li, #benefits ul li { background: rgba(255,255,255,0.03); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 1.5rem; padding: 1.5rem; margin-bottom: 1rem; border: 1px solid rgba(240,180,41,0.08); transition: all 0.3s ease; }
#features ul li:hover, #benefits ul li:hover { background: rgba(240,180,41,0.06); border-color: rgba(240,180,41,0.3); transform: scale(1.02); }

/* ===== Workflow ===== */
#workflow ol { counter-reset: step; }
#workflow ol li { counter-increment: step; position: relative; padding: 1rem 1rem 1rem 3rem; margin-bottom: 0.75rem; background: rgba(255,255,255,0.03); border-radius: 1rem; border-left: 3px solid #f0b429; transition: all 0.3s ease; }
#workflow ol li::before { content: counter(step); position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; background: #f0b429; color: #0b0d17; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; }
#workflow ol li:hover { background: rgba(240,180,41,0.06); transform: translateX(4px); }

/* ===== Case Studies / Testimonials ===== */
#case-studies article, #testimonials blockquote { background: rgba(255,255,255,0.04); border-radius: 1.5rem; padding: 2rem; margin-bottom: 1.5rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.06); transition: all 0.3s ease; }
#case-studies article:hover { border-color: #f0b429; transform: translateY(-4px); }
#testimonials blockquote { border-left: 6px solid #f0b429; font-style: italic; position: relative; }
#testimonials blockquote::before { content: '"'; font-size: 4rem; color: #f0b429; opacity: 0.3; position: absolute; top: -1rem; left: 0.5rem; }

/* ===== Knowledge Center ===== */
#knowledge article { margin-bottom: 2rem; }
#knowledge ul li a { display: block; padding: 0.75rem 1rem; border-radius: 1rem; background: rgba(255,255,255,0.03); margin-bottom: 0.5rem; transition: all 0.3s ease; border-left: 3px solid transparent; }
#knowledge ul li a:hover { background: rgba(240,180,41,0.08); border-left-color: #f0b429; padding-left: 1.5rem; }
#knowledge article[id^="article"] { background: rgba(255,255,255,0.02); border-radius: 1.25rem; padding: 1.5rem; margin-top: 1rem; border: 1px solid rgba(240,180,41,0.06); }

/* ===== FAQ ===== */
#faq details { background: rgba(255,255,255,0.03); border-radius: 1.25rem; margin-bottom: 0.75rem; border: 1px solid rgba(240,180,41,0.08); overflow: hidden; transition: all 0.3s ease; }
#faq details:hover { border-color: rgba(240,180,41,0.3); }
#faq summary { padding: 1.25rem 1.5rem; cursor: pointer; font-weight: 600; position: relative; list-style: none; transition: background 0.3s ease; }
#faq summary::-webkit-details-marker { display: none; }
#faq summary::after { content: '+'; position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: #f0b429; transition: transform 0.3s ease; }
#faq details[open] summary::after { content: '−'; transform: translateY(-50%) rotate(180deg); }
#faq details[open] summary { background: rgba(240,180,41,0.06); }
#faq details p { padding: 0 1.5rem 1.25rem; color: #b0b8d1; }

/* ===== HowTo ===== */
#howto ol { counter-reset: step; }
#howto ol li { counter-increment: step; position: relative; padding: 1rem 1rem 1rem 3.5rem; margin-bottom: 0.75rem; background: rgba(255,255,255,0.03); border-radius: 1rem; border-left: 3px solid #6c63ff; transition: all 0.3s ease; }
#howto ol li::before { content: counter(step); position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); width: 2.2rem; height: 2.2rem; background: #6c63ff; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; }
#howto ol li:hover { background: rgba(108,99,255,0.06); transform: translateX(4px); }

/* ===== Contact ===== */
#contact address { background: rgba(255,255,255,0.03); border-radius: 1.5rem; padding: 2rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(240,180,41,0.1); }
#contact address p { margin-bottom: 0.5rem; }
#contact address strong { color: #f0b429; }

/* ===== Footer ===== */
footer { background: rgba(11,13,23,0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(240,180,41,0.1); padding: 2rem 1.5rem; text-align: center; }
footer nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; }
footer nav ul li a { font-size: 0.9rem; padding: 0.3rem 0.8rem; border-radius: 2rem; background: rgba(240,180,41,0.06); transition: all 0.3s ease; }
footer nav ul li a:hover { background: #f0b429; color: #0b0d17; }
footer p { font-size: 0.85rem; color: #6b7280; }

/* ===== 响应式布局 (Mobile First) ===== */
@media (max-width: 768px) {
    nav ul { gap: 0.5rem; }
    nav ul li a { font-size: 0.8rem; padding: 0.3rem 0.6rem; }
    section { padding: 2.5rem 1rem; }
    #hero { min-height: 60vh; padding: 4rem 1.5rem; }
    #hero a { display: block; margin: 0.5rem auto; max-width: 280px; }
    #about article, #products article { padding: 1.25rem; }
    #services ul li, #solutions article, #industries ul li { padding: 1rem; }
    #features ul li, #benefits ul li { padding: 1rem; }
    #workflow ol li, #howto ol li { padding-left: 2.5rem; }
    #workflow ol li::before, #howto ol li::before { width: 1.6rem; height: 1.6rem; font-size: 0.75rem; left: 0.5rem; }
    footer nav ul { gap: 0.5rem; }
}

@media (max-width: 480px) {
    nav { flex-direction: column; gap: 0.5rem; padding: 0.5rem 1rem; }
    nav ul { width: 100%; justify-content: center; }
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.35rem; }
    #hero p { font-size: 1rem; }
    #faq summary { padding: 1rem; font-size: 0.95rem; }
    #faq details p { padding: 0 1rem 1rem; }
}

/* ===== 暗色模式 (系统偏好) ===== */
@media (prefers-color-scheme: light) {
    body { background: #f8f9fc; color: #1a1d2e; }
    header { background: rgba(248,249,252,0.85); border-bottom-color: rgba(26,29,46,0.08); }
    #hero { background: linear-gradient(135deg, #f8f9fc 0%, #e8ecf4 40%, #f0e6f6 70%, #f8f9fc 100%); }
    #hero h1 { background: linear-gradient(135deg, #d49a1a, #f0b429, #d49a1a); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    #hero p { color: #4a4d5e; }
    #hero a { background: #d49a1a; color: #fff; }
    #hero a:last-child { background: transparent; border-color: #d49a1a; color: #d49a1a; }
    #hero a:last-child:hover { background: rgba(212,154,26,0.08); }
    section:nth-child(even) { background: rgba(26,29,46,0.02); }
    #about article, #company, #products article { background: rgba(255,255,255,0.7); border-color: rgba(212,154,26,0.15); }
    #services ul li, #solutions article, #industries ul li { background: rgba(255,255,255,0.7); border-left-color: #d49a1a; }
    #features ul li, #benefits ul li { background: rgba(255,255,255,0.5); border-color: rgba(212,154,26,0.1); }
    #workflow ol li, #howto ol li { background: rgba(255,255,255,0.5); border-left-color: #d49a1a; }
    #workflow ol li::before, #howto ol li::before { background: #d49a1a; color: #fff; }
    #case-studies article, #testimonials blockquote { background: rgba(255,255,255,0.7); border-color: rgba(212,154,26,0.1); }
    #testimonials blockquote { border-left-color: #d49a1a; }
    #testimonials blockquote::before { color: #d49a1a; }
    #knowledge ul li a { background: rgba(255,255,255,0.5); }
    #faq details { background: rgba(255,255,255,0.5); border-color: rgba(212,154,26,0.1); }
    #faq summary::after { color: #d49a1a; }
    #faq details[open] summary { background: rgba(212,154,26,0.05); }
    #faq details p { color: #4a4d5e; }
    #contact address { background: rgba(255,255,255,0.5); border-color: rgba(212,154,26,0.1); }
    #contact address strong { color: #d49a1a; }
    footer { background: rgba(248,249,252,0.95); border-top-color: rgba(26,29,46,0.08); }
    footer nav ul li a { background: rgba(212,154,26,0.06); }
    footer nav ul li a:hover { background: #d49a1a; color: #fff; }
    footer p { color: #6b7280; }
    a { color: #d49a1a; }
    a:hover { color: #b8860b; }
    ::-webkit-scrollbar-track { background: #f8f9fc; }
    ::-webkit-scrollbar-thumb { background: #d49a1a; }
}

/* ===== 滚动动画 (Intersection Observer 后备) ===== */
@media (prefers-reduced-motion: no-preference) {
    section { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
    section.visible { opacity: 1; transform: translateY(0); }
}
/* 默认可见（无JS时） */
section { opacity: 1; transform: none; }