/* ===== Liquid Glass — HOMEPAGE ONLY layer over style.css (approved 2026-10-22) ===== */

/* ambient color field behind everything, so the glass has something to refract */
body { background: #ece4d3; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(640px 420px at 10% 6%,  rgba(176,141,63,.38), transparent 62%),
    radial-gradient(760px 520px at 90% 20%, rgba(84,104,116,.30), transparent 62%),
    radial-gradient(860px 620px at 50% 92%, rgba(198,164,102,.32), transparent 62%),
    radial-gradient(500px 380px at 78% 68%, rgba(146,120,72,.22), transparent 60%);
}
.section, .section.alt { background: transparent; }

/* glass header */
.site-header {
  background: rgba(247,244,238,.52);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border-bottom: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 10px 34px rgba(23,21,15,.08), inset 0 1px 0 rgba(255,255,255,.7);
}
.site-search input, .site-search button {
  background: rgba(255,255,255,.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.site-search button { background: rgba(23,21,15,.78); color: #fff; }

/* hero headline floats in a dark glass slab */
.hero-inner {
  max-width: 880px;
  margin-left: max(24px, calc(50% - 590px));
  background: linear-gradient(140deg, rgba(19,17,13,.46), rgba(19,17,13,.20));
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 30px;
  padding: 48px 50px;
  box-shadow: 0 28px 64px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(255,255,255,.08);
}
.hero-badges div {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 16px;
  padding: 12px 16px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.hero-dots button {
  background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.hero-dots button.on { background: rgba(255,255,255,.92); }

/* glass pill buttons everywhere */
.btn {
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.55));
  color: #17150f;
  border: 1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(23,21,15,.06), 0 12px 26px rgba(23,21,15,.20);
}
.btn:hover { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.68)); transform: translateY(-1px); }
.btn-ghost {
  background: rgba(255,255,255,.14);
  color: #fff;
  border-color: rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 26px rgba(0,0,0,.18);
}
.btn-ghost:hover { background: rgba(255,255,255,.24); color: #fff; }

/* frosted cards + steps */
.card, ol.steps li {
  background: rgba(255,255,255,.48);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 22px;
  box-shadow: 0 20px 44px rgba(23,21,15,.10), inset 0 1px 0 rgba(255,255,255,.85);
}
.card img { border-radius: 14px; }

/* dark glass closing band */
.cta-band {
  background: linear-gradient(120deg, rgba(20,18,14,.90), rgba(46,38,22,.86));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.site-footer { background: rgba(16,14,11,.96); }

@media (max-width: 760px) {
  .hero-inner { margin-left: 16px; margin-right: 16px; padding: 34px 26px; border-radius: 24px; }
}

.hero-badges { flex-wrap: wrap; }
.hero-badges div { flex: 1 1 180px; }