
:root{
  --bg: #0f1115;
  --card: #171a21;
  --text: #e9eef5;
  --muted:#b7c0ce;
  --accent:#2e87ff;
  --accent2:#ff6b6b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,#0f1115 0%,#12151b 40%,#101317 100%);scroll-behavior:smooth}
a{color:var(--accent);text-decoration:none}
header{position:relative;padding:16px 20px;border-bottom:1px solid #232733;background:rgba(0,0,0,0.6);backdrop-filter:saturate(140%) blur(8px)}
.nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px}
.logo img{width:46px;height:46px;border-radius:999px;background:#fff;object-fit:cover}
.logo h1{font-size:18px;margin:0;font-weight:700}
.menu{display:flex;gap:10px;flex-wrap:wrap}
.menu a{padding:10px 14px;border:1px solid #303647;border-radius:14px;background:#12151a}
.menu a:hover{border-color:var(--accent)}
.container{max-width:1100px;margin:0 auto;padding:20px}
.hero{margin:24px auto;background:#0b0c10;border-radius:28px;overflow:hidden;border:1px solid #252a35}
.hero-inner{position:relative;padding:48px 28px;min-height:340px;background-image:linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.85)), url('https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1600&auto=format&fit=crop');
background-size:cover;background-position:center;border-radius:28px}
.centered{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px}
.hero .badge{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);font-size:12px}
h2.title{font-size:40px;margin:0}
p.scripture{font-size:20px;max-width:820px;margin:0;color:#f4f6fb}
.actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.btn{padding:12px 18px;border-radius:14px;border:1px solid #2b3242}
.btn.primary{background:var(--accent);color:#031022;border-color:transparent;font-weight:700}
.btn.ghost{background:rgba(0,0,0,.3)}
.section{margin:24px auto;padding:18px;border-radius:18px;border:1px solid #262a36;background:var(--card)}
.section h3{margin:8px 0 8px 0;font-size:22px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.card{background:#0f131a;border:1px solid #262c37;padding:14px;border-radius:14px}
.card h4{margin:8px 0}
.card p{color:var(--muted);margin:6px 0}
footer{margin:40px 0 60px;padding:20px 0;border-top:1px solid #262a36}
footer .social{display:flex;gap:12px;flex-wrap:wrap}
.accordion details{border:1px solid #2a2f3a;border-radius:12px;padding:12px;background:#0e1218}
.accordion summary{cursor:pointer;font-weight:600}
.tag{display:inline-block;padding:4px 8px;border-radius:999px;background:#0d1220;border:1px solid #2f3650;color:#9fb4ff;font-size:12px;margin-right:6px;margin-top:6px}
@media (max-width:600px){
  h2.title{font-size:32px}
  p.scripture{font-size:18px}
}
