玩具品牌官网

让三家旗舰模型用同一段 prompt 各自做一个儿童玩具品牌官网，对比信息架构、视觉调性、文案与代码风格上的差异。

2026-04-25 · 官网 · 落地页 · 品牌

PROMPT

Prompt（点击展开）展开

# 待填入完整 prompt

把你跑这三家模型时用的原始 prompt 粘到这里替换本段，详情页 PROMPT 区会按原样展示。

OUTPUT

Claude Opus 4.7 Anthropic

渲染源码

claude-4.7.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小熊与橡果 BEAR & ACORN — 为好奇心而生的传家玩具</title>
<meta name="description" content="小熊与橡果，专注于天然原木、安全材质的精品儿童玩具。每一件都来自匠人之手，陪伴孩子成长，可以传家。">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..900,30..100;1,9..144,300..900,30..100&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&family=Noto+Serif+SC:wght@500;700;900&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --cream: #FBF4E5;
  --cream-dark: #F2E8D0;
  --paper: #FFFEF9;
  --ink: #1F2D38;
  --ink-soft: #4A5862;
  --tomato: #E8442C;
  --mustard: #E8B73D;
  --mint: #7BB89B;
  --peach: #F4B7A0;
  --berry: #B73D5C;
  --sky: #A4C8DD;
  --display: 'Fraunces', 'Noto Serif SC', serif;
  --body: 'DM Sans', 'Noto Serif SC', sans-serif;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* === Announcement Bar === */
.announce {
  background: var(--ink);
  color: var(--cream);
  padding: 11px 0;
  overflow: hidden;
  font-size: 12.5px;
  letter-spacing: 0.06em;
}
.marquee {
  display: flex;
  animation: marquee 38s linear infinite;
  width: max-content;
}
.marquee span { padding: 0 28px; white-space: nowrap; display: inline-flex; align-items: center; gap: 14px; }
.marquee span::after { content: '✦'; color: var(--mustard); font-size: 11px; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* === Header === */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 244, 229, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(31,45,56,0.08);
}
.nav-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 40px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
}
.logo {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  font-variation-settings: 'opsz' 144, 'SOFT' 80;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.logo-mark { width: 38px; height: 38px; flex-shrink: 0; }
.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
}
.nav-links a {
  color: var(--ink);
  text-decoration: none;
  position: relative;
  padding: 6px 0;
  transition: color 0.2s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 2px;
  background: var(--tomato);
  border-radius: 2px;
  transition: all 0.25s ease;
}
.nav-links a:hover::after { left: 0; right: 0; }
.nav-actions {
  justify-self: end;
  display: flex;
  gap: 10px;
  align-items: center;
}
.icon-btn {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(31,45,56,0.15);
  background: transparent;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.25s;
  color: var(--ink);
  position: relative;
}
.icon-btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); transform: translateY(-1px); }
.cart-count {
  position: absolute;
  top: -3px; right: -3px;
  background: var(--tomato);
  color: var(--cream);
  border-radius: 50%;
  width: 19px; height: 19px;
  font-size: 11px;
  display: grid;
  place-items: center;
  font-weight: 700;
  border: 2px solid var(--cream);
}

/* === Hero === */
.hero {
  position: relative;
  padding: 70px 40px 110px;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(31,45,56,0.08) 1px, transparent 0);
  background-size: 40px 40px;
  opacity: 0.5;
  pointer-events: none;
}
.hero-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero-text { position: relative; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 32px;
  padding: 9px 16px;
  border: 1px solid rgba(31,45,56,0.2);
  border-radius: 100px;
  font-weight: 500;
  background: rgba(255,254,249,0.5);
}
.hero-eyebrow .pulse {
  width: 7px; height: 7px;
  background: var(--tomato);
  border-radius: 50%;
  position: relative;
}
.hero-eyebrow .pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--tomato);
  opacity: 0.4;
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(2.2); opacity: 0; }
}
.hero h1 {
  font-family: var(--display);
  font-size: clamp(46px, 7.5vw, 116px);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin-bottom: 36px;
}
.hero h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--tomato);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 300;
}
.hero h1 .underline {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.hero h1 .underline::after {
  content: '';
  position: absolute;
  left: -4px; right: -4px;
  bottom: 12%;
  height: 18%;
  background: var(--mustard);
  z-index: -1;
  transform: skew(-5deg) rotate(-1deg);
  opacity: 0.85;
  border-radius: 2px;
}
.hero-lead {
  font-size: 18px;
  max-width: 480px;
  color: var(--ink-soft);
  margin-bottom: 40px;
  line-height: 1.65;
}
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 32px;
  border-radius: 100px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}
.btn-primary {
  background: var(--ink);
  color: var(--cream);
}
.btn-primary:hover { background: var(--tomato); transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(232,68,44,0.4); }
.btn-primary svg { transition: transform 0.25s; }
.btn-primary:hover svg { transform: translateX(4px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(31,45,56,0.2);
}
.btn-ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.hero-rating {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-soft);
}
.stars { color: var(--mustard); letter-spacing: 1px; font-size: 15px; }

.hero-meta {
  display: flex;
  gap: 40px;
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid rgba(31,45,56,0.12);
}
.hero-meta-item .num {
  font-family: var(--display);
  font-size: 36px;
  font-variation-settings: 'opsz' 144, 'SOFT' 80;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.hero-meta-item .num em {
  font-style: italic;
  font-weight: 300;
  color: var(--tomato);
}
.hero-meta-item .label {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 6px;
  letter-spacing: 0.05em;
}

/* Hero visual */
.hero-visual {
  position: relative;
  aspect-ratio: 1/1.15;
  max-width: 540px;
  margin: 0 auto;
}
.hero-card {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--paper) 0%, #F5EDD8 100%);
  border-radius: 60% 60% 30px 30px / 50% 50% 30px 30px;
  overflow: hidden;
  box-shadow: 0 40px 80px -25px rgba(31,45,56,0.28), inset 0 0 0 1px rgba(31,45,56,0.04);
}
.hero-card-inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.hero-card-inner svg { width: 76%; height: auto; }
.hero-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(0.3px);
}
.shape-1 {
  width: 130px; height: 130px;
  background: var(--mustard);
  top: 8%; left: -45px;
  animation: float 9s ease-in-out infinite;
}
.shape-2 {
  width: 88px; height: 88px;
  background: var(--mint);
  top: 38%; right: -25px;
  animation: float 7s ease-in-out infinite -2s;
}
.shape-3 {
  width: 110px; height: 110px;
  background: var(--peach);
  bottom: 12%; left: 10%;
  animation: float 10s ease-in-out infinite -4s;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(18px, -22px) rotate(8deg); }
}
.sticker {
  position: absolute;
  background: var(--tomato);
  color: var(--cream);
  width: 138px; height: 138px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--display);
  font-size: 13.5px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.05em;
  bottom: -10px; left: -34px;
  z-index: 3;
  box-shadow: 0 12px 28px -10px rgba(232,68,44,0.5);
  animation: rotate 18s linear infinite;
}
@keyframes rotate { to { transform: rotate(360deg); } }
.sticker-inner {
  display: block;
  animation: rotate-back 18s linear infinite;
}
@keyframes rotate-back { to { transform: rotate(-360deg); } }

/* tiny stars sprinkle */
.sparkle {
  position: absolute;
  pointer-events: none;
}
.sparkle.s1 { top: 6%; right: 8%; width: 28px; height: 28px; }
.sparkle.s2 { top: 50%; left: 4%; width: 18px; height: 18px; }

/* === Promise strip === */
.promise {
  background: var(--ink);
  color: var(--cream);
  padding: 36px 40px;
}
.promise-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}
.promise-item {
  display: flex;
  align-items: center;
  gap: 18px;
}
.promise-icon {
  width: 48px; height: 48px;
  background: rgba(251,244,229,0.08);
  border: 1px solid rgba(251,244,229,0.15);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--mustard);
}
.promise-item h4 { font-size: 14px; font-weight: 600; margin-bottom: 3px; letter-spacing: 0.02em; }
.promise-item p { font-size: 12.5px; color: rgba(251,244,229,0.6); line-height: 1.45; }

/* === Sections === */
.section {
  padding: 120px 40px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 64px;
  gap: 40px;
  flex-wrap: wrap;
}
.section-label {
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tomato);
  font-weight: 600;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.section-label::before { content: ''; width: 32px; height: 1px; background: var(--tomato); }
.section h2 {
  font-family: var(--display);
  font-size: clamp(34px, 4.8vw, 64px);
  font-variation-settings: 'opsz' 144, 'SOFT' 90;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 760px;
}
.section h2 em {
  font-style: italic;
  color: var(--tomato);
  font-weight: 300;
}
.section-link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  transition: gap 0.25s, color 0.25s;
}
.section-link:hover { gap: 14px; color: var(--tomato); border-color: var(--tomato); }

/* === Categories === */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.cat-card {
  aspect-ratio: 3/4;
  border-radius: 28px;
  padding: 26px 24px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.4s ease;
  text-decoration: none;
  color: inherit;
}
.cat-card:hover {
  transform: translateY(-12px) rotate(0deg) scale(1.02) !important;
  box-shadow: 0 24px 50px -12px rgba(31,45,56,0.25);
}
.cat-card:nth-child(1) { background: var(--mustard); transform: rotate(-3deg); }
.cat-card:nth-child(2) { background: var(--mint); transform: translateY(20px) rotate(1deg); }
.cat-card:nth-child(3) { background: var(--peach); transform: rotate(2deg); }
.cat-card:nth-child(4) { background: var(--sky); transform: translateY(-12px) rotate(-1deg); }
.cat-card:nth-child(5) { background: var(--berry); color: var(--cream); transform: rotate(2deg); }
.cat-num {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  opacity: 0.55;
  letter-spacing: 0.05em;
}
.cat-info h3 {
  font-family: var(--display);
  font-size: 26px;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.cat-info p { font-size: 12.5px; opacity: 0.7; margin-top: 6px; }
.cat-illustration {
  width: 100%; height: 50%;
  display: grid;
  place-items: center;
  margin: 12px 0;
}
.cat-illustration svg { width: 88%; height: auto; max-height: 100%; }
.cat-arrow {
  align-self: end;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(31,45,56,0.1);
  display: grid;
  place-items: center;
  transition: transform 0.3s;
}
.cat-card:nth-child(5) .cat-arrow { background: rgba(251,244,229,0.2); }
.cat-card:hover .cat-arrow { transform: rotate(-45deg); }

/* === Best sellers === */
.bestsellers {
  background: var(--paper);
  position: relative;
}
.bestsellers::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60px;
  background: var(--cream);
  clip-path: ellipse(75% 100% at 50% 0%);
}
.bs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.product {
  cursor: pointer;
  transition: transform 0.35s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}
.product:hover { transform: translateY(-6px); }
.product-image {
  aspect-ratio: 1/1.05;
  background: var(--cream);
  border-radius: 22px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  transition: transform 0.4s ease;
}
.product:nth-child(1) .product-image { background: #F8E5D6; }
.product:nth-child(2) .product-image { background: #DCEBE0; }
.product:nth-child(3) .product-image { background: #F4DEDA; }
.product:nth-child(4) .product-image { background: #E5DBEC; }
.product-image svg {
  width: 70%; height: 70%;
  transition: transform 0.4s ease;
}
.product:hover .product-image svg { transform: scale(1.06) rotate(-3deg); }
.product-badge {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--ink);
  color: var(--cream);
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
  z-index: 2;
}
.product-badge.warm { background: var(--tomato); }
.product-fav {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  background: rgba(255,254,249,0.85);
  backdrop-filter: blur(4px);
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  color: var(--ink);
  transition: all 0.2s;
}
.product-fav:hover { background: var(--tomato); color: var(--cream); }
.product-quick {
  position: absolute;
  bottom: -50px;
  left: 16px; right: 16px;
  background: var(--ink);
  color: var(--cream);
  padding: 14px;
  border-radius: 100px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: bottom 0.35s ease;
  cursor: pointer;
}
.product:hover .product-quick { bottom: 16px; }
.product-name {
  font-family: var(--display);
  font-size: 21px;
  font-variation-settings: 'opsz' 144, 'SOFT' 80;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-bottom: 6px;
}
.product-name-en {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  color: var(--ink-soft);
  margin-left: 6px;
}
.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.product-price {
  font-family: var(--display);
  font-size: 18px;
  font-variation-settings: 'opsz' 144, 'SOFT' 80;
  font-weight: 600;
  color: var(--ink);
}

/* === Story === */
.story-section {
  background: var(--cream-dark);
  padding: 130px 40px;
  position: relative;
  overflow: hidden;
}
.story-section::before {
  content: '';
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,68,44,0.12) 0%, transparent 70%);
  top: -100px; right: -100px;
  pointer-events: none;
}
.story-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 90px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.story-image {
  aspect-ratio: 4/5;
  background: linear-gradient(160deg, var(--mint), #5A9678);
  border-radius: 32px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(31,45,56,0.25);
}
.story-image-svg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.story-image-svg svg { width: 70%; height: auto; }
.story-image-overlay {
  position: absolute;
  bottom: 26px; left: 26px; right: 26px;
  background: var(--paper);
  padding: 22px 24px;
  border-radius: 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  box-shadow: 0 12px 30px -10px rgba(31,45,56,0.2);
}
.stat-num {
  font-family: var(--display);
  font-size: 44px;
  font-variation-settings: 'opsz' 144, 'SOFT' 80;
  font-weight: 500;
  color: var(--tomato);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-num em { font-style: italic; font-weight: 300; }
.stat-label {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.story-image-tag {
  position: absolute;
  top: 26px; left: 26px;
  background: var(--ink);
  color: var(--cream);
  padding: 8px 14px;
  border-radius: 100px;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  font-weight: 500;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.story-image-tag::before { content: ''; width: 6px; height: 6px; background: var(--mustard); border-radius: 50%; }
.story-text h2 { margin-bottom: 32px; }
.story-text .lead {
  font-family: var(--display);
  font-size: 22px;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-weight: 300;
  font-style: italic;
  margin-bottom: 26px;
  color: var(--ink);
  line-height: 1.45;
}
.story-text p { font-size: 15px; color: var(--ink-soft); margin-bottom: 18px; line-height: 1.75; }
.story-features {
  list-style: none;
  margin-top: 36px;
  display: grid;
  gap: 14px;
}
.story-features li {
  display: flex;
  gap: 18px;
  align-items: start;
  padding: 18px 20px;
  background: var(--paper);
  border-radius: 16px;
  transition: transform 0.25s ease;
}
.story-features li:hover { transform: translateX(6px); }
.story-features .ico {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--ink);
}
.story-features li:nth-child(1) .ico { background: var(--mustard); }
.story-features li:nth-child(2) .ico { background: var(--mint); }
.story-features li:nth-child(3) .ico { background: var(--peach); }
.story-features h5 { font-size: 14.5px; font-weight: 600; margin-bottom: 4px; }
.story-features p { font-size: 13px; margin: 0; color: var(--ink-soft); line-height: 1.5; }

/* === Testimonials === */
.testimonials {
  padding: 120px 40px;
  position: relative;
  overflow: hidden;
  max-width: 1400px;
  margin: 0 auto;
}
.tm-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 24px;
  margin-top: 60px;
}
.tm-card {
  background: var(--paper);
  padding: 36px;
  border-radius: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(31,45,56,0.06);
  transition: transform 0.3s ease;
}
.tm-card:hover { transform: translateY(-4px); }
.tm-card.featured {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.tm-card.featured .tm-name,
.tm-card.featured .tm-role { color: var(--cream); }
.tm-mark {
  font-family: var(--display);
  font-size: 60px;
  line-height: 0.6;
  color: var(--tomato);
  margin-bottom: 16px;
  font-style: italic;
}
.tm-card.featured .tm-mark { color: var(--mustard); }
.tm-quote {
  font-family: var(--display);
  font-variation-settings: 'opsz' 144, 'SOFT' 80;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 36px;
  letter-spacing: -0.005em;
}
.tm-card.featured .tm-quote { font-size: 26px; line-height: 1.35; }
.tm-author { display: flex; align-items: center; gap: 14px; }
.tm-avatar {
  width: 50px; height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  background: var(--mustard);
  color: var(--ink);
  flex-shrink: 0;
}
.tm-card:nth-child(2) .tm-avatar { background: var(--mint); }
.tm-card:nth-child(3) .tm-avatar { background: var(--peach); }
.tm-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.tm-role { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.tm-stars { font-size: 13px; color: var(--mustard); letter-spacing: 1.5px; margin-bottom: 14px; }

/* === Newsletter === */
.newsletter {
  background: var(--tomato);
  color: var(--cream);
  padding: 110px 40px;
  position: relative;
  overflow: hidden;
}
.newsletter-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.newsletter h2 {
  font-family: var(--display);
  font-size: clamp(38px, 5.2vw, 76px);
  font-variation-settings: 'opsz' 144, 'SOFT' 90;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
}
.newsletter h2 em {
  font-style: italic;
  font-weight: 300;
  color: rgba(251,244,229,0.85);
}
.newsletter-eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  opacity: 0.85;
}
.newsletter-eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--cream); }
.newsletter-right p { font-size: 16px; opacity: 0.92; margin-bottom: 28px; line-height: 1.65; }
.newsletter-form {
  display: flex;
  gap: 8px;
  background: var(--cream);
  padding: 8px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.newsletter-form input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 14px 22px;
  font-family: var(--body);
  font-size: 14.5px;
  outline: none;
  color: var(--ink);
}
.newsletter-form input::placeholder { color: var(--ink-soft); }
.newsletter-form button {
  background: var(--ink);
  color: var(--cream);
  border: none;
  padding: 14px 28px;
  border-radius: 100px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s, color 0.25s;
}
.newsletter-form button:hover { background: var(--mustard); color: var(--ink); }
.newsletter-note { font-size: 12.5px; opacity: 0.85; }
.newsletter-deco-1, .newsletter-deco-2 {
  position: absolute;
  pointer-events: none;
  opacity: 0.16;
}
.newsletter-deco-1 { right: -80px; top: -60px; transform: rotate(15deg); }
.newsletter-deco-2 { left: -60px; bottom: -80px; transform: rotate(-12deg); }

/* === Footer === */
footer {
  background: var(--ink);
  color: var(--cream);
  padding: 90px 40px 36px;
}
.footer-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr;
  gap: 50px;
  margin-bottom: 64px;
}
.footer-brand .logo { color: var(--cream); margin-bottom: 22px; font-size: 26px; }
.footer-brand p { font-size: 14px; opacity: 0.7; max-width: 340px; line-height: 1.7; margin-bottom: 28px; }
.footer-stamps { display: flex; gap: 12px; flex-wrap: wrap; }
.footer-stamps span {
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border: 1px solid rgba(251,244,229,0.2);
  border-radius: 100px;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.85;
}
.footer-col h5 {
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 22px;
  color: var(--mustard);
  font-weight: 600;
}
.footer-col ul { list-style: none; display: grid; gap: 12px; }
.footer-col a {
  color: var(--cream);
  opacity: 0.7;
  text-decoration: none;
  font-size: 14px;
  transition: opacity 0.2s, color 0.2s;
}
.footer-col a:hover { opacity: 1; color: var(--mustard); }
.footer-bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid rgba(251,244,229,0.13);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  opacity: 0.7;
  flex-wrap: wrap;
  gap: 20px;
}
.socials { display: flex; gap: 10px; }
.socials a {
  width: 38px; height: 38px;
  background: rgba(251,244,229,0.08);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cream);
  text-decoration: none;
  opacity: 0.9;
  transition: all 0.2s;
}
.socials a:hover { background: var(--tomato); opacity: 1; transform: translateY(-2px); }
.legal-links { display: flex; gap: 22px; }
.legal-links a { color: inherit; text-decoration: none; }
.legal-links a:hover { color: var(--mustard); opacity: 1; }

