/* =========================================================================
   BiblePro — Marketing Attribution Landing Page
   Design language: Apple / Stripe — dark navy hero, light body sections.
   Palette: hero #08111F · orange #FF5A2C · gold #D4A017 · font Inter
   ========================================================================= */

:root {
  /* Dark zones (hero / stats / cta / footer) */
  --hero-bg:      #08111F;
  --hero-bg-2:    #0B1A2E;
  --footer-bg:    #0A1322;

  /* Light zones (body) */
  --paper:        #FFFFFF;
  --paper-2:      #F6F7FA;
  --paper-3:      #EEF1F6;
  --line:         #E7EBF1;
  --line-2:       #DCE2EB;

  /* Ink (text on light) */
  --ink:          #0E1726;
  --ink-2:        #495568;
  --ink-3:        #6B7585;   /* darkened for WCAG AA on white (was #8A95A6) */

  /* Text on dark */
  --snow:         #F4F7FB;
  --snow-2:       #9FB0C6;
  --snow-3:       #93A4BC;   /* lightened for WCAG AA on navy (was #5D6E86) */

  /* Brand */
  --orange:       #FF5A2C;
  --orange-2:     #FF7A52;
  --orange-deep:  #E8431C;
  --orange-text:  #C7350F;   /* AA-safe orange for small text on light */
  --gold:         #D4A017;
  --gold-2:       #E9B838;
  --gold-text:    #8A6A0E;   /* AA-safe gold for small text on light */
  --peach:        #FFF1EC;

  --radius:       18px;
  --radius-lg:    26px;
  --maxw:         1200px;
  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm:    0 1px 2px rgba(16,23,38,0.06), 0 4px 12px rgba(16,23,38,0.05);
  --shadow-md:    0 8px 30px -10px rgba(16,23,38,0.16);
  --shadow-lg:    0 30px 70px -28px rgba(16,23,38,0.34);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ---------- Script-specific fonts (i18n) ----------
   Thai & Burmese need their own Unicode fonts with shaping tables, declared
   FIRST for those locales so Latin webfonts don't tofu the glyphs. Extra
   line-height because Burmese/Thai glyph stacks are taller and these scripts
   have no inter-word spaces (browser uses dictionary line-breaking via lang). */
html.locale-th body { font-family: "Noto Sans Thai", "Inter", system-ui, sans-serif; }
html.locale-th { line-height: 1.7; }
html.locale-my body { font-family: "Noto Sans Myanmar", "Padauk", "Pyidaungsu", "Inter", system-ui, sans-serif; }
html.locale-my { line-height: 1.85; }
html.locale-my .h-display, html.locale-my .h-section { line-height: 1.4; letter-spacing: 0; }
html.locale-th .h-display, html.locale-th .h-section { line-height: 1.3; }
:lang(th) { font-family: "Noto Sans Thai", "Inter", system-ui, sans-serif; }
:lang(my) { font-family: "Noto Sans Myanmar", "Padauk", "Pyidaungsu", "Inter", system-ui, sans-serif; }
/* Chinese: Inter first so Latin + the BiblePro wordmark stay Inter, then fall
   through to the platform CJK font for Han glyphs (no heavy webfont needed). */
html.locale-zh body { font-family: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif; }
html.locale-tw body { font-family: "Inter", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", "Noto Sans TC", sans-serif; }
:lang(zh-Hans) { font-family: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }
:lang(zh-Hant) { font-family: "Inter", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif; }

/* ---------- Language switcher ---------- */
.lang-dd { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 10px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; cursor: pointer;
  font-size: .88rem; font-weight: 600; font-family: inherit; transition: background .25s, border-color .25s; }
.lang-btn:hover { background: rgba(255,255,255,.14); }
.lang-btn svg { width: 15px; height: 15px; }
.lang-btn .chev { transition: transform .3s var(--ease); }
.lang-dd.open .lang-btn .chev { transform: rotate(180deg); }
.nav.scrolled .lang-btn { background: var(--paper-2); border-color: var(--line-2); color: var(--ink); }
.lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 168px; padding: 7px; z-index: 95;
  background: rgba(10,18,30,.97); border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.6); backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .25s, visibility .25s; }
.lang-dd.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-option { display: block; width: 100%; text-align: left; padding: 10px 13px; border-radius: 9px;
  background: none; border: none; color: var(--snow); cursor: pointer; font-size: .95rem; font-family: inherit;
  transition: background .2s; }
