:root{
  --bg-main:#050509;
  --bg-elevated:#14141e;
  --accent:#d88b32;
  --accent-strong:#ffb347;
  --text-main:#f5f3f0;
  --text-muted:#b2aba0;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:Poppins,sans-serif;
  background:radial-gradient(circle at top left,#20202a 0,#050509 40%,#020206 100%);
  color:var(--text-main);
  overflow-x:hidden;
}

/* moving luxury light */
body::before{
  content:"";
  position:fixed;
  inset:-30%;
  background:
    radial-gradient(circle at 0 0,rgba(255,180,120,.18),transparent 60%),
    radial-gradient(circle at 100% 30%,rgba(216,139,50,.18),transparent 60%);
  mix-blend-mode:screen;
  opacity:.75;
  animation:lightSweep 18s infinite alternate;
  pointer-events:none;
  z-index:-1;
}
@keyframes lightSweep{
  0%{transform:translate3d(-4%,0,0)}
  100%{transform:translate3d(6%,2%,0)}
}

/* scroll bar */
#scrollProgress{
  position:fixed;top:0;left:0;height:4px;width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-strong));
  z-index:9999;
}

/* HEADER */
.header{
  position:fixed;inset-inline:0;top:0;
  padding:16px min(7vw,70px);
  display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(to bottom,#050509f0,#050509b0,transparent);
  backdrop-filter:blur(18px);
  z-index:100;
}
.logo{display:flex;align-items:center;gap:8px;font-size:.9rem;letter-spacing:.18em;text-transform:uppercase}
.logo-mark{
  width:30px;height:30px;border-radius:999px;border:1px solid rgba(216,139,50,.5);
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at top,#2b2217 0,#050509 70%);
  color:var(--accent-strong);font-size:.75rem;font-weight:600;
}
.logo-text{font-weight:600}
.nav{display:flex;gap:20px;align-items:center;font-size:.9rem}
.nav a{text-decoration:none;color:var(--text-muted);transition:.25s}
.nav a:hover{color:var(--accent-strong)}
.nav-cart{
  padding:7px 16px;border-radius:999px;
  border:1px solid rgba(216,139,50,.6);
  background:rgba(216,139,50,.16);
  font-size:.85rem;
}

/* SECTION */
.section{
  padding:140px min(7vw,70px);
  position:relative;
}

/* HERO */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:center;
  gap:40px;
  min-height:100vh;
}
.hero-left{max-width:560px}
.hero-tag{
  letter-spacing:.16em;text-transform:uppercase;
  font-size:.75rem;color:var(--accent-strong);margin-bottom:12px;
}
.hero-title{
  font-family:"Playfair Display",serif;
  font-size:clamp(2.5rem,3.6vw,3.4rem);
  line-height:1.1;
  margin-bottom:16px;
  overflow:hidden;
  display:inline-block;
}
.hero-sub{color:var(--text-muted);font-size:.95rem;line-height:1.7;margin-bottom:20px;}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px;}
.hero-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;font-size:.82rem;color:var(--text-muted);
}
.meta-label{text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;color:rgba(216,139,50,.7);display:block;margin-bottom:2px;}

.hero-right{display:flex;justify-content:center;}
.hero-image-wrap{
  width:min(420px,100%);
  aspect-ratio:3/4;
  border-radius:200px;
  padding:16px;
  background:radial-gradient(circle at top,#2a2217 0,#050509 70%);
  box-shadow:0 22px 60px rgba(0,0,0,.9);
  overflow:hidden;
  position:relative;
}
.hero-img{
  width:100%;height:100%;object-fit:cover;border-radius:180px;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.9));
}

/* flour particles */
.hero-particles{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
}
.hero-particles span{
  position:absolute;width:4px;height:4px;border-radius:999px;
  background:rgba(255,255,255,.7);
  animation:particleFloat 10s linear infinite;
  opacity:.35;
}
.hero-particles span:nth-child(1){top:40%;left:55%;animation-duration:9s;}
.hero-particles span:nth-child(2){top:20%;left:60%;animation-duration:11s;}
.hero-particles span:nth-child(3){top:55%;left:70%;animation-duration:13s;}
.hero-particles span:nth-child(4){top:35%;left:75%;animation-duration:12s;}
.hero-particles span:nth-child(5){top:65%;left:65%;animation-duration:10s;}
@keyframes particleFloat{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.1}
  40%{opacity:.8}
  100%{transform:translate3d(-40px,-80px,0) scale(.6);opacity:0}
}