/* === Animations === */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-text > *, .hero-visual {
  opacity: 0;
  animation: fadeUp 0.9s cubic-bezier(0.2, 0.85, 0.3, 1) forwards;
}
.hero-eyebrow { animation-delay: 0.05s; }
.hero h1 { animation-delay: 0.2s; }
.hero-lead { animation-delay: 0.4s; }
.btn-row { animation-delay: 0.55s; }
.hero-meta { animation-delay: 0.7s; }
.hero-visual { animation-delay: 0.3s; }

/* responsive */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-col:nth-child(4), .footer-col:nth-child(5) { grid-column: span 1; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-card:nth-child(4), .cat-card:nth-child(5) { grid-column: span 1; }
  .bs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .hero { padding: 50px 24px 80px; }
  .hero-grid, .story-wrapper, .newsletter-wrapper { grid-template-columns: 1fr; gap: 60px; }
  .promise-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .tm-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .nav-links { display: none; }
  .section, .promise, .testimonials, .story-section, .newsletter, footer { padding-left: 24px; padding-right: 24px; }
  .section { padding-top: 80px; padding-bottom: 80px; }
  .hero-meta { gap: 24px; flex-wrap: wrap; }
  .hero-meta-item .num { font-size: 30px; }
  .nav-wrapper { padding: 18px 20px; gap: 16px; }
  .nav-actions { gap: 6px; }
  .icon-btn { width: 38px; height: 38px; }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; }
  .promise-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr; }
  .bs-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .legal-links { flex-wrap: wrap; gap: 12px; }
}
</style>
</head>
<body>

<!-- ============ Announcement Marquee ============ -->
<div class="announce">
  <div class="marquee">
    <span>新会员立享 9 折优惠</span>
    <span>满 ¥299 全国包邮</span>
    <span>30 天无理由退换</span>
    <span>每件玩具均通过 EN71 安全认证</span>
    <span>FSC 认证可持续原木</span>
    <span>2026 春季新品已上线</span>
    <span>新会员立享 9 折优惠</span>
    <span>满 ¥299 全国包邮</span>
    <span>30 天无理由退换</span>
    <span>每件玩具均通过 EN71 安全认证</span>
    <span>FSC 认证可持续原木</span>
    <span>2026 春季新品已上线</span>
  </div>
</div>

<!-- ============ Header ============ -->
<header>
  <nav class="nav-wrapper">
    <a class="logo" href="#">
      <svg class="logo-mark" viewBox="0 0 40 40" fill="none">
        <ellipse cx="20" cy="22" rx="14" ry="13" fill="#1F2D38"/>
        <circle cx="13" cy="13" r="4.5" fill="#1F2D38"/>
        <circle cx="27" cy="13" r="4.5" fill="#1F2D38"/>
        <circle cx="13" cy="13" r="2" fill="#E8B73D"/>
        <circle cx="27" cy="13" r="2" fill="#E8B73D"/>
        <ellipse cx="20" cy="22" rx="6" ry="5" fill="#FBF4E5"/>
        <circle cx="16.5" cy="20" r="1.4" fill="#1F2D38"/>
        <circle cx="23.5" cy="20" r="1.4" fill="#1F2D38"/>
        <ellipse cx="20" cy="24" rx="2" ry="1.5" fill="#1F2D38"/>
        <path d="M19 25.5 Q20 27 21 25.5" stroke="#1F2D38" stroke-width="1" fill="none" stroke-linecap="round"/>
      </svg>
      小熊与橡果
    </a>
    <ul class="nav-links">
      <li><a href="#shop">商城</a></li>
      <li><a href="#categories">分类</a></li>
      <li><a href="#story">品牌故事</a></li>
      <li><a href="#">绘本天地</a></li>
      <li><a href="#">寻找门店</a></li>
    </ul>
    <div class="nav-actions">
      <button class="icon-btn" aria-label="搜索">
        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
      </button>
      <button class="icon-btn" aria-label="账户">
        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>
      </button>
      <button class="icon-btn" aria-label="购物车">
        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 7h14l-1.5 11a2 2 0 0 1-2 1.7H8.5a2 2 0 0 1-2-1.7L5 7z"/><path d="M9 7V5a3 3 0 1 1 6 0v2"/></svg>
        <span class="cart-count">3</span>
      </button>
    </div>
  </nav>
</header>

<!-- ============ Hero ============ -->
<section class="hero">
  <div class="hero-grid">

    <div class="hero-text">
      <div class="hero-eyebrow">
        <span class="pulse"></span>
        2026 春季新品系列 · Maple Collection
      </div>

      <h1>
        为<em>好奇心</em><br>
        而生的<span class="underline">玩具</span><br>
        与<em>陪伴</em>
      </h1>

      <p class="hero-lead">
        每一件玩具都来自匠人之手。我们用 FSC 认证的天然原木、植物染料和细致的打磨，为孩子打造从牙牙学语到入学课堂的童年伙伴 —— 可以传家。
      </p>

      <div class="btn-row">
        <a class="btn btn-primary" href="#shop">
          探索商城
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="m13 5 7 7-7 7"/></svg>
        </a>
        <a class="btn btn-ghost" href="#story">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4v16l14-8z"/></svg>
          观看品牌片
        </a>
        <span class="hero-rating">
          <span class="stars">★★★★★</span>
          <span>4.9 / 12,800+ 父母推荐</span>
        </span>
      </div>

      <div class="hero-meta">
        <div class="hero-meta-item">
          <div class="num"><em>12</em>年</div>
          <div class="label">手作工坊传承</div>
        </div>
        <div class="hero-meta-item">
          <div class="num">200+</div>
          <div class="label">原创玩具系列</div>
        </div>
        <div class="hero-meta-item">
          <div class="num"><em>FSC</em></div>
          <div class="label">国际森林认证</div>
        </div>
      </div>
    </div>

    <!-- Hero visual -->
    <div class="hero-visual">
      <div class="hero-shape shape-1"></div>
      <div class="hero-shape shape-2"></div>
      <div class="hero-shape shape-3"></div>

      <svg class="sparkle s1" viewBox="0 0 30 30" fill="#1F2D38"><path d="M15 0 L17 13 L30 15 L17 17 L15 30 L13 17 L0 15 L13 13 Z"/></svg>
      <svg class="sparkle s2" viewBox="0 0 30 30" fill="#E8442C"><path d="M15 0 L17 13 L30 15 L17 17 L15 30 L13 17 L0 15 L13 13 Z"/></svg>

      <div class="hero-card">
        <div class="hero-card-inner">
          <!-- Rocking Horse -->
          <svg viewBox="0 0 320 320" fill="none">
            <!-- shadow -->
            <ellipse cx="160" cy="270" rx="115" ry="14" fill="#1F2D38" opacity="0.12"/>
            <!-- rocker -->
            <path d="M40 240 Q160 290 280 240" stroke="#7B5A3A" stroke-width="10" fill="none" stroke-linecap="round"/>
            <path d="M50 233 Q160 280 270 233" stroke="#9C7A56" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.7"/>
            <!-- legs -->
            <rect x="85" y="195" width="16" height="50" rx="3" fill="#7B5A3A"/>
            <rect x="225" y="195" width="16" height="50" rx="3" fill="#7B5A3A"/>
            <rect x="120" y="195" width="14" height="48" rx="3" fill="#8A6843"/>
            <rect x="195" y="195" width="14" height="48" rx="3" fill="#8A6843"/>
            <!-- body -->
            <path d="M70 190 Q70 130 130 130 L210 130 Q260 130 260 175 L260 200 Q260 210 250 210 L80 210 Q70 210 70 200 Z" fill="#E8B73D"/>
            <path d="M70 190 Q70 140 110 135 L100 200 Z" fill="#D9A52E"/>
            <!-- saddle -->
            <path d="M130 130 Q130 110 165 110 L200 110 Q235 110 235 130 L235 145 Q235 155 225 155 L140 155 Q130 155 130 145 Z" fill="#E8442C"/>
            <path d="M165 110 L165 155 M200 110 L200 155" stroke="#B73D5C" stroke-width="2" opacity="0.6"/>
            <circle cx="155" cy="135" r="2.5" fill="#FBF4E5"/>
            <circle cx="180" cy="135" r="2.5" fill="#FBF4E5"/>
            <circle cx="205" cy="135" r="2.5" fill="#FBF4E5"/>
            <!-- neck/head -->
            <path d="M210 130 Q230 90 280 90 Q295 95 285 125 Q280 145 250 145 Z" fill="#E8B73D"/>
            <path d="M275 95 Q290 92 290 105 L285 125 Z" fill="#D9A52E"/>
            <!-- mane -->
            <path d="M220 110 Q225 95 235 105 Q240 90 250 100 Q258 85 268 95" stroke="#1F2D38" stroke-width="4" fill="none" stroke-linecap="round"/>
            <!-- ear -->
            <path d="M268 92 Q272 78 280 85 Q278 95 272 96 Z" fill="#E8B73D"/>
            <!-- eye -->
            <circle cx="278" cy="113" r="2.8" fill="#1F2D38"/>
            <circle cx="279" cy="112" r="0.8" fill="#FBF4E5"/>
            <!-- nostril -->
            <circle cx="285" cy="120" r="1.5" fill="#1F2D38" opacity="0.5"/>
            <!-- mouth -->
            <path d="M286 124 Q284 128 280 127" stroke="#1F2D38" stroke-width="1.5" fill="none" stroke-linecap="round"/>
            <!-- tail -->
            <path d="M70 175 Q40 170 35 200 Q40 215 60 210" stroke="#1F2D38" stroke-width="6" fill="none" stroke-linecap="round"/>
            <!-- decoration on body -->
            <circle cx="105" cy="175" r="3" fill="#FBF4E5"/>
            <circle cx="125" cy="190" r="2" fill="#FBF4E5"/>
            <circle cx="90" cy="160" r="2.5" fill="#FBF4E5"/>
            <!-- star -->
            <path d="M115 80 L117 87 L124 88 L118 92 L120 99 L115 95 L110 99 L112 92 L106 88 L113 87 Z" fill="#E8442C"/>
          </svg>
        </div>
      </div>

      <div class="sticker">
        <div class="sticker-inner">
          ★ 新品 ★<br>
          匠心臻选<br>
          ── 2026 ──
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ============ Promise Strip ============ -->
<section class="promise">
  <div class="promise-grid">
    <div class="promise-item">
      <div class="promise-icon">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 6v6c0 5 3.5 9.5 8 10 4.5-.5 8-5 8-10V6l-8-4z"/><path d="m9 12 2 2 4-4"/></svg>
      </div>
      <div>
        <h4>EN71 国际安全认证</h4>
        <p>每批次玩具第三方实验室检测</p>
      </div>
    </div>
    <div class="promise-item">
      <div class="promise-icon">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s4-4 4-9-4-9-4-9-4 4-4 9 4 9 4 9z"/><path d="M3 12h18"/></svg>
      </div>
      <div>
        <h4>FSC 可持续原木</h4>
        <p>来自负责任管理的森林资源</p>
      </div>
    </div>
    <div class="promise-item">
      <div class="promise-icon">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>
      </div>
      <div>
        <h4>顺丰包邮 24 小时发出</h4>
        <p>满 ¥299 全国包邮，礼盒包装</p>
      </div>
    </div>
    <div class="promise-item">
      <div class="promise-icon">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9"/><path d="M3 4v5h5"/><path d="M12 7v5l3 3"/></svg>
      </div>
      <div>
        <h4>30 天无理由退换</h4>
        <p>不喜欢？让玩具回家就好</p>
      </div>
    </div>
  </div>
</section>