.lang-option:hover { background: rgba(255,255,255,.08); }
.lang-option[aria-current="true"] { background: rgba(255,90,44,.16); color: #fff; font-weight: 700; }
/* mobile menu language row */
.mobile-lang { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.mobile-lang .lang-option { width: auto; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 8px 14px; }

/* Features dropdown (nav) — surfaces the feature categories; matches the lang menu. */
.feat-dd { position: relative; display: inline-flex; align-items: center; }
.feat-trigger { display: inline-flex; align-items: center; gap: 5px; }
.feat-trigger .chev { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.feat-dd:hover .feat-trigger .chev, .feat-dd:focus-within .feat-trigger .chev { transform: rotate(180deg); }
.feat-menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 210px; padding: 7px; z-index: 95;
  background: rgba(10,18,30,.97); border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.6); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s, transform .22s, visibility .22s; }
.feat-dd:hover .feat-menu, .feat-dd:focus-within .feat-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.feat-menu a { display: block; padding: 10px 13px; border-radius: 9px; color: var(--snow); font-size: .92rem;
  font-weight: 600; white-space: nowrap; transition: background .2s, color .2s; }
.feat-menu a:hover { background: rgba(255,90,44,.14); color: #fff; }
/* invisible bridge so the menu stays open while the cursor crosses the gap */
.feat-dd::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
/* mobile menu feature sub-links (indented under Features) */
.mobile-menu a.m-sub { padding-left: 20px; font-size: .96rem; color: var(--snow-2); position: relative; }
.mobile-menu a.m-sub::before { content: "·"; position: absolute; left: 6px; color: var(--orange-2); font-weight: 800; }
/* anchor offset so the sticky nav doesn't cover a jumped-to showcase */
.showcase[id] { scroll-margin-top: 92px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  overflow-x: hidden;
}

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

::selection { background: rgba(255,90,44,.28); color: #fff; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: clamp(64px, 8vw, 112px); position: relative; }
.section.tight { padding-block: clamp(48px, 6vw, 84px); }
.bg-paper-2 { background: var(--paper-2); }
.bg-paper-3 { background: var(--paper-3); }

/* Homepage "Verse of the Day" card (light theme; filled by main.js from /bible/today) */
.vod .container { max-width: 940px; }
.vod-card { position: relative; display: block; overflow: hidden; text-decoration: none;
  padding: clamp(24px, 4vw, 36px) clamp(22px, 4vw, 40px); border-radius: 22px;
  background: linear-gradient(135deg, #ffffff, #fff6f0);
  border: 1px solid rgba(255,90,44,.22); box-shadow: 0 30px 70px -46px rgba(200,53,15,.45);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.vod-card[hidden] { display: none; }
.vod-card::before { content: "\201C"; position: absolute; top: -32px; right: 18px; z-index: 0;
  font-family: Georgia, "Times New Roman", serif; font-size: 172px; line-height: 1; color: rgba(255,90,44,.10); pointer-events: none; }
.vod-card:hover { transform: translateY(-3px); border-color: rgba(255,90,44,.4); box-shadow: 0 36px 80px -44px rgba(200,53,15,.55); }
.vod-card > * { position: relative; z-index: 1; }
.vod-top { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.vod-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px;
  background: rgba(255,90,44,.12); color: var(--orange-text); font-size: .8rem; font-weight: 800; }
.vod-date { color: #8a7f78; font-size: .82rem; font-weight: 600; }
.vod-verse { margin: 0 auto; color: #231c17; font-size: clamp(1.14rem, 2.3vw, 1.5rem); line-height: 1.62; font-weight: 650; text-wrap: balance; max-width: 90%; text-align: center; }
.vod-verse::before { content: "\201C"; } .vod-verse::after { content: "\201D"; }
.vod-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 20px; }
.vod-ref { color: #6f635b; font-size: .92rem; font-weight: 700; }
.vod-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; flex: none;
  background: linear-gradient(180deg, var(--orange-2), var(--orange)); color: #fff; font-size: .9rem; font-weight: 800;
  box-shadow: 0 10px 24px -8px rgba(255,90,44,.6); transition: gap .2s ease, filter .2s ease; }
.vod-card:hover .vod-cta { gap: 12px; filter: brightness(1.05); }
.vod-cta svg { width: 16px; height: 16px; }
.vod-card.is-holiday { border-color: rgba(212,160,60,.42); background: linear-gradient(135deg, #fffdf7, #fff6e6); }
.vod-card.is-holiday::before { color: rgba(212,160,60,.16); }
.vod-card.is-holiday .vod-badge { background: rgba(212,160,60,.16); color: #9a6b12; }
@media (max-width: 640px) {
  .vod-verse { max-width: 100%; }
  .vod-foot { flex-direction: column; align-items: stretch; }
  .vod-cta { justify-content: center; }
  .vod-card::before { font-size: 120px; }
}

/* Online Bible entry — dark branded band under the Verse of the Day card */
.bible-cta { display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(18px, 3vw, 34px); margin-top: clamp(20px, 3vw, 30px);
  padding: clamp(22px, 3.4vw, 34px) clamp(22px, 3.4vw, 40px); border-radius: var(--radius-lg);
  text-decoration: none; color: var(--snow); position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--hero-bg), var(--hero-bg-2));
  border: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow-lg);
  transition: transform .25s ease, box-shadow .25s ease; }
.bible-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255,90,44,.18), transparent 55%); }
.bible-cta:hover { transform: translateY(-3px); box-shadow: 0 44px 96px -42px rgba(8,17,31,.75); }
.bible-cta > * { position: relative; z-index: 1; }
.bible-cta-ico { width: 62px; height: 62px; flex: none; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--orange-2), var(--orange)); box-shadow: 0 12px 26px -10px rgba(255,90,44,.7); }
.bible-cta-ico svg { width: 30px; height: 30px; color: #fff; }
.bible-cta-body { min-width: 0; }
.bible-cta-eyebrow { color: var(--gold-2); font-weight: 800; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; }
.bible-cta-title { margin: 7px 0 0; font-size: clamp(1.16rem, 2.2vw, 1.5rem); font-weight: 850; line-height: 1.26; color: #fff; letter-spacing: -.01em; text-wrap: balance; }
.bible-cta-desc { margin: 10px 0 0; color: rgba(244,247,251,.74); font-size: .95rem; line-height: 1.62; max-width: 62ch; }
.bible-cta-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.bible-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13); color: rgba(244,247,251,.88); font-size: .77rem; font-weight: 700; }
.bible-chip svg { width: 14px; height: 14px; opacity: .9; }
.bible-cta-btn { flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 999px;
  background: linear-gradient(180deg, var(--orange-2), var(--orange)); color: #fff; font-weight: 800; font-size: .95rem; white-space: nowrap;
  box-shadow: 0 12px 28px -10px rgba(255,90,44,.65); transition: gap .2s ease, filter .2s ease; }
.bible-cta:hover .bible-cta-btn { gap: 13px; filter: brightness(1.06); }
.bible-cta-btn svg { width: 17px; height: 17px; }
@media (max-width: 860px) {
  .bible-cta { grid-template-columns: auto 1fr; }
  .bible-cta-btn { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 560px) {
  .bible-cta { grid-template-columns: 1fr; gap: 15px; padding: 24px 22px; }
  .bible-cta-ico { width: 52px; height: 52px; border-radius: 15px; }
  .bible-cta-ico svg { width: 26px; height: 26px; }
  .bible-cta-desc { font-size: .9rem; }
}

/* Floating download promo rails — only on wide desktops where the side margins
   are empty (container is 1200px, so we need ≥1640px to clear the content). */
.promo-rail { display: none; }
.promo-rail.is-hidden { display: none !important; }
@media (min-width: 1700px) {
  .promo-rail { position: fixed; top: 50%; z-index: 40;
    display: flex; flex-direction: column; align-items: center; width: 186px;
    padding: 22px 14px 18px; border-radius: 24px; text-align: center; overflow: hidden;
    background: linear-gradient(180deg, #ffffff, #fff7f1); border: 1px solid rgba(255,90,44,.16);
    box-shadow: 0 34px 70px -30px rgba(120,55,20,.42), 0 6px 18px -8px rgba(0,0,0,.06);
    opacity: 0; pointer-events: none; transition: opacity .5s ease, transform .5s ease; }
  .promo-rail-l { left: 26px; transform: translateY(-50%) translateX(-20px); }
  .promo-rail-r { right: 26px; transform: translateY(-50%) translateX(20px); }
  /* revealed by JS only after scrolling past the hero; tucked away again near the footer */
  .promo-rail.promo-show { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); }
}
/* soft glow behind the logo */
.promo-rail::before { content: ""; position: absolute; top: -36px; left: 50%; width: 150px; height: 150px;
  transform: translateX(-50%); background: radial-gradient(circle, rgba(255,90,44,.2), transparent 68%); pointer-events: none; }
/* slow shimmer sweep with a long pause between passes */
.promo-rail::after { content: ""; position: absolute; top: 0; left: -70%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg); animation: promoShimmer 9s ease-in-out infinite; pointer-events: none; }
@keyframes promoShimmer { 0%, 80% { left: -70%; } 100% { left: 140%; } }
.promo-rail > * { position: relative; z-index: 1; }
.promo-rail-x { position: absolute; top: 6px; right: 8px; z-index: 3; width: 20px; height: 20px;
  padding: 0; line-height: 18px; border: 0; border-radius: 50%; background: transparent;
  color: #cbb6a9; font-size: 17px; cursor: pointer; transition: background .15s, color .15s; }
.promo-rail-x:hover { background: rgba(0,0,0,.06); color: #6f635b; }
.promo-logo { width: 54px; height: 54px; border-radius: 16px; box-shadow: 0 10px 22px -8px rgba(200,53,15,.5);
  outline: 1px solid rgba(255,255,255,.7); outline-offset: -1px; }
.promo-name { margin: 11px 0 0; font-size: .98rem; font-weight: 850; letter-spacing: -.01em; color: #211a15; }
.promo-name b { font-weight: 850; color: var(--orange); }
.promo-tag { margin-top: 6px; padding: 3px 11px; border-radius: 999px; font-size: .68rem; font-weight: 750;
  color: var(--orange-text); background: rgba(255,90,44,.1); }
.promo-badges { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 15px;
  padding-top: 15px; border-top: 1px solid rgba(20,12,8,.08); }
/* Scoped to .promo-rail so these do NOT collide with the hero/CTA .store-badge buttons. */
.promo-rail .store-badge { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 12px;
  text-decoration: none; background: #14171c; color: #fff; border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.6); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.promo-rail .store-badge:hover { transform: translateY(-1px); background: #1b1f26; box-shadow: 0 12px 24px -10px rgba(0,0,0,.72); }
.promo-rail .store-badge-ico { width: 20px; height: 20px; flex: none; }
.promo-rail .store-badge-tx { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.08; text-align: left; min-width: 0; }
.promo-rail .store-badge-tx small { font-size: .53rem; font-weight: 600; letter-spacing: .03em; opacity: .74; text-transform: uppercase; }
.promo-rail .store-badge-tx b { font-size: .76rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
/* subtle twinkling sparkles */
.promo-spark { position: absolute; z-index: 2; color: #ffb057; pointer-events: none; opacity: 0;
  text-shadow: 0 0 7px rgba(255,176,87,.9); animation: promoTwinkle 4s ease-in-out infinite; }
.promo-spark.s1 { top: 12px; left: 15px; font-size: 11px; animation-delay: .3s; }
.promo-spark.s2 { top: 26%; right: 14px; font-size: 8px; animation-delay: 2.1s; }
@keyframes promoTwinkle { 0%, 100% { opacity: 0; transform: scale(.5) rotate(0deg); } 50% { opacity: .95; transform: scale(1.1) rotate(90deg); } }
@media (prefers-reduced-motion: reduce) {
  .promo-rail, .promo-rail::after, .promo-spark { animation: none; }
  .promo-spark { opacity: .5; }
}

/* Install-to-home-screen (PWA) prompt — a bottom sheet shown by pwa.js */
.pwa-install { position: fixed; z-index: 60; left: 50%; bottom: 20px;
  transform: translateX(-50%) translateY(150%); display: flex; align-items: center; gap: 13px;
  width: calc(100% - 32px); max-width: 452px; padding: 13px 14px; border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #fff6f0); border: 1px solid rgba(255,90,44,.2);
  box-shadow: 0 26px 60px -20px rgba(20,12,8,.42), 0 4px 14px rgba(0,0,0,.06);
  opacity: 0; pointer-events: none; transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .35s ease; }
.pwa-install.in { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.pwa-install[hidden] { display: none; }
.pwa-install-ico { width: 46px; height: 46px; border-radius: 12px; flex: none; box-shadow: 0 6px 16px -6px rgba(200,53,15,.5); }
.pwa-install-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pwa-install-tx strong { font-size: .95rem; font-weight: 800; color: #211a15; letter-spacing: -.01em; }
.pwa-install-tx span { font-size: .78rem; color: #6f635b; line-height: 1.38; }
.pwa-ios-hint b { color: var(--orange-text); font-weight: 700; }
.pwa-install-btn { flex: none; padding: 10px 20px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .85rem; font-weight: 800; color: #fff; white-space: nowrap;
  background: linear-gradient(180deg, var(--orange-2), var(--orange)); box-shadow: 0 10px 22px -8px rgba(255,90,44,.65);
  transition: filter .15s ease, transform .15s ease; }
.pwa-install-btn:hover { filter: brightness(1.05); }
.pwa-install-btn:active { transform: translateY(1px); }
.pwa-install-x { flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #b6a79c; font-size: 20px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.pwa-install-x:hover { background: rgba(0,0,0,.06); color: #6f635b; }
@media (max-width: 480px) {
  .pwa-install { bottom: 12px; gap: 11px; padding: 12px; }
  .pwa-install-btn { padding: 9px 16px; }
}

.eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--orange-text);
}
.h-display { font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(2.3rem, 5.4vw, 4rem); }
.h-section { font-weight: 800; letter-spacing: -.025em; line-height: 1.1; font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
.lead { color: var(--ink-2); font-size: clamp(1.02rem, 1.4vw, 1.18rem); }
.on-dark .lead, .lead.on-dark { color: var(--snow-2); }
.text-orange { color: var(--orange-text); }
.text-gold { color: var(--gold-text); }

.section-head { max-width: 680px; margin: 0 auto clamp(40px, 5vw, 60px); text-align: center; }
.section-head .lead { margin-top: 14px; }
.section-head .eyebrow { margin-bottom: 14px; }

/* ---------- Buttons ---------- */
.btn {
  --py: 13px; --px: 24px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: var(--py) var(--px); border-radius: 999px; font-weight: 650; font-size: .96rem;
  letter-spacing: -.01em; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, border-color .25s, color .25s;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-lg { --py: 16px; --px: 32px; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn-primary {
  color: #fff; background: linear-gradient(180deg, var(--orange-2), var(--orange));
  box-shadow: 0 10px 26px -8px rgba(255,90,44,.5), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(255,90,44,.62), inset 0 1px 0 rgba(255,255,255,.32); }
.btn-gold { color: #1c1404; background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: 0 10px 26px -8px rgba(212,160,23,.46); }
.btn-gold:hover { transform: translateY(-2px); }
.btn-dark { color: #fff; background: var(--ink); }
.btn-dark:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline { color: var(--ink); background: #fff; border-color: var(--line-2); }
.btn-outline:hover { border-color: var(--ink-3); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-ghost-dark { color: var(--snow); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.btn-ghost-dark:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }

/* ---------- Store badges ---------- */
.store-badges { display: flex; gap: 12px; flex-wrap: wrap; }
.store-badge {
  display: inline-flex; align-items: center; gap: 11px; padding: 11px 20px; border-radius: 14px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .25s;
}
.store-badge:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.store-badge svg { width: 24px; height: 24px; flex-shrink: 0; }
.store-badge small { display: block; font-size: .64rem; opacity: .95; letter-spacing: .02em; line-height: 1.2; }
.store-badge strong { display: block; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.store-badge.appstore { background: linear-gradient(180deg, var(--orange-2), var(--orange)); color: #fff; box-shadow: 0 10px 26px -10px rgba(255,90,44,.5); }
.store-badge.googleplay { background: #0C1320; color: #fff; }
.store-badge.web { background: #fff; color: var(--ink); border: 1px solid var(--line-2); }

/* ---------- Navbar ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 90; transition: background .4s, box-shadow .4s, backdrop-filter .4s; }
.nav.scrolled { background: rgba(255,255,255,.86); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 1px 0 var(--line), 0 8px 30px -20px rgba(16,23,38,.3); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -.02em; font-size: 1.18rem; color: #fff; }
.nav.scrolled .brand { color: var(--ink); }
.brand-logo { width: 40px; height: 40px; border-radius: 11px; object-fit: cover; box-shadow: 0 4px 14px -4px rgba(0,0,0,.5); }
.brand b { color: var(--orange); }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link { padding: 9px 14px; border-radius: 10px; color: rgba(255,255,255,.82); font-size: .93rem; font-weight: 500; transition: color .25s, background .25s, box-shadow .25s; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.1); }
.nav.scrolled .nav-link { color: var(--ink-2); }
.nav.scrolled .nav-link:hover { color: var(--ink); background: var(--paper-2); }
/* Active nav item — the section you're reading (scrollspy `.active`) or the page you're
   on (`aria-current="page"`) render as a filled "pill" button, legible on both the dark
   hero/reader nav and the white scrolled nav. */
.nav-link.active,
.nav-link[aria-current="page"] {
  color: var(--orange-2); font-weight: 700;
  background: rgba(255,122,69,.16);
  box-shadow: inset 0 0 0 1px rgba(255,122,69,.30);
}
.nav-link.active:hover,
.nav-link[aria-current="page"]:hover { color: var(--orange-2); background: rgba(255,122,69,.24); }
.nav.scrolled .nav-link.active,
.nav.scrolled .nav-link[aria-current="page"] {
  color: var(--orange-text); /* AA-safe (#C7350F) — orange-deep failed contrast on the light pill */
  background: rgba(255,90,44,.10);
  box-shadow: inset 0 0 0 1px rgba(255,90,44,.30);
}
.nav.scrolled .nav-link.active:hover,
.nav.scrolled .nav-link[aria-current="page"]:hover { color: var(--orange-text); background: rgba(255,90,44,.15); }
/* Mobile menu rows are `.mobile-menu a:not(.btn)` (color/padding/border-bottom) — match that
   `:not(.btn)` so the active pill's color, inset padding and hidden divider win the cascade. */
.mobile-menu a.active:not(.btn),
.mobile-menu a[aria-current="page"]:not(.btn) {
  color: var(--orange-2); font-weight: 700;
  background: rgba(255,122,69,.14);
  border-radius: 12px; border-bottom-color: transparent;
  padding-left: 12px; padding-right: 12px;
}
.nav-cta { margin-left: 8px; }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; align-items: center; justify-content: center; }
.nav.scrolled .nav-toggle { border-color: var(--line-2); background: var(--paper-2); color: var(--ink); }
.mobile-menu { display: none; position: fixed; inset: 72px 0 0 0; z-index: 89; padding: 16px 24px calc(24px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; background: rgba(8,17,31,.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.mobile-menu.open { display: block; animation: fadeDown .3s var(--ease); }
.mobile-menu a:not(.btn) { display: block; padding: 14px 4px; font-size: 1.05rem; color: var(--snow); border-bottom: 1px solid rgba(255,255,255,.08); }
/* Menu CTA: refined full-width button — softer glow, cleaner radius, not a giant glowing lozenge */
.mobile-menu .btn { margin-top: 18px; padding-block: 14px; border-radius: 14px; font-size: 1rem;
  box-shadow: 0 8px 20px -12px rgba(255,90,44,.5), inset 0 1px 0 rgba(255,255,255,.22); }
@media (max-width: 920px) { .nav-links { display: none; } .nav-toggle { display: inline-flex; } }

/* Brand must never be shrunk or overlapped by a long nav. The long-script (Burmese/
   Thai) nav compaction + hamburger collapse lives further down (search "locale-my"). */
.brand { flex-shrink: 0; }
.nav-inner { gap: 14px; }

/* ---------- HERO (dark) ---------- */
.hero { position: relative; background: var(--hero-bg); color: var(--snow); padding-top: 128px; padding-bottom: 88px; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 620px at 88% 12%, rgba(255,90,44,.34), transparent 56%),
    radial-gradient(760px 540px at 100% 60%, rgba(212,160,23,.22), transparent 60%),
    radial-gradient(700px 600px at -5% 90%, rgba(255,90,44,.1), transparent 60%),
    linear-gradient(180deg, var(--hero-bg), var(--hero-bg-2));
}
/* OPTIONAL: drop a Bible photo here later — set background-image on .hero-photo */
.hero-photo {
  position: absolute; top: 0; right: 0; width: 58%; height: 100%; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center; opacity: .28;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
  mask-image: linear-gradient(90deg, transparent, #000 55%);
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 52px; text-align: center; } }
.hero h1 { margin: 22px 0 0; color: #fff; }
.hero .lead { margin-top: 20px; max-width: 540px; }
@media (max-width: 980px) { .hero .lead { margin-inline: auto; } }

.pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); font-size: .82rem; color: var(--snow-2); font-weight: 500; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255,90,44,.2); }

/* Inline trust badges (icon + label) like the reference */
.hero-trust { display: flex; flex-wrap: wrap; gap: 22px 30px; margin-top: 30px; }
@media (max-width: 980px) { .hero-trust { justify-content: center; } }
.hero-trust-item { display: inline-flex; align-items: center; gap: 11px; }
.hero-trust-ico { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: var(--orange-2); }
.hero-trust-ico svg { width: 20px; height: 20px; }
.hero-trust-item span { font-size: .9rem; font-weight: 600; line-height: 1.25; color: var(--snow); max-width: 110px; }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
@media (max-width: 980px) { .hero-actions { justify-content: center; } }
.hero-avail { margin-top: 18px; font-size: .9rem; color: var(--snow-3); }
.hero-avail b { color: var(--snow-2); font-weight: 600; }

/* ---------- Phone mockup ---------- */
.phone-wrap { display: flex; justify-content: center; perspective: 1600px; }
.phone {
  position: relative; width: 296px; height: 612px; border-radius: 46px; flex-shrink: 0;
  background: linear-gradient(155deg, #2A3548, #0A1120); padding: 11px;
  box-shadow: 0 50px 110px -28px rgba(0,0,0,.7), 0 0 0 2px rgba(255,255,255,.06), inset 0 0 0 2px rgba(255,255,255,.04);
}
.phone.float { animation: float 7s ease-in-out infinite; }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: linear-gradient(180deg, #0C1726, #070D18); }
.phone-notch { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); z-index: 6; width: 112px; height: 28px; border-radius: 16px; background: #04070D; }
.phone-glow { position: absolute; inset: -50px; z-index: 1; filter: blur(75px); opacity: .5; background: radial-gradient(circle at 62% 28%, var(--orange), transparent 52%), radial-gradient(circle at 30% 82%, var(--gold), transparent 52%); pointer-events: none; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

/* In-app mock UI (swap for real screenshots later) */
.scr { position: absolute; inset: 0; padding: 40px 15px 12px; display: flex; flex-direction: column; gap: 11px; color: var(--snow); }
.scr-status { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: #fff; font-weight: 600; padding: 0 6px; }
.scr-status .dots { display: inline-flex; gap: 3px; align-items: center; }
.scr-head { display: flex; align-items: center; justify-content: space-between; }
.scr-title { font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.scr-title b { color: var(--orange); }
.scr-ava { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--orange), var(--gold)); }
.scr-label { font-size: 12px; font-weight: 700; color: var(--snow-2); margin-top: 4px; }
.scr-search { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-radius: 13px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--snow-3); font-size: 11.5px; }
.scr-search svg { width: 14px; height: 14px; }
.scr-card { padding: 13px; border-radius: 14px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); }
.scr-verse { background: linear-gradient(140deg, rgba(255,90,44,.2), rgba(212,160,23,.12)); border-color: rgba(255,122,82,.32); }
.scr-verse .vlabel { font-size: 10px; font-weight: 700; color: var(--gold-2); letter-spacing: .03em; }
.scr-verse p { margin: 7px 0 6px; font-size: 12.5px; line-height: 1.5; color: #fff; font-weight: 500; }
.scr-verse .ref { font-size: 10px; color: var(--snow-2); }
.scr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.scr-tile { padding: 11px 6px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.scr-tile .ti { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(150deg, rgba(255,90,44,.25), rgba(212,160,23,.18)); display: grid; place-items: center; color: var(--orange-2); }
.scr-tile .ti svg { width: 15px; height: 15px; }
.scr-tile .tl { font-size: 8.5px; color: var(--snow-2); font-weight: 600; }
.scr-line { height: 8px; border-radius: 5px; background: rgba(255,255,255,.09); }
.scr-line.s { width: 55%; } .scr-line.m { width: 78%; } .scr-line.l { width: 92%; }
.scr-read { display: flex; align-items: center; justify-content: space-between; }
.scr-read .pct { font-size: 11px; font-weight: 700; color: var(--orange-2); }
.scr-tabbar { margin-top: auto; display: flex; justify-content: space-around; align-items: center; padding: 11px 4px 4px; border-top: 1px solid rgba(255,255,255,.08); }
.scr-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--snow-3); }
.scr-tab svg { width: 17px; height: 17px; }
.scr-tab span { font-size: 7.5px; }
.scr-tab.active { color: var(--orange); }
.scr-body p { font-size: 11.5px; line-height: 1.55; color: var(--snow-2); margin: 0 0 8px; }
.scr-body .hl { background: rgba(212,160,23,.26); color: #fff; border-radius: 3px; padding: 0 2px; }

/* ---------- Stats band (dark) ---------- */
.stats { background: var(--hero-bg-2); color: var(--snow); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); position: relative; overflow: hidden; }
.stats::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 200px at 50% 0%, rgba(255,90,44,.12), transparent 70%); }
.stats-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 760px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; } }
.stat { text-align: center; padding: 14px; }
.stat .num { font-weight: 850; font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -.03em; line-height: 1; background: linear-gradient(120deg, #fff, var(--orange-2) 70%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat .label { color: var(--snow-2); font-size: .92rem; margin-top: 12px; }
/* Trust strip — feature badges (no big numbers, so it never reads as low traffic) */
.trustbar { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.trust { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; padding: 6px 12px; }
.trust-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--orange-2); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.trust-ico svg { width: 23px; height: 23px; }
.trust-title { font-weight: 750; font-size: 1.02rem; color: #fff; letter-spacing: -.01em; line-height: 1.25; }
.trust-sub { font-size: .85rem; color: var(--snow-3); line-height: 1.5; }
@media (max-width: 760px) { .trustbar { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; } }
@media (max-width: 480px) { .trustbar { grid-template-columns: 1fr; gap: 16px; max-width: 360px; margin: 0 auto; } .trust { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; text-align: left; padding: 4px 2px; } .trust-ico { flex: none; } .trust-txt { text-align: left; } }

/* ---------- Social traffic (real, first-party counted) ---------- */
.socialstats { background: var(--hero-bg); color: var(--snow); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); position: relative; overflow: hidden; }
.socialstats::before { content: ""; position: absolute; inset: 0; background: radial-gradient(760px 240px at 50% -8%, rgba(255,90,44,.14), transparent 70%); pointer-events: none; }
.socialstats .container { position: relative; z-index: 1; }
.socialstats .eyebrow { color: var(--orange-2); }
.socialstats .h-section { color: #fff; }
.socialstats .lead { color: var(--snow-2); }

.ss-totals { grid-template-columns: repeat(3, 1fr); max-width: 720px; margin: 0 auto; }

.ss-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 34px; }
@media (max-width: 900px) { .ss-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .ss-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.ss-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 22px 14px;
  border-radius: var(--radius); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  transition: transform .35s var(--ease), background .3s, border-color .3s; }
.ss-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.ss-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; }
.ss-ico svg { width: 24px; height: 24px; }
.ss-card.fb .ss-ico { background: #1877F2; }
.ss-card.ig .ss-ico { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); }
.ss-card.yt .ss-ico { background: #FF0000; }
.ss-card.tt .ss-ico { background: #111418; border: 1px solid rgba(255,255,255,.18); }
.ss-card.x  .ss-ico { background: #111418; border: 1px solid rgba(255,255,255,.18); }
.ss-name { font-weight: 700; font-size: .92rem; color: #fff; }
.ss-metrics { display: flex; gap: 16px; margin-top: 2px; }
.ss-metric { display: flex; flex-direction: column; gap: 1px; }
.ss-metric .ss-val { font-weight: 800; font-size: 1.12rem; color: #fff; letter-spacing: -.02em; line-height: 1.1; }
.ss-mlabel { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--snow-3); }

.ss-foot { text-align: center; margin: 28px 0 0; color: var(--snow-3); font-size: .82rem; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ss-dot { width: 8px; height: 8px; border-radius: 50%; background: #33D27E; animation: sspulse 2.2s infinite; }
@keyframes sspulse { 0% { box-shadow: 0 0 0 0 rgba(51,210,126,.5); } 70% { box-shadow: 0 0 0 7px rgba(51,210,126,0); } 100% { box-shadow: 0 0 0 0 rgba(51,210,126,0); } }
@media (prefers-reduced-motion: reduce) { .ss-dot { animation: none; } }

/* Other (non-social) channels — same polished card style as the social cards */
.ss-subhead { text-align: center; margin: 44px 0 20px; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--snow-3); }
.ss-grid-channels { grid-template-columns: repeat(4, 1fr); margin-top: 0; }
@media (max-width: 900px) { .ss-grid-channels { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .ss-grid-channels { grid-template-columns: repeat(2, 1fr); } }
.ss-card.ch-direct   .ss-ico { background: #2DA89E; }
.ss-card.ch-google   .ss-ico { background: #4285F4; }
.ss-card.ch-referral .ss-ico { background: #6366F1; }
.ss-card.ch-reddit   .ss-ico { background: #FF4500; }
.ss-card.ch-telegram .ss-ico { background: #229ED9; }
.ss-card.ch-whatsapp .ss-ico { background: #25D366; }
.ss-card.ch-other    .ss-ico { background: #5B6577; }

/* ---------- Feature cards (light) ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 980px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .feature-grid { grid-template-columns: 1fr; } }
.feature {
  padding: 24px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line);
  transition: transform .4s var(--ease), border-color .35s, box-shadow .4s; position: relative;
}
.bg-paper-2 .feature { background: #fff; }
.feature:hover { transform: translateY(-5px); border-color: rgba(255,90,44,.32); box-shadow: var(--shadow-md); }
.feature-ico { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px; background: var(--peach); color: var(--orange); transition: transform .4s var(--ease); }
.feature:hover .feature-ico { transform: scale(1.08) rotate(-4deg); }
.feature-ico svg { width: 24px; height: 24px; }
.feature h3 { margin: 0 0 7px; font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.feature p { margin: 0; color: var(--ink-2); font-size: .93rem; }

/* ---------- Showcase (alternating) ---------- */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.showcase + .showcase { margin-top: clamp(64px, 8vw, 110px); }
.showcase.reverse .showcase-media { order: 2; }
@media (max-width: 920px) { .showcase, .showcase.reverse { grid-template-columns: 1fr; gap: 40px; } .showcase.reverse .showcase-media { order: 0; } }
.showcase h2 { margin: 16px 0 0; }
.showcase .lead { margin-top: 16px; }
.showcase-media { position: relative; display: flex; justify-content: center; }
.showcase-media .phone { width: 270px; height: 558px; }
.showcase-glow { position: absolute; inset: 8% 10%; z-index: 0; filter: blur(60px); opacity: .55; background: radial-gradient(circle at 50% 40%, var(--orange), transparent 60%), radial-gradient(circle at 70% 80%, var(--gold), transparent 60%); }
.check-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 13px; }
.check-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-2); }
.check-list svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--orange); margin-top: 1px; }
.check-list b { color: var(--ink); font-weight: 600; }
.showcase-actions { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Screenshots gallery ---------- */
.shots-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 980px) { .shots-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .shots-grid { grid-template-columns: 1fr; max-width: 300px; margin-inline: auto; } }
.shot { position: relative; border-radius: 30px; overflow: hidden; cursor: pointer; aspect-ratio: 9/18.5; padding: 8px; background: linear-gradient(155deg, #1B2436, #0A1120); border: 1px solid rgba(16,23,38,.06); box-shadow: var(--shadow-md); transition: transform .45s var(--ease), box-shadow .45s; }
.shot:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--shadow-lg); }
.shot .scr { padding: 18px 12px 10px; gap: 9px; }
.shot-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 30px 14px 13px; font-size: .84rem; font-weight: 650; color: #fff; background: linear-gradient(180deg, transparent, rgba(4,7,13,.88)); display: flex; align-items: center; gap: 7px; }
.shot-zoom { position: absolute; top: 14px; right: 14px; z-index: 6; width: 32px; height: 32px; border-radius: 10px; background: rgba(8,17,31,.55); border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center; color: #fff; opacity: 0; transition: opacity .35s; backdrop-filter: blur(6px); }
.shot:hover .shot-zoom { opacity: 1; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 130; display: none; place-items: center; padding: 24px; background: rgba(4,8,14,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lightbox.open { display: grid; animation: fade .3s ease; }
.lightbox-stage { position: relative; }
.lightbox-close { position: absolute; top: -54px; right: 0; width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; cursor: pointer; display: grid; place-items: center; }
.lightbox-cap { text-align: center; color: var(--snow); margin-top: 18px; font-weight: 600; }
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .25s; }
.lb-nav:hover { background: rgba(255,255,255,.2); }
.lb-nav.prev { left: 4vw; } .lb-nav.next { right: 4vw; }
@media (max-width: 640px) { .lb-nav { display: none; } }

/* ===== Real app imagery (hero scene + landscape gallery) — official biblepro.vip renders ===== */
.hero-shot { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-shot-glow { position: absolute; inset: -12% -8%; z-index: 1; filter: blur(80px); opacity: .5; background: radial-gradient(circle at 62% 30%, var(--orange), transparent 55%), radial-gradient(circle at 26% 78%, var(--gold), transparent 55%); pointer-events: none; }
.hero-shot-img { position: relative; z-index: 2; width: 100%; height: auto; filter: drop-shadow(0 26px 50px rgba(0,0,0,.5)); }
@media (max-width: 980px) { .hero-shot { max-width: 560px; margin-inline: auto; } }

.shots-grid--wide { grid-template-columns: repeat(3, 1fr); gap: 26px 22px; }
@media (max-width: 900px) { .shots-grid--wide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .shots-grid--wide { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.shots-grid--wide .shot { aspect-ratio: auto; padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 14px; overflow: visible; }
.shots-grid--wide .shot:hover { transform: translateY(-6px); box-shadow: none; }
.shots-grid--wide .shot-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 30px rgba(16,23,38,.28)); transition: transform .45s var(--ease); }
.shots-grid--wide .shot:hover .shot-img { transform: scale(1.02); }
.shots-grid--wide .shot-cap { position: static; padding: 12px 6px 0; background: none; color: var(--ink); justify-content: center; font-weight: 650; }
.shots-grid--wide .shot-zoom { background: rgba(8,17,31,.45); }

.lightbox-img { display: block; width: min(1120px, 94vw); height: auto; max-height: 82vh; object-fit: contain; border-radius: 12px; filter: drop-shadow(0 30px 70px rgba(0,0,0,.6)); }

/* ---------- Testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 920px) { .testi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .testi-grid { grid-template-columns: 1fr; } }
.testi { padding: 26px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 15px; transition: transform .4s var(--ease), box-shadow .4s; }
.bg-paper-2 .testi { background: #fff; }
.testi:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.stars svg { width: 17px; height: 17px; }
.testi p { margin: 0; color: var(--ink); font-size: .98rem; line-height: 1.62; }
.testi-user { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testi-ava { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 1rem; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.testi-user .name { font-weight: 650; font-size: .95rem; color: var(--ink); }
.testi-user .role { color: var(--ink-3); font-size: .82rem; }
.verified { display: inline-flex; align-items: center; gap: 4px; color: var(--orange-text); font-size: .76rem; font-weight: 600; }
.verified svg { width: 13px; height: 13px; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 1080px; margin-inline: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; align-items: start; }
@media (max-width: 780px) { .faq-list { grid-template-columns: 1fr; max-width: 640px; } }
.faq-item { border-radius: 16px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.bg-paper-2 .faq-item { background: #fff; }
.faq-item.open { border-color: rgba(255,90,44,.3); box-shadow: var(--shadow-sm); }
.faq-q { width: 100%; text-align: left; background: none; border: none; color: var(--ink); cursor: pointer; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 1.04rem; font-weight: 650; }
.faq-icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: var(--paper-2); color: var(--ink-2); display: grid; place-items: center; transition: transform .35s var(--ease), background .3s, color .3s; }
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--orange); color: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-a-inner { padding: 0 22px 20px; color: var(--ink-2); }

/* ---------- CTA band (dark) ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 76px); text-align: center; color: var(--snow); background: linear-gradient(135deg, var(--hero-bg), var(--hero-bg-2)); border: 1px solid rgba(255,255,255,.08); }
.cta-band .cta-photo { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: .25; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(700px 360px at 50% -10%, rgba(255,90,44,.32), transparent 60%), radial-gradient(600px 400px at 90% 110%, rgba(212,160,23,.2), transparent 60%); pointer-events: none; }
.cta-band > * { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* ---------- Footer (dark) ---------- */
.footer { background: var(--footer-bg); color: var(--snow-2); padding-block: 64px 32px; border-top: 1px solid rgba(255,255,255,.06); }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 44px; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } }
.footer .brand { color: #fff; }
.footer-tag { margin: 16px 0 0; color: var(--snow-3); font-size: .92rem; max-width: 260px; }
.footer h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--snow-3); margin: 0 0 16px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.footer-links a { color: var(--snow-2); font-size: .92rem; transition: color .25s; }
.footer-links a:hover { color: #fff; }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.social { width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); display: grid; place-items: center; color: var(--snow-2); transition: color .25s, transform .25s, background .25s; }
.social:hover { color: #fff; transform: translateY(-3px); background: var(--orange); }
.social svg { width: 18px; height: 18px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.07); color: var(--snow-3); font-size: .86rem; }
.footer-bottom a { color: var(--snow-3); }
.footer-bottom a:hover { color: var(--snow); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .07s; }
.reveal[data-delay="2"] { transition-delay: .14s; }
.reveal[data-delay="3"] { transition-delay: .21s; }
.reveal[data-delay="4"] { transition-delay: .28s; }
.reveal[data-delay="5"] { transition-delay: .35s; }

/* ---------- Helpers ---------- */
.divider { height: 1px; background: var(--line); }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--orange); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
.badge-soft { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; font-size: .8rem; font-weight: 650; background: var(--peach); border: 1px solid rgba(255,90,44,.22); color: var(--orange-text); }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Redirect interstitial ---------- */
.redirect-page { min-height: 100vh; display: grid; place-items: center; background: var(--hero-bg); color: var(--snow); padding: 24px; position: relative; overflow: hidden; }
.redirect-page .hero-bg { position: absolute; }
.redirect-card { position: relative; z-index: 2; max-width: 440px; width: 100%; text-align: center; padding: 46px 34px; border-radius: var(--radius-lg); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(16px); }
.redirect-card .brand { color: #fff; justify-content: center; margin-bottom: 24px; }
.spinner { width: 52px; height: 52px; margin: 0 auto 22px; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--orange); animation: spin .9s linear infinite; }
.progress { height: 5px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 26px; }
.progress > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--orange), var(--gold)); border-radius: 999px; transition: width .12s linear; }
.redirect-card a.manual { color: var(--snow-2); font-size: .86rem; margin-top: 18px; display: inline-block; }
.redirect-card a.manual:hover { color: #fff; }

/* ---------- Dashboard ---------- */
.dash-body { background: var(--paper-2); color: var(--ink); min-height: 100vh; }
.dash-head { background: var(--hero-bg); color: var(--snow); padding: 22px 0; position: sticky; top: 0; z-index: 40; box-shadow: var(--shadow-md); }
.dash-head .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-tag { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--snow-2); padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.dash-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dash-select { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #fff; padding: 9px 14px; border-radius: 11px; font-size: .9rem; font-family: inherit; cursor: pointer; }
.dash-select option { color: #111; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 960px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .kpi-grid { grid-template-columns: 1fr; } }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.kpi .k-top { display: flex; align-items: center; justify-content: space-between; }
.kpi .k-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--peach); color: var(--orange); display: grid; place-items: center; }
.kpi .k-ico svg { width: 20px; height: 20px; }
.kpi .k-delta { font-size: .8rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.kpi .k-delta.up { color: #0a7d3d; background: #e4f7ec; }
.kpi .k-delta.down { color: #b42318; background: #fde7e4; }
.kpi .k-num { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; margin-top: 16px; color: var(--ink); }
.kpi .k-label { color: var(--ink-2); font-size: .9rem; margin-top: 4px; }
.dash-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.panel h3 { margin: 0 0 4px; font-size: 1.1rem; font-weight: 700; }
.panel .sub { color: var(--ink-3); font-size: .86rem; margin: 0 0 20px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 56px; align-items: center; gap: 12px; margin-bottom: 14px; }
.bar-row .bl { font-size: .9rem; color: var(--ink); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.bar-track { height: 10px; border-radius: 999px; background: var(--paper-3); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--orange), var(--gold)); transition: width 1s var(--ease); }
.bar-row .bv { text-align: right; font-size: .86rem; font-weight: 700; color: var(--ink-2); }
.src-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dash-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.dash-table th { text-align: left; color: var(--ink-3); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; padding: 0 12px 12px; border-bottom: 1px solid var(--line); }
.dash-table td { padding: 13px 12px; border-bottom: 1px solid var(--paper-3); }
.dash-table tr:last-child td { border-bottom: none; }
.dash-table .tnum { font-weight: 700; color: var(--ink); }
.pill-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 650; }
.conv-tag { color: #0a7d3d; background: #e4f7ec; }
.note-box { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; border-radius: 14px; padding: 16px 18px; font-size: .9rem; display: flex; gap: 12px; align-items: flex-start; }
.note-box svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
.dash-donut { width: 180px; height: 180px; border-radius: 50%; margin: 0 auto; position: relative; }
.dash-donut .hole { position: absolute; inset: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center; text-align: center; }
.dash-donut .hole b { font-size: 1.5rem; font-weight: 800; display: block; }
.dash-donut .hole span { font-size: .76rem; color: var(--ink-3); }
.legend { display: grid; gap: 9px; margin-top: 20px; }
.legend-row { display: flex; align-items: center; justify-content: space-between; font-size: .88rem; }
.legend-row .ll { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.legend-row .lv { font-weight: 700; color: var(--ink); }

/* ---------- Download section (official-style platform cards) ---------- */
.download-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .download-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .download-grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; } }
.dl-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 22px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s, border-color .35s;
}
.dl-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(255,90,44,.3); }
.dl-head { display: flex; flex-direction: column; align-items: center; gap: 13px; margin-bottom: 8px; }
.dl-ico { width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; background: var(--peach); color: var(--orange); transition: transform .4s var(--ease); }
.dl-card:hover .dl-ico { transform: scale(1.08) rotate(-4deg); }
.dl-ico svg { width: 30px; height: 30px; }
.dl-card h3 { margin: 0; font-size: 1.18rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.dl-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 16px; border-radius: 13px; font-weight: 650; font-size: .94rem; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform .3s var(--ease), box-shadow .3s, background .25s, border-color .25s, color .25s;
}
.dl-btn-ico { display: inline-flex; flex-shrink: 0; }
.dl-btn-ico svg { width: 18px; height: 18px; display: block; }
.dl-btn.primary { background: var(--ink); color: #fff; box-shadow: 0 10px 24px -12px rgba(16,23,38,.55); }
.dl-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(16,23,38,.65); }
.dl-btn.ghost { background: var(--paper-2); color: var(--ink); border-color: var(--line-2); }
.dl-btn.ghost:hover { background: #fff; border-color: var(--ink-3); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.dl-note { margin: 6px 0 0; font-size: .82rem; color: var(--ink-3); text-align: center; line-height: 1.4; }
.dl-foot { text-align: center; margin-top: clamp(34px, 5vw, 52px); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.dl-disclaimer { max-width: 640px; margin: 0; font-size: .85rem; color: var(--ink-3); line-height: 1.65; }
/* Official-site link is intentionally small/subtle — we promote THIS page, not the official site */
.dl-official { font-size: .82rem; color: var(--ink-3); text-decoration: none; border-bottom: 1px dashed var(--line-2); padding-bottom: 2px; transition: color .2s ease, border-color .2s ease; }
.dl-official:hover { color: var(--ink-2); border-color: var(--ink-3); }

/* hero "Available for …" now links to the download section */
.hero-avail-link { color: inherit; display: inline-flex; align-items: center; gap: 7px; transition: color .25s; }
.hero-avail-link b { color: var(--snow-2); transition: color .25s; }
.hero-avail-link:hover { color: var(--snow); }
.hero-avail-link:hover b { color: var(--orange-2); }

/* ---------- Social "Follow" dropdown ---------- */
.social-dd { position: relative; }
.social-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; background: none; border: none; font-family: inherit; }
.social-btn > svg:first-child { width: 16px; height: 16px; }
.social-btn .chev { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.social-dd.open .social-btn .chev { transform: rotate(180deg); }
.social-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 250px; padding: 8px; z-index: 95;
  background: rgba(10,18,30,.97); border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.6); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .25s, visibility .25s; }
.social-dd.open .social-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.social-item { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 11px; color: var(--snow); transition: background .2s; }
.social-item:hover { background: rgba(255,255,255,.08); }
.social-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; color: #fff; }
.social-ico svg { width: 19px; height: 19px; }
.social-meta { display: flex; flex-direction: column; line-height: 1.25; }
.social-meta .nm { font-weight: 650; font-size: .92rem; }
.social-meta .hd { font-size: .78rem; color: var(--snow-3); }
.mobile-social-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--snow-3); margin-top: 16px; }
/* Compact "Follow" row: brand-coloured icon buttons only (no names/handles) */
.mobile-social { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 11px; }
.mobile-social .social-item { padding: 0; background: none; border: none; }
.mobile-social .social-item:active { transform: scale(.92); }
.mobile-social .social-meta { display: none; }
.mobile-social .social-ico { width: 46px; height: 46px; border-radius: 13px; }
.mobile-social .social-ico svg { width: 23px; height: 23px; }

/* Mobile-menu language picker — native dropdown (compact, no popup overflow) */
.m-lang { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.m-lang-cap { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--snow-3); margin-bottom: 9px; }
.m-lang-field { position: relative; display: block; }
/* Themed language picker (replaces the native <select>, built by i18n.js) — dark,
   tappable, and using the loaded Noto fonts so ไทย / မြန်မာ render correctly. */
.m-lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-lang-grid .lang-option { display: block; width: 100%; text-align: center; padding: 13px 10px; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: var(--snow);
  font-size: 1rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: border-color .2s, background .2s; }
.m-lang-grid .lang-option:hover { border-color: var(--orange); color: #fff; }
.m-lang-grid .lang-option[aria-current="true"] { background: rgba(255,90,44,.2); border-color: var(--orange); color: #fff; font-weight: 750; }
/* Delineate the near-black brand icons (TikTok / X) on the dark menu so they aren't invisible. */
.mobile-social .social-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.m-lang-select {
  width: 100%; appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: #fff;
  font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2;
  padding: 14px 42px 14px 15px; border-radius: 12px; cursor: pointer;
  transition: background .25s, border-color .25s;
}
.m-lang-select:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.m-lang-select:active { background: rgba(255,255,255,.1); }
.m-lang-select option { color: #111; }   /* native list: dark text on white */
.m-lang-chev { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--snow-2); pointer-events: none; }

/* Collapsible language dropdown for the mobile menu (i18n.js builds it as a .lang-dd,
   so the shared toggle/close logic drives it; uses our Noto fonts, unlike a native select). */
.m-lang-dd { position: relative; }
.m-lang-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 15px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s; }
.m-lang-trigger:hover, .m-lang-dd.open .m-lang-trigger { border-color: var(--orange); background: rgba(255,255,255,.09); }
.m-lang-trigger .chev { width: 18px; height: 18px; color: var(--snow-2); flex: none; transition: transform .2s; }
.m-lang-dd.open .m-lang-trigger .chev { transform: rotate(180deg); }
/* Override the desktop absolute dropdown → an inline expanding list inside the mobile sheet. */
.m-lang-menu { position: static; display: none; margin-top: 8px; padding: 0; border: 0; background: none; box-shadow: none;
  grid-template-columns: 1fr; gap: 5px; min-width: 0; inset: auto; transform: none; }
.m-lang-dd.open .m-lang-menu { display: grid; }
.m-lang-menu .lang-option { display: block; width: 100%; text-align: left; padding: 12px 15px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: var(--snow-2);
  font-family: inherit; font-size: .96rem; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.m-lang-menu .lang-option:hover { border-color: var(--orange); color: #fff; }
.m-lang-menu .lang-option[aria-current="true"] { background: rgba(255,90,44,.2); border-color: var(--orange); color: #fff; font-weight: 750; }

/* =========================================================================
   MOBILE POLISH — touch targets, safe areas, tap feedback, perf
   Added as a final layer so existing desktop layout is untouched (env()
   insets are 0 on non-notched screens; @media (hover:none) only affects
   touch devices). Goal: every page/button/action feels great on a phone.
   ========================================================================= */

/* ---- Notch / Dynamic Island / home-indicator safe areas (viewport-fit=cover) ---- */
:root { --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
        --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); }
/* Keep all gutters clear of the notch in landscape without doubling on normal screens */
.container { padding-left: max(24px, var(--safe-l)); padding-right: max(24px, var(--safe-r)); }
.nav { padding-top: var(--safe-t); }
.hero { padding-top: calc(128px + var(--safe-t)); }
.footer { padding-bottom: calc(32px + var(--safe-b)); }
.dash-head { padding-top: calc(22px + var(--safe-t)); }
.redirect-page { padding-top: calc(24px + var(--safe-t)); padding-bottom: calc(24px + var(--safe-b)); }
/* Anchor jumps (#features …) must clear the fixed 72px nav instead of hiding under it */
html { scroll-padding-top: calc(84px + var(--safe-t)); }

/* ---- Tap feedback: kill the grey iOS/Android flash, add app-like press states ---- */
a, button, .btn, .dl-btn, .store-badge, .social-card, .shot, .faq-q,
.lang-option, .social-item, .nav-toggle, .nav-link, input, select {
  -webkit-tap-highlight-color: transparent;
}
/* Removes the 300ms tap delay & double-tap-zoom on controls */
a, button, .btn, .dl-btn, .store-badge, .social-card, .shot,
.faq-q, .nav-toggle, .lang-btn, .social-btn, .dash-select { touch-action: manipulation; }

/* On touch devices the lovely hover-lifts never fire — give a crisp press instead */
@media (hover: none) {
  .feature:active, .testi:active, .dl-card:active, .social-card:active,
  .shot:active { transform: scale(.985); transition-duration: .12s; }
  .store-badge:active, .dl-btn:active, .social-item:active,
  .nav-link:active, .lang-option:active, .faq-q:active { transform: scale(.97); transition-duration: .1s; }
  .feature:hover, .testi:hover, .dl-card:hover { transform: none; box-shadow: var(--shadow-sm); }
}

/* ---- Bigger, comfortable touch targets on phones (≥44px guidance) ---- */
@media (max-width: 920px) {
  /* Footer link lists became 17–18px tall rows — too small to tap reliably */
  .footer-links { gap: 2px; }
  .footer-links a { display: inline-block; padding: 14px 2px; line-height: 1.1; }
  .footer-bottom { gap: 10px; }
  .footer-bottom a { display: inline-block; padding: 10px 2px; }
  /* Footer brand-social icons: 40 → 44 */
  .social { width: 44px; height: 44px; }
  .socials { gap: 12px; }
}

/* ---- Phone-only layout refinements so CTAs read as full, tappable buttons ---- */
@media (max-width: 480px) {
  /* Hero store badges: STACK as full-width buttons (side-by-side cramped the
     "App Store" / "Google Play" labels onto two lines — looked messy) */
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-actions .store-badge { width: 100%; justify-content: center; }
  .hero-actions .store-badge strong, .hero-actions .store-badge small { white-space: nowrap; }
  /* CTA band: stack the three store badges as full-width buttons */
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .store-badge { width: 100%; justify-content: center; }
}

/* ---- Mobile menu: scrollable, safe-area aware, never taller than the screen ---- */
body.nav-open { overflow: hidden; }   /* lock the page behind the open menu */
@media (max-width: 920px) {
  .mobile-menu {
    inset: calc(72px + var(--safe-t)) 0 auto 0;
    max-height: calc(100vh - 72px - var(--safe-t));
    max-height: calc(100dvh - 72px - var(--safe-t));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-left: max(24px, var(--safe-l)); padding-right: max(24px, var(--safe-r));
    padding-bottom: calc(24px + var(--safe-b));
  }
  .mobile-menu a:not(.btn) { padding-block: 15px; }   /* roomier tap rows (nav links only, not the CTA) */
}

/* ---- Performance: trim the most expensive blur layers on small screens.
        Big radial blur glows + backdrop-filter cost the most while scrolling;
        smaller radii keep the glow look but run smoothly on real phones. ---- */
@media (max-width: 640px) {
  .hero-shot-glow { filter: blur(46px); }
  .showcase-glow, .phone-glow { filter: blur(40px); }
  .nav.scrolled { backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); }
}

/* ---- Dashboard controls: full-width, ≥44px tappable filters on phones ---- */
@media (max-width: 600px) {
  .dash-head .container { gap: 12px; }
  .dash-controls { width: 100%; }
  .dash-select { flex: 1 1 0; min-width: 132px; padding-block: 11px; }   /* 40 → 44px tall */
  /* Data tables stay readable: let them scroll inside their wrapper, hint with momentum */
  .panel [style*="overflow-x"] { -webkit-overflow-scrolling: touch; }
}

/* =========================================================================
   MOBILE DENSITY PASS — phones were showing ONE oversized card per row.
   Show 2 compact cards per row and shrink card internals so each section
   reads tight & refined instead of huge. Appended last to win the cascade.
   ========================================================================= */
@media (max-width: 640px) {
  /* ---- Feature cards: 2-up, compact ---- */
  .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .feature { padding: 16px 13px; border-radius: 16px; }
  .feature-ico { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 11px; }
  .feature-ico svg { width: 20px; height: 20px; }
  .feature h3 { font-size: .95rem; margin-bottom: 5px; }
  .feature p { font-size: .82rem; }

  /* ---- Testimonials: 2-up, smaller quote ---- */
  .testi-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .testi { padding: 16px 13px; gap: 10px; border-radius: 16px; }
  .testi p { font-size: .84rem; line-height: 1.5; }
  .stars svg { width: 14px; height: 14px; }
  .testi-ava { width: 36px; height: 36px; font-size: .82rem; }
  .testi-user { gap: 9px; }
  .testi-user .name { font-size: .84rem; }
  .testi-user .role, .verified { font-size: .72rem; }

  /* ---- Screenshot gallery: TWO per row, but FULL-BLEED with a tight gap so each
         wide landscape render stays as large as possible (a plain in-container
         2-up would shrink them to a mushy ~155px). Negative margins cancel the
         container's side padding, pushing the grid out to the viewport edges. ---- */
  .shots-grid--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px; max-width: none;
    margin-left: calc(-1 * max(24px, var(--safe-l)));
    margin-right: calc(-1 * max(24px, var(--safe-r)));
    padding-inline: 9px;
  }
  .shots-grid--wide .shot { margin: 0; }   /* kill default <figure> margins */
  .shots-grid--wide .shot-cap { font-size: .78rem; padding-top: 7px; }

  /* ---- Stats: keep the 2x2 but shrink numbers so 1,000,000+ never clips ---- */
  .stats-grid { gap: 22px 12px; }
  .stat { padding: 8px 4px; }
  .stat .num { font-size: clamp(1.5rem, 6.4vw, 2rem); }
  .stat .label { font-size: .82rem; margin-top: 7px; }
}

/* ---- Dashboard KPI cards: 2-up + compact on phones ---- */
@media (max-width: 520px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .kpi { padding: 15px 13px; border-radius: 16px; }
  .kpi .k-ico { width: 34px; height: 34px; border-radius: 10px; }
  .kpi .k-ico svg { width: 17px; height: 17px; }
  .kpi .k-num { font-size: 1.5rem; margin-top: 10px; }
  .kpi .k-label { font-size: .8rem; }
  .kpi .k-delta { font-size: .72rem; }
}

/* =========================================================================
   MOBILE HERO — was loose & oversized with an awkward 2+1 block of big
   trust icons. Tighten the rhythm and turn the trust signals into neat,
   evenly-wrapping chips so the hero reads polished, not sparse.
   ========================================================================= */
@media (max-width: 640px) {
  .hero { padding-top: calc(96px + var(--safe-t)); padding-bottom: 50px; }
  .hero-grid { gap: 34px; }
  /* Slightly smaller so an 8-char CJK title fits one line; balance avoids a
     lone orphan character ("经") dropping onto its own line if it does wrap */
  .hero .h-display { font-size: clamp(1.8rem, 7.6vw, 2.25rem); text-wrap: balance; }
  .hero h1 { margin-top: 16px; }
  .hero .lead { margin-top: 14px; font-size: .95rem; }
  .pill { font-size: .78rem; padding: 6px 13px; }

  /* Trust signals → compact pill chips (icon + label), wrap evenly & centered */
  .hero-trust { gap: 8px; margin-top: 20px; }
  .hero-trust-item {
    gap: 8px; padding: 7px 14px 7px 7px; border-radius: 999px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  }
  .hero-trust-ico { width: 26px; height: 26px; border-radius: 8px; background: rgba(255,122,82,.16); border: none; }
  .hero-trust-ico svg { width: 15px; height: 15px; }
  .hero-trust-item span { font-size: .8rem; max-width: none; font-weight: 600; }

  .hero-actions { margin-top: 22px; }
  /* "支持 iOS, Android…" — flow as normal centered text instead of an inline-flex
     row that squished "支持" into its own vertical column next to wrapped text */
  .hero-avail { margin-top: 16px; font-size: .85rem; line-height: 1.5; }
  .hero-avail-link { display: inline; border-bottom: none; }
  .hero-avail-link b { white-space: normal; }
}

/* =========================================================================
   MOBILE SHOWCASE — the feature blocks were dominated by a giant 558px-tall
   phone mockup. Scale the whole mockup down (keeps its fixed-px inner UI crisp;
   resizing the frame alone would overflow the content). The float animation is
   disabled here because its keyframe transform would override the scale, and the
   negative margin reclaims the empty space the scale leaves behind.
   ========================================================================= */
@media (max-width: 640px) {
  .showcase { gap: 14px; }
  .showcase + .showcase { margin-top: 38px; }
  .showcase-copy .badge-soft { font-size: .74rem; padding: 5px 11px; }
  .showcase-copy .lead { font-size: .94rem; margin-top: 12px; }
  .check-list { gap: 9px; margin-top: 16px; }
  .check-list li { font-size: .89rem; gap: 10px; }
  .check-list svg { width: 19px; height: 19px; }
  .showcase-actions { margin-top: 18px; }
  .showcase-media .phone.float { animation: none; }
  /* Phone mockup was still dominating the screen — shrink it further (visual ≈167px
     wide); negative margin reclaims the layout space the scale leaves behind. */
  .showcase-media .phone { transform: scale(.62); transform-origin: top center; margin-bottom: -210px; }
}

/* =========================================================================
   MOBILE PAGE RHYTHM — global tightening so EVERY section reads compact &
   refined on phones (titles were big, vertical padding cavernous, FAQ/CTA
   bulky). One cohesive pass instead of per-section patches.
   ========================================================================= */
@media (max-width: 640px) {
  /* Less cavernous vertical padding between sections */
  .section { padding-block: 44px; }
  .section.tight { padding-block: 34px; }

  /* Smaller section titles + tighter header block */
  .section-head { margin-bottom: 26px; }
  .h-section { font-size: clamp(1.5rem, 6vw, 1.9rem); line-height: 1.2; }
  .section-head .lead { font-size: .94rem; margin-top: 9px; }
  .eyebrow { font-size: .72rem; letter-spacing: .14em; }

  /* FAQ — compact accordion items (were tall with big padding) */
  .faq-list { gap: 9px; }
  .faq-q { padding: 14px 15px; font-size: .94rem; gap: 12px; }
  .faq-icon { width: 23px; height: 23px; }
  .faq-a-inner { padding: 0 15px 15px; font-size: .88rem; }

  /* CTA band — trimmed so it isn't a huge dark slab */
  .cta-band { padding: 34px 18px; }
  .cta-band .lead { font-size: .94rem; margin-top: 12px; }
  .cta-actions { margin-top: 22px; }
}

/* ===== Burmese / Thai nav fit — long, tall labels were wrapping & clipping in the bar ===== */
.nav-link, .social-btn { white-space: nowrap; }
/* keep tall Burmese/Thai stacks on ONE line with enough line-height so nothing clips */
html.locale-my .nav-link, html.locale-th .nav-link,
html.locale-my .social-btn, html.locale-th .social-btn { font-size: .82rem; line-height: 1.5; padding-top: 7px; padding-bottom: 7px; }
html.locale-my .nav-link, html.locale-th .nav-link { padding-left: 9px; padding-right: 9px; }
html.locale-my .nav-links, html.locale-th .nav-links { gap: 2px; }
html.locale-my .lang-btn, html.locale-th .lang-btn { line-height: 1.5; }
/* These scripts are wider than Latin. Nav labels were shortened (see my.json) so the
   horizontal bar now fits on normal desktops; collapse to the (vertical, never-clipping)
   hamburger menu only on smaller screens. */
@media (max-width: 1120px) {
  html.locale-my .nav-links { display: none; }
  html.locale-my .nav-toggle { display: inline-flex; }
}
@media (max-width: 1000px) {
  html.locale-th .nav-links { display: none; }
  html.locale-th .nav-toggle { display: inline-flex; }
}