:root{
  --rose: #D9A5A0;
  --gold: #C6A052;
  --olive: #B7A56A;
  --cream: #FAF5F0;
  --main: #555555;
  --muted: #6B7280;
  --rose-600: #C88F8B;
  --cream-50: #FFF9F4;
  --cream-100: #FFF7F0;
  --cream-200: #F0E8E0;
  --cream-300: #E6DDD5;
}
.bg-cream{ background-color: var(--cream); }
.bg-cream-50{ background-color: var(--cream-50); }
.bg-cream-100{ background-color: var(--cream-100); }
.border-cream-200{ border-color: var(--cream-200); }
.border-cream-300{ border-color: var(--cream-300); }
.text-main{ color: var(--main); }
.text-muted{ color: var(--muted); }
.text-title{ color: var(--gold); }
.text-rose{ color: var(--rose); }
.bg-rose{ background-color: var(--rose); }
.bg-gold{ background-color: var(--gold); }
.title{
  font-size: clamp(2rem, 3.5vw + 1rem, 3.25rem);
  font-weight: 700;
  background-image: linear-gradient(90deg, var(--rose), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.link-nav{ color: var(--main); transition: color .2s ease; }
.link-nav:hover{ color: var(--rose); }
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1.5rem; border-radius:.5rem; font-weight:600;
  color:#fff; background-image: linear-gradient(90deg, var(--rose), var(--gold));
  box-shadow: 0 8px 20px rgba(214, 169, 160, .35);
  transition: transform .12s ease, box-shadow .2s ease;
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(198,160,82,.35); }
.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1.5rem; border-radius:.5rem; font-weight:600;
  border: 2px solid var(--gold); color: var(--gold); background: transparent;
  transition: background .2s ease, color .2s ease;
}
.btn-secondary:hover{ background: var(--gold); color:#fff; }
.btn-outline{
  padding:.5rem 1.25rem; border-radius:9999px;
  border:1px solid var(--gold); color: var(--gold); font-weight:500;
  background:#fff;
}
.btn-outline:hover{ background: var(--gold); color:#fff; }
.card{
  position:relative; overflow:hidden; border-radius:1rem;
  background:#fff; box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transition: box-shadow .2s ease;
}
.card:hover{ box-shadow:0 12px 30px rgba(0,0,0,.12); }
.card-media{ position:relative; }
.card-media::after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.06); transition:background .2s;
}
.card:hover .card-media::after{ background:rgba(0,0,0,.12); }
.badge{
  position:absolute; top:.75rem; right:.75rem;
  background:#fff; padding:.5rem .625rem; border-radius:.75rem;
  box-shadow:0 6px 16px rgba(0,0,0,.08); color: var(--rose);
}
.dot{ width:12px; height:12px; border-radius:9999px; display:inline-block; }
.dot.rose{ background: var(--rose); }
.dot.gold{ background: var(--gold); }
.dot.olive{ background: var(--olive); }
.social-btn{
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--rose); color:#fff; padding:.75rem; border-radius:.75rem;
  box-shadow:0 8px 16px rgba(0,0,0,.08);
}
.social-btn:hover{ filter: brightness(0.95); }
.contact-card{
  display:flex; align-items:flex-start; gap:1rem; background:#fff;
  padding:1rem; border-radius:.75rem; border:1px solid var(--cream-200);
  box-shadow:0 6px 16px rgba(0,0,0,.04);
}
.contact-icon{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:.75rem; background:linear-gradient(135deg, var(--rose), var(--gold));
  color:#fff; font-size:20px;
}