/* Faith Focus with James J. — Global Styles */
:root{
  --navy-900:#0a0f1f;
  --navy-800:#101936;
  --navy-700:#182349;
  --gold-500:#d4af37;
  --gold-400:#e6c66b;
  --text-100:#f7f8fb;
  --text-300:#d6d9e6;
  --text-700:#a5acc2;
  --maxw:1200px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 400px at 50% -50%, rgba(212,175,55,.15), transparent), var(--navy-900);color:var(--text-100)}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";line-height:1.6}
img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin:auto;padding:clamp(16px,3vw,32px)}
.gold{color:var(--gold-400)}

/* Header */
.site-header .banner{width:100%;height:auto;object-fit:cover}

/* Hero */
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(16px,3vw,40px);align-items:center}
.hero h1{font-family:"Cormorant Garamond", serif;font-weight:700;font-size:clamp(28px,5vw,56px);line-height:1.1;margin:0 0 10px}
.hero .subtitle{color:var(--text-300);font-size:clamp(15px,2.2vw,18px);margin:0 0 20px}
.hero .ecover{filter:drop-shadow(0 20px 40px rgba(0,0,0,.35));}

/* Opt-in */
.optin{display:grid;grid-template-columns:1fr 1fr;gap:12px;backdrop-filter:blur(2px)}
.field-group{display:flex;flex-direction:column}
.field-group label{font-size:12px;color:var(--text-700);margin-bottom:6px}
.field-group input{padding:14px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;outline:none}
.field-group input::placeholder{color:rgba(255,255,255,.6)}
.btn{cursor:pointer;border:0;border-radius:999px;padding:14px 20px;font-weight:700}
.btn-gold{background:linear-gradient(135deg,var(--gold-500),var(--gold-400));color:#2b2300;box-shadow:0 10px 24px rgba(212,175,55,.25)}
.privacy{grid-column:1/-1;font-size:12px;color:var(--text-700);margin:6px 4px 0}

/* Trust/About */
.trust{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center}
.trust .logo{width:100%;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.trust h2{font-family:"Cormorant Garamond", serif;font-size:clamp(22px,3vw,36px);margin:0 0 6px}
.trust p{margin:0;color:var(--text-300)}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.08);text-align:center;padding:24px;color:var(--text-700)}

/* Bottom About Section */
.about-bottom{display:grid;grid-template-columns:180px 1fr;gap:clamp(16px,3vw,28px);align-items:center;margin:clamp(24px,5vw,60px) auto}
.about-bottom .portrait{
  width:100%;
  max-width:220px;
  aspect-ratio:1/1;
  border-radius:50%;
  border:4px solid var(--gold-400);
  box-shadow:0 18px 40px rgba(0,0,0,.35), 0 0 0 8px rgba(212,175,55,.12);
  object-fit:cover;
}
.about-bottom .about-copy h2{font-family:"Cormorant Garamond", serif;font-size:clamp(22px,3vw,36px);margin:0 0 8px}
.about-bottom .about-copy p{margin:.4rem 0;color:var(--text-300)}

@media (max-width: 800px){
  .about-bottom{grid-template-columns:1fr;text-align:center}
  .about-bottom .portrait{margin:0 auto 8px}
}

/* Promises page */
.header-sticky{position:sticky;top:0;z-index:10;background:linear-gradient(180deg, rgba(10,15,31,.95), rgba(10,15,31,.75));backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.08)}
.header-sticky .bar{display:flex;align-items:center;gap:12px;max-width:var(--maxw);margin:auto;padding:10px 16px}
.header-sticky .brand{display:flex;align-items:center;gap:10px}
.header-sticky .brand img{width:40px;height:40px;border-radius:10px}
.header-sticky h1{font-family:"Cormorant Garamond", serif;font-size:22px;margin:0}

.full-bleed{width:100vw;margin-left:50%;transform:translateX(-50%)}
.section{min-height:100svh;display:grid;place-items:center;padding:clamp(20px,6vw,60px)}
.section .content{max-width:900px}
.section h2{font-family:"Cormorant Garamond", serif;color:var(--gold-400);font-size:clamp(26px,4.2vw,52px);line-height:1.1;margin:0 0 12px;text-shadow:0 0 20px rgba(212,175,55,.25)}
.section h3{font-family:"Cormorant Garamond", serif;font-size:clamp(18px,2.8vw,30px);margin:20px 0 8px}
.section p{color:var(--text-300)}
.bg-stars{background:radial-gradient(800px 300px at 50% -10%, rgba(230,198,107,.2), transparent), linear-gradient(180deg,var(--navy-900),var(--navy-800));}

