*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Nunito', system-ui, sans-serif; color: #374151; background: #FEFCF5; -webkit-font-smoothing: antialiased; }

/* ── Header ─────────────────────────────────────────────── */
#site-header { background: transparent; transition: background .3s, box-shadow .3s, padding .3s; }
#site-header.scrolled { background: rgba(254,252,245,.92); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(4,120,87,.08); }
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; bottom: 4px; left: 3.5px; right: 3.5px; height: 2px; background: #047857; border-radius: 1px; transform: scaleX(0); transition: transform .2s; }
.nav-link:hover::after { transform: scaleX(1); }

/* ── Mobile menu ────────────────────────────────────────── */
#mobile-menu { animation: slideDown .25s ease; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.mobile-link { border-radius: .75rem; }

/* ── Hero ───────────────────────────────────────────────── */
.hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; }
.scroll-hint { animation: bob 2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }

/* ── Buttons ────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #047857; color: #fff; font-family: 'Nunito',sans-serif;
  font-weight: 700; font-size: .9375rem; padding: .8125rem 1.75rem;
  border-radius: 9999px; border: none; cursor: pointer;
  box-shadow: 0 4px 14px rgba(4,120,87,.35);
  transition: background .2s, transform .15s, box-shadow .2s;
}
.btn-primary:hover { background: #065f46; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(4,120,87,.4); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.15); color: #fff; font-family: 'Nunito',sans-serif;
  font-weight: 700; font-size: .9375rem; padding: .8125rem 1.75rem;
  border-radius: 9999px; border: 1.5px solid rgba(255,255,255,.4);
  backdrop-filter: blur(4px); cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
}
.btn-secondary:hover { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.6); transform: translateY(-2px); }

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: #fff; border-radius: 1.25rem; padding: 1.75rem;
  border: 1px solid #E8F5E9;
  box-shadow: 0 2px 8px rgba(4,120,87,.06);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(4,120,87,.12); border-color: #A7F3D0; }
.w-13 { width: 3.25rem; height: 3.25rem; }

/* ── Insurance cards ────────────────────────────────────── */
.ins-card {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  border-radius: 1rem; padding: 1.25rem 1rem;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  transition: background .2s, transform .15s;
}
.ins-card:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.ins-icon-em { width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; color: #fff; }

/* ── Form ───────────────────────────────────────────────── */
.input-field {
  width: 100%; padding: .6875rem 1rem; border-radius: .75rem;
  border: 1.5px solid #D1D5DB; background: #fff;
  font-family: 'Nunito',sans-serif; font-size: .9375rem; color: #1F2937;
  transition: border-color .2s, box-shadow .2s; outline: none;
}
.input-field::placeholder { color: #9CA3AF; }
.input-field:focus { border-color: #047857; box-shadow: 0 0 0 3px rgba(4,120,87,.12); }
.input-field.error { border-color: #EF4444; box-shadow: 0 0 0 3px rgba(239,68,68,.1); }

/* ── Back to top ────────────────────────────────────────── */
.back-to-top {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 30;
  width: 2.75rem; height: 2.75rem; border-radius: .75rem;
  background: #047857; color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(4,120,87,.35);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .25s, transform .25s, background .2s;
}
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: #065f46; }

/* ── Scroll reveal ──────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-delay-5 { transition-delay: .5s; }

/* ── Focus visible ──────────────────────────────────────── */
:focus-visible { outline: 2px solid #047857; outline-offset: 2px; border-radius: .5rem; }

/* ── Responsive tweaks ──────────────────────────────────── */
@media (max-width: 640px) {
  .hero { min-height: 85vh; }
  .card { padding: 1.5rem; }
}