/* styles.css - Living Word Ministry (Modern & Clean) */
:root{
  --navy:#0b3b66;
  --gold:#c79a2f;
  --soft:#f6fbff;
  --maxwidth:1100px;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; color:#10304a; background:var(--soft); line-height:1.45}
.container{max-width:var(--maxwidth); margin:0 auto; padding:28px}
header{background:white; border-bottom:1px solid #e6eef6; position:sticky; top:0; z-index:20}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; max-width:var(--maxwidth); margin:0 auto}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none}
.logo img{height:48px; display:block}
.logo h1{font-size:16px; margin:0; letter-spacing:0.6px}
nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
nav a{color:var(--navy); text-decoration:none; font-weight:600}

.hero{display:grid; grid-template-columns:1fr 420px; gap:24px; align-items:center; padding:48px 20px}
.hero-left{padding:36px 12px}
.herotitle{font-size:28px; margin:0 0 12px; color:var(--navy)}
.herosub{font-size:16px; color:#264b61; margin-bottom:18px}
.cta{display:flex; gap:12px; margin-top:12px}
.btn{padding:12px 18px; border-radius:8px; border:0; cursor:pointer; font-weight:700}
.btn-primary{background:var(--navy); color:white}
.btn-outline{background:transparent; border:2px solid var(--navy); color:var(--navy)}

.card{background:white; padding:18px; border-radius:10px; box-shadow:0 6px 18px rgba(9,30,44,0.04)}
.hero-right img{width:100%; border-radius:10px; box-shadow:0 8px 30px rgba(11,59,102,0.08)}

/* features */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:28px 0}
.feature{background:white; padding:18px; border-radius:10px; text-align:center}
.icon{font-size:28px; color:var(--navy); margin-bottom:8px}

/* scripture */
.scripture{background:linear-gradient(180deg, rgba(11,59,102,0.03), rgba(199,154,47,0.02)); padding:18px; border-radius:10px; margin:20px 0}

/* pages */
.section{padding:22px 0}
.grid2{display:grid; grid-template-columns:1fr 420px; gap:18px; align-items:start}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 420px; gap:18px}
.contact-info p{margin:8px 0}
footer{background:var(--navy); color:white; padding:18px; margin-top:28px; text-align:center; font-size:14px}

/* responsive */
@media(max-width:900px){
  .hero{grid-template-columns:1fr; padding:20px}
  .grid2, .contact-grid{grid-template-columns:1fr}
  nav ul{display:none}
  .logo img{height:40px}
}