@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Raleway:wght@300;400;500;600;700&family=Cinzel:wght@400;600;700&display=swap');

:root {
  --midnight: #0a0d18;
  --deep: #0f1325;
  --navy: #141929;
  --panel: #1a2035;
  --gold: #c8973a;
  --gold-light: #e8b84b;
  --gold-pale: #f5d78e;
  --ivory: #f5f0e8;
  --ivory-dim: #c8bfad;
  --white: #ffffff;
  --border: rgba(200,151,58,0.2);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--midnight); color:var(--ivory); font-family:'Raleway',sans-serif; overflow-x:hidden; line-height:1.7; }
a { text-decoration:none; transition:0.3s; }
img { max-width:100%; }

body::after {
  content:''; position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:0.018; pointer-events:none; z-index:9000;
}

/* NAVBAR */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:0 5%; height:72px;
  background:linear-gradient(to bottom,rgba(10,13,24,0.98),rgba(10,13,24,0.85));
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.navbar .logo img { height:44px; object-fit:contain; }
.navbar nav ul { list-style:none; display:flex; gap:4px; align-items:center; }
.navbar nav ul li a {
  font-size:0.72rem; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  color:var(--ivory-dim); padding:8px 12px; border-radius:4px; transition:0.3s;
}
.navbar nav ul li a:hover, .navbar nav ul li a.active { color:var(--gold); }
.navbar .nav-cta {
  background:var(--gold) !important; color:var(--midnight) !important;
  font-weight:700 !important; padding:9px 18px !important;
}
.navbar .nav-cta:hover { background:var(--gold-light) !important; opacity:1 !important; }

/* HERO */
.hero { min-height:100vh; position:relative; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.hero-bg {
  position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(10,13,24,0.45) 0%,rgba(10,13,24,0.6) 50%,rgba(10,13,24,0.92) 100%),
    url('images/worship.jpg') center/cover no-repeat;
}
.hero-glow {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 40% at 50% 30%,rgba(200,151,58,0.07) 0%,transparent 70%);
}
.hero-content { position:relative; z-index:2; max-width:860px; padding:72px 24px 0; }
.hero-eyebrow { font-family:'Cinzel',serif; font-size:0.68rem; letter-spacing:5px; color:var(--gold); text-transform:uppercase; margin-bottom:24px; opacity:0; animation:fadeUp 1s ease 0.3s forwards; }
.hero h1 { font-family:'Playfair Display',serif; font-size:clamp(44px,7.5vw,92px); font-weight:900; line-height:0.95; color:var(--white); margin-bottom:28px; opacity:0; animation:fadeUp 1.2s ease 0.5s forwards; }
.hero h1 em { font-style:italic; color:var(--gold); }
.hero-sub { font-size:0.95rem; color:var(--ivory-dim); letter-spacing:1px; margin-bottom:48px; opacity:0; animation:fadeUp 1.2s ease 0.7s forwards; }
.hero-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; opacity:0; animation:fadeUp 1.2s ease 0.9s forwards; }

.btn-gold { padding:16px 40px; background:var(--gold); color:var(--midnight); font-family:'Raleway',sans-serif; font-size:0.72rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; border:none; cursor:pointer; transition:0.3s; display:inline-block; }
.btn-gold:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 10px 30px rgba(200,151,58,0.3); }
.btn-outline { padding:15px 40px; background:transparent; color:var(--ivory); border:1px solid rgba(245,240,232,0.3); font-family:'Raleway',sans-serif; font-size:0.72rem; font-weight:600; letter-spacing:3px; text-transform:uppercase; cursor:pointer; transition:0.3s; display:inline-block; }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }

/* SECTIONS */
.section { padding:100px 5%; }
.container { max-width:1200px; margin:0 auto; }
.section-label { font-family:'Cinzel',serif; font-size:0.62rem; letter-spacing:5px; color:var(--gold); text-transform:uppercase; margin-bottom:16px; display:flex; align-items:center; gap:16px; }
.section-label::before { content:''; display:block; width:28px; height:1px; background:var(--gold); }
.section-title { font-family:'Playfair Display',serif; font-size:clamp(30px,4vw,52px); font-weight:700; color:var(--white); line-height:1.1; margin-bottom:20px; }
.section-title em { font-style:italic; color:var(--gold); }
.section-body { font-size:0.95rem; color:var(--ivory-dim); max-width:600px; line-height:1.9; }

