/* ========================================
   BLOOM BIRTH APP — Design System
   bloombirthapp.com
   ======================================== */

:root {
  --primary: #E8A598;
  --secondary: #C9A9A6;
  --accent: #D4A574;
  --sage: #A8B5A0;
  --cream: #FDF8F4;
  --cream-deep: #F5EDE5;
  --text: #4A4145;
  --text-soft: #796B6E;
  --card: rgba(253,248,244,0.94);
  --card-border: rgba(232,165,152,0.08);
  --glow: rgba(232,165,152,0.18);
  --gold-glow: rgba(212,165,116,0.3);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:'Lora',Georgia,serif; color:var(--text); background:var(--cream); overflow-x:hidden; line-height:1.75; }
h1,h2,h3 { font-family:'Cormorant Garamond',Georgia,serif; line-height:1.15; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }

/* Scroll Animations */
[data-reveal] { opacity:0; transition:opacity 0.7s ease, transform 0.7s ease; }
[data-reveal="up"] { transform:translateY(40px); }
[data-reveal="left"] { transform:translateX(-40px); }
[data-reveal="right"] { transform:translateX(40px); }
[data-reveal="scale"] { transform:scale(0.9); }
[data-reveal="fade"] { transform:none; }
[data-reveal].visible { opacity:1; transform:none; }
.delay-1 { transition-delay:0.1s; }
.delay-2 { transition-delay:0.2s; }
.delay-3 { transition-delay:0.3s; }
.delay-4 { transition-delay:0.4s; }
.delay-5 { transition-delay:0.5s; }

/* Layout */
.wrap { max-width:1100px; margin:0 auto; padding:0 24px; }
.wrap-narrow { max-width:680px; margin:0 auto; padding:0 24px; }
.divider { width:80px; height:1.5px; background:linear-gradient(90deg,transparent,var(--primary),transparent); margin:0 auto; }

/* Buttons */
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 36px;
  background:linear-gradient(135deg,var(--accent),var(--primary));
  color:#fff; font-family:'Lora',Georgia,serif; font-weight:600; font-size:1rem;
  border:none; border-radius:50px; cursor:pointer;
  box-shadow:0 6px 24px var(--gold-glow);
  transition:transform 0.25s,box-shadow 0.25s;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 36px var(--gold-glow); color:#fff; }
.btn-primary svg { width:20px; height:20px; fill:currentColor; }

.btn-secondary {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 28px;
  background:var(--card); color:var(--text);
  font-family:'Lora',Georgia,serif; font-weight:500; font-size:0.9rem;
  border:1px solid var(--card-border); border-radius:50px; cursor:pointer;
  transition:border-color 0.3s, transform 0.2s;
}
.btn-secondary:hover { border-color:var(--primary); transform:translateY(-1px); }

/* Shared Nav */
.site-nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:16px 24px;
  background:rgba(253,248,244,0.85);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(232,165,152,0.06);
  display:flex; align-items:center; justify-content:space-between;
  max-width:100%;
}
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-logo img { height:36px; width:auto; }
.nav-logo span { font-family:'Cormorant Garamond',Georgia,serif; font-weight:700; font-size:1.3rem; color:var(--primary); }
.nav-links { display:flex; gap:24px; align-items:center; }
.nav-links a { font-size:0.88rem; color:var(--text-soft); transition:color 0.2s; }
.nav-links a:hover { color:var(--primary); }
.nav-links .nav-cta {
  padding:8px 20px; background:linear-gradient(135deg,var(--accent),var(--primary));
  color:#fff; border-radius:50px; font-weight:600; font-size:0.82rem;
}
.nav-links .nav-cta:hover { color:#fff; opacity:0.9; }

/* Mobile nav */
.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--text); margin:5px 0; transition:0.3s; border-radius:2px; }

@media(max-width:768px) {
  .nav-links { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; background:rgba(253,248,244,0.97); backdrop-filter:blur(20px); padding:16px 24px; gap:16px; border-bottom:1px solid var(--card-border); }
  .nav-links.open { display:flex; }
  .nav-toggle { display:block; }
}

/* Footer */
.site-footer {
  padding:48px 0 36px; text-align:center;
  border-top:1px solid rgba(232,165,152,0.08);
  background:var(--cream-deep);
}
.footer-logo { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:16px; }
.footer-logo img { height:32px; }
.footer-logo span { font-family:'Cormorant Garamond',Georgia,serif; font-weight:700; font-size:1.2rem; color:var(--primary); }
.footer-links { display:flex; justify-content:center; gap:24px; margin-bottom:12px; flex-wrap:wrap; }
.footer-links a { font-size:0.85rem; color:var(--text-soft); transition:color 0.2s; }
.footer-links a:hover { color:var(--primary); }
.site-footer p { font-size:0.75rem; color:var(--text-soft); opacity:0.45; }

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

