:root {
  --bg-0: #0a0603;
  --bg-1: #140b04;
  --espresso: #1c0f06;
  --gold: #d9a24b;
  --gold-bright: #f5cd7e;
  --cream: #f3e6cf;
  --glass-bg: rgba(255, 240, 215, 0.06);
  --glass-border: rgba(217, 162, 75, 0.28);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Vazirmatn', sans-serif;
  background:
    radial-gradient(circle at 70% 10%, rgba(180, 110, 40, 0.18), transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(50, 80, 200, 0.10), transparent 40%),
    linear-gradient(160deg, var(--bg-1), var(--bg-0) 60%, #050301);
  color: var(--cream);
  overflow-x: hidden;
  min-height: 100vh;
}

/* ===== Loader ===== */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg-0);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.4rem; transition: opacity .8s ease, visibility .8s;
}
#loader.hide { opacity: 0; visibility: hidden; }
.bean-spin { font-size: 4rem; animation: spin 1.6s cubic-bezier(.6,.1,.3,.9) infinite; filter: drop-shadow(0 0 20px var(--gold)); }
.loader-text { color: var(--gold-bright); font-weight: 300; letter-spacing: .05em; font-size: 1.1rem; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== 3D scene ===== */
#scene-container {
  position: fixed; inset: 0; z-index: 0;
}

/* ===== Glass base ===== */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}

/* ===== Navbar ===== */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 2.4rem;
  transition: all .4s ease;
  background: transparent;
}
#navbar.scrolled {
  background: rgba(10,6,3,.6);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--glass-border);
  padding: .7rem 2.4rem;
}
.nav-logo {
  font-weight: 900; font-size: 1.4rem;
  color: var(--gold-bright);
  letter-spacing: .02em;
  text-shadow: 0 0 20px rgba(217,162,75,.4);
}
.nav-links { display: flex; gap: 1.8rem; }
.nav-links a {
  color: var(--cream); text-decoration: none; font-weight: 300;
  font-size: 1rem; position: relative; padding: .3rem 0;
  transition: color .3s;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: 0; right: 0; height: 1px; width: 0;
  background: var(--gold-bright); transition: width .3s;
}
.nav-links a:hover { color: var(--gold-bright); }
.nav-links a:hover::after { width: 100%; }

/* ===== Sections ===== */
main { position: relative; z-index: 10; }
section, footer { position: relative; }

.reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s ease; }
.reveal.revealed { opacity: 1; transform: translateY(0); }

/* ===== Hero ===== */
#hero {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 8rem 1.5rem 4rem;
}
.hero-content { max-width: 720px; }
.hero-badge {
  display: inline-block; padding: .5rem 1.3rem; border-radius: 40px;
  color: var(--gold-bright); font-size: .9rem; font-weight: 300;
  margin-bottom: 1.8rem; letter-spacing: .06em;
  animation: fadeUp .9s .2s both;
}
.hero-title {
  font-size: clamp(3rem, 9vw, 6rem); font-weight: 900; line-height: 1.05;
  letter-spacing: -.01em; margin-bottom: 1.4rem;
  animation: fadeUp .9s .35s both;
  text-shadow: 0 4px 40px rgba(0,0,0,.6);
}
.gold-text {
  background: linear-gradient(120deg, var(--gold), var(--gold-bright), var(--gold));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-sub {
  font-size: 1.15rem; font-weight: 300; line-height: 2; color: #d9c9b0;
  max-width: 560px; margin: 0 auto 2.4rem;
  animation: fadeUp .9s .5s both;
}
.scroll-hint {
  position: absolute; bottom: 2rem; color: var(--gold);
  font-size: .85rem; font-weight: 300; animation: bob 2s ease-in-out infinite;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bob { 0%,100% { transform: translateY(0); opacity:.6;} 50% { transform: translateY(10px); opacity:1; } }

/* ===== Buttons ===== */
.btn-gold {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--gold), var(--gold-bright));
  color: #241305; border: none; cursor: pointer;
  padding: .95rem 2.4rem; border-radius: 50px;
  font-family: inherit; font-weight: 800; font-size: 1.05rem;
  letter-spacing: .02em;
  box-shadow: 0 8px 30px rgba(217,162,75,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 14px 44px rgba(217,162,75,.5); }
.btn-gold:active { transform: translateY(0); }
.shimmer::before {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-20deg);
  animation: sweep 4s ease-in-out infinite;
}
@keyframes sweep { 0%,60% { left: -60%; } 80%,100% { left: 130%; } }

