:root {
  --bg-cream: #f6f3ee;
  --bg-sand: #ebe4d7;
  --ink: #1f1e1a;
  --ink-soft: #5a564e;
  --brand: #0f3d3e;
  --brand-accent: #b6783f;
  --surface: #fffdf8;
  --surface-deep: #f2ecdf;
  --border-soft: #d8cebb;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Manrope", "Segoe UI", sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at 20% 0%, #fff8ed 0%, var(--bg-cream) 40%, #ece7db 100%);
}

h1,
h2,
h3,
.brand-title {
  font-family: "Playfair Display", Georgia, serif;
  letter-spacing: 0.02em;
}

main {
  min-height: calc(100vh - 9rem);
}

.site-shell {
  width: min(1200px, 92vw);
  margin: 0 auto;
}

.panel {
  background: color-mix(in srgb, var(--surface) 88%, white 12%);
  border: 1px solid var(--border-soft);
  border-radius: 1.2rem;
  box-shadow: 0 18px 45px -30px rgba(30, 26, 17, 0.35);
}

.soft-chip {
  border: 1px solid var(--border-soft);
  background: var(--surface-deep);
  color: var(--ink-soft);
}

.brand-gradient {
  background: linear-gradient(135deg, #173f41 0%, #0f3d3e 55%, #22686a 100%);
}

.hero-veil {
  background: linear-gradient(120deg, rgba(12, 31, 31, 0.75), rgba(22, 65, 66, 0.68));
}

.product-card {
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 35px -28px rgba(0, 0, 0, 0.45);
}

.fade-in {
  animation: fade-up 700ms ease both;
}

.fade-in-delay {
  animation: fade-up 700ms 180ms ease both;
}

.fade-in-delay-2 {
  animation: fade-up 700ms 320ms ease both;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .site-shell {
    width: min(1200px, 95vw);
  }
}