/* Phone mockups */
.phone-frame {
  border-radius:28px; border:3px solid rgba(74,65,69,0.05);
  box-shadow:0 20px 60px rgba(74,65,69,0.1), 0 4px 16px var(--glow);
  overflow:hidden; transition:transform 0.4s ease;
}
.phone-frame:hover { transform:translateY(-6px); }
.phone-frame img { width:100%; height:auto; display:block; }

/* Nature break sections */
.nature-break {
  width:100%; height:280px; overflow:hidden; position:relative;
}
.nature-break img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 8s ease;
}
.nature-break:hover img { transform:scale(1.03); }
.nature-break .overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,var(--cream) 0%,transparent 20%,transparent 80%,var(--cream) 100%);
  pointer-events:none;
}
.nature-break.with-quote { height:400px; display:flex; align-items:center; justify-content:center; }
.nature-break.with-quote .quote-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(253,248,244,0.15),rgba(0,0,0,0.05),rgba(253,248,244,0.2));
  z-index:1;
}
.nature-break .break-quote {
  position:relative; z-index:2;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500; font-style:italic;
  font-size:clamp(1.2rem,3vw,1.7rem);
  color:var(--text); max-width:560px; text-align:center;
  padding:28px 40px; line-height:1.55;
  background:rgba(253,248,244,0.72);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-radius:20px; border:1px solid rgba(255,255,255,0.3);
  box-shadow:0 8px 32px rgba(0,0,0,0.08);
  margin:0 24px;
}

@media(max-width:768px) {
  .nature-break { height:200px; }
  .nature-break.with-quote { height:320px; }
  .nature-break .break-quote { padding:22px 28px; font-size:1rem; border-radius:16px; margin:0 16px; }
}

/* Page content styles (for legal/support pages) */
.page-content { max-width:680px; margin:0 auto; padding:120px 24px 80px; }
.page-content .page-header { text-align:center; margin-bottom:48px; }
.page-content .page-header h1 { font-size:2.2rem; font-weight:700; color:var(--text); margin-bottom:8px; }
.page-content .page-header p { font-style:italic; font-size:1rem; color:var(--text-soft); }
.page-content .effective-date { font-size:0.82rem; color:var(--text-soft); opacity:0.5; text-align:center; margin-bottom:32px; }
.page-content h2 { font-size:1.4rem; font-weight:600; color:var(--text); margin-top:36px; margin-bottom:12px; }
.page-content h3 { font-size:1.15rem; font-weight:600; color:var(--text); margin-top:24px; margin-bottom:8px; }
.page-content p { font-size:0.92rem; color:var(--text-soft); margin-bottom:14px; }
.page-content ul { margin:0 0 16px 24px; color:var(--text-soft); font-size:0.92rem; }
.page-content li { margin-bottom:6px; }
.page-content a { color:var(--primary); }
.page-content a:hover { opacity:0.7; }
.highlight-box {
  padding:20px 24px; background:var(--card); border-radius:16px;
  border:1px solid var(--card-border); margin:20px 0;
}
.highlight-box p { margin-bottom:6px; }
.highlight-box p:last-child { margin-bottom:0; }
.important-box {
  padding:20px 24px; background:rgba(232,165,152,0.05); border-radius:16px;
  border-left:3px solid var(--primary); margin:20px 0;
}

/* FAQ cards */
.faq-item {
  padding:20px 24px; background:var(--card); border-radius:16px;
  border:1px solid var(--card-border); margin-bottom:12px;
}
.faq-item h3 { font-size:1.05rem; margin-top:0; margin-bottom:6px; }
.faq-item p { font-size:0.88rem; margin-bottom:0; }

/* Contact card */
.contact-card {
  padding:36px; background:var(--card); border-radius:20px;
  border:1px solid var(--card-border); box-shadow:0 4px 24px rgba(74,65,69,0.04);
  text-align:center; margin-bottom:32px;
}
.contact-card h2 { font-size:1.5rem; margin-bottom:12px; margin-top:0; }
.email-addr { display:block; margin-top:12px; font-size:0.85rem; color:var(--text-soft); opacity:0.6; }