/* hollowverna — base styles */
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }

body {
  font-family: 'Nunito', sans-serif;
  color: #37474F;
  background: #FAFAFA;
}

h1, h2, h3, h4, .head { font-family: 'Quicksand', sans-serif; }

/* soft rounded friendly look */
.card {
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 10px 30px rgba(233, 30, 99, 0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(233, 30, 99, 0.16);
}

.btn-cta {
  background: #E91E63;
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .3px;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: 0 8px 20px rgba(233, 30, 99, 0.35);
}
.btn-cta:hover { background: #c2185b; transform: translateY(-2px) scale(1.02); }
.btn-cta:focus { outline: 3px solid #F8BBD0; outline-offset: 2px; }

.btn-accent {
  background: #7CB342;
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  transition: transform .2s ease, background .2s ease;
}
.btn-accent:hover { background: #689f38; transform: translateY(-2px); }

.pill {
  background: #F8BBD0;
  color: #880e4f;
  border-radius: 999px;
}

a { transition: color .2s ease; }

/* gentle entrance animation */
@keyframes floatIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal { animation: floatIn .7s ease both; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.bob { animation: bob 4s ease-in-out infinite; }

.tab-btn.active { background: #E91E63; color: #fff; }

.map-frame {
  width: 100%;
  border: 0;
  border-radius: 1.5rem;
  min-height: 360px;
}

/* cookie + modal */
#cookieBar { transition: transform .4s ease, opacity .4s ease; }
.toggle { width: 48px; height: 26px; border-radius: 999px; background: #cfd8dc; position: relative; transition: background .2s; cursor: pointer; }
.toggle.on { background: #7CB342; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .2s; }
.toggle.on::after { left: 25px; }
.toggle.locked { background: #7CB342; opacity: .6; cursor: not-allowed; }