/* Dear Friends website — targeted visual refresh (preserves copy & behavior) */
:root{
  --bg-primary:#02050A;
  --bg-secondary:#06111D;
  --bg-panel:rgba(7,19,33,.88);
  --text:#F7F4FA;
  --text-secondary:#C8C5D2;
  --text-muted:#9693A3;
  --accent-teal:#16C7C8;
  --accent-indigo:#776ADA;
  --accent-lavender:#A99CF7;
  --accent-champagne:#E5C487;
  --border-teal:rgba(22,199,200,.42);
  --border-lavender:rgba(169,156,247,.32);
  --border-subtle:rgba(255,255,255,.12);
  --cyan:#16C7C8;
  --cyan-glow:rgba(22,199,200,.45);
  --purple:#A99CF7;
  --purple-glow:rgba(169,156,247,.35);
  --glass-bg:rgba(255,255,255,.04);
  --glass-border:var(--border-subtle);
}

body{background:var(--bg-primary);color:var(--text)}

/* Navigation */
nav{background:linear-gradient(to bottom,rgba(2,5,10,.96),rgba(2,5,10,.55) 72%,transparent)!important}
nav.scrolled{
  background:rgba(6,17,29,.88)!important;
  backdrop-filter:blur(14px)!important;
  border-bottom:1px solid var(--border-subtle);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.nav-links{gap:28px!important}
.nav-links a{font-size:17px!important;letter-spacing:.35px;color:rgba(247,244,250,.82)!important}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--text)!important}
.nav-links a::after{background:var(--accent-teal)!important}

/* Primary / secondary CTAs */
.cta-button{
  border:1px solid transparent!important;
  background:linear-gradient(135deg,rgba(22,199,200,.92),rgba(119,106,218,.92))!important;
  color:#fff!important;
  box-shadow:0 0 22px rgba(22,199,200,.22),0 10px 28px rgba(0,0,0,.28)!important;
  letter-spacing:1.1px!important;
}
.cta-button::before{display:none!important}
.cta-button:hover{
  transform:translateY(-2px);
  box-shadow:0 0 30px rgba(22,199,200,.32),0 14px 34px rgba(0,0,0,.34)!important;
}
.cta-button.cta-secondary,
.hero-actions .cta-button.cta-secondary{
  background:rgba(7,19,33,.72)!important;
  border:1px solid var(--border-subtle)!important;
  box-shadow:none!important;
  color:var(--text-secondary)!important;
}
.cta-button.cta-secondary:hover,
.hero-actions .cta-button.cta-secondary:hover{
  background:rgba(7,19,33,.9)!important;
  border-color:var(--border-lavender)!important;
  color:var(--text)!important;
}

/* Hero */
.hero-branding{
  background:
    radial-gradient(ellipse at 50% 28%,rgba(119,106,218,.16) 0%,rgba(22,199,200,.05) 28%,transparent 58%),
    transparent!important;
}
.hero-sacred-geometry{
  width:min(440px,64vw)!important;
  max-width:440px!important;
  margin:0 auto 22px!important;
  position:relative;
}
.hero-sacred-geometry::before{
  content:'';
  position:absolute;
  inset:-18%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(119,106,218,.28) 0%,rgba(22,199,200,.08) 38%,transparent 68%);
  filter:blur(8px);
  z-index:-1;
  pointer-events:none;
}
.hero-sacred-geometry img{
  filter:drop-shadow(0 0 34px rgba(22,199,200,.22))!important;
}
.brand-title{font-size:clamp(50px,9.2vw,84px)!important;letter-spacing:3.4px}
.hero-lead{max-width:820px!important}
.hero-lead h2{font-size:clamp(26px,4.2vw,40px)!important;margin-bottom:18px!important}
.hero-lead p{
  font-size:18px!important;
  line-height:1.8!important;
  max-width:680px!important;
  color:var(--text-secondary)!important;
}
.hero-actions{gap:16px!important;margin-bottom:32px!important}
.hero-actions .cta-button{min-width:220px;text-align:center}