/* hero title letter animation */
.hero-char{
  display:inline-block;
  opacity:0;
  transform:translateY(24px);
  filter:blur(4px);
  transition:transform .55s cubic-bezier(.22,.8,.32,1),opacity .55s,filter .55s;
}
.hero-title.animate .hero-char{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

/* BUTTONS */
.btn{
  border-radius:999px;
  padding:10px 20px;
  border:none;
  cursor:pointer;
  font-size:.84rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:500;
  transition:transform .2s,box-shadow .2s,background .2s,color .2s,border-color .2s;
}
.btn.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  color:#130f0a;
  box-shadow:0 12px 26px rgba(216,139,50,.55);
}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(216,139,50,.7);}
.btn.ghost{
  background:transparent;
  color:var(--text-main);
  border:1px solid rgba(216,139,50,.5);
}
.btn.ghost:hover{background:rgba(216,139,50,.12);}

/* SPOTLIGHT SECTION */
.spotlight{
  min-height:80vh;
}
.spotlight-inner{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  align-items:center;
  gap:40px;
}
.spotlight-text{max-width:520px;}
.spotlight-text p{color:var(--text-muted);font-size:.94rem;line-height:1.7;margin-bottom:12px;}
.section-kicker{
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.78rem;
  color:var(--accent-strong);
  margin-bottom:6px;
}
.section-title{
  font-family:"Playfair Display",serif;
  font-size:clamp(2rem,3vw,2.6rem);
  margin-bottom:10px;
}
.spotlight-list{list-style:none;margin:10px 0 14px;}
.spotlight-list li{
  font-size:.86rem;color:var(--text-muted);
  position:relative;padding-left:16px;margin-bottom:6px;
}
.spotlight-list li::before{
  content:"•";position:absolute;left:0;color:var(--accent-strong);
}
.spotlight-price{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;}
.price-main{font-size:1.4rem;color:var(--accent-strong);font-weight:600;}
.price-note{font-size:.8rem;color:var(--text-muted);}
.spotlight-image{display:flex;justify-content:center;}
.spotlight-img-wrap{
  width:min(360px,100%);
  aspect-ratio:4/5;
  border-radius:30px;
  padding:14px;
  background:radial-gradient(circle at top,#2b2220 0,#050509 70%);
  box-shadow:0 20px 52px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.04);
  overflow:hidden;
  position:relative;
}
.spotlight-img-wrap img{
  width:100%;height:100%;object-fit:cover;border-radius:26px;
  transform:scale(1.02);
  transition:transform .7s;
}
.spotlight-img-wrap::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at top,rgba(255,255,255,.16),transparent 60%);
  mix-blend-mode:screen;
  opacity:.7;
}
.spotlight-img-wrap:hover img{transform:scale(1.06);}

