I'll start by researching the design system and assets for this bamboo craft brand website.Let me search for more specific bamboo-related assets and also get some content references.Now I have enough context. Let me create the full website with a sophisticated oriental aesthetic. I'll use the bamboo-themed design with warm earth tones, elegant typography, and rich visual details.Now I have all the information I need. Let me build the complete website.
```json
{
"summary": "为竹序ZENBAMBOO品牌官网生成完整全页HTML。采用东方极简美学，以竹青绿、暖金、墨色为主色调，搭配Noto Serif SC与Cormorant Garamond字体。页面包含：顶部导航（中英双语）、全屏主视觉Banner（轮播短句）、品牌概览、关于我们、四大产品系列（CASA/GIARDINO/HERITAGE/TEA TABLE）、工艺文化、公益理念、数字赋能、联系我们、页脚。使用竹编纹理背景、滚动动画、渐变叠加、几何装饰线等视觉元素，响应式适配移动端。",
"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>竹序 ZENBAMBOO — 千年编织非遗·东方美学手作品牌</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n <link href=\"https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;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 --bamboo-green: #5a7a5a;\n --bamboo-light: #7a9a6a;\n --bamboo-dark: #2d4a2d;\n --gold: #c9a84c;\n --gold-light: #e8d48b;\n --ink: #1a1a1a;\n --ink-light: #2a2a2a;\n --paper: #f8f5f0;\n --paper-dark: #e8e0d5;\n --warm-white: #faf8f5;\n --charcoal: #333;\n --text-muted: #8a8a8a;\n }\n * { margin: 0; padding: 0; box-sizing: border-box; }\n html { scroll-behavior: smooth; }\n body {\n font-family: 'Inter', 'Noto Serif SC', serif;\n background: var(--paper);\n color: var(--ink);\n overflow-x: hidden;\n }\n .font-serif-sc { font-family: 'Noto Serif SC', serif; }\n .font-cormorant { font-family: 'Cormorant Garamond', serif; }\n .font-inter { font-family: 'Inter', sans-serif; }\n\n /* Bamboo texture overlay */\n .bamboo-texture {\n background-image: url('https://www.transparenttextures.com/patterns/bamboo.png');\n background-repeat: repeat;\n background-size: 120px;\n opacity: 0.06;\n pointer-events: none;\n }\n .bamboo-texture-light {\n background-image: url('https://www.transparenttextures.com/patterns/bamboo.png');\n background-repeat: repeat;\n background-size: 120px;\n opacity: 0.03;\n pointer-events: none;\n }\n\n /* Decorative line */\n .deco-line {\n width: 60px;\n height: 2px;\n background: linear-gradient(90deg, var(--gold), transparent);\n margin: 1rem 0;\n }\n .deco-line-center {\n width: 80px;\n height: 2px;\n background: linear-gradient(90deg, transparent, var(--gold), transparent);\n margin: 1.2rem auto;\n }\n .deco-vertical {\n width: 1px;\n height: 40px;\n background: linear-gradient(to bottom, var(--gold), transparent);\n margin: 0.5rem auto;\n }\n\n /* Hero */\n .hero-section {\n position: relative;\n min-height: 100vh;\n background: linear-gradient(135deg, #0d1a0d 0%, #1a2e1a 30%, #0f1f0f 60%, #1a1a0f 100%);\n overflow: hidden;\n }\n .hero-overlay {\n position: absolute;\n inset: 0;\n background: radial-gradient(ellipse at 30% 50%, rgba(90,122,90,0.15) 0%, transparent 60%),\n radial-gradient(ellipse at 70% 30%, rgba(201,168,76,0.08) 0%, transparent 50%);\n }\n .hero-grid {\n position: absolute;\n inset: 0;\n background-image: \n linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);\n background-size: 60px 60px;\n }\n\n /* Bamboo stalks decoration */\n .bamboo-stalk {\n position: absolute;\n width: 6px;\n background: linear-gradient(to bottom, transparent, rgba(90,122,90,0.2), rgba(90,122,90,0.3), rgba(90,122,90,0.2), transparent);\n border-radius: 3px;\n }\n .bamboo-stalk::before {\n content: '';\n position: absolute;\n width: 14px;\n height: 2px;\n background: rgba(201,168,76,0.15);\n top: 30%;\n left: -4px;\n border-radius: 1px;\n }\n .bamboo-stalk::after {\n content: '';\n position: absolute;\n width: 14px;\n height: 2px;\n background: rgba(201,168,76,0.12);\n top: 60%;\n left: -4px;\n border-radius: 1px;\n }\n\n /* Scroll indicator */\n .scroll-indicator {\n position: absolute;\n bottom: 2rem;\n left: 50%;\n transform: translateX(-50%);\n animation: float 2.5s ease-in-out infinite;\n }\n @keyframes float {\n 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }\n 50% { transform: translateX(-50%) translateY(10px); opacity: 1; }\n }\n\n /* Section transitions */\n .section-reveal {\n opacity: 0;\n transform: translateY(40px);\n transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n .section-reveal.revealed {\n opacity: 1;\n transform: translateY(0);\n }\n\n /* Card hover */\n .product-card {\n transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n position: relative;\n overflow: hidden;\n }\n .product-card:hover {\n transform: translateY(-8px);\n box-shadow: 0 20px 60px rgba(0,0,0,0.12);\n }\n .product-card .card-image {\n transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n .product-card:hover .card-image {\n transform: scale(1.05);\n }\n\n /* Pattern circle decoration */\n .pattern-circle {\n width: 300px;\n height: 300px;\n border: 1px solid rgba(201,168,76,0.1);\n border-radius: 50%;\n position: absolute;\n pointer-events: none;\n }\n .pattern-circle-inner {\n width: 200px;\n height: 200px;\n border: 1px solid rgba(201,168,76,0.06);\n border-radius: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n /* Nav */\n .nav-blur {\n backdrop-filter: blur(20px) saturate(1.2);\n -webkit-backdrop-filter: blur(20px) saturate(1.2);\n }\n .nav-link {\n position: relative;\n transition: color 0.3s;\n }\n .nav-link::after {\n content: '';\n position: absolute;\n bottom: -2px;\n left: 0;\n width: 0;\n height: 1px;\n background: var(--gold);\n transition: width 0.3s ease;\n }\n .nav-link:hover::after {\n width: 100%;\n }\n\n /* Mobile menu */\n .mobile-menu {\n transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n max-height: 0;\n overflow: hidden;\n opacity: 0;\n }\n .mobile-menu.open {\n max-height: 600px;\n opacity: 1;\n }\n\n /* Carousel dots */\n .carousel-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: rgba(255,255,255,0.25);\n transition: all 0.4s ease;\n cursor: pointer;\n }\n .carousel-dot.active {\n background: var(--gold);\n width: 28px;\n border-radius: 4px;\n }\n\n /* Stats counter */\n .stat-number {\n font-size: 3rem;\n font-weight: 700;\n background: linear-gradient(135deg, var(--gold), var(--gold-light));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n /* Timeline */\n .timeline-line {\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 1px;\n background: linear-gradient(to bottom, transparent, var(--gold), transparent);\n transform: translateX(-50%);\n }\n\n /* Footer bamboo pattern */\n .footer-pattern {\n background-image: \n repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(201,168,76,0.03) 40px, rgba(201,168,76,0.03) 41px),\n repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(201,168,76,0.03) 40px, rgba(201,168,76,0.03) 41px);\n }\n\n /* Custom scrollbar */\n ::-webkit-scrollbar { width: 6px; }\n ::-webkit-scrollbar-track { background: var(--paper); }\n ::-webkit-scrollbar-thumb { background: var(--bamboo-green); border-radius: 3px; }\n ::-webkit-scrollbar-thumb:hover { background: var(--bamboo-dark); }\n\n /* Animations */\n @keyframes fadeInUp {\n from { opacity: 0; transform: translateY(30px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes slideInLeft {\n from { opacity: 0; transform: translateX(-40px); }\n to { opacity: 1; transform: translateX(0); }\n }\n @keyframes slideInRight {\n from { opacity: 0; transform: translateX(40px); }\n to { opacity: 1; transform: translateX(0); }\n }\n @keyframes bambooGrow {\n from { transform: scaleY(0); transform-origin: bottom; }\n to { transform: scaleY(1); transform-origin: bottom; }\n }\n @keyframes shimmer {\n 0% { background-position: -200% center; }\n 100% { background-position: 200% center; }\n }\n @keyframes rotateSlow {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n .animate-fade-in-up { animation: fadeInUp 0.8s ease forwards; }\n .animate-fade-in { animation: fadeIn 1s ease forwards; }\n .animate-slide-left { animation: slideInLeft 0.8s ease forwards; }\n .animate-slide-right { animation: slideInRight 0.8s ease forwards; }\n .delay-1 { animation-delay: 0.1s; }\n .delay-2 { animation-delay: 0.2s; }\n .delay-3 { animation-delay: 0.3s; }\n .delay-4 { animation-delay: 0.4s; }\n .delay-5 { animation-delay: 0.5s; }\n .delay-6 { animation-delay: 0.6s; }\n .delay-7 { animation-delay: 0.7s; }\n .delay-8 { animation-delay: 0.8s; }\n\n /* Carousel text animation */\n .carousel-text {\n transition: all 0.6s ease;\n }\n .carousel-text.fade-out {\n opacity: 0;\n transform: translateY(10px);\n }\n .carousel-text.fade-in {\n opacity: 1;\n transform: translateY(0);\n }\n\n /* Responsive */\n @media (max-width: 768px) {\n .stat-number { font-size: 2.2rem; }\n .hero-section { min-height: 90vh; }\n }\n\n /* Image placeholder style */\n .img-placeholder {\n background: linear-gradient(135deg, #e8e0d5 0%, #d4c9b8 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n color: #8a7a6a;\n font-size: 0.9rem;\n letter-spacing: 2px;\n }\n\n /* Gold text gradient */\n .text-gold-gradient {\n background: linear-gradient(135deg, var(--gold), #dbb95c, var(--gold-light));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n /* Border gold */\n .border-gold { border-color: rgba(201,168,76,0.3); }\n .border-gold-light { border-color: rgba(201,168,76,0.15); }\n\n /* Hover underline for links */\n .hover-underline {\n position: relative;\n display: inline-block;\n }\n .hover-underline::after {\n content: '';\n position: absolute;\n bottom: -2px;\n left: 0;\n width: 100%;\n height: 1px;\n background: var(--gold);\n transform: scaleX(0);\n transform-origin: right;\n transition: transform 0.4s ease;\n }\n .hover-underline:hover::after {\n transform: scaleX(1);\n transform-origin: left;\n }\n\n /* Section divider */\n .section-divider {\n width: 100%;\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(201,168,76,0.2), transparent);\n }\n\n /* Corner decoration */\n .corner-deco {\n position: absolute;\n width: 30px;\n height: 30px;\n border-color: rgba(201,168,76,0.2);\n }\n .corner-deco.tl { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }\n .corner-deco.tr { top: 0; right: 0; border-top: 1px solid; border-right: 1px solid; }\n .corner-deco.bl { bottom: 0; left: 0; border-bottom: 1px solid; border-left: 1px solid; }\n .corner-deco.br { bottom: 0; right: 0; border-bottom: 1px solid; border-right: 1px solid; }\n\n /* Weave pattern background */\n .weave-bg {\n background-image: \n linear-gradient(45deg, rgba(90,122,90,0.04) 25%, transparent 25%),\n linear-gradient(-45deg, rgba(90,122,90,0.04) 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, rgba(90,122,90,0.04) 75%),\n linear-gradient(-45deg, transparent 75%, rgba(90,122,90,0.04) 75%);\n background-size: 20px 20px;\n background-position: 0 0, 0 10px, 10px -10px, -10px 0px;\n }\n\n /* Series badge */\n .series-badge {\n display: inline-block;\n padding: 0.25rem 1rem;\n border: 1px solid rgba(201,168,76,0.3);\n border-radius: 20px;\n font-size: 0.75rem;\n letter-spacing: 3px;\n text-transform: uppercase;\n color: var(--gold);\n font-family: 'Cormorant Garamond', serif;\n font-weight: 600;\n }\n\n /* Accordion style for mobile */\n .accordion-content {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.5s ease;\n }\n .accordion-content.open {\n max-height: 500px;\n }\n\n /* Grain overlay */\n .grain-overlay {\n position: fixed;\n inset: 0;\n pointer-events: none;\n z-index: 9999;\n opacity: 0.03;\n background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"300\" height=\"300\"><filter id=\"n\"><feTurbulence type=\"fractalNoise\" baseFrequency=\"0.65\" numOctaves=\"3\" stitchTiles=\"stitch\"/></filter><rect width=\"300\" height=\"300\" filter=\"url(%23n)\" opacity=\"1\"/></svg>');\n background-size: 300px 300px;\n }\n </style>\n</head>\n<body>\n\n<!-- Grain Overlay -->\n<div class=\"grain-overlay\"></div>\n\n<!-- ===== NAVIGATION ===== -->\n<nav class=\"fixed top-0 left-0 right-0 z-50 nav-blur bg-[#0d1a0d]/80 border-b border-[rgba(201,168,76,0.08)]\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex items-center justify-between h-16 sm:h-20\">\n <!-- Logo -->\n <a href=\"#\" class=\"flex items-center gap-2 group\">\n <div class=\"w-8 h-8 sm:w-10 sm:h-10 rounded-full border border-[var(--gold)]/40 flex items-center justify-center\">\n <i class=\"fa-solid fa-leaf text-[var(--gold)] text-sm sm:text-base\"></i>\n </div>\n <div class=\"flex flex-col\">\n <span class=\"font-serif-sc text-white text-sm sm:text-base font-bold tracking-wider\">竹序</span>\n <span class=\"font-cormorant text-[var(--gold)] text-[10px] sm:text-xs tracking-[3px] leading-tight\">ZENBAMBOO</span>\n </div>\n </a>\n\n <!-- Desktop Nav -->\n <div class=\"hidden lg:flex items-center gap-8\">\n <a href=\"#brand\" class=\"nav-link text-white/70 hover:text-[var(--gold)] text-sm tracking-wider transition-colors\">品牌</a>\n <a href=\"#about\" class=\"nav-link text-white/70 hover:text-[var(--gold)] text-sm tracking-wider transition-colors\">关于</a>\n <a href=\"#products\" class=\"nav-link text-white/70 hover:text-[var(--gold)] text-sm tracking-wider transition-colors\">产品</a>\n <a href=\"#craft\" class=\"nav-link text-white/70 hover:text-[var(--gold)] text-sm tracking-wider transition-colors\">工艺</a>\n <a href=\"#welfare\" class=\"nav-link text-white/70 hover:text-[var(--gold)] text-sm tracking-wider transition-colors\">公益</a>\n <a href=\"#digital\" class=\"nav-link text-white/70 hover:text-[var(--gold)] text-sm tracking-wider transition-colors\">发展</a>\n <a href=\"#contact\" class=\"nav-link text-white/70 hover:text-[var(--gold)] text-sm tracking-wider transition-colors\">联系</a>\n <div class=\"h-4 w-px bg-white/10\"></div>\n <span class=\"font-cormorant text-[var(--gold)] text-xs tracking-[4px]\">EN / 中</span>\n </div>\n\n <!-- Mobile Menu Toggle -->\n <button id=\"menuToggle\" class=\"lg:hidden text-white/70 hover:text-[var(--gold)] transition-colors p-2\">\n <i class=\"fa-solid fa-bars text-lg\"></i>\n </button>\n </div>\n\n <!-- Mobile Menu -->\n <div id=\"mobileMenu\" class=\"mobile-menu lg:hidden\">\n <div class=\"py-4 space-y-3 border-t border-[rgba(201,168,76,0.08)]\">\n <a href=\"#brand\" class=\"block text-white/70 hover:text-[var(--gold)] text-sm tracking-wider py-2 transition-colors\">品牌 Brand</a>\n <a href=\"#about\" class=\"block text-white/70 hover:text-[var(--gold)] text-sm tracking-wider py-2 transition-colors\">关于 About</a>\n <a href=\"#products\" class=\"block text-white/70 hover:text-[var(--gold)] text-sm tracking-wider py-2 transition-colors\">产品 Products</a>\n <a href=\"#craft\" class=\"block text-white/70 hover:text-[var(--gold)] text-sm tracking-wider py-2 transition-colors\">工艺 Craft</a>\n <a href=\"#welfare\" class=\"block text-white/70 hover:text-[var(--gold)] text-sm tracking-wider py-2 transition-colors\">公益 Welfare</a>\n <a href=\"#digital\" class=\"block text-white/70 hover:text-[var(--gold)] text-sm tracking-wider py-2 transition-colors\">发展 Development</a>\n <a href=\"#contact\" class=\"block text-white/70 hover:text-[var(--gold)] text-sm tracking-wider py-2 transition-colors\">联系 Contact</a>\n </div>\n </div>\n </div>\n</nav>\n\n<!-- ===== HERO SECTION ===== -->\n<section class=\"hero-section flex items-center justify-center relative\" id=\"hero\">\n <div class=\"hero-overlay\"></div>\n <div class=\"hero-grid\"></div>\n \n <!-- Bamboo stalks decoration -->\n <div class=\"bamboo-stalk\" style=\"left:8%; height:70%; top:15%; animation: bambooGrow 2s ease forwards;\"></div>\n <div class=\"bamboo-stalk\" style=\"left:15%; height:50%; top:30%; animation: bambooGrow 2.5s ease 0.3s forwards; opacity:0; animation-fill-mode:forwards;\"></div>\n <div class=\"bamboo-stalk\" style=\"right:12%; height:65%; top:20%; animation: bambooGrow 2.2s ease 0.5s forwards; opacity:0; animation-fill-mode:forwards;\"></div>\n <div class=\"bamboo-stalk\" style=\"right:8%; height:45%; top:35%; animation: bambooGrow 2.8s ease 0.7s forwards; opacity:0; animation-fill-mode:forwards;\"></div>\n\n <!-- Decorative circles -->\n <div class=\"pattern-circle\" style=\"top:-80px; right:-80px; opacity:0; animation: fadeIn 2s ease 1s forwards;\">\n <div class=\"pattern-circle-inner\"></div>\n </div>\n <div class=\"pattern-circle\" style=\"bottom:-120px; left:-100px; width:400px; height:400px; opacity:0; animation: fadeIn 2s ease 1.5s forwards;\">\n <div class=\"pattern-circle-inner\" style=\"width:280px; height:280px;\"></div>\n </div>\n\n <div class=\"relative z-10 max-w-6xl mx-auto px-4 sm:px-6 text-center\">\n <!-- Subtitle badge -->\n <div class=\"inline-flex items-center gap-3 mb-6 sm:mb-8 opacity-0 animate-fade-in delay-1\" style=\"animation-fill-mode:forwards;\">\n <span class=\"h-px w-8 bg-[var(--gold)]/40\"></span>\n <span class=\"font-cormorant text-[var(--gold)] text-xs sm:text-sm tracking-[5px] uppercase\">Millennial Heritage · Oriental Elegance</span>\n <span class=\"h-px w-8 bg-[var(--gold)]/40\"></span>\n </div>\n\n <!-- Main Title -->\n <h1 class=\"font-serif-sc text-white text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-tight mb-4 opacity-0 animate-fade-in-up delay-2\" style=\"animation-fill-mode:forwards;\">\n 竹承千年文脉，<br class=\"sm:hidden\">一织东方雅韵\n </h1>\n <p class=\"font-cormorant text-[var(--gold-light)]/80 text-lg sm:text-xl md:text-2xl italic tracking-wide mb-3 opacity-0 animate-fade-in-up delay-3\" style=\"animation-fill-mode:forwards;\">\n Millennial Bamboo Heritage, Woven Oriental Elegance\n </p>\n\n <!-- Subtitle -->\n <p class=\"text-white/50 text-xs sm:text-sm tracking-[3px] max-w-xl mx-auto mb-8 opacity-0 animate-fade-in-up delay-4\" style=\"animation-fill-mode:forwards;\">\n 四大经典纹样，诠释手工匠心与传世美学\n </p>\n <p class=\"font-cormorant text-white/40 text-xs sm:text-sm italic tracking-wide mb-10 opacity-0 animate-fade-in-up delay-4\" style=\"animation-fill-mode:forwards;\">\n Four Classic Patterns, Interpreting Handicraft Spirit & Timeless Aesthetics\n </p>\n\n <!-- Carousel / Rotating Text -->\n <div id=\"heroCarousel\" class=\"h-16 sm:h-20 flex items-center justify-center opacity-0 animate-fade-in delay-6\" style=\"animation-fill-mode:forwards;\">\n <div class=\"relative w-full max-w-lg\">\n <div id=\"carouselText\" class=\"carousel-text text-center\">\n <p class=\"font-serif-sc text-white/60 text-sm sm:text-base tracking-wider\">古法编织，留存手作温度</p>\n <p class=\"font-cormorant text-white/30 text-xs italic mt-1\">Traditional Weaving, Warmth of Handcraft</p>\n </div>\n </div>\n </div>\n\n <!-- Carousel dots -->\n <div class=\"flex items-center justify-center gap-2 mt-4 opacity-0 animate-fade-in delay-7\" style=\"animation-fill-mode:forwards;\">\n <span class=\"carousel-dot active\" data-index=\"0\"></span>\n <span class=\"carousel-dot\" data-index=\"1\"></span>\n <span class=\"carousel-dot\" data-index=\"2\"></span>\n </div>\n\n <!-- CTA Buttons -->\n <div class=\"flex flex-col sm:flex-row items-center justify-center gap-4 mt-10 opacity-0 animate-fade-in-up delay-8\" style=\"animation-fill-mode:forwards;\">\n <a href=\"#products\" class=\"group inline-flex items-center gap-2 px-8 py-3 border border-[var(--gold)] text-[var(--gold)] hover:bg-[var(--gold)] hover:text-[var(--ink)] transition-all duration-300 text-sm tracking-widest\">\n <span>探索系列</span>\n <i class=\"fa-solid fa-arrow-right text-xs group-hover:translate-x-1 transition-transform\"></i>\n </a>\n <a href=\"#about\" class=\"group inline-flex items-center gap-2 px-8 py-3 border border-white/20 text-white/70 hover:border-white/40 hover:text-white transition-all duration-300 text-sm tracking-widest\">\n <span>了解品牌</span>\n <i class=\"fa-solid fa-chevron-right text-xs\"></i>\n </a>\n </div>\n </div>\n\n <!-- Scroll indicator -->\n <div class=\"scroll-indicator\">\n <div class=\"w-6 h-10 border border-white/15 rounded-full flex justify-center\">\n <div class=\"w-1 h-2 bg-[var(--gold)]/60 rounded-full mt-2 animate-bounce\"></div>\n </div>\n </div>\n</section>\n\n<!-- ===== BRAND OVERVIEW ===== -->\n<section id=\"brand\" class=\"relative py-20 sm:py-28 bg-[var(--warm-white)]\">\n <div class=\"bamboo-texture-light absolute inset-0\"></div>\n \n <div class=\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative\">\n <!-- Section Header -->\n <div class=\"text-center mb-16 section-reveal\">\n <span class=\"series-badge mb-4 inline-block\">Brand Introduction</span>\n <h2 class=\"font-serif-sc text-3xl sm:text-4xl md:text-5xl font-bold text-[var(--ink)] mb-3\">品牌简介</h2>\n <div class=\"deco-line-center\"></div>\n </div>\n\n <div class=\"grid lg:grid-cols-2 gap-10 lg:gap-16 items-start\">\n <!-- Chinese -->\n <div class=\"section-reveal\">\n <div class=\"relative p-6 sm:p-8 bg-white border border-[rgba(201,168,76,0.1)]\">\n <div class=\"corner-deco tl\"></div>\n <div class=\"corner-deco tr\"></div>\n <div class=\"corner-deco bl\"></div>\n <div class=\"corner-deco br\"></div>\n <p class=\"text-[var(--charcoal)]/85 text-sm sm:text-base leading-[1.9] tracking-wide\">\n 竹序（ZENBAMBOO）深耕拥有千年历史的传统编织非遗技艺，专注于古老手艺的传承、创新与现代化表达。品牌以四大经典传统纹样为创作内核，恪守纯手工织造标准，将悠远的东方意境与生活美学融入产品设计，打造适配现代居家、庭院雅趣、典藏品鉴、茶事闲趣等多元生活场景的手作器物。\n </p>\n <p class=\"text-[var(--charcoal)]/85 text-sm sm:text-base leading-[1.9] tracking-wide mt-4\">\n 我们突破传统手工艺的发展局限，结合数字化展示形式与全域运营模式，打通内外流通渠道，让传统好物触达更多人群。品牌始终坚守初心，践行残健融合、以艺赋能的公益理念，吸纳各类手艺人共同参与创作，依托千年技艺助力群体成长，让指尖匠心化作自立前行的力量。\n </p>\n <p class=\"text-[var(--charcoal)]/85 text-sm sm:text-base leading-[
