:root {
  --radius: .125rem;
  --background: 40 33% 94%;
  --foreground: 0 0% 10%;
  --card: 40 33% 97%;
  --card-foreground: 0 0% 10%;
  --popover: 40 33% 97%;
  --popover-foreground: 0 0% 10%;
  --primary: 39 50% 57%;
  --primary-foreground: 0 0% 10%;
  --secondary: 40 25% 88%;
  --secondary-foreground: 0 0% 15%;
  --muted: 40 22% 90%;
  --muted-foreground: 30 8% 42%;
  --accent: 0 0% 17%;
  --accent-foreground: 40 33% 94%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 98%;
  --border: 40 18% 82%;
  --input: 40 18% 82%;
  --ring: 39 50% 57%;
  --gold: 39 50% 57%;
  --gold-light: 39 60% 75%;
  --gold-dark: 39 45% 40%;
}
*, :before, :after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-color: hsl(var(--border));
}
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Noto Sans SC', system-ui, sans-serif;
  font-weight: 300;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', 'Noto Serif SC', serif;
  font-weight: 700;
}
a { color: inherit; text-decoration: none; }
* { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  a, button, .btn-icon, .btn-lang, .cat-card { transition: background-color 0.3s ease; }
  a:active, button:active, .btn-icon:active, .btn-lang:active, .cat-card:active { background-color: rgba(160, 140, 120, 0.12); }
}
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}
@media (min-width: 768px) { .container { padding: 0 2rem; } }
.font-serif-display { font-family: 'Cormorant Garamond', 'Noto Serif SC', serif; }
.text-gold { color: hsl(var(--gold)); }
.border-gold { border-color: hsl(var(--gold)); }
.bg-gold { background-color: hsl(var(--gold)); }