/* Enhanced Promise Cards */
.promise-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:clamp(24px,4vw,40px);
  margin:clamp(40px,8vw,80px) 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 20px 40px rgba(0,0,0,.35);
  backdrop-filter:blur(4px);
  position:relative;
  overflow:hidden;
}

.promise-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(212,175,55,.08), transparent 50%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}

.promise-card:hover::before{opacity:1}

/* Typography Enhancements */
.promise-card h1{
  font-family:"Cormorant Garamond", serif;
  font-size:clamp(32px,5vw,56px);
  font-weight:700;
  color:var(--gold-400);
  text-align:center;
  margin:0 0 clamp(16px,3vw,24px);
  text-shadow:0 0 30px rgba(212,175,55,.3);
  line-height:1.1;
}

.promise-card h2{
  font-family:"Cormorant Garamond", serif;
  font-size:clamp(28px,4.5vw,42px);
  font-weight:600;
  color:var(--gold-400);
  margin:clamp(32px,6vw,48px) 0 clamp(16px,3vw,24px);
  text-shadow:0 0 20px rgba(212,175,55,.25);
  line-height:1.2;
}

.promise-card h3{
  font-family:"Cormorant Garamond", serif;
  font-size:clamp(22px,3.5vw,32px);
  font-weight:600;
  color:var(--text-100);
  margin:clamp(24px,4vw,32px) 0 clamp(12px,2vw,16px);
  line-height:1.3;
}

.promise-card p{
  font-size:clamp(16px,2.2vw,18px);
  line-height:1.7;
  color:var(--text-300);
  margin:0 0 clamp(16px,3vw,20px);
}

.promise-card p:last-child{margin-bottom:0}

/* Scripture Styling */
.promise-card p strong:first-child{
  display:block;
  font-family:"Cormorant Garamond", serif;
  font-size:clamp(18px,2.5vw,20px);
  color:var(--gold-500);
  margin-bottom:8px;
  font-weight:600;
}

.promise-card em{
  font-style:italic;
  color:var(--text-100);
  font-size:clamp(15px,2.1vw,17px);
  line-height:1.6;
  display:block;
  padding:clamp(16px,3vw,20px);
  background:rgba(212,175,55,.08);
  border-left:3px solid var(--gold-500);
  border-radius:0 8px 8px 0;
  margin:clamp(16px,3vw,20px) 0;
}

/* Action Steps & Special Callouts */
.promise-card p:has(> strong:contains("Action Step")){
  background:rgba(212,175,55,.12);
  border:1px solid rgba(212,175,55,.2);
  border-radius:12px;
  padding:clamp(16px,3vw,20px);
  margin:clamp(20px,4vw,24px) 0;
}

/* Dividers */
.promise-card hr{
  border:none;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(212,175,55,.3), transparent);
  margin:clamp(32px,6vw,48px) 0;
}

/* Prayer Text */
.promise-card p:contains("Pray with me"){
  font-family:"Cormorant Garamond", serif;
  font-size:clamp(18px,2.5vw,20px);
  color:var(--gold-400);
  text-align:center;
  margin:clamp(24px,4vw,32px) 0 clamp(16px,3vw,20px);
}

.promise-media{display:grid;grid-template-columns:1fr;gap:16px}
.promise-media img{width:100%;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35)}

.footer-cta{padding:60px 16px;text-align:center}
.footer-cta .btn{font-size:18px;padding:16px 28px}

/* Scroll Progress Indicator */
.scroll-progress{
  position:fixed;
  top:0;left:0;
  width:100%;
  height:3px;
  background:rgba(212,175,55,.2);
  z-index:1000;
}

.scroll-progress::after{
  content:'';
  position:absolute;
  top:0;left:0;
  height:100%;
  background:linear-gradient(90deg, var(--gold-500), var(--gold-400));
  width:var(--scroll-progress, 0%);
  transition:width .1s ease;
}

/* Mobile adjustments */
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .optin{grid-template-columns:1fr}
  .trust{grid-template-columns:80px 1fr}
}