:root{
  --gold:#d4af37;
  --silver:#c0c0c0;
  --ink:#0b0c10;
  --bg:#0e0f14;
  --fg:#eef0f4;
  --muted:#9aa3af;
  --card:#161823;
  --ring:rgba(212,175,55,0.35);
  --max:1100px;
  --radius:18px;
  --shadow:0 12px 30px rgba(0,0,0,0.28);
}

/* Base */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:"Poppins", sans-serif;
  color:var(--fg);
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(192,192,192,0.08), transparent),
    radial-gradient(900px 600px at -10% 10%, rgba(212,175,55,0.10), transparent),
    var(--bg);
  line-height:1.6;
}
a{ color:var(--gold); text-decoration:none }
a:hover{ opacity:.9 }

/* Layout helpers */
.container{ max-width:var(--max); margin:0 auto; padding:0 20px }
.grid{ display:grid; gap:18px }
.grid.cols-3{ grid-template-columns:repeat(3,1fr) }
.grid.cols-2{ grid-template-columns:repeat(2,1fr) }

/* Header + Nav */
header { background: rgba(14,15,20,0.85); backdrop-filter: blur(8px); }

.brand h1 { color: var(--gold); }

/* Nav links */
.nav-links a{
  color: var(--gold);
  padding: 10px 12px;
  border-radius: 10px;
  text-underline-offset: 4px;
  transition: color .15s ease, background .15s ease, text-decoration-color .15s ease;
}
.nav-links a:hover{
  text-decoration: underline;
  text-decoration-color: var(--gold);
  background: transparent; /* keep the header clean */
}

/* “Shop” CTA button (black idle → gold hover) */
.nav-links .cta{
  color: var(--gold);
  background: var(--bg);
  border: 1px solid var(--gold);
  border-radius: 14px;
  font-weight: 800;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.nav-links .cta:hover{
  background: linear-gradient(90deg, #f2d47a, #e3c35a);
  color: #0b0c10;            /* readable on gold */
  border-color: transparent; /* hide border under gradient */
  box-shadow: 0 6px 20px rgba(227,195,90,.25);
}

/* Optional: make all header text a touch bolder for contrast */
.brand h1, .nav-links a { font-weight: 800; }
.brand h1 { color: var(--gold); }
}
.header-content{ text-align:center; padding:14px 0 }
.logo{ display:flex; flex-direction:column; align-items:center; gap:6px }
.logo svg{ width:64px; height:64px }
.logo h1{
  font-family: "Poppins", sans-serif;
  font-weight:800; letter-spacing:.3px; font-size:22px; margin:4px 0 0;
  color:#000;
}
.tagline{ margin:4px 0 12px; font-style:italic; color:#000 }

.main-nav{ display:flex; justify-content:center; gap:18px; padding-bottom:6px }
.main-nav a{
  color:#000; font-weight:700; padding:8px 10px; border-radius:10px
}
.main-nav a:hover{ background:rgba(0,0,0,0.08) }

/* If you keep the older brand/nav layout */
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0;color:var(--gold) }
.brand{ display:flex; gap:12px; align-items:center }
.brand svg{ width:60px; height:60px }
.brand h1{ font-family: "Poppins", sans-serif; font-weight:800; letter-spacing:.3px; font-size:20px; margin:0; color:var(--gold) }
.nav-links{ display:flex; gap:18px; align-items:center }
.nav-links a{ padding:10px 12px; border-radius:10px; color:#000 }
.nav-links a:hover{ background:rgba(0,0,0,0.08) }
.cta{
  background:linear-gradient(90deg, var(--gold), var(--silver));
  color:#111; font-weight:800; padding:10px 14px; border-radius:12px
}
.menu-btn{ display:none; background:none; border:none; color:#000; font-size:26px }

/* Hero */
.hero{ position:relative; padding:90px 0 70px; overflow:hidden }
.hero h2{
  font-family: "Poppins", sans-serif; font-size:48px; line-height:1.1; margin:0 0 14px; color:var(--gold)
}
.hero p{ max-width:760px; color:var(--muted); font-size:18px; margin:0 0 24px }
.hero .actions{ display:flex; gap:14px; flex-wrap:wrap }

/* Buttons */
.btn{ display:inline-block; padding:12px 16px; border-radius:14px; font-weight:700 }
.btn.primary{ background:linear-gradient(90deg, var(--gold), var(--silver)); color:#111 }
.btn.ghost{ border:1px solid rgba(255,255,255,0.16); color:var(--fg) }
.btn:focus{ outline:2px solid var(--ring); outline-offset:2px }

/* Sections */
section{ padding:70px 0; border-top:1px solid rgba(255,255,255,0.06) }
h3.section-title{
  font-family: "Poppins", sans-serif; font-size:32px; margin:0 0 12px; color:var(--gold)
}
p.section-sub{ color:var(--muted); margin:0 0 26px }

/* Cards / Badges */
.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow)
}
.card h4{ margin:0 0 8px; font-size:18px; color:var(--fg) }
.badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:rgba(212,175,55,0.12); color:#e7d9a0; font-weight:700; font-size:12px; border:1px solid var(--ring)
}

/* Products */
.product{ display:flex; gap:14px; align-items:flex-start }
.product img{
  width:90px; height:90px; border-radius:12px; object-fit:cover;
  border:1px solid rgba(255,255,255,0.12); background:#0f1118
}
.price{ font-weight:800; color:var(--gold) }

/* Inputs & code blocks */
.input{
  width:100%; max-width:420px; margin:8px 0; padding:12px;
  border-radius:12px; border:1px solid rgba(255,255,255,0.14);
  background:#0f1118; color:var(--fg)
}
small.muted{ margin-left:10px; color:var(--muted) }
pre.code{
  white-space:pre-wrap; background:#0f1118; border-radius:12px; padding:12px;
  border:1px solid rgba(255,255,255,0.12)
}

/* Footer */
footer{ padding:40px 0 70px; color:var(--muted) }
.footnote{ margin-top:8px }
.copy{ margin-top:20px }

/* Reveal */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease }
.reveal.in{ opacity:1; transform:none }

/* Gold header + nav text */
.logo h1,
.tagline,
.main-nav a,
.nav-links a {
  color: #d4af37; /* gold */
}

/* Responsive */
@media (max-width: 900px){
  .grid.cols-3{ grid-template-columns:1fr 1fr }
}


@media (max-width: 680px){
  .nav-links{ display:none }
  .menu-btn{ display:block }
  .hero h2{ font-size:38px }
  .grid.cols-2,.grid.cols-3{ grid-template-columns:1fr }
}

.featured-photo {
  width: 100%;
  max-width: 900px;
  border-radius: 18px;
  margin-top: 16px;
  box-shadow: var(--shadow);
}