.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-accent-foreground { color: hsl(var(--accent-foreground)); }
.bg-background { background-color: hsl(var(--background)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-muted { background-color: hsl(var(--muted)); }
.bg-accent { background-color: hsl(var(--accent)); }
.border-border { border-color: hsl(var(--border)); }
.text-gradient-gold {
  background: linear-gradient(135deg, hsl(var(--gold-dark)), hsl(var(--gold)), hsl(var(--gold-light)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bg-gradient-gold { background: linear-gradient(135deg, hsl(var(--gold-dark)), hsl(var(--gold)), hsl(var(--gold-light))); }
.text-accent-foreground\/60 { color: hsl(var(--accent-foreground) / .6); }
.text-accent-foreground\/70 { color: hsl(var(--accent-foreground) / .7); }
.text-accent-foreground\/40 { color: hsl(var(--accent-foreground) / .4); }
.bg-accent\/50 { background-color: hsl(var(--accent) / .5); }
.bg-accent\/20 { background-color: hsl(var(--accent) / .2); }
.bg-accent\/30 { background-color: hsl(var(--accent) / .3); }
.border-accent-foreground\/30 { border-color: hsl(var(--accent-foreground) / .3); }
.border-accent-foreground\/10 { border-color: hsl(var(--accent-foreground) / .1); }
.bg-accent-foreground\/10 { background-color: hsl(var(--accent-foreground) / .1); }
.hover\:bg-gold\/10:hover { background-color: hsl(var(--gold) / .1); }
.hover\:text-gold:hover { color: hsl(var(--gold)); }
.hover\:border-gold:hover { border-color: hsl(var(--gold)); }
.text-foreground { color: hsl(var(--foreground)); }
.text-foreground\/80 { color: hsl(var(--foreground) / .8); }
.text-gold\/60 { color: hsl(var(--gold) / .6); }
.bg-muted\/50 { background-color: hsl(var(--muted) / .5); }
.bg-muted\/30 { background-color: hsl(var(--muted) / .3); }
.hover\:bg-accent:hover { background-color: hsl(var(--accent)); }
.hover\:text-foreground:hover { color: hsl(var(--foreground)); }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.tracking-\[0\.3em\] { letter-spacing: 0.3em; }
.tracking-\[0\.4em\] { letter-spacing: 0.4em; }
.tracking-\[0\.5em\] { letter-spacing: 0.5em; }
.uppercase { text-transform: uppercase; }
.fixed { position: fixed; }
.top-0 { top: 0; }
.top-1\/2 { top: 50%; }
.left-0 { left: 0; }
.left-3 { left: .75rem; }
.-translate-y-1\/2 { transform: translateY(-50%); }
.right-0 { right: 0; }
.z-50 { z-index: 50; }
.z-10 { z-index: 10; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1 1 0%; }
.min-w-0 { min-width: 0; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.shrink-0 { flex-shrink: 0; }
.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }
.p-0 { padding: 0; }
.p-2 { padding: .5rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.pb-16 { padding-bottom: 4rem; }
.h-4 { height: 1rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem; }
.h-9 { height: 2.25rem; }
.h-12 { height: 3rem; }
.h-14 { height: 3.5rem; }
.h-16 { height: 4rem; }
.h-20 { height: 5rem; }
.w-9 { width: 2.25rem; }
.w-12 { width: 3rem; }
.w-14 { width: 3.5rem; }
.w-16 { width: 4rem; }
.w-24 { width: 6rem; }
.h-px { height: 1px; }
.w-full { width: 100%; }
.w-4 { width: 1rem; }
.w-1\/3 { width: 33.333333%; }
.h-full { height: 100%; }
.h-auto { height: auto; }
.text-xs { font-size: .75rem; }
.text-sm { font-size: .875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.text-6xl { font-size: 3.75rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-8 { padding-top: 2rem; }
.pt-16 { padding-top: 4rem; }
.pt-20 { padding-top: 5rem; }
.pb-1 { padding-bottom: .25rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-16 { padding-bottom: 4rem; }
.pl-2 { padding-left: .5rem; }
.mt-0\.5 { margin-top: .125rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mr-1 { margin-right: .25rem; }
.mr-2 { margin-right: .5rem; }
.ml-1 { margin-left: .25rem; }
.ml-2 { margin-left: .5rem; }
.ml-3 { margin-left: .75rem; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-prose { max-width: 65ch; }
.max-w-xs { max-width: 20rem; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.space-y-2 > * + * { margin-top: .5rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.cursor-pointer { cursor: pointer; }
.leading-none { line-height: 1; }
.leading-relaxed { line-height: 1.625; }
.line-clamp-2 {
  overflow: hidden; display: -webkit-box;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.aspect-square { aspect-ratio: 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-\[4\/3\] { aspect-ratio: 4 / 3; }
.rounded-full { border-radius: 9999px; }
.rounded-md { border-radius: calc(var(--radius)); }
.border { border: 1px solid; }
.border-2 { border-width: 2px; border-style: solid; }
.border-0 { border: 0; }
.border-l { border-left: 1px solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-r { border-right-width: 1px; border-right-style: solid; }
.whitespace-nowrap { white-space: nowrap; }
.resize-none { resize: none; }
.opacity-0 { opacity: 0; }
@keyframes lightbox-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.transition-all { transition: all .3s; }
.transition-colors { transition: color .3s, background-color .3s, border-color .3s; }
.transition-transform { transition: transform .3s; }
.transition-opacity { transition: opacity .3s; }
.duration-300 { transition-duration: .3s; }
.duration-500 { transition-duration: .5s; }
.duration-700 { transition-duration: .7s; }
.duration-2000 { transition-duration: 2s; }
.hover\:opacity-90:hover { opacity: .9; }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:w-full { width: 100%; }
/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; height: 3rem; padding: 0 2rem; font-size: .875rem;
  letter-spacing: .05em; border: none; cursor: pointer;
  transition: opacity .3s; text-decoration: none; font-family: inherit;
}
.btn-primary {
  background: linear-gradient(135deg, hsl(var(--gold-dark)), hsl(var(--gold)), hsl(var(--gold-light)));
  color: hsl(var(--primary-foreground));
}
.btn-primary:hover { opacity: .9; }
.btn-ghost {
  background: transparent; border: 1px solid hsl(var(--accent-foreground) / .3);
  color: hsl(var(--accent-foreground));
}
.btn-ghost:hover { background-color: hsl(var(--accent-foreground) / .1); }
.btn-ghost-dark { background: transparent; border: none; color: hsl(var(--foreground)); cursor: pointer; padding: .5rem; }
.btn-ghost-dark:hover { color: hsl(var(--gold)); }
.btn-gallery-nav {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; line-height: 1; border: 0; cursor: pointer;
  height: 2rem; padding: 0 .75rem; font-size: .75rem;
  white-space: nowrap; font-weight: 500;
  color: hsl(var(--muted-foreground));
  transition: color .3s, background .3s;
  background: transparent; font-family: inherit;
}
.btn-gallery-nav:hover { color: hsl(var(--gold)); background: hsl(var(--accent)); }
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 3rem; padding: 0 2rem; font-size: .875rem; letter-spacing: .05em;
  background: transparent; border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground)); cursor: pointer; transition: all .3s; text-decoration: none; font-family: inherit;
  border-radius: calc(var(--radius));
}
.btn-outline:hover { border-color: hsl(var(--gold)); color: hsl(var(--gold)); }
.btn-icon {
  width: 2.25rem; height: 2.25rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; background: hsl(var(--secondary)); border: none;
  color: hsl(var(--muted-foreground)); cursor: pointer; transition: all .3s;
}
.btn-icon:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.btn-icon-sm { width: 1.75rem; height: 1.75rem; font-size: .75rem; }
/* 语言切换按钮（药丸形） */
.btn-lang {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  height: 2.25rem; padding: 0 .75rem;
  border-radius: 9999px; background: hsl(var(--secondary)); border: none;
  color: hsl(var(--muted-foreground)); cursor: pointer; transition: all .3s;
  font-size: .75rem; font-family: inherit;
}
.btn-lang:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
/* 分页按钮 */
.page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 6px;
  border: 1px solid hsl(var(--border)); background: transparent;
  color: hsl(var(--muted-foreground)); font-size: .875rem;
  cursor: pointer; transition: all .3s; font-family: inherit;
}
.page-btn:hover { border-color: hsl(var(--gold)); color: hsl(var(--gold)); }
.page-btn.active {
  border-color: hsl(var(--gold)); background: linear-gradient(135deg, hsl(var(--gold-dark)), hsl(var(--gold)));
  color: #fff; cursor: default;
}
.page-btn:disabled { opacity: .3; cursor: default; }
.page-btn:disabled:hover { border-color: hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.page-btn svg { width: 1rem; height: 1rem; }
/* Header */
header.bg-transparent { background-color: transparent; }
header.bg-scrolled {
  background-color: hsl(var(--background) / .95);
  border-bottom: 1px solid hsl(var(--border));
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
header.bg-scrolled .text-accent-foreground\/60,
header.bg-scrolled .btn-icon,
header.bg-scrolled .btn-lang {
  color: hsl(var(--foreground) / .7);
}
header.bg-scrolled .btn-icon:hover,
header.bg-scrolled .btn-lang:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
header.bg-scrolled .border-l {
  border-color: hsl(var(--foreground) / .3) !important;
}
/* Hero */
.min-h-screen { min-height: 100vh; }
.hero-section {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; transition: opacity 2s; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background-color: hsl(var(--accent) / .5); }
.hero-content {
  position: relative; z-index: 10; text-align: center;
  padding: 0 1rem; max-width: 48rem; margin: 0 auto;
}
.hero-subtitle {
  font-size: .875rem; letter-spacing: .5em; color: hsl(var(--gold));
  text-transform: uppercase; margin-bottom: 1rem;
}

.hero-title {
  font-family: 'Cormorant Garamond','Noto Serif SC',serif;
  font-size: 3rem; font-weight: 700; letter-spacing: .1em;
  color: hsl(var(--accent-foreground)); margin-bottom: 1.5rem;
}
.hero-divider {
  width: 6rem; height: 1px; margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, hsl(var(--gold-dark)), hsl(var(--gold)), hsl(var(--gold-light)));
}
.hero-desc {
  font-size: 1.125rem; color: hsl(var(--accent-foreground) / .7);
  letter-spacing: .05em; margin-bottom: 2.5rem; max-width: 65ch;
  margin-left: auto; margin-right: auto;
}
.hero-buttons {
  display: flex; flex-direction: row; align-items: center;
  justify-content: center; gap: 1rem;
}
.hero-scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  z-index: 10;
}
.hero-scroll div {
  width: 1px; height: 3rem;
  background: linear-gradient(to bottom, hsl(var(--gold) / .6), transparent);
}
/* Section styles */
.page-section { padding: 4rem 0; }
@media (min-width: 768px) { .page-section { padding: 6rem 0; } }
.section-header { text-align: center; margin-bottom: 3rem; }
.section-tag {
  font-size: .75rem; letter-spacing: .4em;
  color: hsl(var(--gold)); text-transform: uppercase; margin-bottom: .75rem;
}
.section-title {
  font-family: 'Cormorant Garamond','Noto Serif SC',serif;
  font-size: 1.875rem; font-weight: 700; letter-spacing: .05em; margin-bottom: 1rem;
}
@media (min-width: 768px) { .section-title { font-size: 3rem; } }
.section-divider {
  width: 4rem; height: 1px; margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, hsl(var(--gold-dark)), hsl(var(--gold)), hsl(var(--gold-light)));
}
.section-desc {
  font-size: .875rem; color: hsl(var(--muted-foreground));
  max-width: 65ch; margin: 0 auto; line-height: 1.625;
}


/* Video modal */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.8); display: none;
  align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay.active { display: flex; }
.modal-content {
  width: 100%; max-width: 56rem; background: #000;
  border-radius: 4px; overflow: hidden; position: relative;
}
.modal-close {
  position: absolute; top: .75rem; right: .75rem; z-index: 10;
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  background: rgba(0,0,0,.5); color: #fff; border: none;
  font-size: 1.5rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: rgba(0,0,0,.8); }
/* Product card */
.product-card {
  display: block; background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border)); overflow: hidden;
  transition: all .3s; text-decoration: none; color: inherit;
}
.product-card:hover { border-color: hsl(var(--gold)); }
.product-card-img { aspect-ratio: 4/4; overflow: hidden; background-color: hsl(var(--muted)); }
.product-card-img img { width: 100%; height: 100%; object-fit: cover; }
.product-card-body { padding: 1.25rem 1.5rem; }
.product-card-category { font-size: .75rem; color: hsl(var(--gold)); letter-spacing: .05em; margin-bottom: .25rem; }
.product-card-title {
  font-family: 'Cormorant Garamond','Noto Serif SC',serif;
  font-size: 1.125rem; font-weight: 600; letter-spacing: .05em;
  margin-bottom: .5rem; transition: color .3s;
}
.product-card:hover .product-card-title { color: hsl(var(--gold)); }
.product-card-desc { font-size: .875rem; color: hsl(var(--muted-foreground)); }
.product-card-link {
  margin-top: 1rem; display: flex; align-items: center;
  font-size: .75rem; color: hsl(var(--gold) / .7);
  letter-spacing: .05em;
}
/* Category card */
.cat-card { display: block; position: relative; overflow: hidden; background-color: hsl(var(--card)); border: 1px solid hsl(var(--border)); transition: border-color .3s; }
.cat-card:hover { border-color: hsl(var(--gold)); }
.cat-card-img { aspect-ratio: 1; overflow: hidden; }
.cat-card-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, hsl(var(--accent) / .8), hsl(var(--accent) / .2), transparent); }
.cat-card-label { position: absolute; bottom: 0; left: 0; right: 0; padding: .75rem 1rem; }
.cat-card-name { font-family: 'Cormorant Garamond','Noto Serif SC',serif; font-size: 1.125rem; font-weight: 600; color: hsl(var(--accent-foreground)); letter-spacing: .05em; }
.cat-card-line { width: 0; height: 1px; background: linear-gradient(135deg, hsl(var(--gold-dark)), hsl(var(--gold)), hsl(var(--gold-light))); transition: width .5s; margin-top: .25rem; }
.cat-card:hover .cat-card-line { width: 100%; }
/* 卡片 hover 图片放大 */
.cat-card-img img,
.product-card-img img {
  transition: transform 0.7s;
}
.cat-card:hover .cat-card-img img,
.product-card:hover .product-card-img img {
  transform: scale(1.1);
}
/* Advantage card */
.adv-number {
  font-family: 'Cormorant Garamond','Noto Serif SC',serif;
  font-size: 3rem; font-weight: 700;
  background: linear-gradient(135deg, hsl(var(--gold-dark)), hsl(var(--gold)), hsl(var(--gold-light)));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; display: block; margin-bottom: 1rem;
}
@media (min-width: 768px) { .adv-number { font-size: 3.75rem; } }
/* Timeline */
.timeline { position: relative; padding: 1rem 0; }
.timeline-line {
  position: absolute; left: 1rem; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, hsl(var(--gold) / .6) 0%, hsl(var(--gold) / .45) 65%, hsl(var(--gold) / .15) 85%, transparent 100%);
}
.timeline-item { position: relative; padding-bottom: 3rem; padding-left: 3rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute; left: 1rem; top: 0; width: 1rem; height: 1rem;
  border-radius: 9999px; background: hsl(var(--gold)); border: 3px solid hsl(var(--background));
  transform: translateX(-50%); box-shadow: 0 0 0 2px hsl(var(--gold) / .3);
}
.timeline-card {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  padding: 1.25rem 1.5rem; position: relative;
  transition: border-color .3s;
}
.timeline-card:hover { border-color: hsl(var(--gold)); }
.timeline-year {
  font-family: 'Cormorant Garamond','Noto Serif SC',serif;
  font-size: 1.5rem; font-weight: 700;
  background: linear-gradient(135deg, hsl(var(--gold-dark)), hsl(var(--gold)), hsl(var(--gold-light)));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.timeline-event { font-size: 1rem; font-weight: 600; letter-spacing: .05em; margin: .25rem 0; }
.timeline-desc { font-size: .875rem; color: hsl(var(--muted-foreground)); line-height: 1.625; }
@media (min-width: 768px) {
  .timeline-line { left: 50%; }
  .timeline-item { padding-left: 0; }
  .timeline-card { width: calc(50% - 2rem); }
  .timeline-card-left { margin-right: auto; text-align: right; }
  .timeline-card-right { margin-left: calc(50% + 2rem); text-align: left; }
  .timeline-dot { left: 50%; top: 1.25rem; }
  .hero-title { font-size: 4.5rem; }
}
@media (min-width: 1024px) {
  .hero-title { font-size: 6rem; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3,1fr); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4,1fr); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5,1fr); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6,1fr); }
}
@media (min-width: 640px) { .sm\:flex-row { flex-direction: row; } }
@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:flex-1 { flex: 1 1 0%; }
  .md\:min-w-0 { min-width: 0; }
  .md\:hidden { display: none; }
  .md\:h-20 { height: 5rem; }
  .md\:h-5 { height: 1.25rem; }
  .md\:h-8 { height: 2rem; }
  .md\:h-10 { height: 2.5rem; }
  .md\:h-12 { height: 3rem; }
  .md\:h-16 { height: 4rem; }
  .md\:w-8 { width: 2rem; }
  .md\:w-10 { width: 2.5rem; }
  .md\:w-12 { width: 3rem; }
  .md\:w-16 { width: 4rem; }
  .md\:w-56 { width: 14rem; }
  .md\:w-52 { width: 13rem; }
  .md\:w-20 { width: 5rem; }
  .md\:w-5 { width: 1.25rem; }
  .md\:gap-6 { gap: 1.5rem; }
  .md\:gap-3 { gap: .75rem; }
  .md\:gap-4 { gap: 1rem; }
  .md\:gap-8 { gap: 2rem; }
  .md\:gap-12 { gap: 3rem; }
  .md\:gap-16 { gap: 4rem; }
  .md\:aspect-match-right { aspect-ratio: 412 / 468; }
  .md\:p-6 { padding: 1.5rem; }
  .md\:p-8 { padding: 2rem; }
  .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .md\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }
  .md\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .md\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
  .md\:py-12 { padding-top: 3rem; padding-bottom: 3rem; }
  .md\:mb-12 { margin-bottom: 3rem; }
  .md\:mb-0 { margin-bottom: 0; }
  .md\:text-xl { font-size: 1.25rem; }
  .md\:text-2xl { font-size: 1.5rem; }
  .md\:text-4xl { font-size: 2.25rem; }
  .md\:text-5xl { font-size: 3rem; }
  .md\:text-6xl { font-size: 3.75rem; }
  .md\:text-lg { font-size: 1.125rem; }
  .md\:text-base { font-size: 1rem; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2,1fr); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3,1fr); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4,1fr); }
  .md\:grid-cols-5 { grid-template-columns: repeat(5,1fr); }
  .md\:grid-cols-6 { grid-template-columns: repeat(6,1fr); }
  .md\:flex-row { flex-direction: row; }
  .md\:items-center { align-items: center; }
  .md\:items-end { align-items: flex-end; }
  .md\:text-left { text-align: left; }
  .md\:block { display: block; }
  .md\:pt-20 { padding-top: 5rem; }
  .md\:pb-24 { padding-bottom: 6rem; }
}
/* Page banner */
.page-banner {
  position: relative; height: 50vh; min-height: 20rem;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.page-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-banner .overlay { position: absolute; inset: 0; background: hsl(var(--accent) / .7); }
.page-banner .content { position: relative; z-index: 10; text-align: center; color: hsl(var(--accent-foreground)); }
/* Form */
input, textarea {
  width: 100%; padding: .75rem 1rem; font-size: .875rem;
  background-color: hsl(var(--muted)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius); color: hsl(var(--foreground));
  font-family: inherit; transition: border-color .3s; outline: none;
}
input { display: block; height: 3rem; }
input:focus, textarea:focus, select:focus { border-color: hsl(var(--gold)); }
textarea { resize: vertical; min-height: 7rem; }
select {
  width: 100%; height: 3rem; padding: .75rem 2rem .75rem 1rem; font-size: .875rem;
  background-color: hsl(var(--muted)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius); color: hsl(var(--foreground));
  font-family: inherit; transition: border-color .3s; outline: none;
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 1rem;
}
label { font-size: .875rem; letter-spacing: .05em; display: block; margin-bottom: .375rem; }
.form-error { font-size: .75rem; color: hsl(var(--destructive)); margin-top: .25rem; }
/* Footer */
.footer { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); padding: 4rem 0 4rem; }
/* Mobile nav */
.mobile-nav-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.5); display: none; }
.mobile-nav-overlay.active { display: block; }
.mobile-nav {
  position: fixed; top: 0; right: -100%; width: 75%; max-width: 24rem;
  height: 100%; z-index: 70; background-color: hsl(var(--background));
  transition: right .3s; padding: 2rem 1.5rem; overflow-y: auto;
}
.mobile-nav.active { right: 0; }
.mobile-nav-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid hsl(var(--border));
}
.mobile-nav-link {
  display: block; padding: .75rem 0; font-size: 1rem;
  letter-spacing: .05em; color: hsl(var(--foreground));
  border-bottom: 1px solid hsl(var(--border)); transition: color .3s;
}
.mobile-nav-link:hover, .mobile-nav-link.active { color: hsl(var(--gold)); }
/* Filter buttons */
.filter-btn {
  padding: .5rem 1.25rem; font-size: .875rem; letter-spacing: .05em;
  background: transparent; border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground)); cursor: pointer;
  transition: all .3s; border-radius: calc(var(--radius)); font-family: inherit;
}
.filter-btn:hover, .filter-btn.active { border-color: hsl(var(--gold)); color: hsl(var(--gold)); }
/* Value icon card */
.value-card {
  background-color: hsl(var(--card)); border: 1px solid hsl(var(--border));
  padding: 1.5rem; text-align: center;
  transition: border-color .3s;
}
@media (min-width: 768px) { .value-card { padding: 2rem; } }
.value-icon-wrap {
  width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem;
  border-radius: 9999px; border: 1px solid hsl(var(--gold) / .3);
  display: flex; align-items: center; justify-content: center;
  color: hsl(var(--gold));
}
.value-title { font-family: 'Cormorant Garamond','Noto Serif SC',serif; font-size: 1.125rem; font-weight: 600; letter-spacing: .05em; margin-bottom: .5rem; }
.value-desc { font-size: .875rem; color: hsl(var(--muted-foreground)); line-height: 1.625; }
/* Contact info items */
.contact-item { display: flex; align-items: flex-start; gap: 1rem; }
.contact-icon {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  border: 1px solid hsl(var(--gold) / .3);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: hsl(var(--gold));
}
.contact-label { font-size: .75rem; color: hsl(var(--muted-foreground)); letter-spacing: .05em; margin-bottom: .25rem; }
.contact-value { font-size: .875rem; font-weight: 500; }
/* Social icons */
.social-icon {
  width: 2.25rem; height: 2.25rem; border-radius: 9999px;
  border: 1px solid hsl(var(--border));
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; color: hsl(var(--muted-foreground));
  transition: all .3s; cursor: pointer;
}
.social-icon:hover { border-color: hsl(var(--gold)); color: hsl(var(--gold)); }
/* Value badge */
.value-badge {
  position: absolute; bottom: -1rem; left: -1rem;
  background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground));
  padding: 1rem 1.5rem; display: none;
}
@media (min-width: 768px) { .value-badge { display: block; } }
.value-badge-number {
  font-family: 'Cormorant Garamond','Noto Serif SC',serif;
  font-size: 1.875rem; font-weight: 700;
  background: linear-gradient(135deg, hsl(var(--gold-dark)), hsl(var(--gold)), hsl(var(--gold-light)));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.value-badge-text { font-size: .75rem; letter-spacing: .05em; margin-top: .25rem; }
/* Nav active state */
.nav-link {
  font-size: .875rem; letter-spacing: .05em;
  transition: color .3s; padding: .5rem 0;
  position: relative;
}
.nav-link:hover, .nav-link.active { color: hsl(var(--gold)); }
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(135deg, hsl(var(--gold-dark)), hsl(var(--gold)), hsl(var(--gold-light)));
}
/* 滚动动画 - 双类选择器(0,2,0)放在末尾，防止被 .cat-card/.product-card 覆盖 */
.scroll-hidden.scroll-fade-up {
  opacity: 0;
  transform: translateY(1.5rem);
}
.scroll-hidden.scroll-fade-right {
  opacity: 0;
  transform: translateX(-1.5rem);
}
.scroll-hidden.scroll-fade-left {
  opacity: 0;
  transform: translateX(1.5rem);
}
.scroll-hidden.scroll-visible {
  opacity: 1;
  transform: translate(0);
  transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 页面加载动画 - 居中转圈圆点 */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--background));
  pointer-events: none;
}
body.page-ready #page-loader {
  animation: loader-fade-out 0.5s ease-out forwards;
}
.loader-spinner {
  position: relative;
  width: 40px;
  height: 40px;
}
.loader-spinner span {
  position: absolute;
  top: 0; left: 50%;
  width: 6px; height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: hsl(var(--gold));
  transform-origin: 50% 20px;
  animation: loader-dot-spin 1.2s ease-in-out infinite;
}
.loader-spinner span:nth-child(1)  { transform: rotate(0deg);    animation-delay: 0s; }
.loader-spinner span:nth-child(2)  { transform: rotate(45deg);   animation-delay: -0.15s; }
.loader-spinner span:nth-child(3)  { transform: rotate(90deg);   animation-delay: -0.3s; }
.loader-spinner span:nth-child(4)  { transform: rotate(135deg);  animation-delay: -0.45s; }
.loader-spinner span:nth-child(5)  { transform: rotate(180deg);  animation-delay: -0.6s; }
.loader-spinner span:nth-child(6)  { transform: rotate(225deg);  animation-delay: -0.75s; }
.loader-spinner span:nth-child(7)  { transform: rotate(270deg);  animation-delay: -0.9s; }
.loader-spinner span:nth-child(8)  { transform: rotate(315deg);  animation-delay: -1.05s; }
@keyframes loader-dot-spin {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 1; }
}
@keyframes loader-fade-out {
  to { opacity: 0; visibility: hidden; }
}

/* 页面内容淡入/淡出 */
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes page-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}
main {
  opacity: 0;
}
body.page-ready main {
  animation: page-fade-in 0.4s 0.1s ease-out both;
}
body.page-leaving main {
  animation: page-fade-out 0.6s ease-in forwards;
}
.brand-strength-swiper {
  overflow: hidden;
}
.brand-strength-swiper .swiper-slide {
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  transition: border-color .3s;
  cursor: pointer;
}
.brand-strength-swiper .swiper-slide:hover {
  border-color: hsl(var(--gold));
}
.brand-strength-swiper .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .5s;
}
.brand-strength-swiper .swiper-slide:hover img {
  transform: scale(1.05);
}
.brand-strength-pagination {
  position: relative;
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 2.5rem;
}
.brand-strength-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: hsl(var(--gold) / .4);
  opacity: 1;
}
.brand-strength-pagination .swiper-pagination-bullet-active {
  background: hsl(var(--gold));
}
@media (min-width: 768px) {
  .brand-strength-pagination {
    gap: .75rem;
    margin-top: 3rem;
  }
  .brand-strength-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
  }
}