* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:-apple-system,"PingFang SC","Helvetica Neue","SF Pro Display",sans-serif;
  color:#1a1a1a;
  background:#000;
  overflow-x:hidden;
}

/* ===== Scroll Snap Container ===== */
.snap-container {
  scroll-snap-type: y proximity;
  overflow-y: scroll;
  height: 100vh;
  scroll-behavior: smooth;
}
.snap-section {
  scroll-snap-align: start;
  min-height: 100vh;
  position: relative;
}

/* ===== 导航栏 ===== */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:0 50px; height:56px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .4s;
}
.nav.scrolled { background:rgba(0,0,0,0.92); }
.nav-logo {
  font-size:19px; font-weight:700; color:#fff;
  letter-spacing:2px;
  background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,.7) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.nav-links { display:flex; gap:36px; }
.nav-links a {
  color:rgba(255,255,255,.65); text-decoration:none;
  font-size:13px; font-weight:500; letter-spacing:.5px;
  transition:color .25s; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:1.5px; background:#fff; border-radius:1px;
  transform:scaleX(0); transition:transform .25s;
}
.nav-links a:hover { color:#fff; }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-right { display:flex; gap:18px; align-items:center; }
.nav-right a {
  color:rgba(255,255,255,.7); text-decoration:none;
  font-size:13px; font-weight:500; transition:color .25s;
}
.nav-right a:hover { color:#fff; }

/* ===== Slide-in Animations ===== */
.slide-in {
  opacity:0;
  transition:opacity .8s cubic-bezier(.25,.46,.45,.94),
              transform .8s cubic-bezier(.25,.46,.45,.94);
}
.slide-from-left {
  transform:translateX(-80px);
}
.slide-from-right {
  transform:translateX(80px);
}
.slide-from-bottom {
  transform:translateY(60px);
}
.slide-from-top {
  transform:translateY(-40px);
}
.slide-in.visible {
  opacity:1;
  transform:translateX(0) translateY(0);
}
/* Stagger children */
.stagger > .slide-in:nth-child(1) { transition-delay:.05s; }
.stagger > .slide-in:nth-child(2) { transition-delay:.15s; }
.stagger > .slide-in:nth-child(3) { transition-delay:.25s; }
.stagger > .slide-in:nth-child(4) { transition-delay:.35s; }
.stagger > .slide-in:nth-child(5) { transition-delay:.45s; }

/* ===== Hero Section ===== */
.hero {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(180deg, #050505 0%, #0d1b2a 40%, #1b2838 70%, #0d1b2a 100%);
}
/* Animated gradient orbs */
.hero-orb {
  position:absolute; border-radius:50%; filter:blur(100px); opacity:.25;
  animation:float 12s ease-in-out infinite;
}
.hero-orb-1 { width:500px; height:500px; top:-100px; left:-100px; background:#386641; animation-delay:0s; }
.hero-orb-2 { width:400px; height:400px; bottom:-80px; right:-80px; background:#4a7c59; animation-delay:-4s; }
.hero-orb-3 { width:300px; height:300px; top:50%; left:50%; transform:translate(-50%,-50%); background:#2d5234; animation-delay:-8s; }
@keyframes float {
  0%,100% { transform:translate(0,0) scale(1); }
  33% { transform:translate(30px,-20px) scale(1.05); }
  66% { transform:translate(-20px,15px) scale(.95); }
}
.hero-content {
  position:relative; z-index:2; max-width:860px; padding:0 24px;
}
.hero-eyebrow {
  font-size:13px; letter-spacing:6px; text-transform:uppercase;
  color:rgba(255,255,255,.35); margin-bottom:20px; font-weight:400;
}
.hero-title {
  font-size:clamp(44px,9vw,88px); font-weight:700; color:#fff;
  line-height:1.05; margin-bottom:24px; letter-spacing:-3px;
  background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.7) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-subtitle {
  font-size:clamp(16px,2.2vw,22px); color:rgba(255,255,255,.45);
  line-height:1.6; margin-bottom:48px; font-weight:300; max-width:560px;
  margin-left:auto; margin-right:auto;
}
.hero-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 40px; border-radius:980px; font-size:16px; font-weight:500;
  text-decoration:none; transition:all .3s; letter-spacing:.3px;
}
.hero-btn-primary {
  background:linear-gradient(135deg,#386641 0%,#4a7c59 100%);
  color:#fff; box-shadow:0 4px 24px rgba(56,102,65,.3);
}
.hero-btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(56,102,65,.45);
}
.hero-btn-secondary {
  background:rgba(255,255,255,.08); color:#fff;
  border:1.5px solid rgba(255,255,255,.15);
  backdrop-filter:blur(8px);
}
.hero-btn-secondary:hover {
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.3);
}
.hero-scroll {
  position:absolute; bottom:48px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(255,255,255,.3); font-size:11px; letter-spacing:3px;
  text-transform:uppercase;
}
.hero-scroll-line {
  width:1px; height:40px; background:linear-gradient(180deg,rgba(255,255,255,.3),transparent);
  animation:scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { transform:scaleY(0); transform-origin:top; }
  50% { transform:scaleY(1); transform-origin:top; }
  51% { transform:scaleY(1); transform-origin:bottom; }
  100% { transform:scaleY(0); transform-origin:bottom; }
}

/* ===== Product Showcase ===== */
.showcase {
  padding:100px 50px; background:#fff;
  display:flex; flex-direction:column; justify-content:center;
}
.showcase-header { text-align:center; margin-bottom:60px; }
.showcase-eyebrow {
  font-size:12px; letter-spacing:4px; text-transform:uppercase;
  color:#86868b; margin-bottom:12px; font-weight:500;
}
.showcase-title {
  font-size:clamp(34px,5.5vw,60px); font-weight:700;
  letter-spacing:-1.5px; line-height:1.1;
  background:linear-gradient(135deg,#1a1a1a 0%,#333 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.showcase-subtitle {
  font-size:18px; color:#86868b; margin-top:18px; font-weight:300;
}
.products-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
  max-width:1200px; margin:0 auto;
}
.product-card {
  background:#f5f5f7; border-radius:24px; overflow:hidden;
  transition:transform .5s cubic-bezier(.25,.46,.45,.94),
             box-shadow .5s cubic-bezier(.25,.46,.45,.94);
  cursor:pointer;
}
.product-card:hover {
  transform:translateY(-12px) scale(1.01);
  box-shadow:0 24px 64px rgba(0,0,0,.1);
}
.product-img {
  width:100%; height:340px;
  display:flex; align-items:center; justify-content:center;
  font-size:80px; position:relative; overflow:hidden;
}
.product-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.03) 100%);
}
.product-info { padding:28px; }
.product-tag {
  display:inline-block; padding:5px 14px;
  background:linear-gradient(135deg,#386641,#4a7c59);
  color:#fff; border-radius:20px; font-size:11px;
  font-weight:600; letter-spacing:1px; margin-bottom:12px;
}
.product-name { font-size:21px; font-weight:600; margin-bottom:8px; letter-spacing:-.3px; }
.product-desc { font-size:14px; color:#86868b; line-height:1.6; margin-bottom:16px; }
.product-price { font-size:20px; font-weight:700; color:#1a1a1a; }
.product-price .currency { font-size:14px; font-weight:400; color:#86868b; }

/* ===== Feature Section ===== */
.features {
  padding:140px 50px;
  background:linear-gradient(180deg,#050505 0%,#0a1520 50%,#050505 100%);
  color:#fff;
  display:flex; flex-direction:column; justify-content:center;
}
.features-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:32px;
  max-width:1200px; margin:0 auto;
}
.feature-card {
  text-align:center; padding:48px 28px;
  border-radius:20px; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  transition:all .4s;
}
.feature-card:hover {
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  transform:translateY(-6px);
}
.feature-icon {
  width:64px; height:64px; border-radius:18px;
  background:linear-gradient(135deg,rgba(56,102,65,.2),rgba(74,124,89,.1));
  display:flex; align-items:center; justify-content:center;
  font-size:30px; margin:0 auto 24px;
  border:1px solid rgba(56,102,65,.2);
}
.feature-title { font-size:18px; font-weight:600; margin-bottom:10px; letter-spacing:-.3px; }
.feature-desc { font-size:14px; color:rgba(255,255,255,.4); line-height:1.7; }

/* ===== Member Section ===== */
.member-section {
  padding:140px 50px;
  background:linear-gradient(180deg,#f8f8fa 0%,#f0f0f2 100%);
  text-align:center;
  display:flex; flex-direction:column; justify-content:center;
}
.member-title {
  font-size:clamp(34px,5.5vw,60px); font-weight:700;
  letter-spacing:-1.5px; margin-bottom:18px;
  background:linear-gradient(135deg,#1a1a1a 0%,#333 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.member-subtitle {
  font-size:18px; color:#86868b; margin-bottom:56px; font-weight:300;
  max-width:600px; margin-left:auto; margin-right:auto; line-height:1.6;
}
.member-cards {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
  max-width:960px; margin:0 auto 56px;
}
.member-card {
  background:#fff; border-radius:24px; padding:40px 28px; text-align:center;
  border:1px solid rgba(0,0,0,.04);
  transition:all .4s cubic-bezier(.25,.46,.45,.94);
}
.member-card:hover {
  transform:translateY(-8px);
  box-shadow:0 20px 60px rgba(0,0,0,.06);
}
.member-card-icon {
  width:72px; height:72px; border-radius:20px;
  background:linear-gradient(135deg,#e8f5e9,#f1f8e9);
  display:flex; align-items:center; justify-content:center;
  font-size:32px; margin:0 auto 20px;
}
.member-card-title { font-size:19px; font-weight:600; margin-bottom:10px; letter-spacing:-.3px; }
.member-card-desc { font-size:14px; color:#86868b; line-height:1.6; }
.member-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:10px 28px;
  background:linear-gradient(135deg,#386641 0%,#4a7c59 100%);
  color:#fff; border-radius:980px; font-size:17px; font-weight:500;
  text-decoration:none; transition:all .3s;
  box-shadow:0 4px 16px rgba(56,102,65,.25);
  letter-spacing:.3px;
  margin: 30px auto 0;
  width: fit-content;
}
.member-btn:hover {
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 8px 36px rgba(56,102,65,.4);
}
.member-btn svg { width:12px; height:12px; transition:transform .3s; }
.member-btn:hover svg { transform:translateX(3px); }

/* ===== Stores Section ===== */
.stores {
  padding:140px 50px; background:#fff;
  display:flex; flex-direction:column; justify-content:center;
}
.stores-header { text-align:center; margin-bottom:64px; }
.stores-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
  max-width:1100px; margin:0 auto;
}
.store-card {
  background:#f5f5f7; border-radius:20px; padding:32px; text-align:center;
  transition:all .4s; position:relative; overflow:hidden;
}
.store-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,#386641,#4a7c59);
  transform:scaleX(0); transition:transform .4s;
  transform-origin:left;
}
.store-card:hover { transform:translateY(-6px); }
.store-card:hover::before { transform:scaleX(1); }
.store-icon {
  width:48px; height:48px; border-radius:14px;
  background:linear-gradient(135deg,#e8f5e9,#f1f8e9);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; margin:0 auto 16px;
}
.store-name { font-size:18px; font-weight:600; margin-bottom:10px; letter-spacing:-.3px; }
.store-addr { font-size:14px; color:#86868b; line-height:1.6; }
.store-hours {
  font-size:13px; color:#386641; margin-top:12px; font-weight:600;
  display:inline-flex; align-items:center; gap:4px;
}

/* ===== Footer ===== */
.site-footer {
  padding:64px 50px 32px;
  background:linear-gradient(180deg,#f5f5f7,#ededf0);
  border-top:1px solid #e0e0e0;
}
.footer-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:36px;
  max-width:1100px; margin:0 auto 44px;
}
.footer-col h4 {
  font-size:13px; font-weight:600; color:#1a1a1a;
  margin-bottom:16px; letter-spacing:.5px;
}
.footer-col a {
  display:block; font-size:13px; color:#86868b;
  text-decoration:none; margin-bottom:10px; transition:color .2s;
}
.footer-col a:hover { color:#1a1a1a; }
.footer-bottom {
  text-align:center; padding-top:28px;
  border-top:1px solid #e0e0e0; font-size:12px; color:#86868b;
}
.footer-legal { display:flex; gap:18px; justify-content:center; margin-top:12px; flex-wrap:wrap; }
.footer-legal a { color:#86868b; text-decoration:none; font-size:12px; transition:color .2s; }
.footer-legal a:hover { color:#1a1a1a; }

/* ===== Responsive ===== */
@media (max-width:1024px) {
  .products-grid { grid-template-columns:repeat(2, 1fr); }
  .features-grid { grid-template-columns:repeat(2, 1fr); }
  .stores-grid { grid-template-columns:repeat(2, 1fr); }
  .footer-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:768px) {
  .snap-container { scroll-snap-type:none; }
  .snap-section { min-height:auto; }
  .nav { padding:0 16px; }
  .nav-links { display:none; }
  .hero { min-height:100vh; padding:100px 0 60px; }
  .hero-title { letter-spacing:-1px; }
  .hero-btns { flex-direction:column; align-items:center; gap:12px; }
  .hero-btn { width:100%; max-width:300px; text-align:center; }
  .showcase, .features, .member-section, .stores { padding:80px 20px; }
  .site-footer { padding:48px 20px 24px; }
  .products-grid { grid-template-columns:1fr; gap:20px; }
  .product-img { height:260px; }
  .features-grid { grid-template-columns:1fr; gap:16px; }
  .member-cards { grid-template-columns:1fr; gap:16px; }
  .stores-grid { grid-template-columns:1fr; gap:16px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:24px; }
  .slide-from-left, .slide-from-right, .slide-from-bottom, .slide-from-top {
    transform:translateY(30px);
  }
}
@media (max-width:480px) {
  .showcase, .features, .member-section, .stores { padding:60px 16px; }
  .site-footer { padding:36px 16px 20px; }
  .product-card { border-radius:18px; }
  .product-info { padding:20px; }
  .product-name { font-size:18px; }
  .feature-card { padding:32px 16px; }
  .member-card { padding:32px 20px; }
  .footer-grid { grid-template-columns:1fr; gap:20px; }
}