/* Core library / five paths */
.core-library{
  background:radial-gradient(ellipse at 50% 36%,rgba(229,196,135,.05) 0%,rgba(119,106,218,.04) 34%,transparent 62%);
}
.core-title{max-width:820px!important;margin:0 auto 56px!important}
.core-title h2{
  font-size:clamp(32px,5vw,52px)!important;
  line-height:1.18!important;
  max-width:none!important;
  margin:0 auto 16px!important;
}
.core-title p{
  margin:0 auto!important;
  max-width:680px!important;
  font-size:17px!important;
  line-height:1.75!important;
  font-weight:300!important;
  color:var(--text-secondary)!important;
}
.core-stage::before,
.core-stage::after{
  border-color:rgba(229,196,135,.18)!important;
  box-shadow:0 0 80px rgba(119,106,218,.1),inset 0 0 50px rgba(255,255,255,.02)!important;
}
.core-centerpiece{
  width:620px!important;
  height:620px!important;
  border-color:rgba(229,196,135,.24)!important;
  background:transparent!important;
  box-shadow:0 28px 90px rgba(0,0,0,.5),0 0 90px rgba(229,196,135,.12)!important;
}
.core-centerpiece::before{border-color:rgba(169,156,247,.18)!important}
.core-centerpiece::after{
  background:linear-gradient(180deg,rgba(2,5,10,0) 0%,rgba(2,5,10,.05) 58%,rgba(2,5,10,.42) 100%)!important;
}
.christ-focus-photo{
  object-fit:cover!important;
  object-position:center center!important;
  opacity:1!important;
  filter:none!important;
}
.showcase-dot{
  appearance:none;
  border:0;
  padding:0;
  cursor:pointer;
}
.themes-path-card{
  padding:32px 26px 28px!important;
}
.themes-path-card-inner{
  min-height:210px;
}
.themes-path-icon{width:72px!important;height:72px!important;object-fit:contain}
.core-center-copy{transform:translate(-50%,168px)!important;width:min(540px,56vw)!important}
.core-center-copy span{color:rgba(229,196,135,.82)!important;letter-spacing:2.8px}
.cat-b{
  padding:18px 18px!important;
  border:1px solid var(--border-subtle);
  border-radius:18px;
  background:rgba(7,19,33,.55);
  backdrop-filter:blur(8px);
}
.cat-b .ci{width:150px!important;height:150px!important}
.cat-b.devotionals{box-shadow:0 0 28px rgba(229,196,135,.12)}
.cat-b.meditation{box-shadow:0 0 28px rgba(169,156,247,.14)}
.cat-b.sleep{box-shadow:0 0 28px rgba(100,140,255,.14)}
.cat-b.music{box-shadow:0 0 28px rgba(22,199,200,.14)}
.cat-b.nature{box-shadow:0 0 28px rgba(180,170,90,.12)}
.cat-b:hover .ci{filter:drop-shadow(0 0 28px rgba(22,199,200,.35))!important}
@media(min-width:1100px){
  .cat-b.devotionals{left:4%!important}
  .cat-b.meditation{right:4%!important}
  .cat-b.music{left:10%!important}
  .cat-b.nature{right:10%!important}
  .cat-b.sleep{left:50%!important;transform:translateX(-50%)!important}
}

/* App showcase — horizontal carousel */
.app-showcase{
  padding:96px 20px!important;
  background:radial-gradient(ellipse at 50% 20%,rgba(119,106,218,.08) 0%,rgba(22,199,200,.03) 36%,transparent 68%)!important;
}
.app-showcase::before{display:none!important}
.showcase-header{margin-bottom:36px!important}
.showcase-header h2{
  background:none!important;
  -webkit-text-fill-color:initial!important;
  color:var(--text)!important;
  font-size:clamp(32px,5vw,50px)!important;
}
.showcase-phone{
  width:min(276px,72vw)!important;
  aspect-ratio:110/239!important;
  padding:4px!important;
  border-radius:34px!important;
  background:#0c0c10!important;
  box-shadow:0 16px 36px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.07)!important;
}
.showcase-phone-screen{border-radius:30px!important}
.showcase-phone-screen img,.showcase-shot{
  object-fit:contain!important;
  object-position:center!important;
  image-rendering:auto!important;
  transform:none!important;
}
.showcase-nav{margin-top:28px!important}
.showcase-btn{
  border-color:var(--border-subtle)!important;
  background:rgba(7,19,33,.72)!important;
}
.showcase-btn:hover,.showcase-btn:focus-visible{
  border-color:var(--border-teal)!important;
  color:var(--text)!important;
}
.showcase-dot.active{background:var(--accent-teal)!important;box-shadow:0 0 10px rgba(22,199,200,.35)!important}
@media(min-width:1200px){
  .showcase-phone{width:min(280px,26vw)!important}
}
@media(max-width:768px){
  .showcase-phone{width:min(276px,78vw)!important;padding:4px!important;border-radius:32px!important}
  .showcase-phone-screen{border-radius:28px!important}
}

