:root{
  --ink: #0e1a1f;
  --bg: #0a1114;
  --bg-2: #0d161a;
  --fog: #cfe7f0;
  --soft: #9ec5c3;
  --teal: #5aa6a3;
  --sea: #3b7e8a;
  --mint: #b2dcd3;
  --line: #25444c;
  --hazard: #c1d9d4;
  --paper: #e7f4f2;
  --shadow: rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--fog);
  background: radial-gradient(1200px 600px at 10% -10%, #14313a 0%, transparent 60%),
              radial-gradient(1200px 600px at 110% 10%, #0e2a31 0%, transparent 60%),
              linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  overflow-x: hidden;
}
.noise-overlay{
  position: fixed; inset:0; pointer-events:none; opacity:.08; mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  z-index: 0;
}
.container{ width:min(1100px, 92vw); margin-inline:auto; }
.section{ padding: 72px 0; position: relative; }
.grid{ display: grid; gap: 20px; }
.grid.two{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.three{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card{
  background: rgba(21,36,41,.6);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 8px 24px var(--shadow);
  padding: 22px;
  backdrop-filter: blur(4px);
}
.site-header{
  position: sticky; top:0; z-index: 10;
  background: linear-gradient(180deg, rgba(8,14,16,.9), rgba(8,14,16,.3));
  border-bottom: 1px solid rgba(55,103,111,.3);
  backdrop-filter: blur(10px);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ color: var(--mint); font-weight:800; filter: drop-shadow(0 0 12px rgba(178,220,211,.35)); }
.brand-name{ color: var(--fog); text-decoration:none; font-weight:700; letter-spacing:.3px; }
.nav{ display:flex; gap:18px; flex-wrap:wrap; }
.nav a{ color: var(--soft); text-decoration:none; border-bottom: 1px dashed transparent; padding-bottom:2px; }
.nav a:hover{ border-bottom-color: var(--teal); }
.hero{
  position: relative; padding: 96px 0 72px;
  background: radial-gradient(800px 300px at 50% 0%, rgba(90,166,163,.25), transparent 60%);
}
.hero-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; }
h1{ font-size: clamp(2.4rem, 6vw, 4.5rem); margin:0; line-height:1.05; font-weight:800; letter-spacing:.5px; }
.subtitle{ max-width: 60ch; color: #d7eef5; opacity:.95 }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 18px; border-radius: 14px; text-decoration:none; font-weight:600;
  border:1px solid var(--line);
}
.btn.primary{ background: linear-gradient(180deg, var(--sea), var(--teal)); color:#071012; }
.btn.secondary{ background: linear-gradient(180deg, #dfeeed, var(--paper)); color:#213436; }
.btn.ghost{ background: transparent; color: var(--mint); }
.btn.wide{ width:100%; }
.donate-link{ color: var(--mint); font-weight:700; }
.glitch{ position: relative; text-shadow: 0 2px 18px rgba(72,168,170,.35); }
.glitch::before, .glitch::after{ content: attr(data-text); position:absolute; inset:0; pointer-events:none; opacity:.25; }
.glitch::before{ transform: translate(1px, -1px); color:#a5d7d3; mix-blend-mode: screen; }
.glitch::after{ transform: translate(-1px, 1px); color:#77bfc0; mix-blend-mode: screen; }
.panel p{ color:#e0f3f7; }
ul.styled{ padding-left: 1.1rem; }
ul.styled li{ margin: .4rem 0; color:#cfe7f0; }
.verse-section{ background: linear-gradient(180deg, rgba(33,68,76,.25), transparent); }
.section-title{ margin: 0 0 18px; font-size: 1.8rem; }
.verse-card{ display: grid; gap: 14px; }
.verse-meta{ display:flex; gap:10px; align-items:center; }
.chip{ border:1px solid var(--line); padding:4px 10px; border-radius: 999px; color: var(--mint); font-weight:600; }
.ref{ opacity:.9; color:#bfe4e1; }
.verse-texts{ display:grid; gap:12px; }
.verse{ margin:0; padding:14px 16px; background: rgba(14,32,37,.5); border:1px dashed var(--line); border-radius: 12px;
  font-family: "Noto Serif", serif; line-height: 1.5; }
.verse.eng{ font-size: 1.05rem; }
.verse.orig{ font-size: 1.06rem; }
.verse.orig[lang="he"]{ font-family: "Noto Serif Hebrew", "Noto Serif", serif; direction: rtl; }
.resource h3{ margin-top:0; }
.resource .tag{ display:inline-block; margin-top:10px; padding:4px 8px; border-radius:10px; background: rgba(191,228,225,.12); color:#bfe4e1; border:1px solid var(--line); }
.donate-section .donate-actions{ display:flex; flex-direction:column; gap:10px; }
.site-footer{
  border-top:1px solid rgba(55,103,111,.3);
  background: linear-gradient(180deg, rgba(8,14,16,.25), rgba(8,14,16,.8));
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 18px 0;
  flex-wrap: wrap;
}
.footer-inner a{ color: var(--soft); text-decoration:none; }
.fine{ color:#a7c6c5; font-size:.9rem; opacity:.95; }
.tip{ opacity:.8; }
@media (prefers-reduced-motion: no-preference){
  .glitch{ animation: calmPulse 5s ease-in-out infinite; }
  @keyframes calmPulse{
    0%,100%{ filter: drop-shadow(0 0 0 rgba(90,166,163,0.0)); }
    50%{ filter: drop-shadow(0 0 12px rgba(90,166,163,0.25)); }
  }
}