/* ===== Reset & Base ===== */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ font-family:'Inter','Noto Serif SC',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif; background:#0d0b09; color:#d4cdc3; -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.7; }
img{ max-width:100%; height:auto; display:block; }
a{ text-decoration:none; color:inherit; }
.container{ max-width:1200px; margin:0 auto; padding:0 40px; }
@media(max-width:768px){ .container{ padding:0 20px; } }
@media(max-width:480px){ .container{ padding:0 16px; } }

/* ===== Top Navigation ===== */
.top-bar{ position:fixed; top:0; left:0; right:0; z-index:1000; padding:20px 0; background:linear-gradient(180deg,rgba(13,11,9,0.98) 0%,rgba(13,11,9,0) 100%); transition:background .4s; }
.top-bar.scrolled{ background:rgba(13,11,9,0.95); backdrop-filter:blur(20px); }
.top-bar .container{ display:flex; justify-content:space-between; align-items:center; }
.logo-holder{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.logo-mark{ width:36px; height:36px; border:1.5px solid #c9a96e; display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:14px; color:#c9a96e; letter-spacing:2px; }
.logo-text{ font-family:'Playfair Display',serif; font-weight:400; font-size:1.2rem; letter-spacing:6px; color:#d4cdc3; line-height:1; }
.logo-sub{ display:block; font-size:0.5rem; letter-spacing:4px; color:#7d7266; font-weight:300; font-family:'Inter',sans-serif; margin-top:2px; }
/* 汉堡菜单按钮 */
.hamburger{ display:none; flex-direction:column; justify-content:center; align-items:center; width:40px; height:40px; cursor:pointer; z-index:1001; background:none; border:none; padding:0; gap:0; }
.hamburger span{ display:block; width:22px; height:1.5px; background:#c9a96e; transition:all .3s; margin:0; }
.hamburger span+span{ margin-top:6px; }
.hamburger span+span+span{ margin-top:6px; }
.hamburger.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
nav{ display:flex; align-items:center; gap:40px; transition:opacity .3s,transform .3s; }
nav a{ font-size:0.7rem; letter-spacing:3px; color:#a09888; transition:color .3s; position:relative; text-transform:uppercase; white-space:nowrap; }
nav a:hover{ color:#c9a96e; }
nav a::after{ content:''; position:absolute; bottom:-6px; left:0; width:0; height:1px; background:#c9a96e; transition:width .3s; }
nav a:hover::after{ width:100%; }
@media(max-width:768px){ .hamburger{ display:flex; } nav{ position:fixed; top:0; right:-280px; width:260px; height:100vh; flex-direction:column; justify-content:center; gap:32px; background:rgba(13,11,9,0.98); backdrop-filter:blur(24px); padding:80px 32px; transition:right .4s cubic-bezier(0.22,1,0.36,1); z-index:999; } nav.open{ right:0; } nav a{ font-size:0.85rem; letter-spacing:4px; } nav a::after{ display:none; } }
@media(max-width:480px){ .top-bar{ padding:14px 0; } .logo-mark{ width:30px; height:30px; font-size:12px; } .logo-text{ font-size:1rem; letter-spacing:4px; } .logo-sub{ font-size:0.45rem; } }

/* ===== Hero ===== */
.hero{ min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; position:relative; padding:120px 0 80px; background:radial-gradient(ellipse at 50% 30%, #2c1810 0%, #0d0b09 60%); overflow:hidden; }
.hero::before{ content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='none' stroke='rgba(201,169,110,0.03)' stroke-width='0.5'/%3E%3C/svg%3E") repeat; pointer-events:none; }
.hero .shine{ position:absolute; top:-30%; left:50%; transform:translateX(-50%); width:800px; height:800px; background:radial-gradient(circle,rgba(201,169,110,0.08) 0%,transparent 60%); pointer-events:none; }
.hero-content{ position:relative; z-index:1; }
.hero .eyebrow{ font-size:0.6rem; letter-spacing:8px; color:#7d7266; margin-bottom:24px; font-weight:300; }
.hero h1{ font-family:'Playfair Display',serif; font-weight:400; font-size:4.2rem; letter-spacing:8px; color:#d4cdc3; line-height:1.15; margin-bottom:16px; }
.hero h1 .gold{ color:#c9a96e; font-style:italic; }
.hero .tagline{ font-size:0.85rem; color:#a09888; letter-spacing:6px; margin-bottom:12px; font-weight:300; }
.hero .gold-line{ width:60px; height:1px; background:#c9a96e; margin:24px auto; }
.hero .desc{ font-size:0.8rem; color:#7d7266; letter-spacing:2px; font-weight:300; max-width:500px; margin:0 auto 40px; }
.hero .cta-group{ display:flex; justify-content:center; gap:20px; }
.hero .btn-primary{ display:inline-block; padding:14px 40px; border:1px solid #c9a96e; color:#c9a96e; font-size:0.7rem; letter-spacing:4px; transition:all .4s; min-width:180px; text-align:center; }
.hero .btn-primary:hover{ background:#c9a96e; color:#0d0b09; }
.hero .btn-outline{ display:inline-block; padding:14px 40px; border:1px solid rgba(255,255,255,0.15); color:#a09888; font-size:0.7rem; letter-spacing:4px; transition:all .4s; min-width:180px; text-align:center; }
.hero .btn-outline:hover{ border-color:#c9a96e; color:#c9a96e; }
.scroll-hint{ position:absolute; bottom:40px; left:50%; transform:translateX(-50%); font-size:0.55rem; letter-spacing:4px; color:#5a5046; animation:float 2.5s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(10px); } }
@media(max-width:768px){ .hero{ padding:100px 0 60px; min-height:92vh; } .hero h1{ font-size:1.8rem; letter-spacing:4px; } .hero .cta-group{ flex-direction:column; align-items:center; } }
@media(max-width:480px){ .hero{ padding:80px 0 40px; min-height:90vh; } .hero h1{ font-size:1.5rem; letter-spacing:3px; } .hero .eyebrow{ font-size:0.5rem; letter-spacing:5px; margin-bottom:16px; } .hero .tagline{ font-size:0.7rem; letter-spacing:4px; } .hero .desc{ font-size:0.72rem; } .hero .btn-primary, .hero .btn-outline{ min-width:100%; padding:12px 32px; } .scroll-hint{ bottom:24px; font-size:0.5rem; } }

/* ===== Brand Story ===== */
.brand-story{ padding:120px 0; background:#0d0b09; position:relative; }
@media(max-width:480px){ .brand-story{ padding:60px 0; } .brand-story h2{ font-size:1.2rem; letter-spacing:4px; } .brand-story .story-text{ font-size:0.72rem; } .brand-story .honor-row{ gap:24px; } }
.brand-story::before{ content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:1px; height:80px; background:linear-gradient(180deg,transparent,#c9a96e); }
.brand-story .container{ max-width:720px; text-align:center; }
.brand-story .section-tag{ font-size:0.55rem; letter-spacing:6px; color:#5a5046; margin-bottom:16px; }
.brand-story h2{ font-family:'Noto Serif SC',serif; font-weight:200; font-size:1.6rem; letter-spacing:6px; color:#d4cdc3; margin-bottom:40px; }
.brand-story .story-text{ font-size:0.8rem; color:#a09888; letter-spacing:1.5px; line-height:2.2; }
.brand-story .story-text p{ margin-bottom:24px; }
.brand-story .story-text .hl{ color:#c9a96e; }
.brand-story .honor-row{ display:flex; justify-content:center; gap:60px; margin-top:48px; flex-wrap:wrap; }
.brand-story .honor-item{ text-align:center; }
.brand-story .honor-item .num{ font-family:'Playfair Display',serif; font-size:1.6rem; color:#c9a96e; font-weight:400; }
.brand-story .honor-item .label{ font-size:0.6rem; letter-spacing:3px; color:#5a5046; margin-top:6px; }

/* ===== Product Section ===== */
.product-section{ padding:100px 0; background:#12100d; }
@media(max-width:480px){ .product-section{ padding:60px 0; } .product-section .section-header h2{ font-size:1.1rem; } .product-card .info{ padding:16px 16px 20px; } .product-card .info h3{ font-size:0.85rem; } .product-card .img-wrap{ height:200px; } .product-card .info .price{ font-size:0.85rem; } }
.product-section .section-header{ text-align:center; margin-bottom:60px; }
.product-section .section-header .tag{ font-size:0.55rem; letter-spacing:6px; color:#5a5046; margin-bottom:12px; }
.product-section .section-header h2{ font-family:'Noto Serif SC',serif; font-weight:200; font-size:1.4rem; letter-spacing:6px; color:#d4cdc3; }
.product-section .section-header .gold-line{ width:40px; height:1px; background:#c9a96e; margin:16px auto; }
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.product-card{ background:#1a1613; border:1px solid rgba(201,169,110,0.08); overflow:hidden; transition:all .4s; }
.product-card:hover{ transform:translateY(-6px); border-color:rgba(201,169,110,0.25); }
.product-card .img-wrap{ height:300px; overflow:hidden; background:#1a1613; position:relative; }
.product-card .img-wrap img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; opacity:0.85; }
.product-card:hover .img-wrap img{ transform:scale(1.08); opacity:1; }
.product-card .info{ padding:24px 28px 28px; }
.product-card .info .cat{ font-size:0.55rem; letter-spacing:3px; color:#c9a96e; margin-bottom:8px; }
.product-card .info h3{ font-weight:400; font-size:0.95rem; letter-spacing:3px; color:#d4cdc3; margin-bottom:4px; }
.product-card .info .sub{ font-size:0.7rem; color:#7d7266; letter-spacing:1.5px; margin-bottom:8px; }
.product-card .info .notes{ font-size:0.65rem; color:#5a5046; letter-spacing:1px; }
.product-card .info .price{ font-family:'Playfair Display',serif; font-size:0.95rem; color:#c9a96e; margin-top:12px; letter-spacing:1px; }
@media(max-width:1024px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:768px){ .product-grid{ grid-template-columns:1fr; } .product-card .img-wrap{ height:240px; } }

/* ===== More Categories ===== */
.categories{ padding:80px 0; background:#0d0b09; }
@media(max-width:480px){ .categories{ padding:48px 0; } .categories .section-header h2{ font-size:1.1rem; } .cat-card .c-info{ padding:16px; } .cat-card .c-info h3{ font-size:0.8rem; } .cat-card .c-info p{ font-size:0.65rem; } .cat-card .c-img{ min-height:140px; } }
.categories .section-header{ text-align:center; margin-bottom:48px; }
.categories .section-header .tag{ font-size:0.55rem; letter-spacing:6px; color:#5a5046; margin-bottom:12px; }
.categories .section-header h2{ font-family:'Noto Serif SC',serif; font-weight:200; font-size:1.4rem; letter-spacing:6px; color:#d4cdc3; }
.cat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.cat-card{ display:flex; background:#1a1613; border:1px solid rgba(255,255,255,0.04); overflow:hidden; transition:all .4s; }
.cat-card:hover{ border-color:rgba(201,169,110,0.2); }
.cat-card .c-img{ width:40%; min-height:200px; overflow:hidden; }
.cat-card .c-img img{ width:100%; height:100%; object-fit:cover; }
.cat-card .c-info{ padding:28px; flex:1; display:flex; flex-direction:column; justify-content:center; }
.cat-card .c-info h3{ font-weight:400; font-size:0.9rem; letter-spacing:3px; color:#d4cdc3; margin-bottom:6px; }
.cat-card .c-info p{ font-size:0.72rem; color:#7d7266; line-height:1.8; letter-spacing:1px; }
.cat-card .c-info .arrow{ margin-top:12px; font-size:0.6rem; color:#c9a96e; letter-spacing:2px; }
@media(max-width:768px){ .cat-grid{ grid-template-columns:1fr; } .cat-card{ flex-direction:column; } .cat-card .c-img{ width:100%; min-height:180px; } }

/* ===== Features ===== */
.features{ padding:80px 0; background:#12100d; border-top:1px solid rgba(201,169,110,0.06); border-bottom:1px solid rgba(201,169,110,0.06); }
@media(max-width:480px){ .features{ padding:48px 0; } .features .grid{ gap:16px; } .features .item .icon{ font-size:1.1rem; } }
.features .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:center; }
.features .item .icon{ font-size:1.4rem; margin-bottom:10px; color:#c9a96e; }
.features .item h4{ font-weight:400; font-size:0.7rem; letter-spacing:3px; color:#d4cdc3; margin-bottom:4px; }
.features .item p{ font-size:0.62rem; color:#5a5046; letter-spacing:1.5px; }
@media(max-width:768px){ .features .grid{ grid-template-columns:repeat(2,1fr); gap:24px; } }

/* ===== Footer ===== */
footer{ background:#0d0b09; padding:60px 0 32px; border-top:1px solid rgba(201,169,110,0.08); }
@media(max-width:480px){ footer{ padding:40px 0 24px; } }
footer .container{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; }
footer h4{ font-weight:400; font-size:0.65rem; letter-spacing:4px; color:#5a5046; margin-bottom:16px; text-transform:uppercase; }
footer .brand{ font-family:'Playfair Display',serif; font-size:1rem; letter-spacing:4px; color:#c9a96e; margin-bottom:12px; }
footer .desc{ font-size:0.7rem; color:#5a5046; line-height:1.8; letter-spacing:1px; }
footer a{ color:#7d7266; font-size:0.68rem; letter-spacing:2px; line-height:2.4; display:block; transition:color .3s; }
footer a:hover{ color:#c9a96e; }
footer .bottom{ grid-column:1/-1; border-top:1px solid rgba(255,255,255,0.04); padding-top:20px; margin-top:8px; display:flex; justify-content:space-between; font-size:0.6rem; color:#5a5046; letter-spacing:1.5px; }
@media(max-width:768px){ footer .container{ grid-template-columns:1fr; gap:32px; } footer .bottom{ flex-direction:column; gap:8px; } }