*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:#faf8f5; color:#2c2c2c; line-height:1.65; overflow-x:hidden; }
a { color: inherit; }
.wave-bg { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:hidden; }
.wave-bg canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.page-shell { position:relative; min-height:100vh; z-index:1; }
.site-header { position:sticky; top:0; z-index:5; width:min(1080px,calc(100% - 32px)); margin:0 auto; padding:14px 0 10px; display:flex; align-items:center; justify-content:space-between; gap:16px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.site-header::before { content:""; position:absolute; inset:6px -12px 0; border:1px solid rgba(0,0,0,.06); background:rgba(250,248,245,.82); border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.055); z-index:-1; }
.brand { font-weight:800; letter-spacing:-.03em; text-decoration:none; color:#2c2c2c; white-space:nowrap; padding-left:10px; }
.nav { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; font-size:.92rem; }
.nav a { text-decoration:none; color:#444; font-weight:800; padding:7px 10px; border-radius:999px; transition:background .2s ease,color .2s ease; }
.nav a:hover,.nav a:focus-visible { background:rgba(192,57,43,.1); color:#c0392b; outline:none; }
.hero { position:relative; z-index:1; width:min(900px,calc(100% - 32px)); margin:0 auto; padding:44px 0 24px; text-align:center; }
.logo { width:min(340px,84vw); border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.12); margin-bottom:28px; }
.eyebrow { color:#c0392b; text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; font-weight:800; margin:0 0 8px; }
h1 { font-size:clamp(2.35rem,8vw,5rem); line-height:.95; letter-spacing:-.06em; margin:0 0 18px; }
.hero-subtitle { font-size:clamp(1.06rem,2vw,1.28rem); color:#474747; max-width:740px; margin:0 auto 26px; }
.buttons { display:grid; gap:12px; max-width:520px; margin:0 auto; }
.buttons-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:48px; padding:.9rem 1.15rem; border-radius:999px; text-decoration:none; font-weight:800; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,color .2s ease,background .2s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-youtube {
  background: #2c2c2c;
  color: #fff;
  box-shadow: 0 4px 14px rgba(44, 44, 44, 0.22);
}

.btn-youtube:hover {
  background: #c0392b;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(192, 57, 43, 0.32);
}

.btn svg { width:20px; height:20px; flex:0 0 auto; }
.btn-primary { background:#c0392b; color:#fff; box-shadow:0 4px 14px rgba(192,57,43,.35); }
.btn-primary:hover { background:#a93226; box-shadow:0 6px 20px rgba(192,57,43,.45); }
.btn-secondary { background:#fff; color:#2c2c2c; border:2px solid #ddd; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.btn-secondary:hover { border-color:#c0392b; color:#c0392b; }
.content { position:relative; z-index:1; width:min(900px,calc(100% - 32px)); margin:0 auto; padding:20px 0 80px; }
.content-section,.faq-section,.ai-summary,.scripture { background:rgba(255,255,255,.9); border:1px solid rgba(0,0,0,.08); border-radius:22px; padding:clamp(22px,4vw,36px); box-shadow:0 14px 45px rgba(0,0,0,.06); margin:18px 0; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
h2 { font-size:clamp(1.45rem,3vw,2.1rem); line-height:1.12; letter-spacing:-.04em; margin:0 0 14px; }
h3 { font-size:1.1rem; margin:22px 0 6px; }
p { margin:0 0 14px; }
p:last-child { margin-bottom:0; }
.content a:not(.btn):not(.link-grid a) { color:#a93226; font-weight:800; text-decoration-thickness:2px; text-underline-offset:3px; }
.scripture { border-left:4px solid #c0392b; font-weight:700; }
.content-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.content-actions .btn { min-height:44px; padding:.75rem 1rem; }
.link-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.link-grid a { display:block; background:#fff; border:1px solid #e7e0da; border-radius:16px; padding:16px; text-decoration:none; font-weight:800; }
.link-grid a span { display:block; font-weight:500; color:#555; margin-top:4px; }
.site-footer { position:relative; z-index:1; width:min(900px,calc(100% - 32px)); margin:-44px auto 0; padding:0 0 34px; text-align:center; color:#5a5a5a; font-size:.9rem; }
.site-footer a { color:#8f2b21; font-weight:800; text-decoration-thickness:2px; text-underline-offset:3px; }
@media (max-width:780px) {
  .site-header { position:relative; width:min(100% - 24px,540px); padding:12px 0 6px; flex-direction:column; align-items:stretch; gap:10px; }
  .site-header::before { inset:4px -4px 0; border-radius:24px; }
  .brand { text-align:center; padding:4px 0 0; font-size:1.05rem; }
  .nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; font-size:.9rem; }
  .nav a { background:rgba(255,255,255,.72); border:1px solid rgba(0,0,0,.07); text-align:center; padding:8px 6px; }
  .hero { padding-top:28px; }
  .logo { width:min(292px,82vw); margin-bottom:22px; }
  .buttons-row,.link-grid{grid-template-columns:1fr;}
  .btn { width:100%; }
}
@media (max-width:380px) {
  .nav { font-size:.82rem; }
  .nav a { padding:7px 4px; }
  .content-section,.faq-section,.ai-summary,.scripture { border-radius:18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .btn,.nav a { transition:none; }
}