:root {
  --ink: #1d1630;
  --muted: #6e687c;
  --purple-950: #210747;
  --purple-900: #321062;
  --purple-800: #4b168d;
  --purple-700: #6525ad;
  --purple-600: #7b35c5;
  --purple-100: #eee4fb;
  --purple-50: #f8f3ff;
  --gold: #efb42b;
  --cream: #fffaf1;
  --surface: #ffffff;
  --line: #e9e3ef;
  --success: #2a9d70;
  --danger: #bf3f4c;
  --header-height: 82px;
  --container: 1160px;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --shadow-sm: 0 8px 24px rgba(51, 20, 88, .08);
  --shadow-lg: 0 28px 70px rgba(31, 7, 61, .22);
  --font-heading: "Manrope", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 18px); }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--surface); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, blockquote { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.12; letter-spacing: -.035em; }
[hidden] { display: none !important; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { position: relative; padding: 105px 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 10000; top: 12px; left: 12px; padding: 11px 18px; border-radius: 9px; color: #fff; background: var(--purple-900); transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid #e7ab20; outline-offset: 3px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 1000; height: var(--header-height); background: rgba(255,255,255,.9); border-bottom: 1px solid rgba(81, 31, 131, .08); backdrop-filter: blur(18px); transition: box-shadow .25s, background .25s; }
.site-header.is-scrolled { background: rgba(255,255,255,.97); box-shadow: 0 8px 30px rgba(45, 17, 76, .08); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand img { width: 50px; height: 50px; border-radius: 50%; object-fit: contain; }
.brand span { display: grid; line-height: 1.15; }
.brand strong { font: 800 17px var(--font-heading); color: var(--purple-900); }
.brand small { color: var(--muted); font-size: 10px; letter-spacing: .04em; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: clamp(17px, 2.4vw, 31px); margin-left: auto; }
.main-nav a { position: relative; color: #544c62; font-size: 14px; font-weight: 600; white-space: nowrap; transition: color .2s; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px; background: var(--purple-600); transition: right .2s; }
.main-nav a:hover, .main-nav a.active { color: var(--purple-700); }
.main-nav a:hover::after, .main-nav a.active::after { right: 0; }
.header-live-button { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 11px 18px; color: #fff; background: var(--purple-800); border-radius: 99px; font-size: 13px; font-weight: 700; box-shadow: 0 8px 18px rgba(75,22,141,.19); }
.header-live-button span { width: 7px; height: 7px; border-radius: 50%; background: #ff6574; box-shadow: 0 0 0 4px rgba(255,101,116,.17); animation: livePulse 1.7s infinite; }
.menu-toggle { display: none; margin-left: auto; width: 44px; height: 44px; padding: 11px 9px; border-radius: 11px; background: var(--purple-50); }
.menu-toggle span { display: block; width: 24px; height: 2px; margin: 5px auto; border-radius: 2px; background: var(--purple-900); transition: transform .2s, opacity .2s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hero { min-height: min(830px, 100svh); padding-top: calc(var(--header-height) + 65px); padding-bottom: 92px; display: grid; align-items: center; color: #fff; background: radial-gradient(circle at 80% 20%, rgba(147,73,209,.55), transparent 35%), linear-gradient(122deg, #210747 0%, #37106c 50%, #541797 100%); isolation: isolate; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .23; background-image: radial-gradient(rgba(255,255,255,.7) 1px, transparent 1px); background-size: 29px 29px; mask-image: linear-gradient(to right, #000, transparent 70%); }
.hero-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.hero-orb--one { width: 480px; height: 480px; top: -220px; right: -80px; background: rgba(195,120,255,.17); }
.hero-orb--two { width: 330px; height: 330px; bottom: -220px; left: 38%; background: rgba(255,188,50,.11); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(350px, .72fr); align-items: center; gap: clamp(50px, 9vw, 120px); }
.hero-grid > * { min-width: 0; }
.eyebrow { margin-bottom: 19px; color: var(--purple-700); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #e8dafa; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff6374; box-shadow: 0 0 0 5px rgba(255,99,116,.15); animation: livePulse 1.7s infinite; }
.hero h1 { max-width: 730px; margin-bottom: 25px; font-size: clamp(42px, 5.2vw, 74px); letter-spacing: -.055em; }
.hero h1 em { color: #efba3a; font-style: normal; }
.hero-lead { max-width: 590px; margin-bottom: 33px; color: #d6cae3; font-size: clamp(16px, 1.55vw, 19px); line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.primary-button, .secondary-button, .ghost-button, .install-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 21px; border-radius: 99px; font-weight: 700; transition: transform .2s, box-shadow .2s, background .2s; }
.primary-button { color: #fff; background: var(--purple-700); box-shadow: 0 11px 24px rgba(101,37,173,.24); }
.hero .primary-button { min-height: 58px; padding-inline: 27px; color: #311052; background: #f0b93a; box-shadow: 0 13px 28px rgba(0,0,0,.19); }
.primary-button:hover, .secondary-button:hover, .install-button:hover { transform: translateY(-2px); }
.hero-play-button svg, .secondary-button svg, .ghost-button svg, .install-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-play-button .play-glyph { fill: currentColor; stroke: none; }
.pause-glyph { display: none; }
.is-playing .play-glyph { display: none; }
.is-playing .pause-glyph { display: block; }
.text-link { display: inline-flex; gap: 10px; color: #fff; font-size: 14px; font-weight: 700; }
.text-link span { color: #efba3a; }
.hero-trust { display: flex; gap: 24px; flex-wrap: wrap; padding: 0; margin: 35px 0 0; list-style: none; color: #cfc2dc; font-size: 13px; }
.hero-trust span { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 5px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #f1bd42; font-size: 10px; }

.radio-card { position: relative; max-width: 430px; width: 100%; justify-self: end; padding: 23px 34px 28px; border: 1px solid rgba(255,255,255,.2); border-radius: 34px; background: linear-gradient(155deg, rgba(255,255,255,.15), rgba(255,255,255,.07)); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.16); backdrop-filter: blur(20px); }
.radio-card-topline { min-height: 23px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.on-air { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 99px; color: #ffd2d7; background: rgba(255,76,94,.12); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.on-air i, .mini-track i, .phone-live i { width: 6px; height: 6px; border-radius: 50%; background: #ff5a6a; box-shadow: 0 0 7px #ff5a6a; }
.listeners-label { color: #cabdd7; font-size: 11px; }
.cover-wrap { position: relative; width: min(250px, 75%); aspect-ratio: 1; margin: 8px auto 19px; }
.cover-glow { position: absolute; inset: 10%; z-index: -1; border-radius: 50%; background: #8b3ad0; filter: blur(45px); opacity: .7; }
.cover-art { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 7px solid rgba(255,255,255,.92); box-shadow: 0 13px 32px rgba(0,0,0,.32); background: #fff; }
.cover-live-ring { position: absolute; inset: -6px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; }
.radio-card.is-playing .cover-live-ring { animation: ringPulse 2.2s infinite; }
.radio-card.is-playing .cover-art { animation: coverFloat 5s ease-in-out infinite; }
.now-playing { text-align: center; min-width: 0; }
.now-playing p { margin-bottom: 3px; color: #bfb1cf; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.now-playing h2 { max-width: 100%; margin-bottom: 3px; overflow: hidden; color: #fff; font-size: 20px; white-space: nowrap; text-overflow: ellipsis; }
.now-playing span { display: block; overflow: hidden; color: #cfc3da; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.player-status { min-height: 20px; margin: 5px 0 2px; color: #cfc3da; text-align: center; font-size: 11px; }
.player-status.error { color: #ffb9c0; }
.player-controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 15px 0; }
.round-button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: #e7dfec; background: rgba(255,255,255,.06); }
.round-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.round-button.is-liked { color: #ff7585; background: rgba(255,117,133,.13); }
.round-button.is-liked svg { fill: currentColor; }
.main-play-button { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 50%; color: #3b155c; background: #efb938; box-shadow: 0 11px 27px rgba(0,0,0,.28); transition: transform .2s; }
.main-play-button:hover { transform: scale(1.06); }
.main-play-button svg { grid-area: 1/1; width: 27px; height: 27px; fill: currentColor; }
.volume-control { display: grid; grid-template-columns: 30px 1fr 38px; align-items: center; gap: 10px; max-width: 290px; margin: 0 auto; }
.volume-control button { display: grid; place-items: center; padding: 5px; color: #d9cede; background: transparent; }
.volume-control svg { width: 19px; height: 19px; fill: currentColor; }
.volume-control .sound-waves { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.volume-control input { width: 100%; accent-color: #efb938; }
.volume-control output { color: #bfb1ca; font-size: 11px; text-align: right; }
.hero-wave { position: absolute; right: -2%; bottom: -2px; left: -2%; height: 55px; background: #fff; clip-path: ellipse(55% 52% at 50% 100%); }

.section-heading { max-width: 520px; }
.section-heading h2 { margin-bottom: 20px; font-size: clamp(32px, 4vw, 49px); color: var(--purple-950); }
.section-heading > p:not(.eyebrow):not(.about-slogan) { color: var(--muted); font-size: 17px; }
.section-heading--center { max-width: 690px; margin: 0 auto 44px; text-align: center; }
.eyebrow--gold { color: #9b6a00; }
.eyebrow--light { color: #decdf0; }

.verse-section { background: linear-gradient(110deg, #fff 0%, var(--cream) 100%); }
.verse-layout { display: grid; grid-template-columns: .72fr 1fr; gap: clamp(50px, 8vw, 105px); align-items: center; }
.verse-card { position: relative; min-height: 330px; padding: 52px 55px 40px; border: 1px solid #eadfca; border-radius: var(--radius-lg); background: rgba(255,255,255,.88); box-shadow: 0 25px 65px rgba(97,68,21,.1); overflow: hidden; }
.verse-card::after { content: ""; position: absolute; inset: auto -70px -90px auto; width: 210px; height: 210px; border-radius: 50%; background: rgba(239,180,43,.1); }
.quote-mark { position: absolute; top: 20px; left: 28px; color: rgba(112,48,170,.12); font: 800 92px Georgia, serif; line-height: 1; }
.verse-card blockquote { position: relative; z-index: 1; margin-bottom: 26px; color: #342842; font: 500 clamp(20px, 2.4vw, 29px)/1.55 Georgia, serif; }
.verse-reference { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.verse-reference strong { color: var(--purple-800); }
.verse-reference span { padding: 3px 8px; border-radius: 99px; color: #72657d; background: var(--purple-50); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.verse-actions { position: relative; z-index: 1; display: flex; gap: 11px; flex-wrap: wrap; }
.secondary-button { min-height: 44px; padding: 10px 17px; color: #fff; background: var(--purple-700); font-size: 13px; }
.ghost-button { min-height: 44px; padding: 10px 17px; border: 1px solid #dcd1e6; color: var(--purple-800); background: transparent; font-size: 13px; }
.ghost-button:disabled { cursor: not-allowed; opacity: .5; }
.verse-skeleton, .chapter-skeleton { display: grid; gap: 13px; padding: 26px 0; }
.verse-skeleton span, .chapter-skeleton span { height: 17px; border-radius: 8px; background: linear-gradient(90deg, #eee8f2 25%, #faf8fb 50%, #eee8f2 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.verse-skeleton span:nth-child(2) { width: 93%; }.verse-skeleton span:nth-child(3) { width: 58%; }
.inline-error { padding: 20px; border-radius: 14px; color: #83313b; background: #fff0f1; text-align: center; }
.inline-error p { margin: 0 0 10px; }.inline-error button { padding: 8px 13px; border-radius: 99px; color: #fff; background: var(--danger); }

.bible-section { background: #f8f6fa; }
.bible-app { max-width: 970px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 20px 60px rgba(55,29,80,.09); overflow: hidden; }
.bible-tabs { display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid var(--line); background: #fcfbfd; }
.bible-tabs button { flex: 1; max-width: 180px; padding: 12px 18px; border-radius: 11px; color: #706679; background: transparent; font-weight: 700; }
.bible-tabs button[aria-selected="true"] { color: var(--purple-800); background: var(--purple-100); }
#readerPanel, #searchPanel { padding: 34px clamp(22px, 5vw, 58px) 42px; }
.reader-controls { display: grid; grid-template-columns: .75fr 1.3fr .6fr; gap: 18px; margin-bottom: 37px; }
.reader-controls label, .bible-search > label { display: grid; gap: 7px; color: #746a7c; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.reader-controls select { width: 100%; min-width: 0; height: 48px; padding: 0 38px 0 14px; border: 1px solid #ddd5e4; border-radius: 11px; color: var(--ink); background: #fff; font-size: 14px; font-weight: 600; }
.reader-controls select:disabled { cursor: wait; color: #938b99; background: #f6f3f8; }
.chapter-toolbar { display: grid; grid-template-columns: 110px 1fr 110px; align-items: center; padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.chapter-toolbar > div { text-align: center; }
.chapter-toolbar small { color: var(--purple-700); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.chapter-toolbar h3 { margin: 3px 0 0; color: var(--purple-950); font-size: 27px; }
.chapter-toolbar button, .chapter-bottom-nav button { padding: 10px; border-radius: 9px; color: var(--purple-700); background: transparent; font-size: 13px; font-weight: 700; }
.chapter-toolbar button:hover, .chapter-bottom-nav button:hover { background: var(--purple-50); }
.chapter-toolbar button:disabled, .chapter-bottom-nav button:disabled { cursor: not-allowed; opacity: .35; }
.verses-list { padding: 19px 0 0; margin: 0; list-style: none; }
.verses-list li { position: relative; display: grid; grid-template-columns: 35px 1fr; gap: 10px; padding: 10px 13px; border-radius: 9px; color: #443b4b; font: 17px/1.8 Georgia, serif; transition: background .3s, box-shadow .3s; }
.verses-list .verse-number { color: var(--purple-700); font: 800 11px/2.7 var(--font-heading); text-align: center; }
.verses-list li.highlighted { background: #fff5d8; box-shadow: inset 3px 0 #e7a91d; }
.chapter-skeleton span:nth-child(2) { width: 87%; }.chapter-skeleton span:nth-child(3) { width: 95%; }.chapter-skeleton span:nth-child(4) { width: 76%; }.chapter-skeleton span:nth-child(5) { width: 91%; }
.state-card { margin: 25px 0; padding: 36px; border-radius: 18px; background: #faf7fc; text-align: center; }
.state-card h3 { margin-bottom: 8px; }.state-card p { color: var(--muted); }
.state-icon { width: 42px; height: 42px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 50%; color: var(--danger); background: #ffe9ec; font-weight: 800; }
.chapter-bottom-nav { display: flex; justify-content: space-between; gap: 20px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }
.bible-search { max-width: 750px; margin: 0 auto 30px; }
.search-field { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; margin-top: 8px; }
.search-field svg { position: absolute; left: 16px; width: 20px; fill: none; stroke: #8b8192; stroke-width: 2; }
.search-field input { min-width: 0; height: 54px; padding: 0 145px 0 48px; border: 1px solid #d9d0e0; border-radius: 14px; outline: none; }
.search-field input:focus { border-color: var(--purple-600); box-shadow: 0 0 0 3px rgba(123,53,197,.11); }
.search-field button { position: absolute; right: 5px; min-width: 124px; height: 44px; border-radius: 10px; color: #fff; background: var(--purple-700); font-weight: 700; }
.search-hint { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.search-loading { padding: 25px; color: var(--purple-700); text-align: center; font-weight: 700; }
.search-summary { margin-bottom: 13px; color: var(--muted); font-size: 13px; }
.search-results { display: grid; gap: 10px; }
.search-result { width: 100%; padding: 17px 19px; border: 1px solid var(--line); border-radius: 13px; color: inherit; background: #fff; text-align: left; transition: transform .2s, border-color .2s, box-shadow .2s; }
.search-result:hover { transform: translateY(-2px); border-color: #c9b2df; box-shadow: var(--shadow-sm); }
.search-result strong { display: block; margin-bottom: 4px; color: var(--purple-700); font-size: 13px; }.search-result span { display: block; color: #4c4453; line-height: 1.6; }

.about-section { overflow: hidden; }
.about-grid { display: grid; grid-template-columns: .9fr 1fr; align-items: center; gap: clamp(55px, 10vw, 130px); }
.about-art { position: relative; min-height: 450px; display: grid; place-items: center; }
.about-art::before { content: ""; position: absolute; width: 390px; height: 390px; border-radius: 48% 52% 62% 38%; background: linear-gradient(140deg, #f3e8ff, #fff6df); transform: rotate(-8deg); }
.about-logo-card { position: relative; width: 310px; padding: 22px; border-radius: 35px; background: #fff; box-shadow: 0 30px 60px rgba(64,23,104,.18); transform: rotate(-3deg); }
.about-logo-card img { border-radius: 24px; }
.music-note { position: absolute; color: var(--purple-600); font: 700 42px var(--font-heading); }.music-note--one { top: 33px; right: 8%; }.music-note--two { bottom: 43px; left: 5%; color: #e3a51b; }
.about-slogan { margin-bottom: 16px; color: var(--purple-700); font: 700 22px var(--font-heading); }
.about-section .primary-button { margin-top: 12px; }

.apps-section { padding-top: 35px; }
.app-callout { min-height: 430px; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; padding: 60px clamp(35px, 8vw, 95px); border-radius: 36px; color: #fff; background: radial-gradient(circle at 85% 5%, rgba(194,121,255,.35), transparent 35%), linear-gradient(120deg, #2a0a52, #56179a); overflow: hidden; }
.app-copy { position: relative; z-index: 2; max-width: 575px; }
.app-copy h2 { margin-bottom: 15px; font-size: clamp(34px, 4vw, 51px); }.app-copy > p:not(.eyebrow):not(.install-help) { max-width: 530px; color: #d7cbe2; font-size: 17px; }
.app-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.store-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 13px 21px; border-radius: 99px; color: #321150; background: #f2bd54; font-weight: 800; transition: transform .2s, box-shadow .2s; }
.store-button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.install-button { color: #321150; background: #fff; }.install-button svg { width: 20px; }
.install-help { min-height: 22px; margin: 10px 0 0; color: #e2d5ee; font-size: 12px; }
.phone-mockup { position: relative; align-self: end; justify-self: center; width: 235px; height: 370px; margin-bottom: -80px; padding: 11px; border: 2px solid rgba(255,255,255,.4); border-radius: 39px; background: #140426; box-shadow: 0 30px 55px rgba(0,0,0,.3); transform: rotate(5deg); }
.phone-mockup::before { content: ""; position: absolute; z-index: 2; top: 10px; left: 50%; width: 72px; height: 17px; border-radius: 0 0 12px 12px; background: #140426; transform: translateX(-50%); }
.phone-screen { height: 100%; display: flex; flex-direction: column; align-items: center; padding: 42px 20px 20px; border-radius: 29px; background: linear-gradient(160deg, #501390, #27094b); overflow: hidden; }
.phone-live { display: flex; align-items: center; gap: 7px; align-self: flex-start; font-size: 9px; font-weight: 800; text-transform: uppercase; }.phone-screen img { width: 135px; height: 135px; margin: 25px 0 12px; border-radius: 50%; border: 4px solid #fff; }.phone-screen strong { font: 700 16px var(--font-heading); }.phone-screen small { color: #cbbbd9; }.phone-play { width: 47px; height: 47px; display: grid; place-items: center; margin-top: 18px; padding-left: 3px; border-radius: 50%; color: #30104f; background: #efb938; }

.social-section { background: #fcfbfd; }
.social-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 850px; margin: 0 auto; }
.social-cards a { display: grid; place-items: center; padding: 28px 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }.social-cards a:hover { transform: translateY(-5px); box-shadow: 0 18px 35px rgba(57,25,87,.13); }.social-cards strong { margin-top: 11px; font: 700 16px var(--font-heading); }.social-cards small { color: var(--muted); }
.social-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; color: #fff; font: 700 24px var(--font-heading); }.social-icon--instagram { background: linear-gradient(135deg, #7d36d7, #e54475, #f5a23d); }.social-icon--facebook { background: #1877f2; }.social-icon--whatsapp { background: #23bd65; }

.site-footer { padding: 34px 0; color: #cbbfd6; background: #1e073a; }
.footer-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 35px; }.footer-brand { display: flex; align-items: center; gap: 12px; }.footer-brand img { width: 55px; height: 55px; border-radius: 50%; }.footer-brand div { display: grid; }.footer-brand strong { color: #fff; font: 700 16px var(--font-heading); }.footer-brand small { font-size: 11px; }.site-footer nav { display: flex; gap: 25px; font-size: 12px; }.site-footer a:hover { color: #fff; }.site-footer p { margin: 0; text-align: right; font-size: 11px; }

.mini-player { position: fixed; z-index: 1100; right: 24px; bottom: calc(20px + env(safe-area-inset-bottom)); width: min(420px, calc(100% - 40px)); display: grid; grid-template-columns: 50px minmax(0, 1fr) 48px; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.15); border-radius: 18px; color: #fff; background: rgba(35,8,65,.95); box-shadow: 0 18px 50px rgba(22,4,44,.35); backdrop-filter: blur(18px); transform: translateY(130%); opacity: 0; transition: transform .35s, opacity .35s; }
.mini-player.visible { transform: translateY(0); opacity: 1; }.mini-player > img { width: 48px; height: 48px; object-fit: cover; border-radius: 12px; background: #fff; }.mini-track { min-width: 0; display: grid; line-height: 1.25; }.mini-track span { display: flex; align-items: center; gap: 6px; color: #ffb8c0; font-size: 8px; font-weight: 800; text-transform: uppercase; }.mini-track strong, .mini-track small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.mini-track strong { font-size: 13px; }.mini-track small { color: #cbbfd5; font-size: 10px; }.mini-player button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #32104e; background: #efb938; }.mini-player svg { grid-area: 1/1; width: 20px; fill: currentColor; }
.toast { position: fixed; z-index: 1200; left: 50%; bottom: calc(25px + env(safe-area-inset-bottom)); max-width: calc(100% - 30px); padding: 11px 17px; border-radius: 99px; color: #fff; background: #24113a; box-shadow: var(--shadow-lg); font-size: 13px; transform: translate(-50%, 100px); opacity: 0; pointer-events: none; transition: transform .25s, opacity .25s; }.toast.visible { transform: translate(-50%, 0); opacity: 1; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }.reveal.revealed { opacity: 1; transform: none; }
@keyframes livePulse { 50% { opacity: .45; box-shadow: 0 0 0 7px rgba(255,99,116,0); } }
@keyframes ringPulse { 50% { transform: scale(1.045); opacity: .35; } }
@keyframes coverFloat { 50% { transform: translateY(-4px); } }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (max-width: 1040px) {
  .header-live-button { display: none; }
  .hero-grid { gap: 45px; }
  .radio-card { max-width: 390px; }
}

@media (max-width: 860px) {
  :root { --header-height: 72px; }
  .container { width: min(calc(100% - 32px), var(--container)); }
  .section { padding: 78px 0; }
  .brand img { width: 45px; height: 45px; }
  .menu-toggle { display: block; }
  .main-nav { position: fixed; inset: var(--header-height) 0 auto; display: grid; gap: 0; padding: 12px 20px 22px; background: rgba(255,255,255,.98); border-bottom: 1px solid var(--line); box-shadow: 0 20px 30px rgba(42,18,66,.12); transform: translateY(-130%); opacity: 0; visibility: hidden; transition: transform .25s, opacity .25s, visibility .25s; }
  .main-nav.open { transform: translateY(0); opacity: 1; visibility: visible; }
  .main-nav a { padding: 13px 10px; border-bottom: 1px solid #f0ebf3; font-size: 15px; }.main-nav a::after { display: none; }
  .hero { min-height: auto; padding-top: calc(var(--header-height) + 58px); padding-bottom: 105px; text-align: center; }
  .hero-grid { grid-template-columns: 1fr; }.hero-copy { display: grid; justify-items: center; }.hero-actions, .hero-trust { justify-content: center; }.radio-card { max-width: 430px; justify-self: center; }
  .verse-layout, .about-grid { grid-template-columns: 1fr; }.verse-layout .section-heading { text-align: center; margin-inline: auto; }.about-grid { gap: 35px; }.about-art { min-height: 360px; }.about-section .section-heading { text-align: center; margin-inline: auto; }.about-logo-card { width: 255px; }.about-art::before { width: 310px; height: 310px; }
  .app-callout { grid-template-columns: 1fr .6fr; padding-inline: 45px; }.phone-mockup { width: 205px; height: 335px; }.phone-screen img { width: 115px; height: 115px; }
  .footer-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }.site-footer p { text-align: center; }
}

@media (max-width: 620px) {
  .brand small { display: none; }.brand strong { font-size: 15px; }
  .hero { padding-top: calc(var(--header-height) + 42px); }.hero h1 { font-size: clamp(38px, 12.5vw, 53px); overflow-wrap: break-word; }.hero-lead { font-size: 16px; }.hero-actions { width: 100%; gap: 18px; }.hero-play-button { width: 100%; max-width: 330px; }.hero-trust { gap: 13px; font-size: 11px; }
  .radio-card { padding: 20px 22px 24px; border-radius: 27px; }.cover-wrap { width: min(220px, 70%); }.player-controls { gap: 22px; }
  .verse-card { min-height: 340px; padding: 48px 24px 30px; }.verse-card blockquote { font-size: 21px; }.verse-actions > * { flex: 1; min-width: 145px; }
  .section-heading h2 { font-size: 34px; }.section-heading > p:not(.eyebrow):not(.about-slogan) { font-size: 15px; }
  .bible-app { border-radius: 20px; }#readerPanel, #searchPanel { padding: 25px 16px 30px; }.reader-controls { grid-template-columns: 1fr 1fr; gap: 12px; }.reader-controls label:first-child { grid-column: 1 / -1; }.chapter-toolbar { grid-template-columns: 60px 1fr 60px; }.chapter-toolbar button span { display: none; }.chapter-toolbar h3 { font-size: 22px; }.verses-list li { grid-template-columns: 27px 1fr; padding-inline: 5px; font-size: 16px; }.chapter-bottom-nav button { font-size: 11px; padding: 8px 4px; }
  .search-field { display: grid; grid-template-columns: 1fr; gap: 8px; }.search-field input { padding-right: 14px; }.search-field button { position: static; width: 100%; height: 47px; }.search-field svg { top: 17px; }
  .about-art { min-height: 315px; }.about-logo-card { width: 220px; }.about-art::before { width: 270px; height: 270px; }
  .apps-section { padding-top: 20px; }.app-callout { min-height: 650px; grid-template-columns: 1fr; padding: 45px 24px 0; text-align: center; }.app-copy { margin-inline: auto; }.app-actions { justify-content: center; }.app-actions > * { width: 100%; }.phone-mockup { align-self: end; justify-self: center; margin-bottom: -82px; }
  .social-cards { grid-template-columns: 1fr; }.social-cards a { grid-template-columns: 55px 1fr; grid-template-rows: auto auto; place-items: start; column-gap: 15px; padding: 18px; text-align: left; }.social-icon { grid-row: 1 / 3; }.social-cards strong { margin: 2px 0 0; }.social-cards small { align-self: start; }
  .site-footer nav { flex-wrap: wrap; justify-content: center; gap: 15px 22px; }
  .mini-player { right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); width: calc(100% - 24px); }
  body.has-mini-player .toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
}

@media (max-width: 370px) {
  .container { width: min(calc(100% - 24px), var(--container)); }.hero-trust li:last-child { display: none; }.radio-card { padding-inline: 16px; }.cover-wrap { width: 190px; }.round-button { width: 40px; height: 40px; }.main-play-button { width: 60px; height: 60px; }.reader-controls { grid-template-columns: 1fr; }.reader-controls label:first-child { grid-column: auto; }.bible-tabs button { padding-inline: 8px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}