/* ─── Base ─────────────────────────────────────────────────────────────────── */
body { font-family: 'Manrope', sans-serif; background-color: #1c1c1e; color: #E1E1E1; }
.font-serif { font-family: 'Cormorant Garamond', serif; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
::selection { background-color: #D4AF37; color: #1A1A1A; }

h1, h2, h3 { font-family: 'Cormorant Garamond', serif; }

/* ─── Particle canvas ──────────────────────────────────────────────────────── */
#particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ─── Scroll-reveal ────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Hero shimmer ─────────────────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.hero-title {
  background: linear-gradient(90deg, #E1E1E1 40%, #D4AF37 50%, #E1E1E1 60%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 6s linear infinite;
}

/* ─── Nav ──────────────────────────────────────────────────────────────────── */
.nav-glass {
  background: rgba(18,18,18,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ─── Product cards ────────────────────────────────────────────────────────── */
.product-card:hover {
  box-shadow: 0 0 32px rgba(212,175,55,0.08);
}

/* ─── Stat numbers ─────────────────────────────────────────────────────────── */
.stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-style: italic;
  color: #D4AF37;
}

/* ─── CTA button ───────────────────────────────────────────────────────────── */
#btn-transform { transition: box-shadow 0.3s ease; }
#btn-transform:hover { box-shadow: 0 0 28px rgba(201,168,76,0.45), 0 0 56px rgba(201,168,76,0.12); }