:root {
  --primary: #a1122f;
  --secondary: #cc8b2c;
  --accent: #f4d27a;
  --bg-start: #3c0919;
  --bg-end: #0f172a;
  --surface: rgba(255,255,255,0.08);
  --surface-border: rgba(255,255,255,0.16);
  --text: #fff8ef;
  --muted: #f0e2d2;
  --heading-font: 'Poppins', sans-serif;
  --body-font: 'Inter', sans-serif;
  --button-radius: 18px;
  --card-radius: 28px;
  --font-scale: 1;
  --hero-overlay: .48;
  --hero-image: none;
  --glow: 0 22px 60px rgba(161,18,47,.34), 0 12px 30px rgba(204,139,44,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body-font);
  font-size:calc(16px * var(--font-scale));
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(161,18,47,.32), transparent 32%),
    radial-gradient(circle at 82% 14%, rgba(244,210,122,.18), transparent 18%),
    radial-gradient(circle at bottom right, rgba(204,139,44,.20), transparent 24%),
    linear-gradient(135deg,var(--bg-start),var(--bg-end));
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
.container{width:min(1180px, calc(100% - 32px)); margin:0 auto}
.glass{
  background:linear-gradient(135deg, rgba(14,24,46,.72), rgba(10,18,35,.62));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--card-radius);
  box-shadow:0 14px 50px rgba(15,23,42,.25);
}
.topbar{
  position:sticky;
  top:14px;
  z-index:50;
  margin:14px auto 0;
  width:min(1180px, calc(100% - 32px));
}
.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px 24px;
}
.brand-block{display:block; flex:1; min-width:0}
.brand{
  font-family:var(--heading-font);
  font-size:clamp(1.55rem, 1.8vw, 2.05rem);
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.05;
}
.tagline{color:var(--muted); font-size:.96rem; margin-top:8px; max-width:700px}
.main-nav{display:flex; gap:22px; align-items:center; justify-content:flex-end; flex-wrap:wrap}
.main-nav a{color:var(--muted); font-weight:700; padding:10px 0; position:relative}
.main-nav a:hover,.main-nav a.active{color:var(--text)}
.main-nav a.active::after,.main-nav a:hover::after{
  content:''; position:absolute; left:0; right:0; bottom:2px; height:2px;
  background:linear-gradient(90deg,var(--accent),#ff8a3d,var(--secondary)); border-radius:10px; box-shadow:0 0 18px rgba(244,210,122,.45);
}
.pill,.eyebrow{display:inline-flex; align-items:center; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14)}
.eyebrow{font-size:.9rem; color:#fff; margin-bottom:16px}
h1,h2,h3,h4{font-family:var(--heading-font); margin:0 0 14px; line-height:1.08}
h1{font-size:clamp(2.8rem, 5.4vw, 4.9rem); font-weight:800}
h2{font-size:clamp(2rem, 3.6vw, 3.1rem)}
h3{font-size:1.4rem}
p{color:var(--muted); line-height:1.72; margin-top:0}
.gradient-text{background:linear-gradient(135deg,#ffffff,#f9dba4,#f0b274);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero{
  min-height:92vh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  background-image:var(--hero-image);
  background-size:cover;
  background-position:center;
  border-radius:0 0 34px 34px;
  box-shadow:0 20px 60px rgba(0,0,0,.35)
}
.hero-overlay,.page-banner-overlay{position:absolute; inset:0; background:linear-gradient(135deg, rgba(28,8,20,.52), rgba(12,22,42,.78)), radial-gradient(circle at top left, rgba(161,18,47,.22), transparent 28%), radial-gradient(circle at 82% 18%, rgba(244,210,122,.10), transparent 16%)}
.hero-content{position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:32px; align-items:center; padding:128px 0 84px}
.hero-copy{max-width:760px}
.lead{font-size:1.08rem; max-width:67ch}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin:26px 0}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 22px; border-radius:var(--button-radius); border:none; cursor:pointer; font-weight:800; transition:transform .2s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--primary),#d84b2a 52%,var(--secondary)); color:#fff; box-shadow:var(--glow)}
.btn-secondary{background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.18)}
.btn-ghost{background:transparent; border:1px solid rgba(255,255,255,.16); color:var(--text)}
.text-link{color:#fff; font-weight:700; display:inline-block; margin-top:10px}
.hero-card,.verse,.feature-card,.contact-card,.panel,.admin-card,.sidebar,.cta,.story-panel,.mini-card,.stat-card,.page-card{padding:28px}
.glow-card{box-shadow:var(--glow),0 14px 50px rgba(15,23,42,.25)}
.info-list{list-style:none; padding:0; margin:20px 0 0; display:grid; gap:12px}
.section{padding:84px 0; position:relative}
.alt{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01))}
.section-surface::before{
  content:''; position:absolute; inset:18px 16px; border-radius:30px;
  background-size:cover; background-position:center; opacity:.30; pointer-events:none; z-index:0;
}
.section-surface > .container{position:relative; z-index:1}
.home-overview::before{background-image:url('../uploads/generated/about-wallpaper.jpg')}
.home-cta-band::before{background-image:url('../uploads/generated/fellowship-wallpaper.jpg'); opacity:.24}
.about-story-band::before{background-image:url('../uploads/generated/about-wallpaper.jpg')}
.about-legacy-band::before{background-image:url('../uploads/generated/home-wallpaper.jpg'); opacity:.18}
.about-leadership-band::before{background-image:url('../uploads/generated/contact-wallpaper.jpg'); opacity:.16}
.fellowship-intro-band::before{background-image:url('../uploads/generated/fellowship-wallpaper.jpg')}
.fellowship-features-band::before{background-image:url('../uploads/generated/home-wallpaper.jpg'); opacity:.18}
.fellowship-visit-band::before{background-image:url('../uploads/generated/about-wallpaper.jpg'); opacity:.18}
.contact-band::before{background-image:url('../uploads/generated/contact-wallpaper.jpg')}
.gallery-clean-band::before{content:''; position:absolute; inset:18px 16px; border-radius:30px; background:linear-gradient(135deg, rgba(161,18,47,.10), rgba(255,255,255,.02) 45%, rgba(204,139,44,.08)); z-index:0}
.gallery-clean-band > .container{position:relative; z-index:1}
.split{display:grid; grid-template-columns:.85fr 1.15fr; gap:28px; align-items:start}
.grid{display:grid; gap:20px}
.cards-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.page-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
.contact-grid{display:grid; grid-template-columns:1fr .9fr; gap:28px; align-items:start}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:24px}
.stats-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:24px}
.stat-card strong{font-size:.95rem; color:#fff}
.stat-card span{color:var(--muted); font-weight:700}
.two-panel{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.feature-card{transition:transform .25s ease, border-color .25s ease}
.feature-card:hover{transform:translateY(-6px); border-color:rgba(255,255,255,.26)}
.cta{display:flex; align-items:center; justify-content:space-between; gap:24px}
.gallery-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; align-items:stretch}
.gallery-card{overflow:hidden; min-height:360px; display:block}
.gallery-card img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease}
.gallery-card:hover img{transform:scale(1.04)}
.contact-points{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; margin-top:18px}
.page-banner{
  position:relative;
  min-height:390px;
  display:flex;
  align-items:end;
  overflow:hidden;
  margin-top:24px;
  background-image:var(--page-banner-image);
  background-size:cover;
  background-position:center;
  border-radius:0 0 30px 30px;
  box-shadow:0 20px 60px rgba(0,0,0,.35)
}
.page-banner-content{position:relative; z-index:1; padding:118px 0 56px}
.footer-site{
  margin-top:56px;
  padding:42px 0 26px;
  background:linear-gradient(180deg, rgba(10,18,35,.94), rgba(8,13,28,.98));
  border-top:1px solid rgba(255,255,255,.10)
}
.footer-shell{display:grid; grid-template-columns:1.2fr .8fr .9fr; gap:28px}
.footer-site h3,.footer-site h4{margin-bottom:12px}
.footer-links{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.footer-links a{color:var(--muted)}
.footer-links a:hover{color:#fff}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:28px; padding-top:18px; border-top:1px solid rgba(255,255,255,.10); color:var(--muted)}
.whatsapp-pill{display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:999px; background:#25D366; color:#fff; font-weight:700}
.admin-body{min-height:100vh; display:grid; place-items:center}
.admin-center{width:min(520px, calc(100% - 24px))}
.admin-card input, .admin-card select, .admin-card textarea, .panel input, .panel select, .panel textarea{
  width:100%; padding:14px 14px; border-radius:16px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); color:var(--text); outline:none; margin-top:8px
}
.panel input[type=color]{height:50px; padding:6px}
.panel textarea{min-height:110px; resize:vertical}
label{display:block; font-weight:700; color:#fff}
.alert{margin:12px 0 18px; padding:14px 16px; border-radius:16px; background:rgba(239,68,68,.16); border:1px solid rgba(239,68,68,.4)}
.alert.success{background:rgba(34,197,94,.16); border-color:rgba(34,197,94,.4)}
.back-link{display:inline-block; margin-top:14px; color:var(--muted)}
.dashboard-body{display:block; padding:20px}
.admin-shell{display:grid; grid-template-columns:320px 1fr; gap:20px; width:min(1380px,100%); margin:0 auto}
.sidebar{position:sticky; top:20px; align-self:start}
.dashboard-content{display:grid; gap:20px}
.form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 18px}
.span-2{grid-column:span 2}
.checkbox-wrap{display:flex; align-items:end}
input::placeholder, textarea::placeholder{color:rgba(255,255,255,.65)}
.upload-note{color:var(--muted); font-size:.92rem; margin-top:6px}
.wallpaper-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.wallpaper-item{padding:18px}
.wallpaper-item img{width:100%; height:180px; object-fit:cover; border-radius:18px; margin:12px 0; border:1px solid rgba(255,255,255,.12)}
.wallpaper-item input[type=file]{padding:12px}
body.page-home, body.page-about, body.page-fellowship, body.page-gallery, body.page-contact{background-attachment:fixed; background-size:cover; background-position:center; background-repeat:no-repeat}
body.page-home{background-image:radial-gradient(circle at top left, rgba(161,18,47,.26), transparent 24%), radial-gradient(circle at 82% 18%, rgba(244,210,122,.14), transparent 14%), linear-gradient(rgba(8,15,30,.72), rgba(8,15,30,.78)), var(--hero-image)}
body.page-about{background-image:radial-gradient(circle at top left, rgba(161,18,47,.22), transparent 26%), linear-gradient(rgba(8,15,30,.82), rgba(8,15,30,.88)), url('../uploads/generated/about-wallpaper.jpg')}
body.page-fellowship{background-image:radial-gradient(circle at 80% 15%, rgba(244,210,122,.12), transparent 18%), linear-gradient(rgba(8,15,30,.82), rgba(8,15,30,.88)), url('../uploads/generated/fellowship-wallpaper.jpg')}
body.page-gallery{background-image:radial-gradient(circle at top left, rgba(161,18,47,.16), transparent 24%), radial-gradient(circle at bottom right, rgba(204,139,44,.12), transparent 22%), linear-gradient(135deg, rgba(60,9,25,.96), rgba(15,23,42,.98))}
body.page-contact{background-image:radial-gradient(circle at 84% 14%, rgba(244,210,122,.14), transparent 16%), linear-gradient(rgba(8,15,30,.82), rgba(8,15,30,.88)), url('../uploads/generated/contact-wallpaper.jpg')}
@media (max-width: 980px){
  .hero-content,.split,.contact-grid,.footer-shell,.admin-shell,.two-panel{grid-template-columns:1fr}
  .cards-3,.form-grid,.page-grid,.stats-row,.gallery-grid,.contact-points,.wallpaper-grid{grid-template-columns:1fr}
  .span-2{grid-column:span 1}
  .nav-wrap{flex-direction:column; align-items:flex-start}
  .brand{font-size:1.6rem}
  .main-nav{justify-content:flex-start; gap:18px}
  .hero{min-height:auto}
  .hero-content{padding:116px 0 72px}
  .footer-bottom{flex-direction:column; align-items:flex-start}
  body.page-home, body.page-about, body.page-fellowship, body.page-gallery, body.page-contact{background-attachment:scroll}
}
@media (max-width: 640px){
  .container{width:min(1180px, calc(100% - 20px))}
  .topbar{width:min(1180px, calc(100% - 20px)); top:8px}
  .nav-wrap{padding:16px 16px}
  .brand{font-size:1.38rem}
  .tagline{font-size:.88rem}
  .main-nav{gap:14px}
  h1{font-size:clamp(2.15rem, 11vw, 3.4rem)}
  h2{font-size:clamp(1.7rem, 8vw, 2.5rem)}
  .hero-content{padding:108px 0 64px}
  .section{padding:68px 0}
  .section-surface::before, .gallery-clean-band::before{inset:12px 10px; border-radius:24px}
  .page-banner{min-height:320px}
  .page-banner-content{padding:102px 0 36px}
}