*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --black:#1a1a1a;--cream:#f5f0eb;--terra:#c4704b;
  --stone:#8a7e74;--blush:#e8d5c4;
  --serif:Georgia,"Noto Serif SC",serif;
  --sans:"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--cream);color:var(--black);font-family:var(--sans);
  overflow-x:hidden;line-height:1.7}

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

.hero{min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;padding:60px 8vw}
.hero-inner{display:flex;align-items:center;gap:10vw;max-width:1200px;margin:0 auto;width:100%}
.hero-brand{position:relative}
.hero-line{display:block;width:0;height:1px;background:var(--black);
  margin-bottom:24px;animation:drawLine 1s .3s forwards}
@keyframes drawLine{to{width:120px}}
.hero-title{font-family:var(--serif);font-size:clamp(4rem,10vw,8rem);
  letter-spacing:.15em;line-height:1;opacity:0;
  animation:fadeUp .8s .1s forwards}
.hero-sub{font-size:.85rem;letter-spacing:.35em;text-transform:uppercase;
  color:var(--stone);margin-top:12px;opacity:0;animation:fadeUp .8s .5s forwards}
.hero-right{max-width:380px;opacity:0;animation:fadeUp .8s .7s forwards}
.hero-slogan{font-family:var(--serif);font-size:clamp(1.2rem,2.5vw,1.6rem);
  line-height:1.8;margin-bottom:32px;color:var(--black)}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}

.cta{display:inline-block;padding:14px 36px;font-size:.85rem;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  font-family:var(--sans);transition:all .35s;cursor:pointer}
.cta-buy{background:var(--terra);color:var(--cream);border:1px solid var(--terra)}
.cta-buy:hover{background:var(--cream);color:var(--terra)}
.cta-ghost{background:transparent;color:var(--black);border:1px solid var(--black)}
.cta-ghost:hover{background:var(--black);color:var(--cream)}
.cta-primary{background:var(--terra);color:var(--cream);border:1px solid var(--terra)}
.cta-primary:hover{background:transparent;color:var(--terra)}

.hero-scroll{text-align:center;margin-top:auto;font-size:1.4rem;
  color:var(--stone);opacity:0;animation:fadeUp .8s 1.2s forwards}

.dot-sep{display:block;text-align:center;font-size:2rem;color:var(--stone);
  padding:20px 0;line-height:1}

.features{padding:100px 8vw;max-width:1200px;margin:0 auto}
.features-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}
.cards-stack{display:flex;flex-direction:column;gap:28px}
.card{border:1px solid var(--black);padding:48px 36px;
  transition:background .4s,color .4s,transform .35s;
  opacity:0;transform:translateY(30px)}
.card.visible{opacity:1;transform:translateY(0);transition:opacity .6s,transform .6s,background .4s,color .4s}
.card-tall{display:flex;flex-direction:column;justify-content:center}
.card:hover{background:var(--terra);color:var(--cream);transform:translateY(-4px)}
.card:hover .card-num{color:var(--blush)}
.card-num{font-family:var(--serif);font-size:3rem;color:var(--stone);
  line-height:1;margin-bottom:16px;transition:color .4s}
.card h2{font-family:var(--serif);font-size:1.4rem;margin-bottom:12px;
  letter-spacing:.05em}
.card p{font-size:.95rem;color:var(--stone);line-height:1.8;transition:color .4s}
.card:hover p{color:var(--blush)}

.products{padding:100px 8vw;max-width:1200px;margin:0 auto;text-align:center}
.products-heading{font-family:var(--serif);font-size:clamp(1.6rem,4vw,2.4rem);
  letter-spacing:.15em;margin-bottom:60px}
.products-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
.product-card{border:1px solid var(--black);text-align:left;
  opacity:0;transform:translateY(30px);transition:transform .35s}
.product-card.visible{opacity:1;transform:translateY(0);transition:opacity .6s,transform .6s}
.product-card:hover{transform:translateY(-4px)}
.product-img{aspect-ratio:3/4;overflow:hidden;background:var(--blush)}
.product-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s}
.product-card:hover .product-img img{transform:scale(1.05)}
.product-img-placeholder{display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:2rem;color:var(--stone);letter-spacing:.2em}
.product-info{padding:28px 24px}
.product-info h3{font-family:var(--serif);font-size:1.2rem;letter-spacing:.05em;
  margin-bottom:8px}
.product-price{font-size:1.1rem;color:var(--terra);font-weight:600;
  margin-bottom:20px}
.product-info .cta-buy{padding:10px 28px;font-size:.8rem}

@media(max-width:768px){
  .products-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}
}

.contact{background:var(--black);color:var(--cream);padding:100px 8vw;text-align:center}
.contact-inner{max-width:600px;margin:0 auto}
.contact h2{font-family:var(--serif);font-size:clamp(1.6rem,4vw,2.4rem);
  letter-spacing:.08em;margin-bottom:16px}
.contact p{color:var(--stone);margin-bottom:36px;font-size:1rem}

.footer{padding:32px 8vw;text-align:center;font-size:.8rem;color:var(--stone)}

@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}}

@media(max-width:768px){
  .hero-inner{flex-direction:column;gap:40px;text-align:center}
  .hero-ctas{justify-content:center}
  .features-grid{grid-template-columns:1fr}
  .hero-line{margin-inline:auto}
}