:root{
  --green-900:#0b3d2e;
  --green-700:#1f6f54;
  --green-500:#2e8b70;
  --neutral-050:#f5f7f6;
  --neutral-100:#e9eeec;
  --neutral-800:#1a1a1a;
  --accent-gold:#d4af37;
  --radius:14px;
  --shadow:0 10px 24px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui,-apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Helvetica, Arial;
  color:var(--neutral-800);
  background:var(--neutral-050);
  line-height:1.6;
}
a{color:var(--green-700);text-decoration:none}
a:hover{text-decoration:underline}
.header{position:sticky; top:0; z-index:1000; background:linear-gradient(0deg, rgba(255,255,255,.7), rgba(255,255,255,.7)), #fff; backdrop-filter:saturate(120%) blur(6px); border-bottom:1px solid var(--neutral-100)}
.nav{max-width:1100px; margin:auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:40px; height:40px}
.brand span{font-weight:700; letter-spacing:.2px; color:var(--green-900)}
.menu{display:flex; gap:18px; align-items:center}
.menu a{padding:8px 10px; border-radius:10px}
.menu a.active, .menu a:hover{background:var(--neutral-100)}
.burger{display:none; background:none; border:none; font-size:24px}
.hero{max-width:1100px; margin:30px auto; display:grid; gap:24px; grid-template-columns: 1.2fr 1fr; padding:0 20px}
.hero .card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.hero .visual img{width:100%; height:100%; object-fit:cover; display:block}
.hero .content{padding:28px}
.kicker{color:var(--green-700); font-weight:600; letter-spacing:.4px; text-transform:uppercase; font-size:.85rem}
h1{margin:.3rem 0 1rem; line-height:1.2; color:var(--green-900); font-size:clamp(1.8rem, 1.5rem + 1.6vw, 2.6rem)}
.lead{font-size:1.05rem}
.cta{display:inline-block; margin-top:16px; padding:12px 18px; border-radius:12px; background:var(--green-700); color:white; font-weight:600; box-shadow:var(--shadow)}
.cta.secondary{background:transparent; color:var(--green-700); border:2px solid var(--green-700); margin-left:10px}
.section{max-width:1100px; margin:40px auto; padding:0 20px}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:20px}
.card h3{margin-top:0; color:var(--green-900)}
.card .thumb{border-radius:12px; overflow:hidden; margin-bottom:12px}
.card .thumb img{width:100%; display:block}
.sermon-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.sermon-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.sermon-card header{padding:14px 16px 0}
.sermon-card .thumb{aspect-ratio:16/9; background:#e6f0ec; display:block}
.sermon-card .meta{padding:12px 16px; color:#333}
.sermon-card a.watch{display:block; padding:12px 16px; border-top:1px solid var(--neutral-100); text-align:center; font-weight:700; background:var(--green-700); color:white; border-radius:0 0 var(--radius) var(--radius)}
.footer{margin-top:60px; background:var(--green-900); color:#e6f0ec; padding:28px 20px}
.footer .wrap{max-width:1100px; margin:auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:20px}
.footer a{color:#e6f0ec}
.small{font-size:.9rem; opacity:.9}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.muted{color:#444}
.badge{display:inline-block; padding:4px 10px; border-radius:999px; background:#e6f0ec; color:var(--green-900); font-weight:600; font-size:.8rem}
hr.soft{border:none; height:1px; background:var(--neutral-100); margin:26px 0}
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .cards, .grid-3, .sermon-grid{grid-template-columns:1fr}
  .footer .wrap{grid-template-columns:1fr}
  .menu{display:none}
  .burger{display:block; color:var(--green-900)}
  .menu.open{display:flex; flex-direction:column; gap:8px; background:#fff; position:absolute; top:60px; left:0; right:0; padding:12px 20px; border-bottom:1px solid var(--neutral-100)}
}


/* Icon helpers */
.icon { font-size:1.1em; vertical-align:-0.1em; margin-right:6px; }
.with-icon { display:inline-flex; align-items:center; gap:8px; }