现在开始构建这个令人惊叹的3D打印科技官网。我需要一个视觉冲击力强、充满未来感的页面，融合绿色、蓝色和黑色的暗黑赛博美学。
```json
{
"summary": "设计了一个暗黑赛博风格的3D打印科技官网，以黑色为基底，霓虹绿和电光蓝为点缀色。页面包含：1) 全屏Hero区域，带有动态网格粒子背景、层叠3D几何动画；2) 三大核心技术优势卡片（发光边框+霓虹图标）；3) 产品展示网格（使用abstract-8.jpg和几何占位图形）；4) 工作流程时间线；5) 动态数据统计；6) CTA联系区；7) 底部导航。字体使用Orbitron（标题）+ Space Grotesk（正文），大量运用CSS滤镜发光、玻璃拟态、扫描线动画、滚动触发动效等技术手段，营造沉浸式未来科技体验。",
"widget": {
"type": "full-html",
"html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>PRINTVISION · 3D打印未来</title>\n <script src=\"https://cdn.tailwindcss.com\">\n </script>\n <link href=\"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <style>\n :root {\n --bg-primary: #06080a;\n --bg-secondary: #0b1016;\n --bg-card: #0f1923;\n --green: #00ff88;\n --green-dark: #00cc6a;\n --green-glow: rgba(0, 255, 136, 0.25);\n --blue: #0088ff;\n --blue-light: #00d4ff;\n --blue-glow: rgba(0, 136, 255, 0.25);\n --cyan: #00e5ff;\n --text: #e8eaed;\n --text-muted: #7a8a9a;\n --border: rgba(0, 255, 136, 0.12);\n --border-blue: rgba(0, 136, 255, 0.15);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html {\n scroll-behavior: smooth;\n }\n\n body {\n font-family: 'Space Grotesk', sans-serif;\n background: var(--bg-primary);\n color: var(--text);\n overflow-x: hidden;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-family: 'Orbitron', sans-serif;\n }\n\n /* ===== 扫描线覆盖 ===== */\n .scanlines {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 9998;\n background: repeating-linear-gradient(0deg,\n transparent,\n transparent 2px,\n rgba(0, 255, 136, 0.015) 2px,\n rgba(0, 255, 136, 0.015) 4px);\n }\n\n /* ===== 颗粒噪声 ===== */\n .noise-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 9997;\n opacity: 0.035;\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E\");\n background-repeat: repeat;\n background-size: 256px 256px;\n }\n\n /* ===== 导航 ===== */\n .navbar {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 9999;\n padding: 1rem 0;\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n background: transparent;\n }\n\n .navbar.scrolled {\n background: rgba(6, 8, 10, 0.85);\n backdrop-filter: blur(20px) saturate(1.2);\n -webkit-backdrop-filter: blur(20px) saturate(1.2);\n border-bottom: 1px solid var(--border);\n padding: 0.6rem 0;\n }\n\n .nav-link {\n position: relative;\n font-size: 0.85rem;\n font-weight: 500;\n letter-spacing: 0.05em;\n color: var(--text-muted);\n transition: color 0.3s ease;\n cursor: pointer;\n font-family: 'Space Grotesk', sans-serif;\n }\n\n .nav-link::after {\n content: '';\n position: absolute;\n bottom: -4px;\n left: 0;\n width: 0;\n height: 2px;\n background: linear-gradient(90deg, var(--green), var(--blue));\n transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n border-radius: 2px;\n box-shadow: 0 0 12px var(--green-glow);\n }\n\n .nav-link:hover {\n color: var(--text);\n }\n\n .nav-link:hover::after {\n width: 100%;\n }\n\n /* ===== Hero 区域 ===== */\n #hero {\n position: relative;\n min-height: 100vh;\n display: flex;\n align-items: center;\n overflow: hidden;\n background: var(--bg-primary);\n }\n\n /* 动态网格背景 */\n .hero-grid {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image:\n linear-gradient(rgba(0, 255, 136, 0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(0, 136, 255, 0.03) 1px, transparent 1px);\n background-size: 60px 60px;\n animation: gridPulse 8s ease-in-out infinite;\n }\n\n @keyframes gridPulse {\n 0%,\n 100% {\n opacity: 0.6;\n }\n 50% {\n opacity: 1;\n }\n }\n\n /* 径向光晕 */\n .hero-glow-left {\n position: absolute;\n top: -20%;\n left: -10%;\n width: 60%;\n height: 80%;\n background: radial-gradient(ellipse at center, rgba(0, 255, 136, 0.12) 0%, transparent 70%);\n pointer-events: none;\n animation: glowDrift 12s ease-in-out infinite alternate;\n }\n\n .hero-glow-right {\n position: absolute;\n bottom: -10%;\n right: -10%;\n width: 50%;\n height: 70%;\n background: radial-gradient(ellipse at center, rgba(0, 136, 255, 0.10) 0%, transparent 70%);\n pointer-events: none;\n animation: glowDrift 12s ease-in-out infinite alternate-reverse;\n }\n\n @keyframes glowDrift {\n 0% {\n transform: translate(0, 0) scale(1);\n }\n 100% {\n transform: translate(5%, 5%) scale(1.1);\n }\n }\n\n /* 抽象3D形状装饰 */\n .hero-shape {\n position: absolute;\n border-radius: 50%;\n pointer-events: none;\n opacity: 0.15;\n }\n\n .hero-shape-1 {\n top: 15%;\n right: 8%;\n width: 300px;\n height: 300px;\n border: 1px solid var(--green);\n animation: rotateShape 30s linear infinite;\n box-shadow: 0 0 60px var(--green-glow), inset 0 0 60px var(--green-glow);\n }\n\n .hero-shape-2 {\n bottom: 10%;\n left: 5%;\n width: 200px;\n height: 200px;\n border: 1px solid var(--blue);\n animation: rotateShape 25s linear infinite reverse;\n box-shadow: 0 0 40px var(--blue-glow), inset 0 0 40px var(--blue-glow);\n }\n\n .hero-shape-3 {\n top: 40%;\n right: 25%;\n width: 120px;\n height: 120px;\n border: 1px solid var(--cyan);\n animation: rotateShape 20s linear infinite;\n box-shadow: 0 0 30px rgba(0, 229, 255, 0.15);\n }\n\n @keyframes rotateShape {\n 0% {\n transform: rotate(0deg) scale(1);\n }\n 50% {\n transform: rotate(180deg) scale(1.05);\n }\n 100% {\n transform: rotate(360deg) scale(1);\n }\n }\n\n /* 层叠打印线动画 — 致敬3D打印 */\n .print-lines {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 40%;\n pointer-events: none;\n overflow: hidden;\n mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);\n -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);\n }\n\n .print-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--green), var(--blue), transparent);\n animation: printLayer 6s ease-in-out infinite;\n opacity: 0.3;\n }\n\n .print-line:nth-child(1) {\n bottom: 5%;\n animation-delay: 0s;\n }\n .print-line:nth-child(2) {\n bottom: 15%;\n animation-delay: 1.2s;\n }\n .print-line:nth-child(3) {\n bottom: 25%;\n animation-delay: 2.4s;\n height: 2px;\n }\n .print-line:nth-child(4) {\n bottom: 35%;\n animation-delay: 3.6s;\n }\n .print-line:nth-child(5) {\n bottom: 45%;\n animation-delay: 4.8s;\n height: 2px;\n }\n .print-line:nth-child(6) {\n bottom: 55%;\n animation-delay: 0.6s;\n }\n .print-line:nth-child(7) {\n bottom: 65%;\n animation-delay: 1.8s;\n }\n .print-line:nth-child(8) {\n bottom: 75%;\n animation-delay: 3s;\n }\n\n @keyframes printLayer {\n 0%,\n 100% {\n transform: scaleX(0.3);\n opacity: 0.1;\n }\n 50% {\n transform: scaleX(1);\n opacity: 0.4;\n }\n }\n\n /* 浮动粒子 */\n .particle {\n position: absolute;\n width: 3px;\n height: 3px;\n background: var(--green);\n border-radius: 50%;\n box-shadow: 0 0 8px var(--green-glow);\n animation: floatParticle 8s ease-in-out infinite;\n opacity: 0;\n }\n\n .particle:nth-child(1) {\n top: 20%;\n left: 10%;\n animation-delay: 0s;\n background: var(--green);\n }\n .particle:nth-child(2) {\n top: 60%;\n left: 80%;\n animation-delay: 1.5s;\n background: var(--blue);\n box-shadow: 0 0 8px var(--blue-glow);\n }\n .particle:nth-child(3) {\n top: 30%;\n left: 50%;\n animation-delay: 3s;\n background: var(--cyan);\n width: 4px;\n height: 4px;\n }\n .particle:nth-child(4) {\n top: 75%;\n left: 20%;\n animation-delay: 4.5s;\n background: var(--green);\n }\n .particle:nth-child(5) {\n top: 10%;\n left: 70%;\n animation-delay: 2s;\n background: var(--blue);\n }\n .particle:nth-child(6) {\n top: 85%;\n left: 60%;\n animation-delay: 5.5s;\n background: var(--cyan);\n }\n .particle:nth-child(7) {\n top: 45%;\n left: 30%;\n animation-delay: 0.8s;\n background: var(--green);\n width: 5px;\n height: 5px;\n }\n .particle:nth-child(8) {\n top: 50%;\n left: 90%;\n animation-delay: 3.2s;\n background: var(--blue);\n }\n\n @keyframes floatParticle {\n 0% {\n transform: translateY(0) scale(0);\n opacity: 0;\n }\n 20% {\n opacity: 1;\n transform: translateY(-30px) scale(1);\n }\n 80% {\n opacity: 1;\n transform: translateY(-80px) scale(0.8);\n }\n 100% {\n transform: translateY(-120px) scale(0);\n opacity: 0;\n }\n }\n\n /* Hero 标题动画 */\n .hero-title {\n font-size: clamp(2.5rem, 8vw, 5.5rem);\n font-weight: 900;\n line-height: 1.05;\n letter-spacing: -0.02em;\n background: linear-gradient(135deg, #e8eaed 0%, var(--green) 40%, var(--blue-light) 70%, #e8eaed 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n animation: titleShimmer 6s ease-in-out infinite;\n background-size: 200% 200%;\n }\n\n @keyframes titleShimmer {\n 0%,\n 100% {\n background-position: 0% 50%;\n }\n 50% {\n background-position: 100% 50%;\n }\n }\n\n .hero-subtitle {\n font-size: clamp(1rem, 2vw, 1.25rem);\n color: var(--text-muted);\n line-height: 1.7;\n max-width: 540px;\n }\n\n /* ===== CTA 按钮 ===== */\n .btn-primary {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.9rem 2.4rem;\n font-family: 'Orbitron', sans-serif;\n font-weight: 600;\n font-size: 0.85rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: #06080a;\n background: linear-gradient(135deg, var(--green), var(--green-dark));\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n overflow: hidden;\n z-index: 1;\n }\n\n .btn-primary::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\n transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n z-index: -1;\n }\n\n .btn-primary:hover::before {\n left: 100%;\n }\n\n .btn-primary:hover {\n transform: translateY(-2px) scale(1.02);\n box-shadow: 0 8px 40px var(--green-glow);\n }\n\n .btn-primary:active {\n transform: translateY(0) scale(0.98);\n }\n\n .btn-secondary {\n display: inline-flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.9rem 2.4rem;\n font-family: 'Orbitron', sans-serif;\n font-weight: 500;\n font-size: 0.85rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--text);\n background: transparent;\n border: 1px solid var(--border);\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n .btn-secondary:hover {\n border-color: var(--green);\n box-shadow: 0 0 24px var(--green-glow), inset 0 0 24px rgba(0, 255, 136, 0.05);\n transform: translateY(-2px);\n }\n\n /* ===== Section 通用 ===== */\n .section-label {\n font-family: 'Orbitron', sans-serif;\n font-size: 0.7rem;\n font-weight: 600;\n letter-spacing: 0.3em;\n text-transform: uppercase;\n color: var(--green);\n margin-bottom: 1rem;\n display: inline-block;\n position: relative;\n padding-left: 2.5rem;\n }\n\n .section-label::before {\n content: '';\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 1.8rem;\n height: 1px;\n background: var(--green);\n box-shadow: 0 0 8px var(--green-glow);\n }\n\n .section-title {\n font-size: clamp(1.8rem, 4vw, 3rem);\n font-weight: 700;\n line-height: 1.15;\n letter-spacing: -0.01em;\n color: var(--text);\n }\n\n .section-title .highlight {\n background: linear-gradient(135deg, var(--green), var(--blue-light));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .section-desc {\n color: var(--text-muted);\n font-size: 1.05rem;\n line-height: 1.7;\n max-width: 560px;\n }\n\n /* ===== 特性卡片 ===== */\n .feature-card {\n position: relative;\n background: var(--bg-card);\n border: 1px solid var(--border);\n border-radius: 12px;\n padding: 2.5rem 2rem;\n transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n overflow: hidden;\n cursor: default;\n }\n\n .feature-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: linear-gradient(90deg, var(--green), var(--blue), var(--green));\n background-size: 200% 100%;\n animation: borderShimmer 3s ease-in-out infinite;\n opacity: 0;\n transition: opacity 0.4s ease;\n }\n\n .feature-card:hover::before {\n opacity: 1;\n }\n\n .feature-card::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(135deg, var(--green-glow) 0%, transparent 50%, var(--blue-glow) 100%);\n opacity: 0;\n transition: opacity 0.5s ease;\n border-radius: 12px;\n }\n\n .feature-card:hover {\n transform: translateY(-8px);\n border-color: rgba(0, 255, 136, 0.25);\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 255, 136, 0.06);\n }\n\n .feature-card:hover::after {\n opacity: 1;\n }\n\n .feature-card>* {\n position: relative;\n z-index: 1;\n }\n\n .feature-icon {\n width: 56px;\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 12px;\n font-size: 1.4rem;\n margin-bottom: 1.5rem;\n transition: all 0.4s ease;\n }\n\n .feature-card:nth-child(1) .feature-icon {\n background: rgba(0, 255, 136, 0.1);\n color: var(--green);\n border: 1px solid rgba(0, 255, 136, 0.2);\n }\n\n .feature-card:nth-child(2) .feature-icon {\n background: rgba(0, 136, 255, 0.1);\n color: var(--blue);\n border: 1px solid rgba(0, 136, 255, 0.2);\n }\n\n .feature-card:nth-child(3) .feature-icon {\n background: rgba(0, 229, 255, 0.1);\n color: var(--cyan);\n border: 1px solid rgba(0, 229, 255, 0.2);\n }\n\n .feature-card:hover .feature-icon {\n transform: scale(1.1) rotate(-3deg);\n }\n\n .feature-card h3 {\n font-size: 1.2rem;\n font-weight: 600;\n margin-bottom: 0.8rem;\n letter-spacing: 0.02em;\n }\n\n .feature-card p {\n color: var(--text-muted);\n font-size: 0.95rem;\n line-height: 1.7;\n }\n\n .feature-number {\n position: absolute;\n bottom: 1rem;\n right: 1.5rem;\n font-family: 'Orbitron', sans-serif;\n font-size: 3.5rem;\n font-weight: 900;\n color: rgba(255, 255, 255, 0.03);\n line-height: 1;\n transition: color 0.4s ease;\n pointer-events: none;\n }\n\n .feature-card:hover .feature-number {\n color: rgba(0, 255, 136, 0.06);\n }\n\n @keyframes borderShimmer {\n 0%,\n 100% {\n background-position: 0% 50%;\n }\n 50% {\n background-position: 100% 50%;\n }\n }\n\n /* ===== 产品展示卡片 ===== */\n .showcase-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 1.5rem;\n }\n\n .showcase-item {\n position: relative;\n border-radius: 12px;\n overflow: hidden;\n background: var(--bg-card);\n border: 1px solid var(--border);\n transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n cursor: pointer;\n aspect-ratio: 4/3;\n }\n\n .showcase-item:hover {\n transform: translateY(-6px);\n border-color: rgba(0, 255, 136, 0.25);\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 255, 136, 0.05);\n }\n\n .showcase-visual {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n overflow: hidden;\n }\n\n .showcase-visual .placeholder-shape {\n width: 60%;\n height: 60%;\n border-radius: 16px;\n opacity: 0.5;\n transition: all 0.6s ease;\n }\n\n .showcase-item:hover .placeholder-shape {\n opacity: 0.8;\n transform: scale(1.05) rotate(2deg);\n }\n\n .showcase-overlay {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 1.5rem;\n background: linear-gradient(to top, rgba(6, 8, 10, 0.9) 0%, transparent 100%);\n transform: translateY(20px);\n opacity: 0;\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n .showcase-item:hover .showcase-overlay {\n transform: translateY(0);\n opacity: 1;\n }\n\n .showcase-overlay h4 {\n font-size: 1rem;\n font-weight: 600;\n margin-bottom: 0.2rem;\n }\n\n .showcase-overlay p {\n font-size: 0.8rem;\n color: var(--text-muted);\n font-family: 'Space Grotesk', sans-serif;\n }\n\n .showcase-tag {\n position: absolute;\n top: 1rem;\n left: 1rem;\n padding: 0.25rem 0.75rem;\n font-size: 0.65rem;\n font-family: 'Orbitron', sans-serif;\n font-weight: 600;\n letter-spacing: 0.1em;\n color: var(--bg-primary);\n background: var(--green);\n border-radius: 4px;\n z-index: 2;\n opacity: 0;\n transform: translateY(-10px);\n transition: all 0.4s ease;\n }\n\n .showcase-item:hover .showcase-tag {\n opacity: 1;\n transform: translateY(0);\n }\n\n /* ===== 工作流 ===== */\n .workflow-step {\n display: flex;\n gap: 2rem;\n position: relative;\n padding-bottom: 3rem;\n }\n\n .workflow-step:not(:last-child)::before {\n content: '';\n position: absolute;\n left: 23px;\n top: 50px;\n bottom: 0;\n width: 1px;\n background: linear-gradient(to bottom, var(--green), var(--blue), transparent);\n }\n\n .workflow-step:last-child {\n padding-bottom: 0;\n }\n\n .workflow-number {\n flex-shrink: 0;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Orbitron', sans-serif;\n font-weight: 700;\n font-size: 1.1rem;\n background: var(--bg-card);\n border: 1px solid var(--border);\n color: var(--green);\n transition: all 0.4s ease;\n }\n\n .workflow-step:hover .workflow-number {\n border-color: var(--green);\n box-shadow: 0 0 24px var(--green-glow);\n background: rgba(0, 255, 136, 0.05);\n }\n\n .workflow-content h4 {\n font-size: 1.1rem;\n font-weight: 600;\n margin-bottom: 0.4rem;\n letter-spacing: 0.02em;\n }\n\n .workflow-content p {\n color: var(--text-muted);\n font-size: 0.9rem;\n line-height: 1.7;\n }\n\n /* ===== 统计数字 ===== */\n .stat-item {\n text-align: center;\n padding: 2rem;\n border: 1px solid var(--border);\n border-radius: 12px;\n background: var(--bg-card);\n transition: all 0.4s ease;\n }\n\n .stat-item:hover {\n border-color: rgba(0, 255, 136, 0.2);\n box-shadow: 0 0 30px rgba(0, 255, 136, 0.04);\n transform: translateY(-4px);\n }\n\n .stat-number {\n font-family: 'Orbitron', sans-serif;\n font-size: clamp(2.2rem, 5vw, 3.5rem);\n font-weight: 800;\n background: linear-gradient(135deg, var(--green), var(--blue-light));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n line-height: 1.2;\n }\n\n .stat-label {\n font-size: 0.85rem;\n color: var(--text-muted);\n margin-top: 0.3rem;\n font-weight: 500;\n letter-spacing: 0.05em;\n }\n\n .stat-symbol {\n font-size: 0.6em;\n vertical-align: super;\n }\n\n /* ===== CTA 区域 ===== */\n #cta {\n position: relative;\n overflow: hidden;\n }\n\n #cta::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: radial-gradient(ellipse at 30% 50%, rgba(0, 255, 136, 0.06) 0%, transparent 60%),\n radial-gradient(ellipse at 70% 50%, rgba(0, 136, 255, 0.06) 0%, transparent 60%);\n pointer-events: none;\n }\n\n .cta-box {\n position: relative;\n border: 1px solid var(--border);\n border-radius: 16px;\n padding: 4rem 3rem;\n background: var(--bg-card);\n overflow: hidden;\n }\n\n .cta-box::before {\n content: '';\n position: absolute;\n top: -2px;\n left: -2px;\n right: -2px;\n bottom: -2px;\n background: linear-gradient(135deg, var(--green), transparent, var(--blue), transparent);\n border-radius: 17px;\n z-index: -1;\n opacity: 0.3;\n animation: ctaBorderGlow 4s ease-in-out infinite;\n }\n\n @keyframes ctaBorderGlow {\n 0%,\n 100% {\n opacity: 0.2;\n }\n 50% {\n opacity: 0.5;\n }\n }\n\n .cta-box .inner {\n background: var(--bg-card);\n border-radius: 16px;\n position: relative;\n z-index: 1;\n }\n\n /* ===== Footer ===== */\n #footer {\n border-top: 1px solid var(--border);\n }\n\n .footer-link {\n color: var(--text-muted);\n font-size: 0.85rem;\n transition: color 0.3s ease;\n cursor: pointer;\n }\n\n .footer-link:hover {\n color: var(--green);\n }\n\n .footer-title {\n font-family: 'Orbitron', sans-serif;\n font-size: 0.7rem;\n font-weight: 600;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--text-muted);\n margin-bottom: 1rem;\n }\n\n /* ===== 滚动进入动画 ===== */\n .reveal {\n opacity: 0;\n transform: translateY(40px);\n transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n .reveal.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n .reveal-delay-1 {\n transition-delay: 0.1s;\n }\n .reveal-delay-2 {\n transition-delay: 0.2s;\n }\n .reveal-delay-3 {\n transition-delay: 0.3s;\n }\n .reveal-delay-4 {\n transition-delay: 0.4s;\n }\n .reveal-delay-5 {\n transition-delay: 0.5s;\n }\n\n /* ===== 文本渐变 ===== */\n .text-gradient-green-blue {\n background: linear-gradient(135deg, var(--green), var(--blue-light));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n /* ===== 自定义滚动条 ===== */\n ::-webkit-scrollbar {\n width: 6px;\n }\n\n ::-webkit-scrollbar-track {\n background: var(--bg-primary);\n }\n\n ::-webkit-scrollbar-thumb {\n background: var(--green);\n border-radius: 3px;\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background: var(--green-dark);\n }\n\n /* ===== 移动端菜单 ===== */\n .mobile-menu {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(6, 8, 10, 0.96);\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n z-index: 9998;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 2rem;\n opacity: 0;\n pointer-events: none;\n transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n .mobile-menu.open {\n opacity: 1;\n pointer-events: all;\n }\n\n .mobile-menu a {\n font-family: 'Orbitron', sans-serif;\n font-size: 1.4rem;\n font-weight: 600;\n color: var(--text);\n text-decoration: none;\n letter-spacing: 0.05em;\n transition: color 0.3s ease;\n }\n\n .mobile-menu a:hover {\n color: var(--green);\n }\n\n .hamburger {\n width: 28px;\n height: 20px;\n position: relative;\n cursor: pointer;\n z-index: 9999;\n }\n\n .hamburger span {\n display: block;\n position: absolute;\n width: 100%;\n height: 2px;\n background: var(--text);\n border-radius: 2px;\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n .hamburger span:nth-child(1) {\n top: 0;\n }\n .hamburger span:nth-child(2) {\n top: 9px;\n }\n .hamburger span:nth-child(3) {\n top: 18px;\n }\n\n .hamburger.active span:nth-child(1) {\n top: 9px;\n transform: rotate(45deg);\n background: var(--green);\n }\n\n .hamburger.active span:nth-child(2) {\n opacity: 0;\n transform: scaleX(0);\n }\n\n .hamburger.active span:nth-child(3) {\n top: 9px;\n transform: rotate(-45deg);\n background: var(--green);\n }\n\n /* ===== 品牌logo ===== */\n .logo {\n font-family: 'Orbitron', sans-serif;\n font-weight: 800;\n font-size: 1.3rem;\n letter-spacing: 0.05em;\n color: var(--text);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .logo-icon {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--green);\n border-radius: 6px;\n color: var(--green);\n font-size: 0.9rem;\n box-shadow: 0 0 16px var(--green-glow);\n }\n\n /* ===== 背景抽象图片区域 ===== */\n .bg-abstract-section {\n position: relative;\n overflow: hidden;\n }\n\n .bg-abstract-section::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-image: url('/assets/images/abstract/abstract-8.jpg');\n background-size: cover;\n background-position: center;\n opacity: 0.08;\n pointer-events: none;\n z-index: 0;\n }\n\n .bg-abstract-section>* {\n position: relative;\n z-index: 1;\n }\n\n /* ===== 响应式 ===== */\n @media (max-width: 768px) {\n .hero-title {\n font-size: clamp(2rem, 10vw, 3rem);\n }\n\n .cta-box {\n padding: 2.5rem 1.5rem;\n }\n\n .feature-card {\n padding: 2rem 1.5rem;\n }\n\n .showcase-grid {\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n }\n\n .workflow-step {\n gap: 1.2rem;\n }\n\n .stat-item {\n padding: 1.5rem 1rem;\n }\n\n .navbar .nav-links {\n display: none;\n }\n\n .navbar .btn-primary {\n display: none;\n }\n }\n\n @media (max-width: 480px) {\n .showcase-grid {\n grid-template-columns: 1fr;\n }\n\n .hero-shape-1 {\n width: 150px;\n height: 150px;\n }\n\n .hero-shape-2 {\n width: 100px;\n height: 100px;\n }\n\n .hero-shape-3 {\n width: 70px;\n height: 70px;\n }\n }\n\n @media (min-width: 769px) {\n .hamburger {\n display: none;\n }\n\n .mobile-menu {\n display: none !important;\n }\n }\n </style>\n</head>\n<body>\n\n <!-- 扫描线叠加 -->\n <div class=\"scanlines\"></div>\n\n <!-- 噪声纹理 -->\n <div class=\"noise-overlay\"></div>\n\n <!-- ====== 移动端菜单 ====== -->\n <div class=\"mobile-menu\" id=\"mobileMenu\">\n <a href=\"#hero\" onclick=\"closeMobileMenu()\">首页</a>\n <a href=\"#features\" onclick=\"closeMobileMenu()\">技术优势</a>\n <a href=\"#showcase\" onclick=\"closeMobileMenu()\">产品展示</a>\n <a href=\"#workflow\" onclick=\"closeMobileMenu()\">工艺流程</a>\n <a href=\"#cta\" onclick=\"closeMobileMenu()\">联系我们</a>\n </div>\n\n <!-- ====== 导航栏 ====== -->\n <nav class=\"navbar\" id=\"navbar\">\n <div class=\"max-w-7xl mx-auto px-6 flex items-center justify-between\">\n <div class=\"logo\">\n <div class=\"logo-icon\">\n <i class=\"fa-solid fa-cube\"></i>\n </div>\n PRINTVISION\n </div>\n\n <div class=\"nav-links flex items-center gap-8\">\n <a href=\"#hero\" class=\"nav-link\">首页</a>\n <a href=\"#features\" class=\"nav-link\">技术优势</a>\n <a href=\"#showcase\" class=\"nav-link\">产品展示</a>\n <a href=\"#workflow\" class=\"nav-link\">工艺流程</a>\n <a href=\"#cta\" class=\"nav-link\">联系我们</a>\n </div>\n\n <div class=\"flex items-center gap-4\">\n <button class=\"btn-primary !py-2 !px-5 !text-[0.75rem]\" onclick=\"document.getElementById('cta').scrollIntoView({behavior:'smooth'})\">\n 开始合作 <i class=\"fa-solid fa-arrow-right\"></i>\n </button>\n <div class=\"hamburger\" id=\"hamburger\" onclick=\"toggleMobileMenu()\">\n <span></span>\n <span></span>\n <span></span>\n </div>\n </div>\n </div>\n </nav>\n\n <!-- ====== HERO 区域 ====== -->\n <section id=\"hero\">\n <!-- 动态网格背景 -->\n <div class=\"hero-grid\"></div>\n\n <!-- 光晕 -->\n <div class=\"hero-glow-left\"></div>\n <div class=\"hero-glow-right\"></div>\n\n <!-- 抽象3D形状 -->\n <div class=\"hero-shape hero-shape-1\"></div>\n <div class=\"hero-shape hero-shape-2\"></div>\n <div class=\"hero-shape hero-shape-3\"></div>\n\n <!-- 浮动粒子 -->\n <div class=\"particle\"></div>\n <div class=\"particle\"></div>\n <div class=\"particle\"></div>\n <div class=\"particle\"></div>\n <div class=\"particle\"></div>\n <div class=\"particle\"></div>\n <div class=\"particle\"></div>\n <div class=\"particle\"></div>\n\n <!-- 3D打印层叠线 -->\n <div class=\"print-lines\">\n <div class=\"print-line\"></div>\n <div class=\"print-line\"></div>\n <div class=\"print-line\"></div>\n <div class=\"print-line\"></div>\n <div class=\"print-line\"></div>\n <div class=\"print-line\"></div>\n <div class=\"print-line\"></div>\n <div class=\"print-line\"></div>\n </div>\n\n <!-- Hero 内容 -->\n <div class=\"max-w-7xl mx-auto px-6 w-full relative z-10 pt-24 pb-20\">\n <div class=\"max-w-3xl\">\n <div class=\"reveal visible\">\n <span class=\"section-label !text-[0.65rem] !pl-0 before:!hidden inline-flex items-center gap-2\">\n <span class=\"w-1.5 h-1.5 rounded-full bg-green-400 shadow-[0_0_8px_rgba(0,255,136,0.6)] animate-pulse\"></span>\n 下一代增材制造\n </span>\n </div>\n\n <h1 class=\"hero-title mt-4 reveal visible reveal-delay-1\">\n 以数字之力<br>\n <span class=\"text-gradient-green-blue\">塑造实体世界</span>\n </h1>\n\n <p class=\"hero-subtitle mt-6 reveal visible reveal-delay-2\">\n 我们正在重新定义制造的边界。PRINTVISION 融合前沿AI算法与工业级3D打印技术，\n 将你的创意精准转化为高精度的物理实体——从快速原型到批量生产，触手可及。\n </p>\n\n <div class=\"flex flex-wrap gap-4 mt-10 reveal visible reveal-delay-3\">\n <button class=\"btn-primary\" onclick=\"document.getElementById('showcase').scrollIntoView({behavior:'smooth'})\">\n 探索作品 <i class=\"fa-solid fa-arrow-right\"></i>\n </button>\n <button class=\"btn-secondary\" onclick=\"document.getElementById('workflow').scrollIntoView({behavior:'smooth'})\">\n <i class=\"fa-solid fa-play\"></i> 观看演示\n </button>\n </div>\n\n <div class=\"flex items-center gap-6 mt-12 reveal visible reveal-delay-4\">\n <div class=\"flex -space-x-2\">\n <div class=\"w-8 h-8 rounded-full border-2 border-[var(--bg-primary)] bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center text-[0.5rem] font-bold text-black\">A</div>\n <div class=\"w-8 h-8 rounded-full border-2 border-[var(--bg-primary)] bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-[0.5rem] font-bold text-white\">B</div>\n <div class=\"w-8 h-8 rounded-full border-2 border-[var(--bg-primary)] bg-gradient-to-br from-cyan-400 to-blue-500 flex items-center justify-center text-[0.5rem] font-bold text-black\">C</div>\n <div class=\"w-8 h-8 rounded-full border-2 border-[var(--bg-primary)] bg-gradient-to-br from-green-300 to-emerald-500 flex items-center justify-center text-[0.5rem] font-bold text-black\">D</div>\n </div>\n <span class=\"text-sm text-[var(--text-muted)]\">\n 已获得 <span class=\"text-[var(--text)] font-semibold\">2,400+</span> 企业信赖\n </span>\n </div>\n </div>\n </div>\n\n <!-- 右下角滚动提示 -->\n <div class=\"absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 z-10\">\n <span class=\"text-[0.55rem] font-[Orbitron] tracking-[0.3em] text-[var(--text-muted)]\">探索更多</span>\n <div class=\"w-5 h-8 border border-[var(--border)] rounded-full flex justify-center pt-1.5\">\n <div class=\"w-1 h-1.5 bg-[var(--green)] rounded-full animate-bounce shadow-[0_0_6px_var(--green-glow)]\"></div>\n </div>\n </div>\n </section>\n\n <!-- ====== 技术优势 ====== -->\n <section id=\"features\" class=\"py-24 bg-abstract-section\" style=\"background: var(--bg-secondary);\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"text-center max-w-2xl mx-auto mb-16\">\n <div class=\"reveal\">\n <span class=\"section-label\">核心技术</span>\n </div>\n <h2 class=\"section-title reveal reveal-delay-1 mt-2\">\n 重新定义 <span class=\"highlight\">制造精度</span>\n </h2>\n <p class=\"section-desc mx-auto mt-4 reveal reveal-delay-2\">\n 从材料科学到智能算法，我们在每一个环节追求极致，为你的创意提供无与伦比的成型品质。\n </p>\n </div>\n\n <div class=\"grid md:grid-cols-3 gap-6\">\n <div class=\"feature-card reveal reveal-delay-1\">\n <div class=\"feature-icon\">\n <i class=\"fa-solid fa-microchip\"></i>\n </div>\n <h3>AI 智能优化</h3>\n <p>深度学习驱动的切片算法，自动优化支撑结构与打印路径，将成型效率提升 40%，同时减少材料浪费。</p>\n <div class=\"feature-number\">01</div>\n </div>\n\n <div class=\"feature-card reveal reveal-delay-2\">\n <div class=\"feature-icon\">\n <i class=\"fa-solid fa-flask\"></i>\n </div>\n <h3>先进材料体系</h3>\n <p>涵盖碳纤维增强、柔性弹性体、生物相容树脂等 50+ 种专业耗材，满足工程级到医疗级的严苛要求。</p>\n <div class=\"feature-number\">02</div>\n </div>\n\n <div class=\"feature-card reveal reveal-delay-3\">\n <div class=\"feature-icon\">\n <i class=\"fa-solid fa-ruler-combined\"></i>\n </div>\n <h3>微米级精度</h3>\n <p>工业级DLP与双光子聚合技术，实现最高 5μm 的层分辨率和 0.01mm 的定位精度，细节纤毫毕现。</p>\n <div class=\"feature-number\">03</div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- ====== 产品展示 ====== -->\n <section id=\"showcase\" class=\"py-24\" style=\"background: var(--bg-primary);\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"flex flex-col md:flex-row md:items-end justify-between gap-6 mb-14\">\n <div>\n <div class=\"reveal\">\n <span class=\"section-label\">精选作品</span>\n </div>\n <h2 class=\"section-title reveal reveal-delay-1 mt-2\">\n 从概念到 <span class=\"highlight\">现实</span>\n </h2>\n </div>\n <p class=\"section-desc reveal reveal-delay-2 md:text-right md:text-sm !max-w-sm\">\n 每一件作品都是技术与艺术的交汇，精准复现设计师的每一个构想。\n </p>\n </div>\n\n <div class=\"showcase-grid\">\n <!-- 产品 1 -->\n <div class=\"showcase-item reveal reveal-delay-1\">\n <div class=\"showcase-visual\" style=\"background: linear-gradient(135deg, rgba(0,255,136,0.05), rgba(0,136,255,0.05));\">\n <div class=\"placeholder-shape\" style=\"background: linear-gradient(135deg, rgba(0,255,136,0.2), rgba(0,136,255,0.15)); border: 1px solid rgba(0,255,136,0.15); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);\"></div>\n <span class=\"showcase-tag\">DLP</span>\n </div>\n <div class=\"showcase-overlay\">\n <h4>精密齿轮组</h4>\n <p>工业级树脂 · 0.02mm 精度</p>\n </div>\n </div>\n\n <!-- 产品 2 -->\n <div class=\"showcase-item reveal reveal-delay-2\">\n <div class=\"showcase-visual\" style=\"background: linear-gradient(135deg, rgba(0,136,255,0.05), rgba(0,229,255,0.05));\">\n <div class=\"placeholder-shape\" style=\"background: linear-gradient(135deg, rgba(0,136,255,0.2), rgba(0,229,255,0.15)); border: 1px solid rgba(0,136,255,0.15); clip-path: polygon(50% 0%, 80% 25%, 80% 75%, 50% 100%, 20% 75%, 20% 25%);\"></div>\n <span class=\"showcase-tag\" style=\"background: var(--blue);\">SLS</span>\n </div>\n <div class=\"showcase-overlay\">\n <h4>仿生晶格结构</h4>\n <p>尼龙粉末 · 轻量化设计</p>\n </div>\n </div>\n\n <!-- 产品 3 -->\n <div class=\"showcase-item reveal reveal-delay-3\">\n <div class=\"showcase-visual\" style=\"background: linear-gradient(135deg, rgba(0,229,255,0.05), rgba(0,255,136,0.05));\">\n <div class=\"placeholder-shape\" style=\"background: linear-gradient(135deg, rgba(0,229,255,0.2), rgba(0,255,136,0.15)); border: 1px solid rgba(0,229,255,0.15); border-radius: 50%;\"></div>\n <span class=\"showcase-tag\" style=\"background: var(--cyan); color: #000;\">SLA</span>\n </div>\n <div class=\"showcase-overlay\">\n <h4>艺术雕塑</h4>\n <p>透明树脂 · 高透光率</p>\n </div>\n </div>\n\n <!-- 产品 4 -->\n <div class=\"showcase-item reveal reveal-delay-1\">\n <div class=\"showcase-visual\" style=\"background: linear-gradient(135deg, rgba(0,255,136,0.03), rgba(0,136,255,0.06));\">\n <div class=\"placeholder-shape\" style=\"background: linear-gradient(135deg, rgba(0,255,136,0.15), rgba(0,136,255,0.2)); border: 1px solid rgba(0,255,136,0.12); clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 60% 100%, 0% 80%);\"></div>\n <span class=\"showcase-tag\">MJF</span>\n </div>\n <div class=\"showcase-overlay\">\n <h4>无人机框架</h4>\n <p>碳纤维尼龙 · 高强度轻量</p>\n </div>\n </div>\n\n <!-- 产品 5 -->\n <div class=\"showcase-item reveal reveal-delay-2\">\n <div class=\"showcase-visual\" style=\"background: linear-gradient(135deg, rgba(0,136,255,0.04), rgba(0,229,255,0.06));\">\n <div class=\"placeholder-shape\" style=\"background: linear-gradient(135deg, rgba(0,136,255,0.18), rgba(0,229,255,0.12)); border: 1px solid rgba(0,136,255,0.12); clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);\"></div>\n <span class=\"showcase-tag\" style=\"background: var(--blue);\">DLP</span>\n </div>\n <div class=\"showcase-overlay\">\n <h4>医疗植入物</h4>\n <p>生物相容树脂 · 无菌级</p>\n </div>\n </div>\n\n <!-- 产品 6 -->\n <div class=\"showcase-item reveal reveal-delay-3\">\n <div class=\"showcase-visual\" style=\"background: linear-gradient(135deg, rgba(0,229,255,0.04), rgba(0,255,136,0.04));\">\n <div class=\"placeholder-shape\" style=\"background: linear-gradient(135deg, rgba(0,229,255,0.12), rgba(0,255,136,0.18)); border: 1px solid rgba(0,229,255,0.12); clip-path: polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0% 38%);\"></div>\n <span class=\"showcase-tag\" style=\"background: var(--cyan); color: #000;\">FDM</span>\n </div>\n <div class=\"showcase-overlay\">\n <h4>建筑模型</h4>\n <p>PLA+ 环保耗材 · 大尺寸</p>\n </div>\n </div>\n </div>\n\n <div class=\"text-center mt-12 reveal\">\n <button class=\"btn-secondary\" onclick=\"document.getElementById('cta').scrollIntoView({behavior:'smooth'})\">\n 查看全部作品 <i class=\"fa-solid fa-arrow-right\"></i>\n </button>\n </div>\n </div>\n </section>\n\n <!-- ====== 数据统计 ====== -->\n <section class=\"py-20\" style=\"background: var(--bg-secondary); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6\">\n <div class=\"stat-item reveal reveal-delay-1\">\n <div class=\"stat-number\">50<span class=\"stat-symbol\">+</span></div>\n <div class=\"stat-label\">专业耗材种类</div>\n </div>\n <div class=\"stat-item reveal reveal-delay-2\">\n <div class=\"stat-number\">5<span class=\"stat-symbol\">μm</span></div>\n <div class=\"stat-label\">最高层分辨率</div>\n </div>\n <div class=\"stat-item reveal reveal-delay-3\">\n <div class=\"stat-number\">2.4<span class=\"stat-symbol\">k</span></div>\n <div class=\"stat-label\">服务企业客户</div>\n </div>\n <div class=\"stat-item reveal reveal-delay-4\">\n <div class=\"stat-number\">99.7<span class=\"stat-symbol\">%</span></div>\n <div class=\"stat-label\">交付成功率</div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- ====== 工作流程 ====== -->\n <section id=\"workflow\" class=\"py-24\" style=\"background: var(--bg-primary);\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"flex flex-col md:flex-row md:items-end justify-between gap-6 mb-16\">\n <div>\n <div class=\"reveal\">\n <span class=\"section-label\">工艺流程</span>\n </div>\n <h2 class=\"section-title reveal reveal-delay-1 mt-2\">\n 从创意到成品的 <span class=\"highlight\">完整链路</span>\n </h2>\n </div>\n <p class=\"section-desc reveal reveal-delay-2 md:text-right !max-w-sm\">\n 标准化的四步流程，让每一次打印都稳定可靠，交付超出预期的品质。\n </p>\n </div>\n\n <div class=\"grid md:grid-cols-2 gap-x-16 gap-y-4\">\n <div class=\"workflow-step reveal reveal-delay-1\">\n <div class=\"workflow-number\">01</div>\n <div class=\"workflow-content\">\n <h4>设计与建模</h4>\n <p>上传你的 3D 模型文件（STL/OBJ/STEP），或由我们的设计师团队根据需求进行逆向工程与拓扑优化。</p>\n </div>\n </div>\n\n <div class=\"workflow-step reveal reveal-delay-2\">\n <div class=\"workflow-number\">02</div>\n <div class=\"workflow-content\">\n <h4>智能切片与模拟</h4>\n <p>AI 驱动的切片引擎自动分析几何特征，生成最优打印路径，并通过数字孪生技术预演成型过程。</p>\n </div>\n </div>\n\n <div class=\"workflow-step reveal reveal-delay-3\">\n <div class=\"workflow-number\">03</div>\n <div class=\"workflow-content\">\n <h4>高精度打印</h4>\n <p>根据材料特性与精度要求，自动匹配最适合的打印工艺（DLP/SLA/SLS/MJF），全程实时监控。</p>\n </div>\n </div>\n\n <div class=\"workflow-step reveal reveal-delay-4\">\n <div class=\"workflow-number\">04</div>\n <div class=\"workflow-content\">\n <h4>后处理与质检</h4>\n <p>经过清洗、固化、打磨、表面处理等十余道工序，配合三维扫描检测，确保每一件出品完美无瑕。</p>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- ====== 技术展示区域（使用 illustration/17.png） ====== -->\n <section class=\"py-20\" style=\"background: var(--bg-secondary); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"grid md:grid-cols-2 gap-12 items-center\">\n <div class=\"reveal\">\n <span class=\"section-label\">数字底座</span>\n <h2 class=\"section-title mt-2\">\n 云边协同的 <span class=\"highlight\">智能打印网络</span>\n </h2>\n <p class=\"text-[var(--text-muted)] text-base leading-relaxed mt-4 max-w-md\">\n 基于分布式云架构，PRINTVISION 将遍布全球的打印节点连接为智能生产网络。\n 从订单下达到物流发货，全链路数字化管控，让分布式制造成为现实。\n </p>\n <ul class=\"mt-6 space-y-3\">\n <li class=\"flex items-center gap-3 text-sm text-[var(--text-muted)]\">\n <i class=\"fa-solid fa-check-circle text-[var(--green)] text-sm shadow-[0_0_8px_var(--green-glow)]\"></i>\n 实时生产进度追踪\n </li>\n <li class=\"flex items-center gap-3 text-sm text-[var(--text-muted)]\">\n <i class=\"fa-solid fa-check-circle text-[var(--green)] text-sm shadow-[0_0_8px_var(--green-glow)]\"></i>\n 智能排产与负载均衡\n </li>\n <li class=\"flex items-center gap-3 text-sm text-[var(--text-muted)]\">\n <i class=\"fa-solid fa-check-circle text-[var(--green)] text-sm shadow-[0_0_8px_var(--green-glow)]\"></i>\n 全流程数字孪生映射\n </li>\n </ul>\n </div>\n <div class=\"reveal reveal-delay-2\">\n <div class=\"relative group\">\n <div class=\"absolute -inset-1 bg-gradient-to-r from-[var(--green)] to-[var(--blue)] rounded-xl opacity-20 group-hover:opacity-40 blur-lg transition-all duration-500\"></div>\n <div class=\"relative rounded-xl overflow-hidden border border-[var(--border)]\" style=\"background: var(--bg-card);\">\n <img src=\"/assets/images/illustration/17.png\"\n alt=\"3D打印智能网络\"\n class=\"w-full h-auto object-cover\"\n style=\"mix-blend-mode: luminosity; opacity: 0.9;\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-[var(--bg-primary)] via-transparent to-transparent opacity-30\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- ====== CTA 区域 ====== -->\n <section id=\"cta\" class=\"py-24\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"cta-box reveal\">\n <div class=\"inner flex flex-col md:flex-row items-center justify-between gap-8\">\n <div class=\"max-w-xl\">\n <h2 class=\"section-title text-2xl md:text-3xl\">\n 准备好将你的创意 <span class=\"highlight\">打印成真</span> 了吗？\n </h2>\n <p class=\"text-[var(--text-muted)] text-base leading-relaxed mt-4\">\n 无论是快速原型验证，还是小批量定制生产，我们的工程师团队将在 2 小时内为你提供专业报价与工艺建议。\n </p>\n </div>\n <div class=\"flex flex-col sm:flex-row gap-4 shrink-0\">\n <button class=\"btn-primary whitespace-nowrap\">\n 免费咨询 <i class=\"fa-solid fa-paper-plane\"></i>\n </button>\n <button class=\"btn-secondary whitespace-nowrap\">\n <i class=\"fa-solid fa-file-arrow-down\"></i> 获取报价单\n </button>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- ====== Footer ====== -->\n <footer id=\"footer\" class=\"pt-16 pb-8\" style=\"background: var(--bg-secondary);\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-10 pb-12\">\n <!-- 品牌 -->\n <div class=\"col-span-2 md:col-span-1\">\n <div class=\"logo mb-4\">\n <div class=\"logo-icon\">\n <i class=\"fa-solid fa-cube\"></i>\n </div>\n PRINTVISION\n </div>\n <p class=\"text-sm text-[var(--text-muted)] leading-relaxed max-w-xs\">\n 以数字之力塑造实体世界，让每一次创造都精准呈现。\n </p>\n <div class=\"flex gap-3 mt-5\">\n <a class=\"w-9 h-9 rounded-lg border border-[var(--border)] flex items-center justify-center text-[var(--text-muted)] hover:text-[var(--green)] hover:border-[var(--green)] transition-all duration-300 cursor-pointer\" aria-label=\"GitHub\">\n <i class=\"fa-brands fa-github\"></i>\n </a>\n <a class=\"w-9 h-9 rounded-lg border border-[var(--border)] flex items-center justify-center text-[var(--text-muted)] hover:text-[var(--blue)] hover:border-[var(--blue)] transition-all duration-300 cursor-pointer\" aria-label=\"Twitter\">\n <i class=\"fa-brands fa-x-twitter\"></i>\n </a>\n <a class=\"w-9 h-9 rounded-lg border border-[var(--border)] flex items-center justify-center text-[var(--text-muted)] hover:text-[var(--cyan)] hover:border-[var(--cyan)] transition-all duration-300 cursor-pointer\" aria-label=\"LinkedIn\">\n <i class=\"fa-brands fa-linkedin-in\"></i>\n </a>\n <a class=\"w-9 h-9 rounded-lg border border-[var(--border)] flex items-center justify-center text-[var(--text-muted)] hover:text-[var(--green)] hover:border-[var(--green)] transition-all duration-300 cursor-pointer\" aria-label=\"YouTube\">\n <i class=\"fa-brands fa-youtube\"></i>\n </a>\n </div>\n </div>\n\n <!-- 服务 -->\n <div>\n <div class=\"footer-title\">服务</div>\n <ul class=\"space-y-2.5\">\n <li><a class=\"footer-link\">快速原型</a></li>\n <li><a class=\"footer-link\">小批量生产</a></li>\n <li><a class=\"footer-link\">逆向工程</a></li>\n <li><a class=\"footer-link\">设计优化</a></li>\n <li><a class=\"footer-link\">后处理服务</a></li>\n </ul>\n </div>\n\n <!-- 技术 -->\n <div>\n <div class=\"footer-title\">技术</div>\n <ul class=\"space-y-2.5\">\n <li><a class=\"footer-link\">DLP 光固化</a></li>\n <li><a class=\"footer-link\">SLA 立体光刻</a></li>\n <li><a class=\"footer-link\">SLS 选择性烧结</a></li>\n <li><a class=\"footer-link\">MJF 多射流熔融</a></li>\n <li><a class=\"footer-link\">FDM 熔融沉积</a></li>\n </ul>\n </div>\n\n <!-- 公司 -->\n <div>\n <div class=\"footer-title\">公司</div>\n <ul class=\"space-y-2.5\">\n <li><a class=\"footer-link\">关于我们</a></li>\n <li><a class=\"footer-link\">新闻动态</a></li>\n <li><a class=\"footer-link\">加入我们</a></li>\n <li><a class=\"footer-link\">隐私政策</a></li>\n <li><a class=\"footer-link\">联系我们</a></li>\n </ul>\n </div>\n </div>\n\n <div class=\"border-t border-[var(--border)] pt-6 flex flex-col md:flex-row items-center justify-between gap-4\">\n <p class=\"text-xs text-[var(--text-muted)]\">\n © 2026 PRINTVISION. All rights reserved.\n </p>\n <div class=\"flex items-center gap-6 text-xs text-[var(--text-muted)]\">\n <span class=\"flex items-center gap-1.5\">\n <i class=\"fa-solid fa-envelope text-[0.6rem]\"></i> hello@printvision.tech\n </span>\n <span class=\"flex items-center gap-1.5\">\n <i class=\"fa-solid fa-phone text-[0.6rem]\"></i> +86 400-888-3DP\n </span>\n </div>\n </div>\n </div>\n </footer>\n\n <!-- ====== JavaScript ====== -->\n <script>\n // 导航栏滚动效果\n const navbar = document.getElementById('navbar');\n let lastScroll = 0;\n\n window.addEventListener('scroll', () => {\n const currentScroll = window.pageYOffset;\n if (currentScroll > 60) {\n navbar.classList.add('scrolled');\n } else {\n navbar.classList.remove('scrolled');\n }\n lastScroll = currentScroll;\n });\n\n // 滚动显示动画 (Intersection Observer)\n const revealElements = document.querySelectorAll('.reveal');\n\n const revealObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, {\n threshold: 0.1,\n rootMargin: '0px 0px -50px 0px'\n });\n\n revealElements.forEach(el => revealObserver.observe(el));\n\n // 移动端菜单\n function toggleMobileMenu() {\n const menu = document.getElementById('mobileMenu');\n const hamburger = document.getElementById('hamburger');\n menu.classList.toggle('open');\n hamburger.classList.toggle('active');\n document.body.style.overflow = menu.classList.contains('open') ? 'hidden' : '';\n }\n\n function closeMobileMenu() {\n const menu = document.getElementById('mobileMenu');\n const hamburger = document.getElementById('hamburger');\n menu.classList.remove('open');\n hamburger.classList.remove('active');\n document.body.style.overflow = '';\n }\n\n // 平滑锚点滚动 (防止拦截)\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function(e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({ behavior: 'smooth' });\n }\n });\n });\n\n // 键盘导航支持\n document.querySelectorAll('button, a, .footer-link, .showcase-item').forEach(el => {\n el.setAttribute('tabindex', '0');\n });\n\n console.log('%c PRINTVISION ',\n 'background: #00ff88; color: #06080a; font-family: Orbitron; font-size: 18px; font-weight: bold; padding: 8px 16px; border-radius: 4px;'\n );\n console.log('%c 以数字之力，塑造实体世界 ',\n 'color: #7a8a9a; font-size: 13px; font-style: italic;');\n </script>\n\n</body>\n</html>"
},
"next": [
"添加3D模型预览",
"增加实时报价系统",
"接入在线3D编辑器",
"添加打印进度追踪",
"增加材料对比工具"
],
"breakpoint": "none"
}
```