我先获取当前时间，并查询这个网站的内容来了解其背景。让我访问一下这个网站了解其内容和风格。让我获取一些与粮食市场相关的图片素材。现在我了解了这个网站的背景——山东粮食市场（sdgrainmarket.com.cn），是一个粮食交易平台。让我设计一个时尚、现代化的首页。现在让我来设计这个页面。这是一个粮食交易市场平台，我需要设计一个时尚、现代、可自适应的首页。好的，现在我已经收集了足够的信息。让我来设计这个山东粮食市场首页。我会采用现代、时尚的设计风格，融合金色（代表粮食/丰收）与深色/科技感，打造一个令人印象深刻的粮食交易平台首页。
```json
{
"summary": "为山东粮食市场（sdgrainmarket.com.cn）设计时尚现代首页。采用深色基调+金色点缀的奢华配色，融合粮食丰收意象与数字交易平台的科技感。包含：动态Hero区（金色麦浪粒子背景+平台核心价值）、实时行情看板、交易数据统计、核心服务卡片、市场动态资讯、合作伙伴展示、底部CTA。使用DM Sans+Noto Serif SC字体搭配，AOS滚动动画，全响应式设计。",
"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>山东粮食市场 - 智慧粮食交易平台</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <link href=\"https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://unpkg.com/aos@2.3.1/dist/aos.css\">\n <style>\n :root {\n --gold: #d4a537;\n --gold-light: #f0d080;\n --gold-dark: #b8862d;\n --dark-bg: #0a0a0f;\n --dark-card: #12121a;\n --dark-border: #1e1e2a;\n --text-primary: #f5f0e8;\n --text-secondary: #a09888;\n --text-muted: #6b6560;\n --accent-green: #2d8a4e;\n --accent-amber: #c9952e;\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'DM Sans', 'Noto Serif SC', sans-serif;\n background: var(--dark-bg);\n color: var(--text-primary);\n overflow-x: hidden;\n }\n \n /* Custom Scrollbar */\n ::-webkit-scrollbar {\n width: 6px;\n }\n ::-webkit-scrollbar-track {\n background: var(--dark-bg);\n }\n ::-webkit-scrollbar-thumb {\n background: var(--gold-dark);\n border-radius: 3px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: var(--gold);\n }\n \n /* Hero Particle Canvas */\n #particle-canvas {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 0;\n pointer-events: none;\n }\n \n /* Hero Section */\n .hero-section {\n position: relative;\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n background: linear-gradient(135deg, #0a0a0f 0%, #14141f 30%, #1a1a2e 60%, #0f0f1a 100%);\n }\n \n .hero-overlay {\n position: absolute;\n inset: 0;\n background: radial-gradient(ellipse at 30% 50%, rgba(212, 165, 55, 0.08) 0%, transparent 60%),\n radial-gradient(ellipse at 70% 30%, rgba(45, 138, 78, 0.05) 0%, transparent 50%),\n radial-gradient(ellipse at 50% 80%, rgba(212, 165, 55, 0.04) 0%, transparent 50%);\n z-index: 1;\n }\n \n .hero-grid-lines {\n position: absolute;\n inset: 0;\n background-image: \n linear-gradient(rgba(212, 165, 55, 0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(212, 165, 55, 0.03) 1px, transparent 1px);\n background-size: 60px 60px;\n z-index: 1;\n }\n \n .hero-glow {\n position: absolute;\n width: 600px;\n height: 600px;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(212, 165, 55, 0.12) 0%, transparent 70%);\n top: -200px;\n right: -200px;\n z-index: 1;\n animation: glowPulse 6s ease-in-out infinite;\n }\n \n .hero-glow-2 {\n position: absolute;\n width: 400px;\n height: 400px;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(45, 138, 78, 0.08) 0%, transparent 70%);\n bottom: -100px;\n left: -100px;\n z-index: 1;\n animation: glowPulse 8s ease-in-out infinite 2s;\n }\n \n @keyframes glowPulse {\n 0%, 100% { opacity: 0.5; transform: scale(1); }\n 50% { opacity: 1; transform: scale(1.1); }\n }\n \n .hero-content {\n position: relative;\n z-index: 2;\n text-align: center;\n padding: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n }\n \n /* Floating grain particles */\n .grain-particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: var(--gold);\n border-radius: 50%;\n opacity: 0;\n z-index: 1;\n animation: floatUp 8s infinite;\n }\n \n @keyframes floatUp {\n 0% { opacity: 0; transform: translateY(100vh) scale(0); }\n 10% { opacity: 0.6; }\n 90% { opacity: 0.6; }\n 100% { opacity: 0; transform: translateY(-10vh) scale(1); }\n }\n \n /* Glitch text effect */\n .glitch-text {\n position: relative;\n display: inline-block;\n }\n \n .glitch-text::before,\n .glitch-text::after {\n content: attr(data-text);\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n }\n \n .glitch-text:hover::before {\n animation: glitch1 0.4s ease;\n color: var(--gold-light);\n clip-path: inset(20% 0 60% 0);\n }\n \n .glitch-text:hover::after {\n animation: glitch2 0.4s ease 0.1s;\n color: var(--accent-green);\n clip-path: inset(60% 0 10% 0);\n }\n \n @keyframes glitch1 {\n 0% { opacity: 0; transform: translate(0); }\n 20% { opacity: 0.8; transform: translate(-3px, 2px); }\n 40% { opacity: 0; transform: translate(3px, -1px); }\n 60% { opacity: 0.6; transform: translate(-2px, 1px); }\n 80% { opacity: 0; transform: translate(2px, -2px); }\n 100% { opacity: 0; transform: translate(0); }\n }\n \n @keyframes glitch2 {\n 0% { opacity: 0; transform: translate(0); }\n 20% { opacity: 0.6; transform: translate(2px, -2px); }\n 40% { opacity: 0; transform: translate(-3px, 1px); }\n 60% { opacity: 0.8; transform: translate(1px, -1px); }\n 80% { opacity: 0; transform: translate(-2px, 2px); }\n 100% { opacity: 0; transform: translate(0); }\n }\n \n /* Marquee */\n .marquee-container {\n overflow: hidden;\n white-space: nowrap;\n position: relative;\n }\n \n .marquee-content {\n display: inline-block;\n animation: marquee 30s linear infinite;\n }\n \n @keyframes marquee {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-50%); }\n }\n \n /* Card hover effects */\n .service-card {\n position: relative;\n background: linear-gradient(145deg, rgba(18, 18, 26, 0.9), rgba(26, 26, 40, 0.9));\n border: 1px solid var(--dark-border);\n border-radius: 20px;\n padding: 2rem;\n transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n overflow: hidden;\n }\n \n .service-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(135deg, rgba(212, 165, 55, 0.05), transparent 50%);\n opacity: 0;\n transition: opacity 0.5s ease;\n border-radius: 20px;\n }\n \n .service-card:hover {\n transform: translateY(-8px);\n border-color: rgba(212, 165, 55, 0.3);\n box-shadow: 0 20px 60px rgba(212, 165, 55, 0.08), 0 0 40px rgba(212, 165, 55, 0.03);\n }\n \n .service-card:hover::before {\n opacity: 1;\n }\n \n .service-card .icon-wrapper {\n width: 60px;\n height: 60px;\n border-radius: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, rgba(212, 165, 55, 0.15), rgba(212, 165, 55, 0.05));\n border: 1px solid rgba(212, 165, 55, 0.15);\n transition: all 0.4s ease;\n }\n \n .service-card:hover .icon-wrapper {\n background: linear-gradient(135deg, rgba(212, 165, 55, 0.25), rgba(212, 165, 55, 0.1));\n border-color: rgba(212, 165, 55, 0.3);\n transform: scale(1.05);\n }\n \n /* Stat counter */\n .stat-number {\n font-size: 3rem;\n font-weight: 800;\n background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dark));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n line-height: 1;\n }\n \n /* Price ticker */\n .price-up { color: #22c55e; }\n .price-down { color: #ef4444; }\n \n /* News card */\n .news-card {\n position: relative;\n border-radius: 16px;\n overflow: hidden;\n background: var(--dark-card);\n border: 1px solid var(--dark-border);\n transition: all 0.4s ease;\n }\n \n .news-card:hover {\n border-color: rgba(212, 165, 55, 0.2);\n transform: translateY(-4px);\n box-shadow: 0 12px 40px rgba(0,0,0,0.3);\n }\n \n .news-card .news-img {\n height: 200px;\n background-size: cover;\n background-position: center;\n transition: transform 0.6s ease;\n }\n \n .news-card:hover .news-img {\n transform: scale(1.05);\n }\n \n /* Button styles */\n .btn-gold {\n background: linear-gradient(135deg, var(--gold), var(--gold-dark));\n color: #0a0a0f;\n font-weight: 600;\n padding: 0.875rem 2.5rem;\n border-radius: 50px;\n border: none;\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n \n .btn-gold::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.5s ease;\n }\n \n .btn-gold:hover::before {\n left: 100%;\n }\n \n .btn-gold:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 30px rgba(212, 165, 55, 0.3);\n }\n \n .btn-outline {\n background: transparent;\n color: var(--gold);\n border: 1.5px solid rgba(212, 165, 55, 0.4);\n font-weight: 500;\n padding: 0.875rem 2.5rem;\n border-radius: 50px;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n \n .btn-outline:hover {\n background: rgba(212, 165, 55, 0.1);\n border-color: var(--gold);\n transform: translateY(-2px);\n box-shadow: 0 8px 30px rgba(212, 165, 55, 0.1);\n }\n \n /* Section title */\n .section-title {\n font-family: 'Noto Serif SC', serif;\n font-weight: 700;\n position: relative;\n display: inline-block;\n }\n \n .section-title::after {\n content: '';\n position: absolute;\n bottom: -8px;\n left: 0;\n width: 60px;\n height: 3px;\n background: linear-gradient(90deg, var(--gold), transparent);\n border-radius: 2px;\n }\n \n .section-title-center::after {\n left: 50%;\n transform: translateX(-50%);\n width: 80px;\n }\n \n /* Navbar */\n .navbar {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 100;\n padding: 1rem 0;\n transition: all 0.4s ease;\n }\n \n .navbar.scrolled {\n background: rgba(10, 10, 15, 0.92);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n border-bottom: 1px solid rgba(212, 165, 55, 0.08);\n padding: 0.6rem 0;\n }\n \n .nav-link {\n position: relative;\n color: var(--text-secondary);\n transition: color 0.3s ease;\n cursor: pointer;\n font-size: 0.9rem;\n font-weight: 500;\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: var(--gold);\n transition: width 0.3s ease;\n }\n \n .nav-link:hover {\n color: var(--gold);\n }\n \n .nav-link:hover::after {\n width: 100%;\n }\n \n /* Mobile menu */\n .mobile-menu {\n position: fixed;\n top: 0;\n right: -100%;\n width: 300px;\n height: 100vh;\n background: rgba(10, 10, 15, 0.98);\n backdrop-filter: blur(20px);\n z-index: 200;\n padding: 6rem 2rem 2rem;\n transition: right 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n border-left: 1px solid rgba(212, 165, 55, 0.1);\n }\n \n .mobile-menu.open {\n right: 0;\n }\n \n .mobile-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0,0,0,0.6);\n z-index: 150;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.4s ease;\n }\n \n .mobile-overlay.open {\n opacity: 1;\n pointer-events: all;\n }\n \n /* Partner logo scroll */\n .partner-track {\n display: flex;\n animation: partnerScroll 20s linear infinite;\n }\n \n @keyframes partnerScroll {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-50%); }\n }\n \n .partner-item {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 2.5rem;\n opacity: 0.4;\n transition: opacity 0.3s ease;\n filter: grayscale(1);\n }\n \n .partner-item:hover {\n opacity: 0.8;\n filter: grayscale(0);\n }\n \n /* CTA section */\n .cta-section {\n position: relative;\n overflow: hidden;\n background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #0f0f1a 100%);\n }\n \n .cta-section::before {\n content: '';\n position: absolute;\n inset: 0;\n background: \n radial-gradient(circle at 20% 50%, rgba(212, 165, 55, 0.06) 0%, transparent 50%),\n radial-gradient(circle at 80% 50%, rgba(45, 138, 78, 0.04) 0%, transparent 50%);\n }\n \n /* Footer */\n .footer {\n border-top: 1px solid var(--dark-border);\n background: #08080c;\n }\n \n .footer-link {\n color: var(--text-muted);\n transition: color 0.3s ease;\n cursor: pointer;\n font-size: 0.85rem;\n }\n \n .footer-link:hover {\n color: var(--gold);\n }\n \n /* Responsive */\n @media (max-width: 768px) {\n .stat-number {\n font-size: 2.2rem;\n }\n .hero-title {\n font-size: 2.5rem !important;\n }\n .service-card {\n padding: 1.5rem;\n }\n .partner-item {\n padding: 0 1.5rem;\n }\n .partner-item img {\n height: 28px;\n }\n }\n \n @media (max-width: 480px) {\n .hero-title {\n font-size: 1.8rem !important;\n }\n .stat-number {\n font-size: 1.8rem;\n }\n .btn-gold, .btn-outline {\n padding: 0.75rem 1.8rem;\n font-size: 0.9rem;\n }\n }\n \n /* Loading animation */\n .fade-in-up {\n opacity: 0;\n transform: translateY(30px);\n animation: fadeInUp 0.8s ease forwards;\n }\n \n @keyframes fadeInUp {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \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 \n /* Shimmer effect for cards */\n .shimmer {\n position: relative;\n overflow: hidden;\n }\n \n .shimmer::after {\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.02), transparent);\n animation: shimmer 3s infinite;\n }\n \n @keyframes shimmer {\n 0% { left: -100%; }\n 100% { left: 100%; }\n }\n \n /* Pulse dot */\n .pulse-dot {\n width: 8px;\n height: 8px;\n background: #22c55e;\n border-radius: 50%;\n display: inline-block;\n animation: pulseDot 2s infinite;\n }\n \n @keyframes pulseDot {\n 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }\n 50% { opacity: 0.7; box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }\n }\n \n /* Breadcrumb decoration */\n .gold-divider {\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(212, 165, 55, 0.3), transparent);\n }\n </style>\n</head>\n<body>\n\n<!-- Mobile Overlay -->\n<div id=\"mobileOverlay\" class=\"mobile-overlay\" onclick=\"toggleMobileMenu()\"></div>\n\n<!-- Mobile Menu -->\n<div id=\"mobileMenu\" class=\"mobile-menu\">\n <div class=\"flex justify-end mb-8\">\n <button onclick=\"toggleMobileMenu()\" class=\"text-2xl text-gray-400 hover:text-gold transition-colors\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <nav class=\"flex flex-col gap-6\">\n <a href=\"#\" class=\"nav-link text-lg\" onclick=\"toggleMobileMenu()\">首页</a>\n <a href=\"#\" class=\"nav-link text-lg\" onclick=\"toggleMobileMenu()\">交易大厅</a>\n <a href=\"#\" class=\"nav-link text-lg\" onclick=\"toggleMobileMenu()\">行情中心</a>\n <a href=\"#\" class=\"nav-link text-lg\" onclick=\"toggleMobileMenu()\">市场资讯</a>\n <a href=\"#\" class=\"nav-link text-lg\" onclick=\"toggleMobileMenu()\">关于我们</a>\n <div class=\"mt-4 pt-6 border-t border-gray-800\">\n <button class=\"btn-gold w-full text-center\">立即注册</button>\n </div>\n </nav>\n</div>\n\n<!-- Navbar -->\n<nav id=\"navbar\" class=\"navbar\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex items-center justify-between\">\n <!-- Logo -->\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-xl bg-gradient-to-br from-[#d4a537] to-[#b8862d] flex items-center justify-center\">\n <i class=\"fa-solid fa-wheat-awn text-white text-lg\"></i>\n </div>\n <div>\n <div class=\"text-lg font-bold text-white leading-tight\">山东粮食市场</div>\n <div class=\"text-[10px] text-[#a09888] tracking-widest uppercase\">Shandong Grain Market</div>\n </div>\n </div>\n \n <!-- Desktop Nav -->\n <div class=\"hidden lg:flex items-center gap-8\">\n <a href=\"#\" class=\"nav-link text-[#f5f0e8]\">首页</a>\n <a href=\"#\" class=\"nav-link\">交易大厅</a>\n <a href=\"#\" class=\"nav-link\">行情中心</a>\n <a href=\"#\" class=\"nav-link\">市场资讯</a>\n <a href=\"#\" class=\"nav-link\">关于我们</a>\n </div>\n \n <!-- Actions -->\n <div class=\"flex items-center gap-4\">\n <button class=\"hidden sm:block btn-outline text-sm py-2 px-5\">登录</button>\n <button class=\"hidden sm:block btn-gold text-sm py-2 px-5\">注册</button>\n <button onclick=\"toggleMobileMenu()\" class=\"lg:hidden text-2xl text-gray-300 hover:text-gold transition-colors\">\n <i class=\"fa-solid fa-bars\"></i>\n </button>\n </div>\n </div>\n </div>\n</nav>\n\n<!-- Hero Section -->\n<section class=\"hero-section\" id=\"hero\">\n <!-- Floating grain particles -->\n <div id=\"particles-container\"></div>\n \n <div class=\"hero-overlay\"></div>\n <div class=\"hero-grid-lines\"></div>\n <div class=\"hero-glow\"></div>\n <div class=\"hero-glow-2\"></div>\n \n <div class=\"hero-content relative z-10\">\n <div class=\"max-w-5xl mx-auto\">\n <!-- Badge -->\n <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[rgba(212,165,55,0.2)] bg-[rgba(212,165,55,0.06)] mb-6 fade-in-up delay-1\">\n <span class=\"pulse-dot\"></span>\n <span class=\"text-sm text-[#f0d080] tracking-wide\">山东省粮食交易综合服务平台</span>\n </div>\n \n <!-- Title -->\n <h1 class=\"hero-title text-5xl md:text-6xl lg:text-7xl font-bold leading-tight mb-6 fade-in-up delay-2\" style=\"font-family: 'Noto Serif SC', serif;\">\n 智慧赋能\n <span class=\"glitch-text relative inline-block\" data-text=\"粮食交易\">\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-[#f0d080] via-[#d4a537] to-[#b8862d]\">粮食交易</span>\n </span>\n <br class=\"hidden sm:block\">\n 链接齐鲁大地\n </h1>\n \n <!-- Subtitle -->\n <p class=\"text-lg md:text-xl text-[#a09888] max-w-2xl mx-auto mb-10 leading-relaxed fade-in-up delay-3\">\n 山东粮食市场是省级粮食交易综合服务平台，提供小麦、玉米、大豆等主要粮食品种的\n <span class=\"text-[#f0d080]\">在线交易</span>、<span class=\"text-[#f0d080]\">行情分析</span>、<span class=\"text-[#f0d080]\">物流对接</span>等一站式服务\n </p>\n \n <!-- CTA Buttons -->\n <div class=\"flex flex-wrap justify-center gap-4 fade-in-up delay-4\">\n <button class=\"btn-gold text-base\">\n <i class=\"fa-solid fa-arrow-right-to-bracket mr-2\"></i>\n 进入交易大厅\n </button>\n <button class=\"btn-outline text-base\">\n <i class=\"fa-solid fa-chart-line mr-2\"></i>\n 查看实时行情\n </button>\n </div>\n \n <!-- Stats -->\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8 mt-16 pt-10 border-t border-[rgba(212,165,55,0.08)] fade-in-up delay-5\">\n <div class=\"text-center\">\n <div class=\"stat-number text-3xl md:text-4xl\">500万+</div>\n <div class=\"text-sm text-[#6b6560] mt-1\">年交易量（吨）</div>\n </div>\n <div class=\"text-center\">\n <div class=\"stat-number text-3xl md:text-4xl\">2000+</div>\n <div class=\"text-sm text-[#6b6560] mt-1\">注册会员企业</div>\n </div>\n <div class=\"text-center\">\n <div class=\"stat-number text-3xl md:text-4xl\">98.6%</div>\n <div class=\"text-sm text-[#6b6560] mt-1\">交易履约率</div>\n </div>\n <div class=\"text-center\">\n <div class=\"stat-number text-3xl md:text-4xl\">16</div>\n <div class=\"text-sm text-[#6b6560] mt-1\">地市覆盖</div>\n </div>\n </div>\n </div>\n </div>\n \n <!-- Scroll indicator -->\n <div class=\"absolute bottom-8 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center gap-2 fade-in-up delay-6\">\n <span class=\"text-xs text-[#6b6560] tracking-widest\">SCROLL</span>\n <div class=\"w-5 h-8 border border-[#6b6560] rounded-full flex justify-center\">\n <div class=\"w-1 h-2 bg-[#d4a537] rounded-full mt-2 animate-bounce\"></div>\n </div>\n </div>\n</section>\n\n<!-- Marquee Ticker -->\n<div class=\"bg-[#0d0d14] border-y border-[rgba(212,165,55,0.06)] py-3\">\n <div class=\"marquee-container\">\n <div class=\"marquee-content flex items-center gap-8\">\n <!-- Repeat for seamless loop -->\n <div class=\"flex items-center gap-8\">\n <span class=\"text-sm text-[#6b6560]\">小麦 <span class=\"text-[#f0d080] font-semibold\">¥2,860</span><span class=\"price-up text-xs ml-1\"><i class=\"fa-solid fa-caret-up\