:root{
  /* Base neutrals */
  --offwhite: #f8f7f4;
  --sand: #efe9df;
  --tan: #d6c4a8;
  --tan-dark: #bfa889;

  /* Lavender accents */
  --lav: #b9a7e6;
  --lav-soft: rgba(185,167,230,.25);

  /* Text */
  --ink: #2c2a27;
  --ink-soft: #5a564f;

  /* UI */
  --card: rgba(255,255,255,.75);
  --stroke: rgba(0,0,0,.08);
  --shadow: 0 18px 45px rgba(0,0,0,.08);
}

/* ---------- GLOBAL ---------- */

body{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(185,167,230,.15), transparent 60%),
    radial-gradient(900px 500px at 85% 10%, rgba(214,196,168,.25), transparent 55%),
    var(--offwhite);
  color: var(--ink);
}

/* ---------- NAV ---------- */

.glass-nav{
  background: rgba(248,247,244,.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stroke);
}

.navbar-dark .navbar-nav .nav-link{
  color: var(--ink-soft);
}
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover{
  color: var(--ink);
}

.brand-mark{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--lav), var(--tan));
  color: white;
  box-shadow: var(--shadow);
}

/* ---------- HERO ---------- */

.hero{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--stroke);
}

.hero-media{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(248,247,244,.95) 0%, rgba(248,247,244,.85) 45%, rgba(248,247,244,.55) 100%),
    linear-gradient(180deg, rgba(248,247,244,.4), rgba(248,247,244,.9));
}

.hero-content{
  position: relative;
  padding: 5rem 0 4rem;
}

/* ---------- CARDS ---------- */

.card-glass{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 1.25rem;
  box-shadow: var(--shadow);
}

.badge-soft{
  background: rgba(214,196,168,.25);
  color: var(--ink);
  border: 1px solid rgba(214,196,168,.4);
}

/* ---------- BUTTONS ---------- */

.btn-lav{
  background: linear-gradient(135deg, var(--lav), var(--tan));
  border: none;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(185,167,230,.25);
}
.btn-lav:hover{
  filter: brightness(1.05);
}

.btn-outline-light{
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: var(--tan);
  --bs-btn-hover-bg: var(--tan);
  --bs-btn-hover-color: white;
}

/* ---------- TYPOGRAPHY ---------- */

.section-title{
  letter-spacing: .3px;
}

.text-secondary{
  color: var(--ink-soft)!important;
}

.text-lav{
  color: var(--lav);
}

/* ---------- ICON PILLS ---------- */

.icon-pill{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(214,196,168,.35);
  border: 1px solid rgba(214,196,168,.45);
  color: var(--ink);
}