<!-- ============ Categories ============ -->
<section class="section" id="categories">
  <div class="section-header">
    <div>
      <div class="section-label">玩具家族 · Our Family</div>
      <h2>从<em>木头</em>到<em>布偶</em><br>陪你走过每一段成长</h2>
    </div>
    <a class="section-link" href="#">浏览全部分类 →</a>
  </div>

  <div class="cat-grid">
    <a class="cat-card" href="#">
      <div>
        <div class="cat-num">— 01</div>
      </div>
      <div class="cat-illustration">
        <svg viewBox="0 0 120 100" fill="none">
          <rect x="20" y="60" width="30" height="30" fill="#1F2D38" rx="3"/>
          <rect x="55" y="60" width="30" height="30" fill="#E8442C" rx="3"/>
          <rect x="35" y="25" width="30" height="30" fill="#7BB89B" rx="3"/>
          <rect x="42" y="2" width="22" height="20" fill="#FBF4E5" rx="2"/>
          <text x="29" y="82" font-family="Fraunces, serif" font-size="20" fill="#FBF4E5" font-weight="600">A</text>
          <text x="63" y="82" font-family="Fraunces, serif" font-size="20" fill="#FBF4E5" font-weight="600">B</text>
          <text x="44" y="47" font-family="Fraunces, serif" font-size="20" fill="#1F2D38" font-weight="600">C</text>
        </svg>
      </div>
      <div class="cat-info">
        <h3>木质积木</h3>
        <p>15+ 系列 · 1-6 岁</p>
        <div class="cat-arrow">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="m13 5 7 7-7 7"/></svg>
        </div>
      </div>
    </a>

    <a class="cat-card" href="#">
      <div>
        <div class="cat-num">— 02</div>
      </div>
      <div class="cat-illustration">
        <svg viewBox="0 0 120 100" fill="none">
          <ellipse cx="60" cy="62" rx="34" ry="30" fill="#F4B7A0"/>
          <circle cx="42" cy="42" r="14" fill="#F4B7A0"/>
          <circle cx="78" cy="42" r="14" fill="#F4B7A0"/>
          <circle cx="42" cy="42" r="6" fill="#FBF4E5"/>
          <circle cx="78" cy="42" r="6" fill="#FBF4E5"/>
          <circle cx="50" cy="56" r="2.5" fill="#1F2D38"/>
          <circle cx="70" cy="56" r="2.5" fill="#1F2D38"/>
          <ellipse cx="60" cy="68" rx="4" ry="3" fill="#1F2D38"/>
          <path d="M55 73 Q60 78 65 73" stroke="#1F2D38" stroke-width="1.5" fill="none" stroke-linecap="round"/>
          <circle cx="50" cy="50" r="2" fill="#1F2D38"/>
          <circle cx="70" cy="50" r="2" fill="#1F2D38"/>
        </svg>
      </div>
      <div class="cat-info">
        <h3>毛绒伙伴</h3>
        <p>30+ 角色 · 0-12 岁</p>
        <div class="cat-arrow">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="m13 5 7 7-7 7"/></svg>
        </div>
      </div>
    </a>

    <a class="cat-card" href="#">
      <div>
        <div class="cat-num">— 03</div>
      </div>
      <div class="cat-illustration">
        <svg viewBox="0 0 120 100" fill="none">
          <rect x="15" y="55" width="20" height="35" rx="3" fill="#E8442C"/>
          <rect x="38" y="48" width="20" height="42" rx="3" fill="#E8B73D"/>
          <rect x="61" y="40" width="20" height="50" rx="3" fill="#7BB89B"/>
          <rect x="84" y="32" width="20" height="58" rx="3" fill="#A4C8DD"/>
          <circle cx="25" cy="50" r="4" fill="#1F2D38"/>
          <circle cx="48" cy="43" r="4" fill="#1F2D38"/>
          <circle cx="71" cy="35" r="4" fill="#1F2D38"/>
          <circle cx="94" cy="27" r="4" fill="#1F2D38"/>
          <path d="M30 20 Q60 5 90 20" stroke="#1F2D38" stroke-width="2" fill="none" stroke-dasharray="3 3"/>
        </svg>
      </div>
      <div class="cat-info">
        <h3>音乐启蒙</h3>
        <p>木琴 / 沙锤 / 小钢琴</p>
        <div class="cat-arrow">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="m13 5 7 7-7 7"/></svg>
        </div>
      </div>
    </a>

    <a class="cat-card" href="#">
      <div>
        <div class="cat-num">— 04</div>
      </div>
      <div class="cat-illustration">
        <svg viewBox="0 0 120 100" fill="none">
          <rect x="20" y="35" width="80" height="30" rx="6" fill="#FBF4E5" stroke="#1F2D38" stroke-width="2"/>
          <circle cx="35" cy="78" r="10" fill="#1F2D38"/>
          <circle cx="35" cy="78" r="4" fill="#FBF4E5"/>
          <circle cx="85" cy="78" r="10" fill="#1F2D38"/>
          <circle cx="85" cy="78" r="4" fill="#FBF4E5"/>
          <rect x="30" y="20" width="20" height="20" rx="3" fill="#E8442C"/>
          <rect x="55" y="42" width="10" height="14" fill="#7BB89B"/>
          <rect x="72" y="42" width="10" height="14" fill="#A4C8DD"/>
          <circle cx="40" cy="30" r="2" fill="#FBF4E5"/>
        </svg>
      </div>
      <div class="cat-info">
        <h3>仿真车辆</h3>
        <p>原木打造 · 安全圆角</p>
        <div class="cat-arrow">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="m13 5 7 7-7 7"/></svg>
        </div>
      </div>
    </a>

    <a class="cat-card" href="#">
      <div>
        <div class="cat-num">— 05</div>
      </div>
      <div class="cat-illustration">
        <svg viewBox="0 0 120 100" fill="none">
          <rect x="22" y="20" width="76" height="55" rx="4" fill="#FBF4E5" stroke="currentColor" stroke-width="2"/>
          <circle cx="42" cy="40" r="6" fill="#E8B73D"/>
          <rect x="55" y="35" width="36" height="3" fill="currentColor" opacity="0.5"/>
          <rect x="55" y="42" width="28" height="3" fill="currentColor" opacity="0.5"/>
          <rect x="30" y="55" width="60" height="3" fill="currentColor" opacity="0.4"/>
          <rect x="30" y="62" width="50" height="3" fill="currentColor" opacity="0.4"/>
          <path d="M60 75 L60 90 M50 90 L70 90" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
      </div>
      <div class="cat-info">
        <h3>绘本与故事</h3>
        <p>原创童书 · 中英双语</p>
        <div class="cat-arrow">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="m13 5 7 7-7 7"/></svg>
        </div>
      </div>
    </a>
  </div>
</section>

<!-- ============ Best Sellers ============ -->
<section class="section bestsellers" id="shop">
  <div class="section-header">
    <div>
      <div class="section-label">本季热卖 · Top Picks</div>
      <h2>父母们<em>反复回购</em>的<br>那几件玩具</h2>
    </div>
    <a class="section-link" href="#">查看完整商城 →</a>
  </div>

  <div class="bs-grid">
    <!-- Product 1: Wooden Train -->
    <a class="product" href="#">
      <div class="product-image">
        <span class="product-badge warm">热卖</span>
        <button class="product-fav" aria-label="收藏">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
        </button>
        <svg viewBox="0 0 200 200" fill="none">
          <ellipse cx="100" cy="170" rx="80" ry="6" fill="#1F2D38" opacity="0.15"/>
          <!-- train body -->
          <rect x="30" y="80" width="100" height="60" rx="5" fill="#E8442C"/>
          <rect x="40" y="50" width="60" height="35" rx="3" fill="#1F2D38"/>
          <rect x="48" y="58" width="20" height="20" fill="#E8B73D" opacity="0.8"/>
          <rect x="73" y="58" width="20" height="20" fill="#E8B73D" opacity="0.8"/>
          <rect x="100" y="65" width="40" height="20" rx="2" fill="#7B5A3A"/>
          <rect x="135" y="100" width="40" height="40" rx="3" fill="#7BB89B"/>
          <!-- chimney -->
          <rect x="50" y="30" width="14" height="22" fill="#1F2D38"/>
          <ellipse cx="57" cy="32" rx="9" ry="3" fill="#7B5A3A"/>
          <circle cx="48" cy="22" r="6" fill="#FBF4E5" opacity="0.7"/>
          <circle cx="58" cy="14" r="5" fill="#FBF4E5" opacity="0.5"/>
          <!-- wheels -->
          <circle cx="55" cy="150" r="14" fill="#1F2D38"/>
          <circle cx="55" cy="150" r="6" fill="#FBF4E5"/>
          <circle cx="100" cy="150" r="14" fill="#1F2D38"/>
          <circle cx="100" cy="150" r="6" fill="#FBF4E5"/>
          <circle cx="155" cy="150" r="14" fill="#1F2D38"/>
          <circle cx="155" cy="150" r="6" fill="#FBF4E5"/>
          <!-- decoration -->
          <text x="70" y="120" font-family="Fraunces, serif" font-size="14" fill="#FBF4E5" font-weight="700">B&amp;A</text>
          <circle cx="35" cy="100" r="3" fill="#FBF4E5"/>
          <circle cx="125" cy="100" r="3" fill="#FBF4E5"/>
        </svg>
        <div class="product-quick">+ 加入购物车</div>
      </div>
      <div class="product-name">原木小火车 <span class="product-name-en">Wooden Express</span></div>
      <div class="product-meta">
        <span>3-6 岁 · 山毛榉原木</span>
        <span class="product-price">¥ 388</span>
      </div>
    </a>

    <!-- Product 2: Teddy Bear -->
    <a class="product" href="#">
      <div class="product-image">
        <span class="product-badge">新品</span>
        <button class="product-fav" aria-label="收藏">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
        </button>
        <svg viewBox="0 0 200 200" fill="none">
          <ellipse cx="100" cy="180" rx="60" ry="6" fill="#1F2D38" opacity="0.12"/>
          <!-- ears -->
          <circle cx="55" cy="55" r="20" fill="#7B5A3A"/>
          <circle cx="145" cy="55" r="20" fill="#7B5A3A"/>
          <circle cx="55" cy="55" r="10" fill="#F4B7A0"/>
          <circle cx="145" cy="55" r="10" fill="#F4B7A0"/>
          <!-- head -->
          <circle cx="100" cy="80" r="50" fill="#7B5A3A"/>
          <!-- snout -->
          <ellipse cx="100" cy="100" rx="22" ry="18" fill="#FBF4E5"/>
          <!-- nose -->
          <ellipse cx="100" cy="92" rx="6" ry="5" fill="#1F2D38"/>
          <!-- mouth -->
          <path d="M100 98 L100 105 M100 105 Q92 110 88 107 M100 105 Q108 110 112 107" stroke="#1F2D38" stroke-width="2" fill="none" stroke-linecap="round"/>
          <!-- eyes -->
          <circle cx="80" cy="80" r="4" fill="#1F2D38"/>
          <circle cx="120" cy="80" r="4" fill="#1F2D38"/>
          <circle cx="81" cy="79" r="1.2" fill="#FBF4E5"/>
          <circle cx="121" cy="79" r="1.2" fill="#FBF4E5"/>
          <!-- body -->
          <ellipse cx="100" cy="155" rx="42" ry="32" fill="#7B5A3A"/>
          <ellipse cx="100" cy="160" rx="22" ry="18" fill="#F4B7A0"/>
          <!-- arms -->
          <ellipse cx="55" cy="135" rx="14" ry="20" fill="#7B5A3A" transform="rotate(-20 55 135)"/>
          <ellipse cx="145" cy="135" rx="14" ry="20" fill="#7B5A3A" transform="rotate(20 145 135)"/>
          <!-- bow tie -->
          <path d="M85 122 L70 115 L70 132 Z" fill="#E8442C"/>
          <path d="M115 122 L130 115 L130 132 Z" fill="#E8442C"/>
          <circle cx="100" cy="122" r="5" fill="#E8442C"/>
        </svg>
        <div class="product-quick">+ 加入购物车</div>
      </div>
      <div class="product-name">小熊欧文 <span class="product-name-en">Owen the Bear</span></div>
      <div class="product-meta">
        <span>0+ 岁 · 有机棉绒布</span>
        <span class="product-price">¥ 268</span>
      </div>
    </a>

    <!-- Product 3: Building Set -->
    <a class="product" href="#">
      <div class="product-image">
        <span class="product-badge">畅销</span>
        <button class="product-fav" aria-label="收藏">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
        </button>
        <svg viewBox="0 0 200 200" fill="none">
          <ellipse cx="100" cy="180" rx="65" ry="5" fill="#1F2D38" opacity="0.15"/>
          <!-- bottom row -->
          <rect x="38" y="135" width="36" height="36" rx="3" fill="#E8442C"/>
          <rect x="78" y="135" width="36" height="36" rx="3" fill="#E8B73D"/>
          <rect x="118" y="135" width="36" height="36" rx="3" fill="#7BB89B"/>
          <!-- middle row -->
          <rect x="58" y="95" width="36" height="36" rx="3" fill="#A4C8DD"/>
          <rect x="98" y="95" width="36" height="36" rx="3" fill="#B73D5C"/>
          <!-- top row -->
          <rect x="78" y="55" width="36" height="36" rx="3" fill="#F4B7A0"/>
          <!-- triangle top -->
          <path d="M78 55 L96 25 L114 55 Z" fill="#1F2D38"/>
          <!-- letters -->
          <text x="48" y="161" font-family="Fraunces, serif" font-size="22" fill="#FBF4E5" font-weight="700">A</text>
          <text x="88" y="161" font-family="Fraunces, serif" font-size="22" fill="#1F2D38" font-weight="700">B</text>
          <text x="128" y="161" font-family="Fraunces, serif" font-size="22" fill="#FBF4E5" font-weight="700">C</text>
          <text x="68" y="121" font-family="Fraunces, serif" font-size="22" fill="#1F2D38" font-weight="700">D</text>
          <text x="108" y="121" font-family="Fraunces, serif" font-size="22" fill="#FBF4E5" font-weight="700">E</text>
          <text x="88" y="81" font-family="Fraunces, serif" font-size="22" fill="#1F2D38" font-weight="700">F</text>
        </svg>
        <div class="product-quick">+ 加入购物车</div>
      </div>
      <div class="product-name">字母积木屋 <span class="product-name-en">ABC House</span></div>
      <div class="product-meta">
        <span>2-5 岁 · 26 块原木</span>
        <span class="product-price">¥ 528</span>
      </div>
    </a>

    <!-- Product 4: Xylophone -->
    <a class="product" href="#">
      <div class="product-image">
        <span class="product-badge">限量</span>
        <button class="product-fav" aria-label="收藏">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
        </button>
        <svg viewBox="0 0 200 200" fill="none">
          <ellipse cx="100" cy="180" rx="70" ry="5" fill="#1F2D38" opacity="0.15"/>
          <!-- base -->
          <path d="M30 130 L35 165 L165 165 L170 130 Z" fill="#7B5A3A"/>
          <!-- bars -->
          <rect x="40" y="90" width="20" height="50" rx="2" fill="#E8442C"/>
          <rect x="62" y="85" width="20" height="55" rx="2" fill="#E8B73D"/>
          <rect x="84" y="80" width="20" height="60" rx="2" fill="#7BB89B"/>
          <rect x="106" y="80" width="20" height="60" rx="2" fill="#A4C8DD"/>
          <rect x="128" y="85" width="20" height="55" rx="2" fill="#B73D5C"/>
          <rect x="150" y="90" width="14" height="50" rx="2" fill="#F4B7A0"/>
          <!-- screws -->
          <circle cx="50" cy="98" r="2" fill="#1F2D38"/>
          <circle cx="50" cy="132" r="2" fill="#1F2D38"/>
          <circle cx="72" cy="93" r="2" fill="#1F2D38"/>
          <circle cx="72" cy="132" r="2" fill="#1F2D38"/>
          <circle cx="94" cy="88" r="2" fill="#1F2D38"/>
          <circle cx="94" cy="132" r="2" fill="#1F2D38"/>
          <circle cx="116" cy="88" r="2" fill="#1F2D38"/>
          <circle cx="116" cy="132" r="2" fill="#1F2D38"/>
          <circle cx="138" cy="93" r="2" fill="#1F2D38"/>
          <circle cx="138" cy="132" r="2" fill="#1F2D38"/>
          <!-- mallets -->
          <line x1="35" y1="50" x2="80" y2="78" stroke="#7B5A3A" stroke-width="3" stroke-linecap="round"/>
          <circle cx="33" cy="48" r="7" fill="#1F2D38"/>
          <line x1="170" y1="48" x2="125" y2="76" stroke="#7B5A3A" stroke-width="3" stroke-linecap="round"/>
          <circle cx="172" cy="46" r="7" fill="#1F2D38"/>
          <!-- music notes -->
          <text x="40" y="35" font-family="serif" font-size="18" fill="#1F2D38">♪</text>
          <text x="155" y="30" font-family="serif" font-size="22" fill="#1F2D38">♫</text>
        </svg>
        <div class="product-quick">+ 加入购物车</div>
      </div>
      <div class="product-name">彩虹小木琴 <span class="product-name-en">Rainbow Notes</span></div>
      <div class="product-meta">
        <span>1-4 岁 · 8 音阶</span>
        <span class="product-price">¥ 348</span>
      </div>
    </a>
  </div>
</section>