/* Bridge + mission atmospheres */
.bridge-shell{
  border-color:var(--border-lavender)!important;
  background:linear-gradient(165deg,rgba(22,16,48,.78),rgba(6,17,29,.92))!important;
}
.mission-section{
  background:radial-gradient(ellipse at 50% 0%,rgba(22,199,200,.07) 0%,transparent 55%);
}
.mission-shell{
  border-color:var(--border-teal)!important;
  background:linear-gradient(165deg,rgba(7,19,33,.96),rgba(2,5,10,.99))!important;
}
.mission-prose{max-width:620px!important}
.mission-prose p{margin-bottom:22px!important;line-height:1.9!important}
.mission-quote{
  border-left-color:var(--accent-teal)!important;
  background:linear-gradient(90deg,rgba(22,199,200,.1),transparent 72%)!important;
  padding:28px 28px!important;
}
.mission-quote p{font-size:clamp(22px,3.2vw,30px)!important;line-height:1.4!important}
.mission-close{border-top-color:rgba(22,199,200,.18)!important}
.mission-faq-btn{
  border-color:var(--border-teal)!important;
  background:linear-gradient(145deg,rgba(22,199,200,.16),rgba(119,106,218,.18))!important;
}

/* Themes */
.meditations-section{
  background:radial-gradient(ellipse at 50% 10%,rgba(169,156,247,.07) 0%,rgba(229,196,135,.03) 40%,transparent 70%);
}
.themes-path-card{
  padding:8px!important;
}
.themes-path-card-inner{
  padding:28px 24px!important;
  min-height:220px;
}
.themes-path-icon{width:72px!important;height:72px!important}
.themes-path-card.is-active,
.themes-path-card:hover,
.themes-path-card:focus-visible{
  border-color:var(--border-lavender)!important;
  box-shadow:0 0 28px rgba(169,156,247,.14)!important;
}
.path-switch-btn.active{
  border-color:var(--border-teal)!important;
  box-shadow:0 0 18px rgba(22,199,200,.14)!important;
}

/* Explore */
.explore-guide{
  background:radial-gradient(ellipse at 50% 0%,rgba(169,156,247,.08) 0%,rgba(229,196,135,.04) 42%,transparent 70%)!important;
}
.explore-guide::before{opacity:.7}
.explore-card{
  padding:32px 30px 28px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 26px rgba(0,0,0,.22)!important;
}
.explore-tag{padding:10px 14px!important;margin:0}
.explore-tag-grid{gap:10px!important}
.explore-expand-btn:focus-visible{outline:2px solid var(--accent-lavender);outline-offset:3px}

/* Journal */
.journal-section{
  background:radial-gradient(ellipse at 50% 20%,rgba(119,106,218,.1) 0%,transparent 60%);
}
.journal-phone{
  width:min(100%,280px)!important;
  aspect-ratio:110/239!important;
  transform:none!important;
  padding:4px!important;
  border-radius:34px!important;
}
.journal-phone-screen{border-radius:30px!important}
.journal-phone-screen img{
  object-fit:contain!important;
  object-position:center!important;
  image-rendering:auto!important;
  transform:none!important;
}
.journal-phones{gap:36px!important;max-width:1100px;margin:0 auto}

/* Sleep / music / nature atmospheres */
.sleep-section{
  background:radial-gradient(ellipse at 50% 20%,rgba(90,120,255,.1) 0%,rgba(6,17,29,.4) 45%,transparent 70%)!important;
}
.music-section{
  background:radial-gradient(ellipse at 50% 15%,rgba(22,199,200,.1) 0%,transparent 62%)!important;
}
.ns-section{
  background:radial-gradient(ellipse at 50% 18%,rgba(70,140,110,.1) 0%,rgba(229,196,135,.04) 42%,transparent 70%)!important;
}
.sleep-hero-moon img,.music-hero-img img,.ns-hero-icon img{transform:scale(1.08)}
.sleep-card,.music-card,.ns-card{
  border:1px solid var(--border-subtle);
  background:rgba(7,19,33,.62)!important;
}
.sleep-card:hover,.music-card:hover,.ns-card:hover{
  transform:translateY(-4px);
  border-color:var(--border-teal);
}

