/* ==========================================================================
   Gracia — landing site styles
   Supplements the Tailwind Play CDN (brand palette + fonts set per page).
   Brand: warm, reverent, premium. Sage + gold on cream; ink for text.
   ========================================================================== */

:root {
  --cream:   #F7F5EF;
  --sand:    #EDE7DA;
  --sand-2:  #D8D3C4;
  --sage:    #7C8B76;
  --sage-soft:#A3AE9A;
  --sage-deep:#5F6E5A;
  --gold:    #C79A45;
  --gold-soft:#D4B16A;
  --ink:     #20241F;
  --ink-soft:#2B2F2A;
  --ink-muted:#5B6157;
  --oxblood: #7C2B2B;
  --night:   #0C0A12;
  --night-800:#17121F;
  --night-700:#1E1828;
  --amber:   #E0A93B;

  --shadow-soft: 0 18px 50px -22px rgba(32, 36, 31, .28);
  --shadow-card: 0 24px 60px -30px rgba(32, 36, 31, .40);
  --ring: 0 0 0 1px rgba(32,36,31,.06);
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}

::selection { background: rgba(199,154,69,.28); color: var(--ink); }

.font-serif { font-family: "Fraunces", ui-serif, Georgia, serif; }

/* Fluid display headings ------------------------------------------------- */
.display {
  font-family: "Fraunces", ui-serif, Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.04;
}
.display-xl { font-size: clamp(2.6rem, 7vw, 5rem); }
.display-lg { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
.display-md { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }

.overline {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700;
}

.measure { max-width: 42rem; }

/* Scripture verse block -------------------------------------------------- */
.verse {
  font-family: "Fraunces", ui-serif, Georgia, serif;
  font-style: italic;
  font-weight: 380;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* Links ------------------------------------------------------------------ */
a { text-decoration: none; }

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; font-size: .95rem; line-height: 1;
  padding: .95rem 1.6rem; border-radius: 999px;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background .25s ease, color .2s ease, border-color .2s ease;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: var(--ink); color: var(--cream);
  box-shadow: 0 14px 30px -14px rgba(32,36,31,.6);
}
.btn-primary:hover { background: #14170f; box-shadow: 0 18px 40px -16px rgba(32,36,31,.7); transform: translateY(-1px); }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: #241a05; box-shadow: 0 16px 34px -16px rgba(199,154,69,.75);
}
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 22px 44px -18px rgba(199,154,69,.85); }
.btn-outline {
  background: transparent; color: var(--ink);
  border-color: rgba(32,36,31,.18);
}
.btn-outline:hover { border-color: rgba(32,36,31,.4); background: rgba(32,36,31,.03); }
.btn-ghost-light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); }
.btn-ghost-light:hover { background: rgba(255,255,255,.14); }
.btn-lg { padding: 1.1rem 2rem; font-size: 1rem; }
.btn-sm { padding: .7rem 1.15rem; font-size: .85rem; }