/* FAVORITES GRID */
.section-header{max-width:820px;margin-bottom:18px;}
.cards-grid{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
}
.card{
  background:radial-gradient(circle at top,#22212b 0,#111119 60%);
  border-radius:18px;
  padding:14px 14px 16px;
  position:relative;
  overflow:hidden;
  opacity:0;
  transform:translateY(60px) scale(.96);
  filter:blur(4px);
  transition:transform .9s cubic-bezier(.22,.8,.32,1),opacity .9s,filter .9s;
}
.card.visible{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}
.card::before{
  content:"";
  position:absolute;inset:-40%;
  background:radial-gradient(circle at top,rgba(216,139,50,.25),transparent 60%);
  opacity:0;transform:translateY(40px);
  transition:opacity .5s,transform .5s;
}
.card:hover::before{opacity:1;transform:translateY(0);}
.card-img-wrap{
  border-radius:14px;overflow:hidden;margin-bottom:10px;background:#050509;
}
.card-img-wrap img{
  width:100%;height:170px;object-fit:cover;
  transform:scale(1.04);
  transition:transform .6s;
}
.card:hover .card-img-wrap img{transform:scale(1.08);}
.card h3{font-size:1rem;margin-bottom:4px;}
.card-desc{font-size:.86rem;color:var(--text-muted);margin-bottom:10px;}
.card-meta{display:flex;justify-content:space-between;align-items:center;font-size:.88rem;}
.card-price{color:var(--accent-strong);font-weight:500;}
.btn.small{padding:7px 14px;font-size:.78rem;}
.add-btn{background:var(--accent-strong);color:#130f0a;border:none;cursor:pointer;}
.add-btn:hover{transform:scale(1.07);}

/* pulse on scroll */
.buy-pulse{animation:ctaPulse 1.7s infinite;}
@keyframes ctaPulse{
  0%{box-shadow:0 0 0 0 rgba(216,139,50,.8);}
  70%{box-shadow:0 0 0 16px rgba(216,139,50,0);}
  100%{box-shadow:0 0 0 0 rgba(216,139,50,0);}
}

/* STORY */
.story-inner{
  max-width:900px;margin:0 auto;
  opacity:.25;transform:scale(.96);
  transition:transform .8s,opacity .8s,filter .8s;
  filter:blur(4px);
}
.story-inner.visible{
  opacity:1;transform:scale(1);
  filter:blur(0);
}
.story-inner p{color:var(--text-muted);line-height:1.8;margin-bottom:12px;font-size:.95rem;}

/* CONTACT */
.contact-inner{max-width:1000px;margin:0 auto;}
.contact-inner>p{color:var(--text-muted);margin-top:4px;}
.contact-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:22px;
}
.contact-block h3{margin-bottom:6px;}
.contact-block p{font-size:.9rem;color:var(--text-muted);margin-bottom:4px;}
.contact-form{
  background:rgba(8,8,14,.9);
  padding:16px 16px 18px;
  border-radius:16px;
  display:flex;flex-direction:column;gap:10px;
  box-shadow:0 20px 44px rgba(0,0,0,.85);
}
.contact-form input,
.contact-form textarea{
  background:#050509;
  border-radius:10px;
  border:1px solid #262633;
  padding:8px 10px;
  color:var(--text-main);
  font-size:.86rem;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:rgba(216,139,50,.8);
}

/* MODAL */
.modal{
  position:fixed;inset:0;
  background:rgba(0,0,0,.75);
  display:none;align-items:center;justify-content:center;
  z-index:300;
}
.modal.is-visible{display:flex;}
.modal-content{
  position:relative;
  background:#15151f;
  border-radius:18px;
  padding:20px 20px 18px;
  width:min(340px,90%);
  text-align:center;
  box-shadow:0 24px 50px rgba(0,0,0,.9);
}
.modal-product-name{margin:8px 0 6px;font-weight:500;}
.modal-note{font-size:.8rem;color:var(--text-muted);margin-bottom:10px;}
.modal-close{
  position:absolute;right:12px;top:8px;
  background:none;border:none;color:var(--text-muted);
  font-size:1.4rem;cursor:pointer;
}

/* REVEAL BASE (advanced transitions) */
.reveal{
  opacity:0;
  transform:translateY(40px) scale(.98);
  filter:blur(6px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.22,.8,.32,1),filter .9s;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}

/* FOOTER */
.footer{text-align:center;padding:20px 16px 28px;font-size:.8rem;color:var(--text-muted);background:#050509;}

/* RESPONSIVE */
@media(max-width:960px){
  .hero{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:130px;}
  .hero-right{order:-1;}
  .hero-image-wrap{margin:0 auto;}
  .spotlight-inner{grid-template-columns:minmax(0,1fr);gap:26px;}
}
@media(max-width:760px){
  .section{padding-inline:18px;}
  .contact-grid{grid-template-columns:minmax(0,1fr);}
}
@media(max-width:640px){
  .hero-cta{flex-direction:column;}
  .nav{gap:12px;}
  .nav-cart{display:none;} /* optional on very small screens */
}