/* ===== Products ===== */
#products { padding: 6rem 1.5rem; max-width: 1200px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 3.5rem; }
.section-tag {
  display: inline-block; color: var(--gold); font-size: .85rem; font-weight: 600;
  letter-spacing: .2em; margin-bottom: .8rem;
}
.section-head h2, .about-text h2 {
  font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; margin-bottom: .8rem;
}
.section-head p { color: #c9b89e; font-weight: 300; font-size: 1.05rem; }

#product-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.8rem;
}
.product-card {
  border-radius: 22px; padding: 1.8rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  animation: fadeUp .7s both;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s;
}
.product-card:hover {
  transform: translateY(-10px);
  border-color: var(--gold-bright);
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 40px rgba(217,162,75,.25);
}
.pc-glass-orb { width: 110px; height: 110px; margin-bottom: .5rem; }
.pc-glass-orb canvas { display: block; }
.pc-roast {
  font-size: .72rem; color: var(--gold); letter-spacing: .1em;
  border: 1px solid var(--glass-border); border-radius: 30px; padding: .25rem .8rem;
  margin-bottom: .8rem;
}
.pc-name { font-size: 1.35rem; font-weight: 800; margin-bottom: .3rem; }
.pc-origin { font-size: .85rem; color: var(--gold-bright); font-weight: 300; margin-bottom: .9rem; }
.pc-notes { font-size: .9rem; color: #c4b39a; font-weight: 300; line-height: 1.9; margin-bottom: 1.4rem; flex: 1; }
.pc-footer { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: .8rem; }
.pc-price { font-weight: 800; color: var(--gold-bright); font-size: 1.05rem; }
.pc-price small { font-size: .7rem; font-weight: 300; color: #c9b89e; }
.btn-add {
  background: rgba(217,162,75,.14); color: var(--gold-bright);
  border: 1px solid var(--glass-border); cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: .85rem;
  padding: .6rem 1rem; border-radius: 40px; white-space: nowrap;
  transition: all .25s;
}
.btn-add:hover { background: var(--gold); color: #241305; transform: scale(1.05); }

/* ===== About ===== */
#about { padding: 5rem 1.5rem; max-width: 1100px; margin: 0 auto; }
.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.about-text p { color: #c9b89e; font-weight: 300; line-height: 2.1; font-size: 1.05rem; margin-bottom: 2rem; }
.stats { display: flex; gap: 2.5rem; }
.stat { display: flex; flex-direction: column; }
.stat-num { font-size: 2.6rem; font-weight: 900; color: var(--gold-bright); line-height: 1; }
.stat-label { font-size: .85rem; color: #c9b89e; font-weight: 300; margin-top: .4rem; }
.about-visual {
  border-radius: 26px; padding: 3rem 2rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
}
.steam-emoji { font-size: 4.5rem; filter: drop-shadow(0 0 30px var(--gold)); animation: float 4s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.quote { font-style: italic; font-weight: 300; color: var(--cream); line-height: 2; font-size: 1.1rem; }

/* ===== Footer ===== */
#contact { padding: 4rem 1.5rem 2rem; margin-top: 4rem; background: rgba(10,6,3,.5); border-top: 1px solid var(--glass-border); backdrop-filter: blur(10px); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 2rem; max-width: 1000px; margin: 0 auto 2.5rem; }
.footer-grid h4 { color: var(--gold-bright); margin-bottom: .8rem; font-weight: 600; }
.footer-grid p { color: #c9b89e; font-weight: 300; line-height: 2; font-size: .95rem; }
.footer-desc { margin-top: .6rem; }
.socials { display: flex; gap: 1rem; margin-top: 1rem; font-size: 1.4rem; color: var(--gold); }
.socials span { cursor: pointer; transition: color .3s, transform .3s; }
.socials span:hover { color: var(--gold-bright); transform: scale(1.2); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  max-width: 1000px; margin: 0 auto; padding-top: 1.5rem; border-top: 1px solid rgba(217,162,75,.15);
  font-size: .85rem; color: #a89478; font-weight: 300;
}
.footer-bottom a { color: var(--gold); text-decoration: none; }
.footer-bottom a:hover { color: var(--gold-bright); text-decoration: underline; }

/* ===== Cart ===== */
#cart-btn {
  position: fixed; top: 1.1rem; left: 2.4rem; z-index: 110;
  border-radius: 50px; padding: .6rem 1rem; cursor: pointer;
  color: var(--gold-bright); font-family: inherit; font-weight: 600;
  display: flex; align-items: center; gap: .5rem;
  transition: transform .3s;
}
#cart-btn:hover { transform: scale(1.05); }
#cart-btn.pulse { animation: pulse .5s ease; }
@keyframes pulse { 0%,100% { transform: scale(1); } 40% { transform: scale(1.25); } }
.cart-icon { font-size: 1.2rem; }
#cart-count { background: var(--gold); color: #241305; border-radius: 50px; padding: 0 .5rem; font-size: .8rem; font-weight: 800; }

#cart-panel {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(380px, 88vw); z-index: 200;
  transform: translateX(-110%); transition: transform .4s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; padding: 1.6rem;
  border-radius: 0 24px 24px 0;
}
#cart-panel.open { transform: translateX(0); }
.cart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.cart-header h3 { color: var(--gold-bright); font-weight: 800; }
#cart-close { background: none; border: none; color: var(--cream); font-size: 1.3rem; cursor: pointer; }
#cart-items { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .8rem; }
.cart-empty { text-align: center; color: #a89478; padding: 3rem 0; font-weight: 300; }
.cart-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: .9rem; border-radius: 14px; border: 1px solid var(--glass-border);
  background: rgba(255,240,215,.03);
}
.ci-name { font-weight: 600; margin-bottom: .3rem; }
.ci-price { font-size: .8rem; color: #c9b89e; }
.ci-controls { display: flex; align-items: center; gap: .6rem; }
.ci-controls button {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  background: rgba(217,162,75,.15); border: 1px solid var(--glass-border);
  color: var(--gold-bright); font-size: 1.1rem; font-family: inherit;
  transition: background .2s;
}
.ci-controls button:hover { background: var(--gold); color: #241305; }
.cart-footer { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--glass-border); }
.cart-total { font-size: 1.1rem; margin-bottom: 1rem; font-weight: 600; }
.cart-total span { color: var(--gold-bright); font-weight: 800; }
#checkout-btn { width: 100%; }

#cart-overlay {
  position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: all .4s;
}
#cart-overlay.show { opacity: 1; visibility: visible; }

/* ===== Flash toast ===== */
#flash {
  position: fixed; bottom: 2rem; left: 50%; transform: translate(-50%, 120%);
  z-index: 300; padding: 1rem 1.8rem; border-radius: 50px;
  color: var(--gold-bright); font-weight: 600;
  transition: transform .5s cubic-bezier(.2,.9,.2,1);
}
#flash.show { transform: translate(-50%, 0); }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  #navbar { padding: 1rem 1.2rem; }
  .nav-links { gap: 1rem; font-size: .9rem; }
  .nav-links a { font-size: .9rem; }
  #cart-btn { left: 1.2rem; top: .7rem; }
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .stats { gap: 1.5rem; justify-content: space-between; }
  .stat-num { font-size: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
  .nav-links a:nth-child(3), .nav-links a:nth-child(4) { display: none; }
  .hero-sub { font-size: 1rem; }
}
</parameter>
</invoke>