<!-- ============ Story ============ -->
<section class="story-section" id="story">
  <div class="story-wrapper">
    <div class="story-image">
      <span class="story-image-tag">Atelier · 苏州工坊</span>
      <div class="story-image-svg">
        <svg viewBox="0 0 320 360" fill="none">
          <!-- workshop scene -->
          <!-- moon/sun -->
          <circle cx="240" cy="80" r="34" fill="#FBF4E5" opacity="0.3"/>
          <!-- table -->
          <rect x="30" y="220" width="260" height="14" rx="3" fill="#7B5A3A"/>
          <rect x="50" y="234" width="14" height="100" fill="#7B5A3A"/>
          <rect x="256" y="234" width="14" height="100" fill="#7B5A3A"/>
          <!-- artisan figure (simplified) -->
          <circle cx="160" cy="130" r="32" fill="#F4B7A0"/>
          <path d="M130 165 Q130 145 160 145 Q190 145 190 165 L195 220 L125 220 Z" fill="#FBF4E5"/>
          <!-- apron -->
          <path d="M135 175 Q135 160 160 160 Q185 160 185 175 L185 220 L135 220 Z" fill="#E8B73D"/>
          <!-- hair -->
          <path d="M128 122 Q145 100 160 100 Q175 100 192 122 Q192 110 180 100 Q170 92 160 92 Q150 92 140 100 Q128 110 128 122 Z" fill="#1F2D38"/>
          <!-- eyes -->
          <circle cx="150" cy="130" r="2" fill="#1F2D38"/>
          <circle cx="170" cy="130" r="2" fill="#1F2D38"/>
          <path d="M155 142 Q160 146 165 142" stroke="#1F2D38" stroke-width="1.5" fill="none" stroke-linecap="round"/>
          <!-- arms -->
          <ellipse cx="115" cy="195" rx="14" ry="22" fill="#FBF4E5" transform="rotate(-30 115 195)"/>
          <ellipse cx="205" cy="195" rx="14" ry="22" fill="#FBF4E5" transform="rotate(30 205 195)"/>
          <circle cx="103" cy="215" r="10" fill="#F4B7A0"/>
          <circle cx="217" cy="215" r="10" fill="#F4B7A0"/>
          <!-- toys on table -->
          <rect x="80" y="200" width="20" height="20" rx="2" fill="#E8442C"/>
          <rect x="105" y="205" width="15" height="15" rx="2" fill="#7BB89B"/>
          <circle cx="220" cy="210" r="10" fill="#A4C8DD"/>
          <rect x="240" y="200" width="20" height="20" rx="2" fill="#E8442C"/>
          <!-- tools on wall -->
          <line x1="50" y1="50" x2="80" y2="50" stroke="#FBF4E5" stroke-width="3" opacity="0.5"/>
          <line x1="50" y1="65" x2="80" y2="65" stroke="#FBF4E5" stroke-width="3" opacity="0.5"/>
          <circle cx="280" cy="160" r="6" fill="#FBF4E5" opacity="0.3"/>
          <circle cx="40" cy="160" r="4" fill="#FBF4E5" opacity="0.4"/>
          <!-- shavings -->
          <path d="M75 195 Q78 192 80 195 Q78 198 75 195" fill="#7B5A3A" opacity="0.6"/>
          <path d="M250 195 Q253 192 255 195 Q253 198 250 195" fill="#7B5A3A" opacity="0.6"/>
        </svg>
      </div>
      <div class="story-image-overlay">
        <div class="stat-num">12<em>+</em></div>
        <div class="stat-label">位匠人，<br>从拼接到打磨亲手完成</div>
      </div>
    </div>

    <div class="story-text">
      <div class="section-label">关于我们 · Our Story</div>
      <h2>慢一点 ——<br><em>把童年</em>，<br>认真做出来</h2>
      <p class="lead">
        "玩具不是消耗品，而是孩子第一段人生记忆的载体。"
      </p>
      <p>
        2014 年的春天，创始人陈澈在女儿的第一个生日，找不到一件让自己满意的木质玩具——要么塑料感太重，要么棱角粗糙。她回到苏州，找到老家具厂的师傅们，开了一间只做儿童玩具的小工坊。这间工坊后来成了「小熊与橡果」。
      </p>
      <p>
        十二年过去，我们仍坚持手工打磨、植物染色、单件成品检验。每一只小熊、每一辆木车，都会经过 24 道工序、3 位匠人的手，才能装进礼盒。
      </p>
      <ul class="story-features">
        <li>
          <div class="ico">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 2v20"/><path d="M5 7c0-3 3-5 7-5s7 2 7 5"/><path d="M5 7c0 3 3 5 7 5"/><path d="M19 7c0 3-3 5-7 5"/></svg>
          </div>
          <div>
            <h5>FSC 认证 · 山毛榉、橡木、桦木</h5>
            <p>每一根原木都来自负责任管理的森林。</p>
          </div>
        </li>
        <li>
          <div class="ico">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 22s8-4 8-12V5l-8-3-8 3v5c0 8 8 12 8 12z"/></svg>
          </div>
          <div>
            <h5>EN71 + GB6675 双重检测</h5>
            <p>欧盟和国标双重认证，可入口、不掉色。</p>
          </div>
        </li>
        <li>
          <div class="ico">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 11c0 5-9 11-9 11s-9-6-9-11a9 9 0 0 1 18 0z"/><circle cx="12" cy="11" r="3"/></svg>
          </div>
          <div>
            <h5>苏州·上海·成都 · 实体体验店</h5>
            <p>线下亲手摸过，再决定是否带回家。</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</section>

<!-- ============ Testimonials ============ -->
<section class="testimonials">
  <div class="section-header">
    <div>
      <div class="section-label">家长心声 · Voices</div>
      <h2>来自<em>真实家庭</em>的<br>每一句留言</h2>
    </div>
    <a class="section-link" href="#">查看全部 1,200+ 评价 →</a>
  </div>

  <div class="tm-grid">
    <div class="tm-card featured">
      <div>
        <div class="tm-mark">"</div>
        <div class="tm-stars">★★★★★</div>
        <div class="tm-quote">
          那只小熊欧文是宝宝两岁生日的礼物，到现在五岁，依然每天抱着睡觉。布料没起球，绣线也没松，是真的可以传家的那种品质。
        </div>
      </div>
      <div class="tm-author">
        <div class="tm-avatar">沈</div>
        <div>
          <div class="tm-name">沈女士</div>
          <div class="tm-role">上海 · 二孩妈妈</div>
        </div>
      </div>
    </div>

    <div class="tm-card">
      <div>
        <div class="tm-mark">"</div>
        <div class="tm-stars">★★★★★</div>
        <div class="tm-quote">
          木琴的音准让我惊讶——做调音师的爸爸都点头。
        </div>
      </div>
      <div class="tm-author">
        <div class="tm-avatar">林</div>
        <div>
          <div class="tm-name">林先生</div>
          <div class="tm-role">杭州 · 音乐教师</div>
        </div>
      </div>
    </div>

    <div class="tm-card">
      <div>
        <div class="tm-mark">"</div>
        <div class="tm-stars">★★★★★</div>
        <div class="tm-quote">
          礼盒包装太用心，拆开像在拆一封手写信。
        </div>
      </div>
      <div class="tm-author">
        <div class="tm-avatar">周</div>
        <div>
          <div class="tm-name">周女士</div>
          <div class="tm-role">北京 · 设计师</div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ============ Newsletter ============ -->
<section class="newsletter">
  <svg class="newsletter-deco-1" width="280" height="280" viewBox="0 0 280 280" fill="#FBF4E5"><path d="M140 0 L155 110 L260 125 L155 140 L140 280 L125 140 L20 125 L125 110 Z"/></svg>
  <svg class="newsletter-deco-2" width="240" height="240" viewBox="0 0 240 240" fill="#FBF4E5"><circle cx="120" cy="120" r="100"/></svg>

  <div class="newsletter-wrapper">
    <div>
      <div class="newsletter-eyebrow">加入我们的森林</div>
      <h2>
        新品先<em>看</em>，<br>
        故事先<em>读</em>。
      </h2>
    </div>
    <div class="newsletter-right">
      <p>每月一封手写感的信件——讲讲新玩具背后的故事、藏在木纹里的小秘密、还有给会员的专属优惠。</p>
      <form class="newsletter-form" onsubmit="event.preventDefault(); alert('感谢订阅！我们会很快与你联系。');">
        <input type="email" placeholder="你的邮箱地址" required>
        <button type="submit">订阅 →</button>
      </form>
      <div class="newsletter-note">无垃圾邮件。可以随时取消订阅。</div>
    </div>
  </div>
</section>

<!-- ============ Footer ============ -->
<footer>
  <div class="footer-grid">
    <div class="footer-brand">
      <a class="logo" href="#">
        <svg class="logo-mark" viewBox="0 0 40 40" fill="none">
          <ellipse cx="20" cy="22" rx="14" ry="13" fill="#FBF4E5"/>
          <circle cx="13" cy="13" r="4.5" fill="#FBF4E5"/>
          <circle cx="27" cy="13" r="4.5" fill="#FBF4E5"/>
          <circle cx="13" cy="13" r="2" fill="#E8B73D"/>
          <circle cx="27" cy="13" r="2" fill="#E8B73D"/>
          <ellipse cx="20" cy="22" rx="6" ry="5" fill="#1F2D38"/>
          <circle cx="16.5" cy="20" r="1.4" fill="#FBF4E5"/>
          <circle cx="23.5" cy="20" r="1.4" fill="#FBF4E5"/>
          <ellipse cx="20" cy="24" rx="2" ry="1.5" fill="#FBF4E5"/>
        </svg>
        小熊与橡果
      </a>
      <p>
        十二年专注一件事 —— 为孩子做一件可以传家的玩具。
        总部位于苏州，体验店遍布全国五座城市。
      </p>
      <div class="footer-stamps">
        <span>EN71</span>
        <span>GB6675</span>
        <span>FSC</span>
        <span>OEKO-TEX</span>
      </div>
    </div>

    <div class="footer-col">
      <h5>商城</h5>
      <ul>
        <li><a href="#">本季新品</a></li>
        <li><a href="#">畅销榜单</a></li>
        <li><a href="#">联名系列</a></li>
        <li><a href="#">礼盒套装</a></li>
        <li><a href="#">会员专享</a></li>
      </ul>
    </div>

    <div class="footer-col">
      <h5>分类</h5>
      <ul>
        <li><a href="#">木质积木</a></li>
        <li><a href="#">毛绒伙伴</a></li>
        <li><a href="#">音乐启蒙</a></li>
        <li><a href="#">仿真车辆</a></li>
        <li><a href="#">绘本与故事</a></li>
      </ul>
    </div>

    <div class="footer-col">
      <h5>关于</h5>
      <ul>
        <li><a href="#">品牌故事</a></li>
        <li><a href="#">匠人工坊</a></li>
        <li><a href="#">可持续承诺</a></li>
        <li><a href="#">媒体报道</a></li>
        <li><a href="#">加入我们</a></li>
      </ul>
    </div>

    <div class="footer-col">
      <h5>支持</h5>
      <ul>
        <li><a href="#">配送说明</a></li>
        <li><a href="#">退换政策</a></li>
        <li><a href="#">玩具养护</a></li>
        <li><a href="#">寻找门店</a></li>
        <li><a href="#">联系客服</a></li>
      </ul>
    </div>
  </div>

  <div class="footer-bottom">
    <div>© 2026 小熊与橡果 BEAR &amp; ACORN · 苏州蓁蓁文化创意有限公司</div>
    <div class="socials">
      <a href="#" aria-label="微信">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M8.667 11.4c-.5 0-1-.4-1-1s.5-1 1-1 1 .4 1 1-.5 1-1 1zm6.666 0c-.5 0-1-.4-1-1s.5-1 1-1 1 .4 1 1-.5 1-1 1zM12 4C5.9 4 1 7.6 1 12c0 2.5 1.6 4.7 4 6.2L4 21l3.4-1.7c1.4.4 2.9.7 4.6.7 6.1 0 11-3.6 11-8s-4.9-8-11-8z"/></svg>
      </a>
      <a href="#" aria-label="微博">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M9.7 19.5c-3.7.4-6.9-1.3-7.2-3.7-.3-2.4 2.5-4.7 6.2-5.1 3.7-.4 6.9 1.3 7.2 3.7.3 2.4-2.5 4.7-6.2 5.1zm5.6-9.7c-.6-.2-1-.7-.8-1.3.2-.6.7-1 1.3-.8 1.7.6 2.5 2.2 1.9 4-.2.5-.7.8-1.2.6-.5-.2-.8-.7-.6-1.2.3-.7 0-1.1-.6-1.3zm2.7-3.2c-1.7-.6-3.6-.5-5.1.3-.6.3-1.4 0-1.7-.6-.3-.6 0-1.4.6-1.7 2.3-1.1 5-1.3 7.5-.4 2.5.9 4.4 2.7 5.4 5 .2.6 0 1.4-.6 1.7-.6.2-1.4 0-1.7-.6-.7-1.7-2-3-3.7-3.7zm-7.4 7.6c-.4 0-.7-.3-.6-.7.1-.4.5-.7.9-.7.4 0 .7.3.6.7-.1.4-.5.7-.9.7zm-1.6 1.7c-.7.1-1.4-.2-1.6-.7-.2-.5.3-1.1 1-1.2.7-.1 1.4.2 1.6.7.1.5-.3 1.1-1 1.2zm.5-2.1c-1.4.2-2.7-.4-3-1.4-.3-1 .6-2 2-2.2 1.4-.2 2.7.4 3 1.4.3 1-.6 2-2 2.2z"/></svg>
      </a>
      <a href="#" aria-label="小红书">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/><text x="6" y="16" font-family="serif" font-size="9" fill="#1F2D38" font-weight="700">RED</text></svg>
      </a>
      <a href="#" aria-label="Instagram">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.5" fill="currentColor"/></svg>
      </a>
    </div>
    <div class="legal-links">
      <a href="#">隐私政策</a>
      <a href="#">服务条款</a>
      <a href="#">京 ICP 备 25001234 号</a>
    </div>
  </div>
</footer>

</body>
</html>

