:root {
  --bg-1: #080d21;
  --bg-2: #120b1f;
  --bg-3: #101b2d;
  --text: #f4f7ff;
  --muted: #c8d4ef;
  --card: rgba(255, 255, 255, 0.1);
  --stroke: rgba(255, 255, 255, 0.18);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Sora", sans-serif;
  background: radial-gradient(circle at 15% 10%, #1b2b59 0%, transparent 35%),
              linear-gradient(120deg, var(--bg-1), var(--bg-2) 45%, var(--bg-3));
  color: var(--text);
  min-height: 100vh;
}

.container { width: min(1080px, 92vw); margin: 0 auto; }

.bg-orb { position: fixed; border-radius: 999px; filter: blur(60px); opacity: .3; z-index: -1; }
.orb-a { width: 260px; height: 260px; background: #ff8ba7; top: -80px; right: 8%; }
.orb-b { width: 280px; height: 280px; background: #8bd2ff; bottom: -120px; left: -60px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
}

.brand-wrap { display: flex; align-items: center; gap: 12px; }
.brand-logo { width: 56px; height: 56px; border-radius: 14px; background: #fff; padding: 6px; }
.brand-wrap h1 { margin: 0; font: 800 1.08rem/1 "Literata", serif; }
.brand-wrap p { margin: 6px 0 0; color: var(--muted); font-size: .8rem; }

.menu-btn, .close-btn {
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.09);
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 1.1rem;
  cursor: pointer;
}

.small-btn, .primary-btn {
  text-decoration: none;
  color: #fff;
  border: 1px solid var(--stroke);
  background: linear-gradient(135deg, rgba(82,143,255,.35), rgba(132,211,255,.25));
  padding: 10px 14px;
  border-radius: 12px;
  font-size: .83rem;
  font-weight: 700;
}

.main-wrap { padding-bottom: 28px; }
.hero-card {
  background: rgba(255,255,255,.08);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  padding: 8px;
}

.hero-slider { position: relative; height: clamp(300px, 52vw, 460px); border-radius: 14px; overflow: hidden; }
.slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04);
  transition: opacity .8s ease, transform 2.5s ease;
}
.slide.active { opacity: 1; transform: scale(1); }

.tabs-wrap { margin-top: 16px; }
.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 7px;
}

.tab-btn {
  border: 1px solid transparent;
  background: rgba(255,255,255,.05);
  color: var(--muted);
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  font-weight: 700;
}
.tab-btn.active {
  color: #102449;
  background: linear-gradient(180deg, #cae8ff, #a6d8ff);
  border-color: rgba(148,205,255,.7);
}

.tab-panel { display: none; margin-top: 12px; }
.tab-panel.active { display: block; }

.card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 16px;
}

.verse-card h3,
.live-card h3,
.give-card h3 { margin: 0 0 8px; font-size: 1.02rem; }
.verse { margin: 0 0 10px; font-size: .95rem; line-height: 1.55; }
.ref { margin: 0; color: #f7d9a8; font-weight: 700; }

.grid-actions {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.action { text-decoration: none; color: #fff; min-height: 100px; }
.action h4 { margin: 0 0 8px; font-size: .96rem; }
.action p { margin: 0; color: #dbe7ff; font-size: .83rem; }
.a1 { background: linear-gradient(145deg, #314f9d, #243a79); }
.a2 { background: linear-gradient(145deg, #3e6bb5, #304c8f); }
.a3 { background: linear-gradient(145deg, #7e4ba4, #603887); }
.a4 { background: linear-gradient(145deg, #a35c45, #7f4634); }

.live-card {
  background: linear-gradient(140deg, rgba(255,198,198,.18), rgba(255,239,199,.2));
}
.next-service { margin: 12px 0; display: grid; gap: 3px; color: #fff; }
.next-service span { color: #fee6bc; font-size: .82rem; }

.give-card ul { margin: 8px 0 12px; padding-left: 18px; }
.give-card li { margin-bottom: 8px; }
.subtle { color: #d6dff0; font-size: .82rem; }

.drawer {
  position: fixed; top: 0; left: -310px; width: 300px; height: 100%;
  z-index: 30;
  background: linear-gradient(160deg, #121f46, #1f1738);
  border-right: 1px solid rgba(255,255,255,.12);
  transition: left .25s ease;
  padding: 12px;
}
.drawer.open { left: 0; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.drawer nav { display: grid; gap: 6px; }
.drawer nav a {
  color: #f0f4ff;
  text-decoration: none;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  font-size: .92rem;
}

.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; z-index: 20; transition: opacity .2s ease;
}
.overlay.show { opacity: 1; pointer-events: auto; }

.ministry-modal {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,.56);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.ministry-modal.show { display: flex; }
.ministry-shell {
  width: min(760px, 96vw);
  max-height: 92vh;
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(160deg, #171c38, #231a36);
  padding: 16px;
  position: relative;
}
.modal-close { position: sticky; top: 2px; float: right; }

.ministry-hero {
  border-radius: 16px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(130deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
}
.ministry-hero h3 { margin: 0 0 8px; font: 800 1.35rem/1.2 "Literata", serif; }
.ministry-hero p { margin: 0; line-height: 1.6; }

@media (max-width: 860px) {
  .hero-slider { height: 320px; }
  .small-btn { display: none; }
  .grid-actions { grid-template-columns: 1fr; }
}