/* CARDS */
.card { background:var(--panel); border:1px solid var(--border); padding:40px; transition:0.4s; position:relative; overflow:hidden; }
.card::before { content:''; position:absolute; top:0; left:0; width:3px; height:0; background:var(--gold); transition:height 0.5s ease; }
.card:hover { border-color:rgba(200,151,58,0.4); }
.card:hover::before { height:100%; }

/* DIVIDER */
.divider { width:100%; height:1px; background:linear-gradient(to right,transparent,var(--border),transparent); }

/* SERVICE TIMES */
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:48px; }
.service-card { background:var(--panel); border:1px solid var(--border); padding:36px 28px; text-align:center; transition:0.4s; }
.service-card:hover { border-color:var(--gold); background:var(--navy); }
.service-day { font-family:'Cinzel',serif; font-size:0.62rem; letter-spacing:4px; color:var(--gold); text-transform:uppercase; margin-bottom:12px; }
.service-time { font-family:'Playfair Display',serif; font-size:2rem; font-weight:700; color:var(--white); margin-bottom:8px; }
.service-name { font-size:0.8rem; color:var(--ivory-dim); letter-spacing:1px; }

/* PAGE HERO */
.page-hero { min-height:52vh; display:flex; align-items:flex-end; padding:0 5% 80px; position:relative; overflow:hidden; padding-top:72px; }
.page-hero-bg { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(10,13,24,0.35) 0%,rgba(10,13,24,0.88) 100%), url('images/worship.jpg') center/cover no-repeat; }
.page-hero-content { position:relative; z-index:2; max-width:1200px; width:100%; }
.page-hero-eyebrow { font-family:'Cinzel',serif; font-size:0.62rem; letter-spacing:5px; color:var(--gold); text-transform:uppercase; margin-bottom:16px; }
.page-hero h1 { font-family:'Playfair Display',serif; font-size:clamp(36px,6vw,72px); font-weight:900; color:var(--white); line-height:1; }
.page-hero h1 em { font-style:italic; color:var(--gold); }

/* SOCIAL */
.social-bar { display:flex; gap:10px; flex-wrap:wrap; }
.social-link { display:flex; align-items:center; gap:10px; padding:11px 18px; border:1px solid var(--border); font-size:0.78rem; font-weight:600; color:var(--ivory-dim); letter-spacing:1px; transition:0.3s; background:var(--panel); }
.social-link:hover { border-color:var(--gold); color:var(--gold); background:var(--navy); }

/* FOOTER */
footer { background:var(--deep); border-top:1px solid var(--border); padding:80px 5% 40px; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:60px; max-width:1200px; margin:0 auto 60px; }
.footer-brand-name { font-family:'Cinzel',serif; font-size:1rem; letter-spacing:3px; color:var(--gold); margin-bottom:14px; }
.footer-desc { font-size:0.82rem; color:var(--ivory-dim); line-height:1.9; margin-bottom:24px; }
.footer-heading { font-family:'Cinzel',serif; font-size:0.6rem; letter-spacing:4px; color:var(--gold); text-transform:uppercase; margin-bottom:20px; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-links a { font-size:0.82rem; color:var(--ivory-dim); transition:0.3s; }
.footer-links a:hover { color:var(--gold); padding-left:6px; }
.footer-bottom { border-top:1px solid var(--border); padding-top:28px; text-align:center; font-size:0.72rem; color:var(--ivory-dim); opacity:0.5; max-width:1200px; margin:0 auto; }

@keyframes fadeUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
.reveal { opacity:0; transform:translateY(36px); transition:opacity 0.9s ease,transform 0.9s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

@media(max-width:1024px){ .navbar nav ul { gap:2px; } .navbar nav ul li a { padding:6px 8px; font-size:0.68rem; } }
@media(max-width:900px){ .navbar nav { display:none; } .service-grid { grid-template-columns:1fr 1fr; } .footer-grid { grid-template-columns:1fr; gap:40px; } .section { padding:70px 5%; } }
@media(max-width:600px){ .service-grid { grid-template-columns:1fr; } .hero-btns { flex-direction:column; align-items:center; } }