/* Premium + pricing */
.premium-section,.pricing-section{
  background:radial-gradient(ellipse at 50% 0%,rgba(119,106,218,.1) 0%,transparent 55%);
}
.premium-wrap,.pricing-wrap{
  border-color:var(--border-lavender)!important;
  background:linear-gradient(160deg,rgba(12,16,38,.96),rgba(4,8,18,.98))!important;
}
.pricing-card{
  border:1px solid var(--border-subtle)!important;
  background:rgba(7,19,33,.7)!important;
  border-radius:18px;
  padding:24px;
}
.pricing-card.recommended{
  border-color:var(--border-teal)!important;
  box-shadow:0 0 34px rgba(22,199,200,.16)!important;
  background:linear-gradient(160deg,rgba(22,199,200,.1),rgba(119,106,218,.12))!important;
  transform:scale(1.02);
}
.pricing-badge .save-text{
  color:var(--accent-champagne)!important;
  letter-spacing:1.4px;
  text-transform:uppercase;
  font-size:12px;
}
.pricing-trial-btn{
  display:block;
  width:100%;
  max-width:520px;
  margin:28px auto 8px!important;
  text-align:center;
  border:1px solid var(--border-teal)!important;
  background:linear-gradient(135deg,rgba(22,199,200,.9),rgba(119,106,218,.9))!important;
  box-shadow:0 0 28px rgba(22,199,200,.22)!important;
  color:#fff!important;
  border-radius:14px!important;
  padding:16px 22px!important;
  text-decoration:none;
  font-family:'Prata',serif;
  font-size:18px;
}
.pricing-reassure{
  text-align:center;
  color:var(--text-muted);
  font-size:14px;
  margin:0 auto 8px;
}
.whats-included{opacity:.92}

/* FAQ */
.faq-section{padding:64px 20px 56px!important}
.faq-shell{max-width:980px!important;border-color:var(--border-teal)!important}
.faq-trigger{padding:24px 14px!important}
.faq-panel{padding:0 14px 24px!important;font-size:16px!important;line-height:1.8!important}
.faq-item.is-open{background:rgba(22,199,200,.03)}

/* Final CTA + newsletter + footer */
.final-cta-wrap{
  border-color:var(--border-teal)!important;
  background:linear-gradient(145deg,rgba(7,19,33,.86),rgba(6,17,29,.92))!important;
  box-shadow:0 0 50px rgba(22,199,200,.12)!important;
}
.final-cta-btn{
  border-color:transparent!important;
  background:linear-gradient(135deg,rgba(22,199,200,.92),rgba(119,106,218,.92))!important;
  box-shadow:0 0 26px rgba(22,199,200,.24)!important;
}
.newsletter-bar{
  border-color:var(--border-subtle)!important;
  background:rgba(6,17,29,.72)!important;
  box-shadow:none!important;
  padding:18px 18px!important;
}
.newsletter-bar::before{opacity:.35}
.newsletter-bar h3{font-size:clamp(22px,3vw,28px)!important;margin-bottom:4px!important}
.newsletter-bar p{font-size:13px!important;color:var(--text-muted)!important}
.footer-card{
  border-color:var(--border-subtle)!important;
  background:rgba(6,17,29,.78)!important;
  box-shadow:none!important;
}
.site-footer{padding-top:8px}

/* Focus + reduced motion */
a:focus-visible,button:focus-visible,.cta-button:focus-visible{
  outline:2px solid rgba(22,199,200,.65);
  outline-offset:4px;
}
@media(prefers-reduced-motion:reduce){
  .hero-sacred-geometry::before,
  .cat-b .ci,
  .showcase-slide,
  .cta-button{animation:none!important;transition:none!important}
}

@media(max-width:720px){
  .core-centerpiece{width:min(92vw,420px)!important;height:auto!important;aspect-ratio:1!important}
  .core-center-copy{transform:translate(-50%,118px)!important}
  .pricing-card.recommended{transform:none}
}