/* Chips / eyebrow pill ---------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .9rem; border-radius: 999px;
  background: rgba(124,139,118,.12); color: var(--sage-deep);
  border: 1px solid rgba(124,139,118,.22);
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.eyebrow.on-dark {
  background: rgba(224,169,59,.12); color: var(--amber);
  border-color: rgba(224,169,59,.28);
}

/* Cards ------------------------------------------------------------------ */
.card {
  background: #fff; border: 1px solid rgba(32,36,31,.07);
  border-radius: 1.5rem; box-shadow: var(--shadow-soft);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

.icon-badge {
  width: 3rem; height: 3rem; border-radius: .9rem;
  display: grid; place-items: center; flex: none;
  background: rgba(124,139,118,.12); color: var(--sage-deep);
  border: 1px solid rgba(124,139,118,.2);
}
.icon-badge.gold { background: rgba(199,154,69,.14); color: #9c6f1e; border-color: rgba(199,154,69,.28); }
.icon-badge.dark { background: rgba(224,169,59,.14); color: var(--amber); border-color: rgba(224,169,59,.28); }

/* Ambient decoration ----------------------------------------------------- */
.glow-blob {
  position: absolute; border-radius: 999px; filter: blur(70px);
  opacity: .55; pointer-events: none; z-index: 0;
}
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hairline { height: 1px; background: linear-gradient(90deg, transparent, rgba(32,36,31,.14), transparent); }
.hairline-gold { height: 1px; background: linear-gradient(90deg, transparent, rgba(199,154,69,.55), transparent); }

/* Phone mockup ----------------------------------------------------------- */
.phone {
  position: relative; border-radius: 2.4rem; padding: .5rem;
  background: linear-gradient(160deg, #2a2a30, #101014);
  box-shadow: 0 40px 80px -30px rgba(20,18,26,.7), inset 0 0 0 1px rgba(255,255,255,.06);
}
.phone::after { /* notch */
  content: ""; position: absolute; top: .95rem; left: 50%; transform: translateX(-50%);
  width: 34%; height: .55rem; border-radius: 999px; background: #0a0a0d; z-index: 3;
}
.phone > img, .phone .phone-screen {
  display: block; width: 100%; border-radius: 2rem; overflow: hidden;
  background: #0C0A12;
}
.phone-glow {
  position: absolute; inset: -12% -12% -20% -12%; z-index: -1;
  background: radial-gradient(60% 50% at 50% 40%, rgba(224,169,59,.35), transparent 70%);
  filter: blur(30px);
}

/* Scroll reveal ---------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* Breathing glow (companion mark) ---------------------------------------- */
@keyframes breathe {
  0%,100% { transform: scale(1); opacity: .55; }
  50%     { transform: scale(1.12); opacity: .9; }
}
.breathe { animation: breathe 4.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .breathe { animation: none; } }

/* Marquee ---------------------------------------------------------------- */
.marquee { display: flex; gap: 3rem; width: max-content; animation: scroll-x 32s linear infinite; }
@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-mask { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; } }

/* Header ----------------------------------------------------------------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.site-nav.scrolled {
  background: rgba(247,245,239,.82);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: rgba(32,36,31,.08);
}
.nav-link { position: relative; color: var(--ink-soft); font-weight: 500; font-size: .93rem; padding: .35rem 0; transition: color .2s; }
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--ink); }
.nav-link.active::after,
.nav-link:hover::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--gold); border-radius: 2px;
}
.nav-link:not(.active):hover::after { background: rgba(199,154,69,.5); }

/* Mobile menu */
#mobile-menu { transition: opacity .25s ease, transform .25s ease; }
#mobile-menu[hidden] { display: none; }
body.menu-open { overflow: hidden; }

/* Footer store buttons --------------------------------------------------- */
.store-btn {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .7rem 1.15rem; border-radius: .9rem;
  background: #14170f; color: #fff; border: 1px solid rgba(255,255,255,.1);
  transition: transform .18s ease, background .2s ease;
}
.store-btn:hover { transform: translateY(-2px); background: #1c2015; }
.store-btn small { display: block; font-size: .62rem; letter-spacing: .06em; opacity: .7; text-transform: uppercase; }
.store-btn b { display: block; font-size: .95rem; font-weight: 700; line-height: 1.1; }

/* Dividers between light/dark sections ----------------------------------- */
.section { position: relative; }

/* Accordion (FAQ) -------------------------------------------------------- */
.acc-item { border-bottom: 1px solid rgba(32,36,31,.1); }
.acc-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; padding: 1.4rem 0; cursor: pointer; }
.acc-icon { transition: transform .3s ease; flex: none; }
.acc-item.open .acc-icon { transform: rotate(45deg); }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height .35s ease; }

/* Utility ---------------------------------------------------------------- */
.link-underline { background-image: linear-gradient(var(--gold),var(--gold)); background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .3s ease; }
.link-underline:hover { background-size: 100% 1.5px; }