gpt-5.5.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>曜盒玩具集团 Aurorakit Toys — 企业级玩具门户</title>
  <meta name="description" content="曜盒玩具集团企业门户，面向渠道商、采购商与品牌合作伙伴，展示安全合规、研发制造、产品矩阵与全球供应链能力。" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,700;12..96,800&family=JetBrains+Mono:wght@400;600&family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@600;900&display=swap" rel="stylesheet">
  <style>
    :root {
      --ink: #17202a;
      --ink-soft: #53606f;
      --paper: #fffaf0;
      --cream: #f5ecd9;
      --porcelain: #f8fbff;
      --signal: #ff4f2e;
      --blue: #1664ff;
      --mint: #00a977;
      --sun: #ffc83d;
      --plum: #522e92;
      --aqua: #78d5ff;
      --line: rgba(23, 32, 42, .12);
      --shadow: 0 28px 80px rgba(23, 32, 42, .14);
      --shadow-tight: 0 14px 34px rgba(23, 32, 42, .13);
      --display: "Bricolage Grotesque", "Noto Sans SC", sans-serif;
      --body: "Noto Sans SC", sans-serif;
      --serif: "Noto Serif SC", serif;
      --mono: "JetBrains Mono", ui-monospace, monospace;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      min-height: 100vh;
      background:
        radial-gradient(circle at 8% 8%, rgba(255, 200, 61, .24), transparent 28rem),
        radial-gradient(circle at 86% 16%, rgba(120, 213, 255, .26), transparent 31rem),
        linear-gradient(135deg, var(--paper), #f3f7ff 54%, #f7efe2);
      color: var(--ink);
      font-family: var(--body);
      line-height: 1.6;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      opacity: .15;
      background-image:
        linear-gradient(rgba(23, 32, 42, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 32, 42, .08) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: .12;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
    }

    a { color: inherit; text-decoration: none; }
    img, svg { display: block; max-width: 100%; }
    button { font: inherit; }
    .container { width: min(1200px, calc(100% - 40px)); margin: 0 auto; }

    .topline {
      position: relative;
      overflow: hidden;
      background: var(--ink);
      color: #fff8e6;
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .topline-track {
      display: flex;
      width: max-content;
      gap: 34px;
      padding: 10px 0;
      animation: rail 34s linear infinite;
      white-space: nowrap;
    }

    .topline span { display: inline-flex; align-items: center; gap: 12px; }
    .topline b { color: var(--sun); font-weight: 600; }

    @keyframes rail {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    .nav {
      position: sticky;
      top: 0;
      z-index: 50;
      border-bottom: 1px solid rgba(23, 32, 42, .1);
      background: rgba(255, 250, 240, .78);
      backdrop-filter: blur(18px) saturate(1.2);
    }

    .nav-inner {
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 26px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 208px;
      font-family: var(--display);
      font-size: 21px;
      font-weight: 800;
      letter-spacing: -.03em;
    }

    .brand-mark {
      width: 39px;
      height: 39px;
      position: relative;
      display: grid;
      place-items: center;
      border: 2px solid var(--ink);
      border-radius: 12px;
      background: conic-gradient(from 90deg, var(--signal), var(--sun), var(--blue), var(--mint), var(--signal));
      box-shadow: 5px 5px 0 var(--ink);
      transform: rotate(-5deg);
    }

    .brand-mark::after {
      content: "";
      width: 14px;
      height: 14px;
      border: 3px solid #fff;
      border-radius: 50%;
      background: var(--ink);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, .52);
    }

    .nav-links a {
      padding: 9px 15px;
      border-radius: 999px;
      color: var(--ink-soft);
      font-size: 14px;
      font-weight: 700;
      transition: .22s ease;
    }

    .nav-links a:hover {
      color: var(--ink);
      background: #fff;
      box-shadow: 0 8px 18px rgba(23, 32, 42, .08);
    }

    .nav-cta { display: flex; align-items: center; gap: 10px; }
    .menu-toggle { display: none; }

    .btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      padding: 0 22px;
      border: 2px solid var(--ink);
      border-radius: 999px;
      background: #fff;
      color: var(--ink);
      box-shadow: 5px 5px 0 var(--ink);
      font-weight: 900;
      cursor: pointer;
      transition: .18s ease;
    }

    .btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
    .btn.primary { background: var(--signal); color: #fff8e6; }
    .btn.blue { background: var(--blue); color: #fff; }
    .btn.ghost { background: rgba(255, 255, 255, .42); box-shadow: none; }

    .hero {
      position: relative;
      padding: 86px 0 64px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 54px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 22px;
      padding: 8px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, .58);
      color: var(--ink-soft);
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .pulse {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--mint);
      box-shadow: 0 0 0 6px rgba(0, 169, 119, .13);
    }

    h1, h2, h3 { font-family: var(--display); letter-spacing: -.045em; line-height: .95; }
    h1 { max-width: 840px; font-size: clamp(54px, 8vw, 112px); font-weight: 800; }
    h1 .serif { font-family: var(--serif); letter-spacing: -.08em; }
    .hero-copy {
      max-width: 690px;
      margin: 26px 0 34px;
      color: var(--ink-soft);
      font-size: clamp(17px, 1.6vw, 21px);
    }

    .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

    .hero-note {
      margin-top: 28px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      max-width: 760px;
    }

    .note-card {
      min-height: 94px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: rgba(255, 255, 255, .5);
      backdrop-filter: blur(10px);
    }

    .note-card strong { display: block; margin-bottom: 5px; font-family: var(--display); font-size: 22px; line-height: 1; }
    .note-card span { color: var(--ink-soft); font-size: 13px; }

    .hero-stage {
      position: relative;
      min-height: 590px;
      display: grid;
      place-items: center;
    }

    .orbit {
      position: absolute;
      width: min(100%, 540px);
      aspect-ratio: 1;
      border: 1px dashed rgba(23, 32, 42, .24);
      border-radius: 50%;
      animation: spin 34s linear infinite;
    }

    .orbit:nth-child(2) { width: min(82%, 430px); animation-duration: 27s; animation-direction: reverse; }
    @keyframes spin { to { transform: rotate(360deg); } }

    .portal-card {
      position: relative;
      width: min(92%, 454px);
      padding: 24px;
      border: 2px solid var(--ink);
      border-radius: 36px;
      background: #fff;
      box-shadow: 14px 14px 0 var(--ink), var(--shadow);
      transform: rotate(2deg);
    }

    .toy-window {
      position: relative;
      height: 324px;
      overflow: hidden;
      border: 2px solid var(--ink);
      border-radius: 28px;
      background:
        radial-gradient(circle at 72% 20%, rgba(255, 200, 61, .9), transparent 70px),
        linear-gradient(145deg, #dff5ff, #fff3c8 52%, #ffd8cf);
    }

    .toy-window::before {
      content: "";
      position: absolute;
      inset: 18px;
      border: 1px solid rgba(23, 32, 42, .22);
      border-radius: 22px;
    }

    .block {
      position: absolute;
      border: 2px solid var(--ink);
      box-shadow: 5px 5px 0 rgba(23, 32, 42, .92);
    }

    .block.a { width: 116px; height: 116px; left: 40px; bottom: 42px; border-radius: 24px; background: var(--signal); transform: rotate(-9deg); }
    .block.b { width: 142px; height: 82px; left: 132px; bottom: 106px; border-radius: 18px; background: var(--sun); transform: rotate(7deg); }
    .block.c { width: 96px; height: 164px; right: 48px; bottom: 48px; border-radius: 50px 50px 18px 18px; background: var(--blue); transform: rotate(10deg); }
    .block.d { width: 74px; height: 74px; left: 190px; top: 50px; border-radius: 50%; background: var(--mint); transform: rotate(-16deg); }
    .block.e { width: 82px; height: 82px; right: 76px; top: 70px; border-radius: 12px; background: var(--plum); transform: rotate(26deg); }

    .portal-meta {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 14px;
      align-items: end;
      padding-top: 20px;
    }

    .portal-meta h2 { font-size: 35px; }
    .portal-meta p { color: var(--ink-soft); font-size: 14px; }
    .cert-badge {
      width: 92px;
      height: 92px;
      display: grid;
      place-items: center;
      border: 2px solid var(--ink);
      border-radius: 50%;
      background: var(--sun);
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 600;
      text-align: center;
      animation: wobble 5s ease-in-out infinite;
    }

    @keyframes wobble {
      0%, 100% { transform: rotate(-8deg); }
      50% { transform: rotate(8deg); }
    }

    .float-tag {
      position: absolute;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border: 2px solid var(--ink);
      border-radius: 999px;
      background: #fff;
      box-shadow: 5px 5px 0 var(--ink);
      font-size: 13px;
      font-weight: 900;
    }

    .float-tag.one { left: 0; top: 90px; transform: rotate(-7deg); }
    .float-tag.two { right: -8px; bottom: 140px; transform: rotate(5deg); background: #dff5ff; }
    .float-tag.three { left: 48px; bottom: 42px; transform: rotate(3deg); background: #fff1b6; }

    .section { padding: 72px 0; }
    .section-head {
      display: grid;
      grid-template-columns: .78fr 1fr;
      gap: 42px;
      align-items: end;
      margin-bottom: 36px;
    }

    .section-kicker {
      margin-bottom: 14px;
      color: var(--signal);
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .section h2 { font-size: clamp(38px, 5vw, 68px); }
    .section-intro { color: var(--ink-soft); font-size: 18px; }

    .metric-band {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      overflow: hidden;
      border: 2px solid var(--ink);
      border-radius: 30px;
      background: #fff;
      box-shadow: var(--shadow-tight);
    }

    .metric {
      min-height: 168px;
      padding: 24px;
      border-right: 1px solid var(--line);
    }

    .metric:last-child { border-right: 0; }
    .metric strong {
      display: block;
      margin-bottom: 16px;
      font-family: var(--display);
      font-size: clamp(38px, 5vw, 64px);
      line-height: .85;
      letter-spacing: -.06em;
    }
    .metric span { color: var(--ink-soft); font-size: 14px; }
    .metric:nth-child(1) { background: #fff; }
    .metric:nth-child(2) { background: #e5f7ff; }
    .metric:nth-child(3) { background: #fff1b6; }
    .metric:nth-child(4) { background: #ffe5de; }

    .product-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr .9fr;
      gap: 18px;
    }

    .product-card {
      position: relative;
      min-height: 320px;
      overflow: hidden;
      padding: 26px;
      border: 2px solid var(--ink);
      border-radius: 32px;
      background: #fff;
      box-shadow: 8px 8px 0 rgba(23, 32, 42, .92);
      transition: .24s ease;
    }

    .product-card:hover { transform: translate(-2px, -4px) rotate(-.5deg); box-shadow: 12px 12px 0 var(--ink); }
    .product-card.large { grid-row: span 2; min-height: 658px; background: #def4ff; }
    .product-card.yellow { background: #fff0b1; }
    .product-card.green { background: #dff8ea; }
    .product-card.red { background: #ffe0d7; }
    .product-card.purple { background: #eadfff; }

    .product-card h3 { max-width: 320px; margin-bottom: 12px; font-size: clamp(29px, 3vw, 44px); }
    .product-card p { max-width: 380px; color: var(--ink-soft); }
    .product-pill {
      display: inline-flex;
      margin-bottom: 18px;
      padding: 7px 10px;
      border: 1px solid rgba(23, 32, 42, .18);
      border-radius: 999px;
      background: rgba(255, 255, 255, .56);
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .toy-shape {
      position: absolute;
      right: 28px;
      bottom: 28px;
      width: 144px;
      height: 144px;
      border: 2px solid var(--ink);
      box-shadow: 6px 6px 0 var(--ink);
      background: #fff;
    }

    .shape-1 { width: 230px; height: 230px; border-radius: 50%; background: var(--signal); }
    .shape-1::before, .shape-1::after {
      content: "";
      position: absolute;
      width: 62px;
      height: 62px;
      top: 78px;
      border: 2px solid var(--ink);
      border-radius: 50%;
      background: #fff;
    }
    .shape-1::before { left: 42px; }
    .shape-1::after { right: 42px; }
    .shape-2 { border-radius: 28px; background: var(--blue); transform: rotate(14deg); }
    .shape-3 { border-radius: 50% 50% 22px 22px; background: var(--sun); }
    .shape-4 { border-radius: 26px; background: var(--mint); transform: rotate(-12deg); }
    .shape-5 { border-radius: 50%; background: var(--plum); }

    .capability-wrap {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 18px;
      align-items: stretch;
    }

    .lab-panel {
      padding: 32px;
      border: 2px solid var(--ink);
      border-radius: 34px;
      background: var(--ink);
      color: #fff8e6;
      box-shadow: var(--shadow);
    }

    .lab-panel h3 { margin-bottom: 18px; font-size: clamp(34px, 4vw, 56px); }
    .lab-panel p { color: rgba(255, 248, 230, .72); }

    .lab-lines {
      margin-top: 32px;
      display: grid;
      gap: 14px;
    }

    .lab-line {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 14px;
      align-items: center;
      padding: 13px 0;
      border-bottom: 1px solid rgba(255, 248, 230, .16);
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: .04em;
    }

    .progress {
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255, 255, 255, .12);
    }

    .progress i {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--sun), var(--aqua));
    }

    .capability-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .cap-card {
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: rgba(255, 255, 255, .66);
      backdrop-filter: blur(14px);
    }

    .cap-icon {
      width: 54px;
      height: 54px;
      margin-bottom: 18px;
      display: grid;
      place-items: center;
      border: 2px solid var(--ink);
      border-radius: 18px;
      background: var(--sun);
      box-shadow: 4px 4px 0 var(--ink);
      font-family: var(--display);
      font-size: 24px;
      font-weight: 800;
    }

    .cap-card:nth-child(2) .cap-icon { background: var(--aqua); }
    .cap-card:nth-child(3) .cap-icon { background: #ffb7a7; }
    .cap-card:nth-child(4) .cap-icon { background: #b7f0d1; }
    .cap-card h3 { margin-bottom: 10px; font-size: 25px; }
    .cap-card p { color: var(--ink-soft); font-size: 15px; }

    .safety-board {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 18px;
    }

    .safety-card {
      min-height: 220px;
      padding: 24px;
      border: 2px solid var(--ink);
      border-radius: 30px;
      background: #fff;
      box-shadow: 7px 7px 0 var(--ink);
    }

    .safety-card:nth-child(1) { grid-column: span 5; background: #e8f6ff; }
    .safety-card:nth-child(2) { grid-column: span 3; background: #fff1b6; }
    .safety-card:nth-child(3) { grid-column: span 4; background: #ffe4db; }
    .safety-card:nth-child(4) { grid-column: span 4; background: #e8ffef; }
    .safety-card:nth-child(5) { grid-column: span 8; background: #fff; }

    .safety-card small {
      display: block;
      margin-bottom: 18px;
      font-family: var(--mono);
      color: var(--ink-soft);
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .safety-card h3 { margin-bottom: 12px; font-size: clamp(28px, 3vw, 42px); }
    .safety-card p { color: var(--ink-soft); }
    .cert-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px;
    }

    .cert-row span {
      padding: 8px 11px;
      border: 1px solid rgba(23, 32, 42, .2);
      border-radius: 999px;
      background: rgba(255, 255, 255, .72);
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 600;
    }

    .channel {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 18px;
    }

    .channel-card {
      position: relative;
      min-height: 390px;
      overflow: hidden;
      padding: 26px;
      border-radius: 34px;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: var(--shadow-tight);
    }

    .channel-card::after {
      content: "";
      position: absolute;
      right: -42px;
      bottom: -42px;
      width: 170px;
      height: 170px;
      border: 2px solid var(--ink);
      border-radius: 44px;
      background: var(--sun);
      transform: rotate(19deg);
    }

    .channel-card:nth-child(2)::after { background: var(--aqua); border-radius: 50%; }
    .channel-card:nth-child(3)::after { background: #ffb7a7; border-radius: 34px 80px 34px 80px; }
    .channel-card h3 { margin-bottom: 12px; font-size: 33px; }
    .channel-card p { color: var(--ink-soft); }
    .channel-list { position: relative; z-index: 2; margin-top: 28px; display: grid; gap: 12px; }
    .channel-list li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 12px 0;
      border-top: 1px solid var(--line);
      color: var(--ink-soft);
    }
    .channel-list b { color: var(--ink); }

    .story-strip {
      position: relative;
      overflow: hidden;
      border-block: 2px solid var(--ink);
      background: var(--ink);
      color: #fff8e6;
    }

    .story-track {
      display: flex;
      width: max-content;
      animation: rail 42s linear infinite reverse;
    }

    .story-item {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 24px 28px;
      font-family: var(--display);
      font-size: clamp(28px, 4vw, 52px);
      font-weight: 800;
      letter-spacing: -.04em;
      white-space: nowrap;
    }

    .story-item i {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--signal);
    }

    .news-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 18px;
    }

    .news-feature, .news-list {
      border: 1px solid var(--line);
      border-radius: 34px;
      background: rgba(255, 255, 255, .64);
      backdrop-filter: blur(12px);
      box-shadow: var(--shadow-tight);
    }

    .news-feature { padding: 30px; min-height: 420px; }
    .news-feature .visual {
      height: 210px;
      margin-bottom: 24px;
      border: 2px solid var(--ink);
      border-radius: 28px;
      background:
        radial-gradient(circle at 30% 40%, var(--sun) 0 34px, transparent 35px),
        radial-gradient(circle at 64% 54%, var(--signal) 0 42px, transparent 43px),
        linear-gradient(135deg, #dff5ff, #fdf1c3);
    }

    .news-feature h3 { margin-bottom: 12px; font-size: 38px; }
    .news-feature p, .news-list p { color: var(--ink-soft); }

    .news-list { overflow: hidden; }
    .news-row {
      display: grid;
      grid-template-columns: 92px 1fr;
      gap: 18px;
      padding: 24px;
      border-bottom: 1px solid var(--line);
    }
    .news-row:last-child { border-bottom: 0; }
    .date {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--ink-soft);
    }
    .news-row h3 { margin-bottom: 8px; font-size: 24px; letter-spacing: -.03em; }

    .cta {
      padding: 80px 0 92px;
    }

    .cta-card {
      position: relative;
      overflow: hidden;
      padding: clamp(34px, 6vw, 70px);
      border: 2px solid var(--ink);
      border-radius: 42px;
      background: var(--signal);
      color: #fff8e6;
      box-shadow: 14px 14px 0 var(--ink);
    }

    .cta-card::before {
      content: "";
      position: absolute;
      right: -80px;
      top: -80px;
      width: 290px;
      height: 290px;
      border: 2px solid var(--ink);
      border-radius: 48px;
      background: var(--sun);
      transform: rotate(18deg);
    }

    .cta-card::after {
      content: "";
      position: absolute;
      right: 120px;
      bottom: -92px;
      width: 210px;
      height: 210px;
      border: 2px solid var(--ink);
      border-radius: 50%;
      background: var(--blue);
    }

    .cta-content { position: relative; z-index: 2; max-width: 820px; }
    .cta h2 { margin-bottom: 22px; font-size: clamp(46px, 7vw, 88px); }
    .cta p { max-width: 690px; margin-bottom: 28px; color: rgba(255, 248, 230, .82); font-size: 19px; }

    footer {
      padding: 34px 0;
      border-top: 1px solid var(--line);
      color: var(--ink-soft);
      font-size: 14px;
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      align-items: center;
    }

    .footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
    .footer-links a:hover { color: var(--ink); }

    .reveal { opacity: 0; transform: translateY(28px); transition: opacity .72s ease, transform .72s ease; }
    .hero .reveal { opacity: 1; transform: none; }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
      .reveal { opacity: 1; transform: none; }
    }

    @media (max-width: 980px) {
      .nav-links {
        position: fixed;
        left: 20px;
        right: 20px;
        top: 88px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        border-radius: 24px;
        background: rgba(255, 250, 240, .96);
        box-shadow: var(--shadow);
      }
      .nav-links.open { display: flex; }
      .nav-links a { text-align: center; }
      .menu-toggle { display: inline-flex; }
      .nav-cta .btn.primary { display: none; }
      .hero-grid, .section-head, .capability-wrap, .news-grid { grid-template-columns: 1fr; }
      .hero-stage { min-height: 520px; }
      .metric-band { grid-template-columns: repeat(2, 1fr); }
      .metric:nth-child(2) { border-right: 0; }
      .metric:nth-child(1), .metric:nth-child(2) { border-bottom: 1px solid var(--line); }
      .product-grid, .channel { grid-template-columns: 1fr; }
      .product-card.large { min-height: 460px; }
      .safety-card:nth-child(n) { grid-column: span 12; }
    }

    @media (max-width: 640px) {
      .container { width: min(100% - 28px, 1200px); }
      .topline { font-size: 10px; }
      .nav-inner { height: 68px; }
      .brand { min-width: 0; font-size: 17px; }
      .brand-mark { width: 34px; height: 34px; border-radius: 10px; box-shadow: 4px 4px 0 var(--ink); }
      .hero { padding-top: 50px; }
      h1 { font-size: clamp(48px, 15vw, 74px); }
      .hero-note, .metric-band, .capability-grid { grid-template-columns: 1fr; }
      .metric { border-right: 0; border-bottom: 1px solid var(--line); }
      .metric:last-child { border-bottom: 0; }
      .portal-card { width: 100%; box-shadow: 8px 8px 0 var(--ink); }
      .toy-window { height: 278px; }
      .float-tag { display: none; }
      .product-card, .safety-card, .channel-card { border-radius: 26px; }
      .toy-shape { width: 108px; height: 108px; }
      .shape-1 { width: 148px; height: 148px; }
      .shape-1::before, .shape-1::after { width: 38px; height: 38px; top: 54px; }
      .shape-1::before { left: 28px; }
      .shape-1::after { right: 28px; }
      .news-row { grid-template-columns: 1fr; }
      .cta-card { box-shadow: 8px 8px 0 var(--ink); }
      .footer-inner { align-items: flex-start; flex-direction: column; }
    }
  </style>
</head>
<body>
  <div class="topline" aria-label="企业能力滚动条">
    <div class="topline-track">
      <span><b>EN71 / ASTM / CCC</b> 全链路合规</span>
      <span><b>ODM + OEM</b> 从概念到量产</span>
      <span><b>98.7%</b> 年度准交率</span>
      <span><b>42</b> 国家与地区渠道覆盖</span>
      <span><b>EN71 / ASTM / CCC</b> 全链路合规</span>
      <span><b>ODM + OEM</b> 从概念到量产</span>
      <span><b>98.7%</b> 年度准交率</span>
      <span><b>42</b> 国家与地区渠道覆盖</span>
    </div>
  </div>

  <nav class="nav" aria-label="主导航">
    <div class="container nav-inner">
      <a class="brand" href="#top" aria-label="曜盒玩具集团首页">
        <span class="brand-mark" aria-hidden="true"></span>
        <span>曜盒玩具集团</span>
      </a>
      <div class="nav-links" id="navLinks">
        <a href="#portfolio">产品矩阵</a>
        <a href="#capability">研发制造</a>
        <a href="#safety">安全合规</a>
        <a href="#channels">渠道方案</a>
        <a href="#news">企业动态</a>
      </div>
      <div class="nav-cta">
        <button class="btn ghost menu-toggle" id="menuToggle" aria-expanded="false" aria-controls="navLinks">菜单</button>
        <a class="btn primary" href="#contact">商务洽谈</a>
      </div>
    </div>
  </nav>

  <main id="top">
    <section class="hero">
      <div class="container hero-grid">
        <div>
          <div class="eyebrow"><span class="pulse"></span> Enterprise toy portal / since 2009</div>
          <h1>让玩具生意变成<span class="serif">可复制</span>、可追溯、可增长的系统。</h1>
          <p class="hero-copy">曜盒玩具集团为购物中心、连锁零售、教育空间与品牌授权方提供企业级玩具产品与供应链服务：从安全研发、原创 IP、柔性制造到渠道陈列，一站式完成。</p>
          <div class="hero-actions">
            <a class="btn primary" href="#portfolio">查看产品矩阵</a>
            <a class="btn blue" href="#capability">了解制造能力</a>
          </div>
          <div class="hero-note reveal">
            <div class="note-card"><strong>1200+</strong><span>年度活跃 SKU 与主题套装</span></div>
            <div class="note-card"><strong>72h</strong><span>核心方案报价响应周期</span></div>
            <div class="note-card"><strong>0-14</strong><span>全年龄段产品分层规划</span></div>
          </div>
        </div>
        <div class="hero-stage" aria-label="玩具产品展示插画">
          <div class="orbit" aria-hidden="true"></div>
          <div class="orbit" aria-hidden="true"></div>
          <div class="float-tag one">BSCI 审厂就绪</div>
          <div class="float-tag two">IP 授权联名</div>
          <div class="float-tag three">陈列方案交付</div>
          <div class="portal-card reveal">
            <div class="toy-window">
              <span class="block a"></span>
              <span class="block b"></span>
              <span class="block c"></span>
              <span class="block d"></span>
              <span class="block e"></span>
            </div>
            <div class="portal-meta">
              <div>
                <h2>Aurora Kit 24</h2>
                <p>年度旗舰产品库：益智、户外、毛绒、STEAM 与节庆礼盒。</p>
              </div>
              <div class="cert-badge">QC<br>PASS<br>2026</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="container">
        <div class="metric-band reveal" aria-label="核心经营数据">
          <div class="metric"><strong>16年</strong><span>原创玩具研发与量产经验，覆盖商超、教育、礼品与跨境渠道。</span></div>
          <div class="metric"><strong>42+</strong><span>销售国家与地区，支持多语言包装与目标市场合规文件。</span></div>
          <div class="metric"><strong>8条</strong><span>自有与协同产线，支持旺季订单拆分排产与节点看板。</span></div>
          <div class="metric"><strong>24h</strong><span>售后质量反馈闭环，批次问题可定位到原料与工序。</span></div>
        </div>
      </div>
    </section>

    <section class="section" id="portfolio">
      <div class="container">
        <div class="section-head">
          <div>
            <div class="section-kicker">Product Portfolio</div>
            <h2>不是单品目录，是可经营的玩具货盘。</h2>
          </div>
          <p class="section-intro">按渠道客群、年龄分层、节庆节点与毛利结构设计产品组合，帮助采购团队快速完成选品、上新、陈列与复购规划。</p>
        </div>

        <div class="product-grid">
          <article class="product-card large reveal">
            <span class="product-pill">STEAM Hero Line</span>
            <h3>结构搭建与科学实验</h3>
            <p>模块化积木、磁力结构、儿童实验套装，附带课程卡与门店演示脚本，适合教育零售与亲子空间。</p>
            <span class="toy-shape shape-1" aria-hidden="true"></span>
          </article>
          <article class="product-card yellow reveal">
            <span class="product-pill">Soft & Plush</span>
            <h3>治愈毛绒 IP</h3>
            <p>原创角色、节庆限定与授权联名，支持吊牌故事、礼盒包装与主题橱窗。</p>
            <span class="toy-shape shape-2" aria-hidden="true"></span>
          </article>
          <article class="product-card green reveal">
            <span class="product-pill">Outdoor Play</span>
            <h3>户外运动玩具</h3>
            <p>飞盘、泡泡机、水枪、平衡训练与家庭露营玩具，围绕季节波峰快速组货。</p>
            <span class="toy-shape shape-3" aria-hidden="true"></span>
          </article>
          <article class="product-card red reveal">
            <span class="product-pill">Baby Safe</span>
            <h3>婴幼儿安抚与启蒙</h3>
            <p>可咬、可洗、低噪、圆角结构，满足 0-3 岁安全边界与感官发展场景。</p>
            <span class="toy-shape shape-4" aria-hidden="true"></span>
          </article>
          <article class="product-card purple reveal">
            <span class="product-pill">Festival Kits</span>
            <h3>节庆礼盒快反</h3>
            <p>春节、六一、圣诞、开学季主题套装，提供小批量首单与热销款追单。</p>
            <span class="toy-shape shape-5" aria-hidden="true"></span>
          </article>
        </div>
      </div>
    </section>

    <section class="section" id="capability">
      <div class="container">
        <div class="section-head">
          <div>
            <div class="section-kicker">R&D + Manufacturing</div>
            <h2>从草图到柜台，我们把每一步做成看板。</h2>
          </div>
          <p class="section-intro">企业客户需要的不只是漂亮样品，而是稳定交付、清晰节点、可解释成本与可审计质量。曜盒将研发、打样、模具、产线与验货纳入同一协作节奏。</p>
        </div>

        <div class="capability-wrap">
          <aside class="lab-panel reveal">
            <h3>量产指挥台</h3>
            <p>用一个跨部门项目组承接产品经理、结构工程、采购、质检与物流，关键节点同步给客户采购和品牌团队。</p>
            <div class="lab-lines">
              <div class="lab-line"><span>Concept</span><div class="progress"><i style="width: 96%"></i></div><b>96%</b></div>
              <div class="lab-line"><span>Tooling</span><div class="progress"><i style="width: 82%"></i></div><b>82%</b></div>
              <div class="lab-line"><span>QC Gate</span><div class="progress"><i style="width: 91%"></i></div><b>91%</b></div>
              <div class="lab-line"><span>Shipment</span><div class="progress"><i style="width: 88%"></i></div><b>88%</b></div>
            </div>
          </aside>

          <div class="capability-grid">
            <article class="cap-card reveal"><div class="cap-icon">01</div><h3>原创 IP 体系</h3><p>角色世界观、包装语言、线下陈列与社媒素材同步开发，降低渠道二次创意成本。</p></article>
            <article class="cap-card reveal"><div class="cap-icon">02</div><h3>柔性打样</h3><p>3D 打印、软胶调色、布料小样与纸品结构快速验证，首轮样品最快 10 个工作日。</p></article>
            <article class="cap-card reveal"><div class="cap-icon">03</div><h3>供应链排产</h3><p>按旺季、港口、物料周期进行订单拆解，支持采购团队查看里程碑与风险提示。</p></article>
            <article class="cap-card reveal"><div class="cap-icon">04</div><h3>渠道资产包</h3><p>提供商品图、短视频脚本、门店 POP、陈列手册与培训话术，帮助终端快速启动。</p></article>
          </div>
        </div>
      </div>
    </section>

    <div class="story-strip" aria-hidden="true">
      <div class="story-track">
        <div class="story-item"><i></i> SAFE TOYS</div>
        <div class="story-item"><i></i> GLOBAL SUPPLY</div>
        <div class="story-item"><i></i> RETAIL READY</div>
        <div class="story-item"><i></i> PLAYFUL GROWTH</div>
        <div class="story-item"><i></i> SAFE TOYS</div>
        <div class="story-item"><i></i> GLOBAL SUPPLY</div>
        <div class="story-item"><i></i> RETAIL READY</div>
        <div class="story-item"><i></i> PLAYFUL GROWTH</div>
      </div>
    </div>

    <section class="section" id="safety">
      <div class="container">
        <div class="section-head">
          <div>
            <div class="section-kicker">Compliance & Trust</div>
            <h2>安全不是卖点，是进入市场的门票。</h2>
          </div>
          <p class="section-intro">从原料准入、结构风险、边角处理到第三方测试，安全合规贯穿产品生命周期。每个批次保留可追溯记录，便于客户审计与售后定位。</p>
        </div>

        <div class="safety-board">
          <article class="safety-card reveal"><small>Material Gate</small><h3>原料白名单</h3><p>塑胶、涂料、布料、填充棉与电子件均建立供应商档案，关键物料按批次抽检。</p></article>
          <article class="safety-card reveal"><small>Age Grade</small><h3>年龄分级</h3><p>按窒息风险、锐边、绳带长度、声光强度与使用场景进行分层评估。</p></article>
          <article class="safety-card reveal"><small>Test Report</small><h3>报告归档</h3><p>支持 EN71、ASTM F963、CPSIA、CCC、REACH 等目标市场文件管理。</p></article>
          <article class="safety-card reveal"><small>Factory Audit</small><h3>审厂协同</h3><p>BSCI、Sedex、ISO9001 等审厂材料可快速响应渠道与品牌客户要求。</p></article>
          <article class="safety-card reveal"><small>Certification Matrix</small><h3>一张表看清合规边界</h3><p>为每条产品线维护目标国家、测试项目、适用年龄、包装警示语与有效期，减少跨境销售风险。</p><div class="cert-row"><span>EN71</span><span>ASTM F963</span><span>CPSIA</span><span>CCC</span><span>REACH</span><span>RoHS</span><span>BSCI</span></div></article>
        </div>
      </div>
    </section>

    <section class="section" id="channels">
      <div class="container">
        <div class="section-head">
          <div>
            <div class="section-kicker">Channel Solutions</div>
            <h2>给不同渠道不同打法。</h2>
          </div>
          <p class="section-intro">企业门户不仅展示产品，也解释合作方式。我们按客户类型提供货盘、包装、陈列、物流与营销资产组合。</p>
        </div>

        <div class="channel">
          <article class="channel-card reveal">
            <h3>连锁零售</h3>
            <p>稳定供货、快周转、可复制陈列。</p>
            <ul class="channel-list">
              <li><b>01</b><span>月度新品与节庆主题货盘。</span></li>
              <li><b>02</b><span>门店端架、堆头与收银台小件方案。</span></li>
              <li><b>03</b><span>热销预警与补货建议。</span></li>
            </ul>
          </article>
          <article class="channel-card reveal">
            <h3>教育空间</h3>
            <p>玩教结合、课程衔接、低维护。</p>
            <ul class="channel-list">
              <li><b>01</b><span>STEAM 课程卡与分龄教具套装。</span></li>
              <li><b>02</b><span>可消毒、耐摔、可补件设计。</span></li>
              <li><b>03</b><span>亲子活动与体验课素材。</span></li>
            </ul>
          </article>
          <article class="channel-card reveal">
            <h3>品牌合作</h3>
            <p>IP 联名、礼赠定制、项目制交付。</p>
            <ul class="channel-list">
              <li><b>01</b><span>授权角色快速转化为玩具结构。</span></li>
              <li><b>02</b><span>企业礼盒、会员权益与活动赠品。</span></li>
              <li><b>03</b><span>从小批量试产到全国铺货。</span></li>
            </ul>
          </article>
        </div>
      </div>
    </section>

    <section class="section" id="news">
      <div class="container">
        <div class="section-head">
          <div>
            <div class="section-kicker">Company News</div>
            <h2>让合作伙伴看到我们正在发生什么。</h2>
          </div>
          <p class="section-intro">企业动态模块用于承载新品发布、展会邀请、质量公告和渠道政策，让门户具备长期运营空间。</p>
        </div>
        <div class="news-grid">
          <article class="news-feature reveal">
            <div class="visual" aria-hidden="true"></div>
            <div class="date">2026.04.18 / EXPO</div>
            <h3>曜盒将携 2026 春夏全渠道货盘亮相深圳玩具展。</h3>
            <p>现场开放 STEAM 实验桌、毛绒 IP 橱窗、户外夏季专区与企业定制样品墙，支持预约采购经理一对一选品。</p>
          </article>
          <div class="news-list reveal">
            <article class="news-row"><div class="date">2026.03.26</div><div><h3>新增欧洲站包装警示语模板库</h3><p>覆盖 12 个语种，降低跨境渠道上架准备成本。</p></div></article>
            <article class="news-row"><div class="date">2026.02.14</div><div><h3>毛绒产线通过年度社会责任审核</h3><p>审厂文件已同步至企业客户资料中心。</p></div></article>
            <article class="news-row"><div class="date">2026.01.09</div><div><h3>儿童科学实验套装完成新版 EN71 测试</h3><p>核心 SKU 报告可按客户目标市场申请调阅。</p></div></article>
          </div>
        </div>
      </div>
    </section>

    <section class="cta" id="contact">
      <div class="container">
        <div class="cta-card reveal">
          <div class="cta-content">
            <div class="section-kicker" style="color:#fff8e6">Start Partnership</div>
            <h2>把下一季玩具货盘，现在就排进计划。</h2>
            <p>告诉我们你的渠道类型、目标年龄段、预算区间与上市节点，曜盒团队将在 72 小时内给出产品组合、合规清单与交付排期建议。</p>
            <a class="btn" href="mailto:partnership@aurorakit.example">发送合作需求</a>
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer>
    <div class="container footer-inner">
      <p>© 2026 Aurorakit Toys Group. Static enterprise portal concept.</p>
      <div class="footer-links">
        <a href="#portfolio">产品</a>
        <a href="#capability">能力</a>
        <a href="#safety">合规</a>
        <a href="#contact">联系</a>
      </div>
    </div>
  </footer>

  <script>
    const menuToggle = document.getElementById('menuToggle');
    const navLinks = document.getElementById('navLinks');

    menuToggle?.addEventListener('click', () => {
      const open = navLinks.classList.toggle('open');
      menuToggle.setAttribute('aria-expanded', String(open));
    });

    navLinks?.addEventListener('click', (event) => {
      if (event.target.tagName === 'A') {
        navLinks.classList.remove('open');
        menuToggle?.setAttribute('aria-expanded', 'false');
      }
    });

    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.14 });

    document.querySelectorAll('.reveal').forEach((node) => observer.observe(node));
  </script>
</body>
</html>

deepseek-v4-pro.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ToyJoy 童悦 - 专注于高品质儿童玩具，为全球家庭带来欢乐与成长。探索我们的创意玩具系列。">
    <title>ToyJoy 童悦 - 高品质儿童玩具品牌</title>
    <style>
        :root {
            --primary: #FF6B6B;
            --primary-dark: #E55A5A;
            --secondary: #4ECDC4;
            --accent: #FFE66D;
            --orange: #FF8A5C;
            --purple: #A78BFA;
            --dark: #2D3436;
            --gray: #636E72;
            --light: #F8F9FA;
            --white: #FFFFFF;
            --gradient-hero: linear-gradient(135deg, #FF6B6B 0%, #FF8A5C 30%, #FFE66D 70%, #4ECDC4 100%);
            --gradient-cta: linear-gradient(135deg, #FF6B6B, #FF8A5C);
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
            --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
            --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);
            --radius-sm: 8px;
            --radius-md: 16px;
            --radius-lg: 24px;
            --radius-xl: 32px;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }

        body {
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            color: var(--dark);
            background: var(--white);
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* ========== Navigation ========== */
        .nav {
            position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
            background: rgba(255,255,255,0.92);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(0,0,0,0.06);
            transition: all 0.3s ease;
        }
        .nav.scrolled { box-shadow: var(--shadow-md); }
        .nav-inner {
            max-width: 1200px; margin: 0 auto; padding: 0 24px;
            display: flex; align-items: center; justify-content: space-between; height: 72px;
        }
        .nav-logo {
            font-size: 28px; font-weight: 800; color: var(--primary);
            text-decoration: none; display: flex; align-items: center; gap: 8px;
        }
        .nav-logo .logo-icon { font-size: 32px; }
        .nav-links { display: flex; gap: 32px; list-style: none; align-items: center; }
        .nav-links a {
            text-decoration: none; color: var(--dark); font-weight: 500;
            font-size: 15px; transition: color 0.2s; position: relative;
        }
        .nav-links a::after {
            content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
            background: var(--primary); transition: width 0.3s ease; border-radius: 1px;
        }
        .nav-links a:hover { color: var(--primary); }
        .nav-links a:hover::after { width: 100%; }
        .nav-cta {
            background: var(--gradient-cta); color: #fff !important;
            padding: 10px 24px; border-radius: 50px; font-weight: 600 !important;
            box-shadow: 0 4px 12px rgba(255,107,107,0.35);
            transition: transform 0.2s, box-shadow 0.2s !important;
        }
        .nav-cta::after { display: none !important; }
        .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,107,107,0.45); color: #fff !important; }
        .nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 8px; }
        .nav-toggle span { width: 24px; height: 2px; background: var(--dark); border-radius: 2px; transition: all 0.3s; }

        /* ========== Hero ========== */
        .hero {
            min-height: 100vh; display: flex; align-items: center;
            background: linear-gradient(180deg, #FFF5F5 0%, #FFFBF0 40%, #F0FDF9 100%);
            padding: 120px 24px 80px; position: relative; overflow: hidden;
        }
        .hero-bg-shapes { position: absolute; inset: 0; pointer-events: none; }
        .hero-shape {
            position: absolute; border-radius: 50%; opacity: 0.15;
            animation: floatShape 8s ease-in-out infinite;
        }
        .hero-shape:nth-child(1) { width: 300px; height: 300px; background: var(--primary); top: -50px; right: -80px; }
        .hero-shape:nth-child(2) { width: 200px; height: 200px; background: var(--secondary); bottom: 10%; left: -60px; animation-delay: -3s; }
        .hero-shape:nth-child(3) { width: 150px; height: 150px; background: var(--accent); top: 30%; left: 40%; animation-delay: -5s; }
        .hero-shape:nth-child(4) { width: 100px; height: 100px; background: var(--purple); bottom: 20%; right: 20%; animation-delay: -2s; }
        @keyframes floatShape {
            0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
            50% { transform: translateY(-30px) rotate(10deg) scale(1.08); }
        }
        .hero-inner {
            max-width: 1200px; margin: 0 auto; display: grid;
            grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
            position: relative; z-index: 1;
        }
        .hero-tag {
            display: inline-block; background: rgba(255,107,107,0.1); color: var(--primary);
            padding: 6px 16px; border-radius: 50px; font-size: 14px; font-weight: 600;
            margin-bottom: 20px; letter-spacing: 0.5px;
        }
        .hero-title {
            font-size: 56px; font-weight: 900; line-height: 1.15; margin-bottom: 20px;
            background: var(--gradient-hero); -webkit-background-clip: text;
            -webkit-text-fill-color: transparent; background-clip: text;
        }
        .hero-subtitle {
            font-size: 18px; color: var(--gray); margin-bottom: 36px; max-width: 480px; line-height: 1.7;
        }
        .hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
        .btn {
            display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px;
            border-radius: 50px; font-size: 16px; font-weight: 600; text-decoration: none;
            cursor: pointer; border: none; transition: all 0.3s ease;
        }
        .btn-primary {
            background: var(--gradient-cta); color: #fff;
            box-shadow: 0 6px 24px rgba(255,107,107,0.4);
        }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(255,107,107,0.5); }
        .btn-outline {
            background: var(--white); color: var(--primary); border: 2px solid var(--primary);
        }
        .btn-outline:hover { background: #FFF5F5; transform: translateY(-2px); }
        .hero-image { display: flex; justify-content: center; align-items: center; }
        .hero-image-wrapper {
            width: 420px; height: 420px; border-radius: 50%;
            background: linear-gradient(135deg, rgba(255,107,107,0.08), rgba(78,205,196,0.08));
            display: flex; align-items: center; justify-content: center;
            animation: heroPulse 4s ease-in-out infinite; position: relative;
        }
        @keyframes heroPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.04); }
        }
        .hero-emoji { font-size: 180px; line-height: 1; }
        .hero-stats {
            display: flex; gap: 40px; margin-top: 48px; padding-top: 32px;
            border-top: 1px solid rgba(0,0,0,0.06);
        }
        .hero-stat-number { font-size: 32px; font-weight: 800; color: var(--primary); }
        .hero-stat-label { font-size: 14px; color: var(--gray); margin-top: 4px; }

        /* ========== Section Common ========== */
        .section { padding: 100px 24px; }
        .section-inner { max-width: 1200px; margin: 0 auto; }
        .section-header { text-align: center; margin-bottom: 64px; }
        .section-tag {
            display: inline-block; background: rgba(78,205,196,0.12); color: var(--secondary);
            padding: 6px 16px; border-radius: 50px; font-size: 14px; font-weight: 600;
            margin-bottom: 16px; letter-spacing: 0.5px;
        }
        .section-title { font-size: 40px; font-weight: 800; margin-bottom: 16px; }
        .section-desc { font-size: 17px; color: var(--gray); max-width: 560px; margin: 0 auto; }

        /* ========== Products ========== */
        .products { background: var(--white); }
        .product-grid {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
        }
        .product-card {
            background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
            box-shadow: var(--shadow-sm); transition: all 0.35s ease;
            border: 1px solid rgba(0,0,0,0.04);
        }
        .product-card:hover {
            transform: translateY(-8px); box-shadow: var(--shadow-lg);
        }
        .product-image {
            height: 260px; display: flex; align-items: center; justify-content: center;
            font-size: 100px; position: relative; overflow: hidden;
        }
        .product-card:nth-child(1) .product-image { background: linear-gradient(135deg, #FFF5F5, #FFE8E8); }
        .product-card:nth-child(2) .product-image { background: linear-gradient(135deg, #F0FDF9, #D4F7F2); }
        .product-card:nth-child(3) .product-image { background: linear-gradient(135deg, #FFFBF0, #FFF3D6); }
        .product-card:nth-child(4) .product-image { background: linear-gradient(135deg, #F5F0FF, #E8DCF8); }
        .product-card:nth-child(5) .product-image { background: linear-gradient(135deg, #FFF0F5, #FFD6E8); }
        .product-card:nth-child(6) .product-image { background: linear-gradient(135deg, #F0F8FF, #D6EAFF); }
        .product-badge {
            position: absolute; top: 16px; right: 16px;
            background: var(--primary); color: #fff; padding: 4px 12px;
            border-radius: 50px; font-size: 12px; font-weight: 700;
        }
        .product-badge.new { background: var(--secondary); }
        .product-body { padding: 24px; }
        .product-category { font-size: 13px; color: var(--gray); font-weight: 500; margin-bottom: 8px; }
        .product-name { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
        .product-desc { font-size: 14px; color: var(--gray); margin-bottom: 16px; line-height: 1.6; }
        .product-footer { display: flex; justify-content: space-between; align-items: center; }
        .product-price { font-size: 24px; font-weight: 800; color: var(--primary); }
        .product-age {
            font-size: 13px; color: var(--gray); background: var(--light);
            padding: 4px 12px; border-radius: 50px;
        }

        /* ========== Categories ========== */
        .categories { background: var(--light); }
        .category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
        .category-card {
            background: var(--white); border-radius: var(--radius-lg); padding: 40px 24px;
            text-align: center; cursor: pointer; transition: all 0.3s ease;
            box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,0.04);
        }
        .category-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
        .category-icon { font-size: 56px; margin-bottom: 16px; }
        .category-name { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
        .category-count { font-size: 14px; color: var(--gray); }

        /* ========== Feature ========== */
        .features { background: var(--white); }
        .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
        .feature-card { text-align: center; padding: 40px 24px; }
        .feature-icon {
            width: 80px; height: 80px; border-radius: 50%; display: flex;
            align-items: center; justify-content: center; font-size: 36px;
            margin: 0 auto 24px;
        }
        .feature-card:nth-child(1) .feature-icon { background: rgba(255,107,107,0.1); }
        .feature-card:nth-child(2) .feature-icon { background: rgba(78,205,196,0.1); }
        .feature-card:nth-child(3) .feature-icon { background: rgba(255,230,109,0.15); }
        .feature-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
        .feature-desc { font-size: 15px; color: var(--gray); line-height: 1.7; }

        /* ========== Testimonials ========== */
        .testimonials { background: var(--light); }
        .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
        .testimonial-card {
            background: var(--white); border-radius: var(--radius-lg); padding: 36px;
            box-shadow: var(--shadow-sm); position: relative;
        }
        .testimonial-quote {
            font-size: 56px; color: var(--accent); line-height: 0; margin-bottom: 20px;
            font-family: Georgia, serif;
        }
        .testimonial-text { font-size: 15px; color: var(--gray); line-height: 1.8; margin-bottom: 24px; }
        .testimonial-author { display: flex; align-items: center; gap: 12px; }
        .testimonial-avatar {
            width: 48px; height: 48px; border-radius: 50%; display: flex;
            align-items: center; justify-content: center; font-size: 20px; font-weight: 700;
            color: #fff;
        }
        .testimonial-card:nth-child(1) .testimonial-avatar { background: var(--primary); }
        .testimonial-card:nth-child(2) .testimonial-avatar { background: var(--secondary); }
        .testimonial-card:nth-child(3) .testimonial-avatar { background: var(--purple); }
        .testimonial-name { font-size: 16px; font-weight: 700; }
        .testimonial-role { font-size: 13px; color: var(--gray); }
        .testimonial-stars { color: var(--accent); font-size: 16px; margin-bottom: 12px; }

        /* ========== CTA Banner ========== */
        .cta-banner {
            background: var(--gradient-hero); padding: 80px 24px; text-align: center;
            position: relative; overflow: hidden;
        }
        .cta-banner::before {
            content: ''; position: absolute; inset: 0;
            background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.2) 0%, transparent 50%),
                        radial-gradient(circle at 80% 50%, rgba(255,255,255,0.15) 0%, transparent 50%);
        }
        .cta-banner-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
        .cta-title { font-size: 44px; font-weight: 900; color: #fff; margin-bottom: 16px; }
        .cta-desc { font-size: 18px; color: rgba(255,255,255,0.9); margin-bottom: 36px; }
        .btn-white {
            background: #fff; color: var(--primary); padding: 16px 40px;
            border-radius: 50px; font-size: 17px; font-weight: 700; text-decoration: none;
            display: inline-flex; align-items: center; gap: 8px;
            box-shadow: 0 6px 24px rgba(0,0,0,0.15); transition: all 0.3s;
        }
        .btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.25); }

        /* ========== Contact ========== */
        .contact { background: var(--white); }
        .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
        .contact-info-item { display: flex; gap: 16px; margin-bottom: 32px; align-items: flex-start; }
        .contact-info-icon {
            width: 52px; height: 52px; border-radius: var(--radius-sm); display: flex;
            align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
            background: rgba(255,107,107,0.1);
        }
        .contact-info-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
        .contact-info-text { font-size: 15px; color: var(--gray); }
        .contact-form { background: var(--light); padding: 40px; border-radius: var(--radius-lg); }
        .form-group { margin-bottom: 20px; }
        .form-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--dark); }
        .form-input, .form-textarea {
            width: 100%; padding: 14px 18px; border: 2px solid #E8E8E8;
            border-radius: var(--radius-sm); font-size: 15px; font-family: inherit;
            transition: border-color 0.3s; outline: none; background: var(--white);
        }
        .form-input:focus, .form-textarea:focus { border-color: var(--primary); }
        .form-textarea { min-height: 140px; resize: vertical; }
        .btn-submit {
            width: 100%; padding: 16px; background: var(--gradient-cta);
            color: #fff; border: none; border-radius: 50px; font-size: 16px;
            font-weight: 700; cursor: pointer; transition: all 0.3s;
            box-shadow: 0 6px 24px rgba(255,107,107,0.35);
        }
        .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(255,107,107,0.45); }

        /* ========== Footer ========== */
        .footer {
            background: var(--dark); color: rgba(255,255,255,0.7); padding: 64px 24px 32px;
        }
        .footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
        .footer-logo { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 16px; }
        .footer-about { font-size: 14px; line-height: 1.8; margin-bottom: 20px; }
        .footer-social { display: flex; gap: 12px; }
        .footer-social-link {
            width: 40px; height: 40px; border-radius: 50%; display: flex;
            align-items: center; justify-content: center; background: rgba(255,255,255,0.1);
            text-decoration: none; font-size: 18px; transition: background 0.3s;
        }
        .footer-social-link:hover { background: var(--primary); }
        .footer-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 20px; }
        .footer-links { list-style: none; }
        .footer-links li { margin-bottom: 12px; }
        .footer-links a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 14px; transition: color 0.3s; }
        .footer-links a:hover { color: #fff; }
        .footer-bottom {
            max-width: 1200px; margin: 0 auto; padding-top: 32px; margin-top: 48px;
            border-top: 1px solid rgba(255,255,255,0.1); display: flex;
            justify-content: space-between; font-size: 13px;
        }

        /* ========== Back to Top ========== */
        .back-to-top {
            position: fixed; bottom: 32px; right: 32px; z-index: 999;
            width: 48px; height: 48px; border-radius: 50%; background: var(--primary);
            color: #fff; border: none; cursor: pointer; font-size: 20px;
            box-shadow: var(--shadow-md); opacity: 0; visibility: hidden;
            transition: all 0.3s ease; display: flex; align-items: center; justify-content: center;
        }
        .back-to-top.visible { opacity: 1; visibility: visible; }
        .back-to-top:hover { background: var(--primary-dark); transform: translateY(-3px); }

        /* ========== Responsive ========== */
        @media (max-width: 1024px) {
            .hero-inner { grid-template-columns: 1fr; text-align: center; }
            .hero-subtitle { max-width: 100%; }
            .hero-buttons { justify-content: center; }
            .hero-stats { justify-content: center; }
            .hero-image-wrapper { width: 300px; height: 300px; margin: 0 auto; }
            .hero-emoji { font-size: 130px; }
            .product-grid { grid-template-columns: repeat(2, 1fr); }
            .category-grid { grid-template-columns: repeat(2, 1fr); }
            .feature-grid { grid-template-columns: 1fr; }
            .testimonial-grid { grid-template-columns: 1fr; }
            .contact-grid { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 768px) {
            .nav-links { display: none; }
            .nav-links.open {
                display: flex; flex-direction: column; position: absolute;
                top: 72px; left: 0; right: 0; background: var(--white);
                padding: 24px; box-shadow: var(--shadow-md); gap: 16px;
            }
            .nav-toggle { display: flex; }
            .hero { padding: 100px 16px 60px; }
            .hero-title { font-size: 36px; }
            .section-title { font-size: 30px; }
            .product-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
            .category-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
            .footer-grid { grid-template-columns: 1fr; gap: 32px; }
            .section { padding: 64px 16px; }
            .hero-stats { gap: 24px; flex-wrap: wrap; }
            .hero-stat-number { font-size: 24px; }
        }

        /* ========== Animations ========== */
        .fade-in {
            opacity: 0; transform: translateY(30px);
            transition: opacity 0.7s ease, transform 0.7s ease;
        }
        .fade-in.visible { opacity: 1; transform: translateY(0); }

        /* ========== Toast ========== */
        .toast {
            position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%);
            background: var(--dark); color: #fff; padding: 14px 28px;
            border-radius: 50px; font-size: 15px; font-weight: 600; z-index: 2000;
            opacity: 0; visibility: hidden; transition: all 0.4s ease;
            box-shadow: var(--shadow-lg);
        }
        .toast.show { opacity: 1; visibility: visible; }
    </style>
</head>
<body>

<!-- Navigation -->
<nav class="nav" id="nav">
    <div class="nav-inner">
        <a href="#" class="nav-logo">
            <span class="logo-icon">🧸</span> ToyJoy
        </a>
        <ul class="nav-links" id="navLinks">
            <li><a href="#home" onclick="closeMenu()">首页</a></li>
            <li><a href="#products" onclick="closeMenu()">产品中心</a></li>
            <li><a href="#about" onclick="closeMenu()">关于我们</a></li>
            <li><a href="#contact" onclick="closeMenu()">联系我们</a></li>
            <li><a href="#contact" class="nav-cta" onclick="closeMenu()">获取报价</a></li>
        </ul>
        <button class="nav-toggle" id="navToggle" aria-label="菜单">
            <span></span><span></span><span></span>
        </button>
    </div>
</nav>

<!-- Hero -->
<section class="hero" id="home">
    <div class="hero-bg-shapes">
        <div class="hero-shape"></div>
        <div class="hero-shape"></div>
        <div class="hero-shape"></div>
        <div class="hero-shape"></div>
    </div>
    <div class="hero-inner">
        <div class="hero-content">
            <span class="hero-tag">🎉 全球 500 万家庭的选择</span>
            <h1 class="hero-title">让每个孩子<br>在玩耍中成长</h1>
            <p class="hero-subtitle">
                我们专注研发安全、创意、富有教育意义的高品质儿童玩具，
                覆盖 0-12 岁全年龄段，已服务全球超过 50 个国家和地区。
            </p>
            <div class="hero-buttons">
                <a href="#products" class="btn btn-primary">🛍️ 探索产品</a>
                <a href="#about" class="btn btn-outline">了解更多</a>
            </div>
            <div class="hero-stats">
                <div>
                    <div class="hero-stat-number">500+</div>
                    <div class="hero-stat-label">产品品类</div>
                </div>
                <div>
                    <div class="hero-stat-number">50+</div>
                    <div class="hero-stat-label">覆盖国家</div>
                </div>
                <div>
                    <div class="hero-stat-number">99.7%</div>
                    <div class="hero-stat-label">客户满意度</div>
                </div>
            </div>
        </div>
        <div class="hero-image">
            <div class="hero-image-wrapper">
                <span class="hero-emoji">🧸</span>
            </div>
        </div>
    </div>
</section>

<!-- Products -->
<section class="section products" id="products">
    <div class="section-inner">
        <div class="section-header">
            <span class="section-tag">热门产品</span>
            <h2 class="section-title">明星产品系列</h2>
            <p class="section-desc">
                从启蒙早教到 STEM 科学探索，每一款产品都经过严格的安全检测与教育专家认证。
            </p>
        </div>
        <div class="product-grid">
            <div class="product-card fade-in">
                <div class="product-image">
                    🧩
                    <span class="product-badge">热卖</span>
                </div>
                <div class="product-body">
                    <div class="product-category">益智拼搭</div>
                    <h3 class="product-name">创意磁力片 128 件套</h3>
                    <p class="product-desc">透明彩窗设计，激发空间想象力与创造力，兼容主流磁力片品牌。</p>
                    <div class="product-footer">
                        <span class="product-price">¥299</span>
                        <span class="product-age">3-8 岁</span>
                    </div>
                </div>
            </div>
            <div class="product-card fade-in">
                <div class="product-image">
                    🤖
                    <span class="product-badge new">新品</span>
                </div>
                <div class="product-body">
                    <div class="product-category">STEM 教育</div>
                    <h3 class="product-name">可编程机器人套装</h3>
                    <p class="product-desc">图形化编程 + Scratch 支持，零基础入门，培养计算思维与逻辑能力。</p>
                    <div class="product-footer">
                        <span class="product-price">¥599</span>
                        <span class="product-age">6-12 岁</span>
                    </div>
                </div>
            </div>
            <div class="product-card fade-in">
                <div class="product-image">
                    🎨
                </div>
                <div class="product-body">
                    <div class="product-category">艺术启蒙</div>
                    <h3 class="product-name">水画布涂鸦垫</h3>
                    <p class="product-desc">清水作画，自动消失可反复使用，零污染零浪费，释放孩子艺术天性。</p>
                    <div class="product-footer">
                        <span class="product-price">¥129</span>
                        <span class="product-age">1-5 岁</span>
                    </div>
                </div>
            </div>
            <div class="product-card fade-in">
                <div class="product-image">
                    🎹
                    <span class="product-badge">热卖</span>
                </div>
                <div class="product-body">
                    <div class="product-category">音乐启蒙</div>
                    <h3 class="product-name">多功能电子钢琴毯</h3>
                    <p class="product-desc">8 种乐器音色 + 10 首内置童谣，踩踏弹奏锻炼大运动与节奏感。</p>
                    <div class="product-footer">
                        <span class="product-price">¥199</span>
                        <span class="product-age">2-7 岁</span>
                    </div>
                </div>
            </div>
            <div class="product-card fade-in">
                <div class="product-image">
                    📚
                </div>
                <div class="product-body">
                    <div class="product-category">早教启蒙</div>
                    <h3 class="product-name">双语点读学习套装</h3>
                    <p class="product-desc">中英双语，2000+ 有声点读资源，场景化互动学习，培养语言敏感期。</p>
                    <div class="product-footer">
                        <span class="product-price">¥459</span>
                        <span class="product-age">1-6 岁</span>
                    </div>
                </div>
            </div>
            <div class="product-card fade-in">
                <div class="product-image">
                    🏰
                </div>
                <div class="product-body">
                    <div class="product-category">角色扮演</div>
                    <h3 class="product-name">梦幻公主城堡帐篷</h3>
                    <p class="product-desc">大空间游戏屋，折叠便携，透气网窗设计，室内户外两用。</p>
                    <div class="product-footer">
                        <span class="product-price">¥359</span>
                        <span class="product-age">2-8 岁</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Categories -->
<section class="section categories" id="categories">
    <div class="section-inner">
        <div class="section-header">
            <span class="section-tag">全部品类</span>
            <h2 class="section-title">按年龄与兴趣探索</h2>
            <p class="section-desc">覆盖 0-12 岁全年龄段，从感官启蒙到科学探索，满足每个成长阶段的需求。</p>
        </div>
        <div class="category-grid">
            <div class="category-card">
                <div class="category-icon">👶</div>
                <div class="category-name">0-2 岁 感官启蒙</div>
                <div class="category-count">128 款产品</div>
            </div>
            <div class="category-card">
                <div class="category-icon">🧠</div>
                <div class="category-name">3-5 岁 益智拼搭</div>
                <div class="category-count">206 款产品</div>
            </div>
            <div class="category-card">
                <div class="category-icon">🔬</div>
                <div class="category-name">6-8 岁 STEM 探索</div>
                <div class="category-count">153 款产品</div>
            </div>
            <div class="category-card">
                <div class="category-icon">🚀</div>
                <div class="category-name">9-12 岁 创客编程</div>
                <div class="category-count">89 款产品</div>
            </div>
        </div>
    </div>
</section>

<!-- Features -->
<section class="section features" id="about">
    <div class="section-inner">
        <div class="section-header">
            <span class="section-tag">为什么选择我们</span>
            <h2 class="section-title">ToyJoy 品质承诺</h2>
            <p class="section-desc">每一个环节都倾注匠心，只为给孩子最好、最安全的玩伴。</p>
        </div>
        <div class="feature-grid">
            <div class="feature-card">
                <div class="feature-icon">🛡️</div>
                <h3 class="feature-title">国际安全认证</h3>
                <p class="feature-desc">
                    全线产品通过 EN71、ASTM F963、CCC 认证。采用食品级 ABS 材质，无 BPA、无邻苯，守护孩子健康。
                </p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">🎓</div>
                <h3 class="feature-title">教育专家设计</h3>
                <p class="feature-desc">
                    联合儿童发展心理学专家与蒙特梭利认证教师，将教育理念融入每一款产品的设计之中。
                </p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">🌍</div>
                <h3 class="feature-title">全球供应链保障</h3>
                <p class="feature-desc">
                    自建 50,000㎡ 智能工厂，ISO 9001 质量管理体系，支持 OEM/ODM，7-15 天全球交付。
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials -->
<section class="section testimonials">
    <div class="section-inner">
        <div class="section-header">
            <span class="section-tag">客户心声</span>
            <h2 class="section-title">500 万家庭信赖之选</h2>
        </div>
        <div class="testimonial-grid">
            <div class="testimonial-card">
                <div class="testimonial-quote">"</div>
                <div class="testimonial-stars">⭐⭐⭐⭐⭐</div>
                <p class="testimonial-text">
                    孩子收到磁力片套装后爱不释手，每天都拉着我们一起拼搭。材质手感很好，边角圆润完全不担心划伤。已经回购了编程机器人，强烈推荐！
                </p>
                <div class="testimonial-author">
                    <div class="testimonial-avatar">李</div>
                    <div>
                        <div class="testimonial-name">李女士</div>
                        <div class="testimonial-role">5 岁男孩的妈妈</div>
                    </div>
                </div>
            </div>
            <div class="testimonial-card">
                <div class="testimonial-quote">"</div>
                <div class="testimonial-stars">⭐⭐⭐⭐⭐</div>
                <p class="testimonial-text">
                    作为幼儿园采购负责人，我很看重产品的安全性和教育价值。ToyJoy 的产品都配有详细的教学活动指南，老师们反馈非常好，孩子们也玩得很投入。
                </p>
                <div class="testimonial-author">
                    <div class="testimonial-avatar">王</div>
                    <div>
                        <div class="testimonial-name">王老师</div>
                        <div class="testimonial-role">国际幼儿园园长</div>
                    </div>
                </div>
            </div>
            <div class="testimonial-card">
                <div class="testimonial-quote">"</div>
                <div class="testimonial-stars">⭐⭐⭐⭐⭐</div>
                <p class="testimonial-text">
                    从美国亚马逊上了解到 ToyJoy，跨境物流很快，包装也很精美。产品质量完全不输海外大牌，性价比非常高。现在是我们玩具店的主力品牌。
                </p>
                <div class="testimonial-author">
                    <div class="testimonial-avatar">J</div>
                    <div>
                        <div class="testimonial-name">James Chen</div>
                        <div class="testimonial-role">美国加州玩具零售商</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Banner -->
<section class="cta-banner">
    <div class="cta-banner-inner">
        <h2 class="cta-title">准备好给孩子更好的玩伴了吗？</h2>
        <p class="cta-desc">现在联系我们，获取产品目录、样品申请与专属批发报价。</p>
        <a href="#contact" class="btn-white">📩 立即咨询</a>
    </div>
</section>

<!-- Contact -->
<section class="section contact" id="contact">
    <div class="section-inner">
        <div class="section-header">
            <span class="section-tag">联系我们</span>
            <h2 class="section-title">期待与您合作</h2>
            <p class="section-desc">无论您是家长、教育机构还是贸易伙伴，我们都将竭诚为您服务。</p>
        </div>
        <div class="contact-grid">
            <div>
                <div class="contact-info-item">
                    <div class="contact-info-icon">📍</div>
                    <div>
                        <div class="contact-info-title">公司地址</div>
                        <div class="contact-info-text">广东省深圳市宝安区福海街道 ToyJoy 智能产业园 A 栋</div>
                    </div>
                </div>
                <div class="contact-info-item">
                    <div class="contact-info-icon">📞</div>
                    <div>
                        <div class="contact-info-title">联系电话</div>
                        <div class="contact-info-text">400-888-9999（工作日 9:00-18:00）</div>
                    </div>
                </div>
                <div class="contact-info-item">
                    <div class="contact-info-icon">📧</div>
                    <div>
                        <div class="contact-info-title">电子邮箱</div>
                        <div class="contact-info-text">hello@toyjoy.com</div>
                    </div>
                </div>
                <div class="contact-info-item">
                    <div class="contact-info-icon">🌐</div>
                    <div>
                        <div class="contact-info-title">官方网站</div>
                        <div class="contact-info-text">www.toyjoy.com</div>
                    </div>
                </div>
            </div>
            <form class="contact-form" id="contactForm">
                <div class="form-group">
                    <label class="form-label" for="name">您的姓名 *</label>
                    <input class="form-input" type="text" id="name" name="name" placeholder="请输入您的姓名" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="email">电子邮箱 *</label>
                    <input class="form-input" type="email" id="email" name="email" placeholder="请输入您的电子邮箱" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="phone">联系电话</label>
                    <input class="form-input" type="tel" id="phone" name="phone" placeholder="请输入您的联系电话">
                </div>
                <div class="form-group">
                    <label class="form-label" for="message">留言内容</label>
                    <textarea class="form-textarea" id="message" name="message" placeholder="请描述您的需求，如产品品类、数量、目标市场等…"></textarea>
                </div>
                <button type="submit" class="btn-submit">🚀 发送咨询</button>
            </form>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="footer">
    <div class="footer-grid">
        <div>
            <div class="footer-logo">🧸 ToyJoy 童悦</div>
            <p class="footer-about">
                专注高品质儿童玩具研发与制造，致力于为全球家庭创造安全、有趣、富有教育意义的玩乐体验。
                让每个孩子在玩耍中发现世界、探索自我、快乐成长。
            </p>
            <div class="footer-social">
                <a href="#" class="footer-social-link" title="微信">💬</a>
                <a href="#" class="footer-social-link" title="微博">📱</a>
                <a href="#" class="footer-social-link" title="抖音">🎵</a>
                <a href="#" class="footer-social-link" title="小红书">📖</a>
            </div>
        </div>
        <div>
            <div class="footer-title">产品中心</div>
            <ul class="footer-links">
                <li><a href="#">感官启蒙 (0-2岁)</a></li>
                <li><a href="#">益智拼搭 (3-5岁)</a></li>
                <li><a href="#">STEM 探索 (6-8岁)</a></li>
                <li><a href="#">创客编程 (9-12岁)</a></li>
                <li><a href="#">户外运动系列</a></li>
            </ul>
        </div>
        <div>
            <div class="footer-title">服务支持</div>
            <ul class="footer-links">
                <li><a href="#">产品目录下载</a></li>
                <li><a href="#">批发合作咨询</a></li>
                <li><a href="#">OEM/ODM 定制</a></li>
                <li><a href="#">安全认证查询</a></li>
                <li><a href="#">常见问题 FAQ</a></li>
            </ul>
        </div>
        <div>
            <div class="footer-title">关于我们</div>
            <ul class="footer-links">
                <li><a href="#">品牌故事</a></li>
                <li><a href="#">新闻动态</a></li>
                <li><a href="#">加入我们</a></li>
                <li><a href="#">隐私政策</a></li>
                <li><a href="#">条款与条件</a></li>
            </ul>
        </div>
    </div>
    <div class="footer-bottom">
        <span>&copy; 2026 ToyJoy 童悦. All rights reserved.</span>
        <span>粤ICP备XXXXXXXX号-1</span>
    </div>
</footer>

<!-- Back to Top -->
<button class="back-to-top" id="backToTop" aria-label="返回顶部">↑</button>

<!-- Toast -->
<div class="toast" id="toast"></div>

<script>
    (function() {
        // Nav scroll effect
        const nav = document.getElementById('nav');
        const backToTop = document.getElementById('backToTop');
        const navToggle = document.getElementById('navToggle');
        const navLinks = document.getElementById('navLinks');

        window.addEventListener('scroll', function() {
            var scrolled = window.scrollY > 50;
            nav.classList.toggle('scrolled', scrolled);
            backToTop.classList.toggle('visible', window.scrollY > 600);
        });

        // Mobile menu
        navToggle.addEventListener('click', function() {
            navLinks.classList.toggle('open');
        });

        // Close menu helper
        window.closeMenu = function() {
            navLinks.classList.remove('open');
        };

        // Fade-in on scroll
        var observer = new IntersectionObserver(function(entries) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, { threshold: 0.15, rootMargin: '0px 0px -30px 0px' });

        document.querySelectorAll('.fade-in').forEach(function(el) { observer.observe(el); });

        // Back to top
        backToTop.addEventListener('click', function() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });

        // Smooth scroll for all anchor links
        document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                var target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            });
        });

        // Contact form
        var contactForm = document.getElementById('contactForm');
        var toast = document.getElementById('toast');
        var toastTimer;

        function showToast(msg) {
            toast.textContent = msg;
            toast.classList.add('show');
            clearTimeout(toastTimer);
            toastTimer = setTimeout(function() { toast.classList.remove('show'); }, 3000);
        }

        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            var btn = contactForm.querySelector('.btn-submit');
            var originalText = btn.textContent;
            btn.textContent = '⏳ 发送中…';
            btn.disabled = true;

            // Simulate submission
            setTimeout(function() {
                showToast('✅ 咨询已发送！我们将在 24 小时内与您联系。');
                btn.textContent = originalText;
                btn.disabled = false;
                contactForm.reset();
            }, 1200);
        });

        // Parallax effect on hero shapes
        window.addEventListener('mousemove', function(e) {
            var shapes = document.querySelectorAll('.hero-shape');
            var x = (e.clientX / window.innerWidth - 0.5) * 20;
            var y = (e.clientY / window.innerHeight - 0.5) * 20;
            shapes.forEach(function(shape, i) {
                var factor = (i + 1) * 0.6;
                shape.style.transform = 'translate(' + x * factor + 'px, ' + y * factor + 'px)';
            });
        });
    })();
</script>

</body>
</html>