:root {
  --coffee-1: #1a120f;
  --coffee-2: #2a1b16;
  --coffee-3: #3b241d;
  --coffee-4: #5d4033;
  --gold: #d2a45e;
  --gold-soft: #f0d6ab;
  --text: #f7f1eb;
  --muted: rgba(255,255,255,0.74);
  --shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
  --shadow-heavy: 0 28px 70px rgba(0, 0, 0, 0.34);
}

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

html, body {
  overflow-x: hidden;
}

body {
  font-family: 'Poppins', sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(210,164,94,0.08), transparent 20%),
    radial-gradient(circle at bottom right, rgba(255,255,255,0.04), transparent 18%),
    linear-gradient(180deg, #130d0b 0%, #241712 28%, #3b241d 62%, #2a1b16 100%);
  min-height: 100vh;
}

img {
  width: 100%;
  display: block;
}

.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.stars span {
  position: absolute;
  top: -10%;
  border-radius: 50%;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 0 6px rgba(255,255,255,0.9), 0 0 12px rgba(255,255,255,0.45);
  animation: starMove linear infinite;
  opacity: .95;
}

.stars span:nth-child(1){left:4%;animation-duration:10s;width:4px;height:4px}
.stars span:nth-child(2){left:10%;animation-duration:13s;animation-delay:1s;width:6px;height:6px}
.stars span:nth-child(3){left:16%;animation-duration:11s;animation-delay:2s;width:5px;height:5px}
.stars span:nth-child(4){left:22%;animation-duration:14s;animation-delay:.5s;width:7px;height:7px}
.stars span:nth-child(5){left:29%;animation-duration:12s;animation-delay:1.5s;width:5px;height:5px}
.stars span:nth-child(6){left:36%;animation-duration:15s;animation-delay:2.5s;width:6px;height:6px}
.stars span:nth-child(7){left:43%;animation-duration:11s;animation-delay:.7s;width:4px;height:4px}
.stars span:nth-child(8){left:51%;animation-duration:14s;animation-delay:1.7s;width:6px;height:6px}
.stars span:nth-child(9){left:58%;animation-duration:10s;animation-delay:2.4s;width:5px;height:5px}
.stars span:nth-child(10){left:65%;animation-duration:13s;animation-delay:1.1s;width:6px;height:6px}
.stars span:nth-child(11){left:72%;animation-duration:12s;animation-delay:.4s;width:5px;height:5px}
.stars span:nth-child(12){left:78%;animation-duration:16s;animation-delay:2.2s;width:7px;height:7px}
.stars span:nth-child(13){left:84%;animation-duration:11s;animation-delay:.8s;width:4px;height:4px}
.stars span:nth-child(14){left:89%;animation-duration:14s;animation-delay:1.6s;width:6px;height:6px}
.stars span:nth-child(15){left:94%;animation-duration:15s;animation-delay:2.8s;width:5px;height:5px}
.stars span:nth-child(16){left:8%;animation-duration:17s;animation-delay:3s;width:3px;height:3px}
.stars span:nth-child(17){left:33%;animation-duration:16s;animation-delay:3.4s;width:4px;height:4px}
.stars span:nth-child(18){left:55%;animation-duration:18s;animation-delay:3.8s;width:3px;height:3px}
.stars span:nth-child(19){left:74%;animation-duration:17s;animation-delay:4.2s;width:4px;height:4px}
.stars span:nth-child(20){left:92%;animation-duration:19s;animation-delay:4.6s;width:3px;height:3px}

@keyframes starMove {
  0% { transform: translateY(-12vh) translateX(0) scale(.9); opacity: 0; }
  10% { opacity: .95; }
  100% { transform: translateY(110vh) translateX(24px) scale(1.02); opacity: .18; }
}

.topbar {
  width: min(1200px, calc(100% - 32px));
  margin: 18px auto;
  padding: 14px 18px;
  border-radius: 24px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 16px;
  z-index: 50;
}

.brand-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--coffee-3), var(--coffee-4));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

.brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
}

.brand-tag {
  font-size: .78rem;
  opacity: .72;
}

#nav-toggle {
  display: none;
}

.hamburger {
  display: none;
}

.navbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.navbar a {
  text-decoration: none;
  color: var(--text);
  padding: 10px 14px;
  border-radius: 999px;
  transition: .3s ease;
}

.navbar a:hover,
.navbar a.active {
  background: rgba(255,255,255,.14);
  color: #fff;
  transform: translateY(-2px);
}

.detail-page {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto 24px;
  position: relative;
  z-index: 2;
}

.detail-hero {
  position: relative;
  overflow: hidden;
  min-height: 48vh;
  margin-top: 8px;
  border-radius: 34px;
  display: grid;
  place-items: center;
  padding: 50px 28px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    linear-gradient(135deg, #1a120f, #2f1f19 55%, #3d281f);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-heavy);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(210,164,94,.12), transparent 24%);
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .22;
  animation: floatGlow 8s ease-in-out infinite;
}

.glow-1 {
  width: 220px;
  height: 220px;
  background: rgba(210,164,94,.18);
  top: 30px;
  left: 30px;
}

.glow-2 {
  width: 250px;
  height: 250px;
  background: rgba(255,255,255,.06);
  bottom: 20px;
  right: 40px;
  animation-delay: 1s;
}

.detail-hero-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
}

.eyebrow {
  color: var(--gold);
  letter-spacing: 4px;
  font-size: .82rem;
  margin-bottom: 12px;
}

.detail-hero-content h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height: 1.05;
  margin-bottom: 18px;
}

.detail-hero-content p {
  color: var(--muted);
  line-height: 1.9;
}

.tab-section {
  margin-top: 30px;
}

.tab-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.fancy-tabs .tab-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
}

.tab-btn {
  border: none;
  cursor: pointer;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  font-weight: 600;
  backdrop-filter: blur(12px);
  transition: .35s ease;
}

.tab-btn:hover,
.tab-btn.active {
  background: linear-gradient(135deg, var(--gold), #e4bf86);
  color: #2b1d18;
  transform: translateY(-4px);
}

.tab-icon {
  font-size: 1rem;
}

.tab-content-wrap {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-heavy);
  backdrop-filter: blur(16px);
  border-radius: 34px;
  padding: 28px;
  overflow: hidden;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.detail-accordion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.detail-accordion-card {
  border-radius: 28px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition: .35s ease;
}

.detail-accordion-card:hover {
  transform: translateY(-6px);
}

.accordion-toggle {
  width: 100%;
  border: none;
  background: transparent;
  color: #fff;
  padding: 20px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  transition: .3s ease;
}

.accordion-toggle:hover,
.accordion-toggle.active {
  background: rgba(255,255,255,.06);
}

.toggle-sign {
  font-size: 1.4rem;
  color: var(--gold-soft);
  transition: .35s ease;
}

.detail-accordion-card.open .toggle-sign {
  transform: rotate(45deg);
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .55s ease, padding .4s ease;
  padding: 0 22px;
}

.detail-accordion-card.open .accordion-body {
  max-height: 560px;
  padding: 0 22px 22px;
}

.accordion-body img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: 16px;
}

.accordion-text p {
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 12px;
}

.accordion-text ul {
  padding-left: 18px;
  color: var(--gold-soft);
  line-height: 1.9;
}

.footer {
  width: min(1200px, calc(100% - 32px));
  margin: 24px auto;
  padding: 22px;
  text-align: center;
  border-radius: 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
  box-shadow: var(--shadow);
  position: relative;
  z-index: 2;
}

@keyframes floatGlow {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-16px) scale(1.04); }
}

@keyframes cardReveal {
  from {
    opacity: 0;
    transform: translateY(24px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 900px) {
  .hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    margin-left: auto;
  }

  .hamburger span {
    width: 28px;
    height: 3px;
    background: #fff;
    border-radius: 99px;
  }

  .navbar {
    width: 100%;
    display: none;
    flex-direction: column;
  }

  #nav-toggle:checked ~ .navbar {
    display: flex;
  }

  .detail-accordion-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .detail-hero-content h2 {
    font-size: 2rem;
  }

  .tab-content-wrap {
    padding: 18px;
  }

  .accordion-body img {
    height: 220px;
  }
}