/* ==========================================================================
   Selah — landing page
   Palette: Ink Umber / Warm Ivory / Candlelight Gold / Leather Wine / Sage
   ========================================================================== */

@font-face {
  font-family: "Iowan-fallback";
  src: local("Iowan Old Style"), local("Palatino Linotype"), local("Georgia");
}

:root {
  --ink: #211711;
  --ink-70: rgba(33,23,17,.72);
  --ink-50: rgba(33,23,17,.52);
  --ivory: #F5EEDF;
  --ivory-hi: #FBF6EB;
  --ivory-lo: #EFE5D0;
  --gold: #C9A24B;
  --gold-deep: #A97F1F;
  --ember: #E8C86C;
  --wine: #6E3B35;
  --sage: #77805F;
  --room-top: #241A16;
  --room-mid: #17110D;
  --room-bottom: #0F0B08;
  --line: rgba(33,23,17,.14);
  --line-dark: rgba(240,215,160,.14);
  --serif: Georgia, "Iowan-fallback", "Palatino Linotype", serif;
  --sans: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --ease: cubic-bezier(.19,.75,.24,1);
  --shadow: 0 24px 60px -20px rgba(20,12,4,.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--gold); color: var(--ivory-hi); }

/* ---------- reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-delay { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- ambient world backdrop ---------- */
.world { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#sparkles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.glow {
  position: absolute;
  width: 60vw; height: 60vw;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .16;
}
.glow-a { background: var(--gold); top: -20vw; left: -10vw; }
.glow-b { background: var(--wine); bottom: -25vw; right: -15vw; opacity: .10; }

main, .nav, .footer { position: relative; z-index: 1; }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  backdrop-filter: blur(14px) saturate(140%);
  background: rgba(245,238,223,.72);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav.scrolled { border-color: var(--line); background: rgba(245,238,223,.92); }
.nav-inner {
  max-width: 1120px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
}
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 20px; }
.brand-mark { color: var(--gold-deep); font-size: 16px; }
.nav-links { display: flex; gap: 32px; }
.nav-links a { font-size: 14px; color: var(--ink-70); transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--ivory-hi);
  padding: 10px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  transition: transform .2s var(--ease), background .2s;
}
.nav-cta:hover { transform: translateY(-1px); background: #362519; }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  padding: 152px 24px 80px;
  overflow: hidden;
}
.hero-inner {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px;
  align-items: center;
}
.eyebrow {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 18px; font-weight: 600;
}
.hero h1 {
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--ink);
}
.hero h1 em { font-style: italic; color: var(--gold-deep); }
.lede { font-size: 17px; color: var(--ink-70); max-width: 46ch; margin-top: 20px; line-height: 1.65; }
.hero-actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  cursor: pointer; border: 1px solid transparent;
}
.btn-primary {
  background: var(--ink); color: var(--ivory-hi);
  box-shadow: 0 12px 28px -12px rgba(33,23,17,.5);
}
.btn-primary small { display: block; font-size: 10px; font-weight: 400; opacity: .7; margin-bottom: -2px; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(33,23,17,.6); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { background: var(--ivory-lo); border-color: var(--ink-50); }
.btn-ghost svg { transition: transform .25s var(--ease); }
.btn-ghost:hover svg { transform: translateX(3px); }
.btn-lg { padding: 17px 32px; font-size: 16px; }

.hero-proof {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 30px; font-size: 13px; color: var(--ink-50);
}
.stars { color: var(--gold-deep); letter-spacing: 2px; font-size: 14px; }
.dot { opacity: .5; }

.hero-stage { position: relative; display: flex; justify-content: center; }
.hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 140px;
  background: linear-gradient(to bottom, transparent, var(--ivory));
  pointer-events: none;
}

/* orbiting feature chips around hero phone */
.hero-orbit { position: absolute; inset: 0; pointer-events: none; }
.orbit-chip {
  position: absolute;
  background: var(--ivory-hi);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-70);
  box-shadow: var(--shadow);
  animation: float 6s ease-in-out infinite;
}
.chip-1 { top: 8%; left: -6%; animation-delay: 0s; }
.chip-2 { top: 46%; right: -10%; animation-delay: 1.6s; }
.chip-3 { bottom: 6%; left: -2%; animation-delay: 3.2s; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (max-width: 980px) { .orbit-chip { display: none; } }

/* ==========================================================================
   Phone mockups (shared)
   ========================================================================== */
.phone {
  width: 280px; height: 578px;
  border-radius: 38px; padding: 9px;
  background: #0E0B09;
  box-shadow: var(--shadow), inset 0 0 0 1.5px rgba(255,255,255,.06);
  position: relative;
  flex-shrink: 0;
}
.phone-hero { animation: heroFloat 7s ease-in-out infinite; }
@keyframes heroFloat { 0%,100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-14px) rotate(1deg); } }
.phone-side { width: 248px; height: 512px; }
.phone-notch {
  position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 74px; height: 18px; border-radius: 10px; background: #0E0B09; z-index: 5;
}
.screen {
  width: 100%; height: 100%; border-radius: 29px; overflow: hidden;
  position: relative; display: flex; flex-direction: column;
  font-family: var(--sans);
}

/* ---- Home screen mock ---- */
.s-home { background: #F6EFE1; color: #241A12; }
.s-status { display: flex; justify-content: space-between; padding: 14px 18px 0; font-size: 11px; color: rgba(36,26,18,.6); }
.s-status-icons { display: flex; gap: 3px; }
.s-status-icons i { width: 10px; height: 8px; background: rgba(36,26,18,.35); border-radius: 1px; }
.s-home-top { padding: 16px 18px 0; }
.s-greet { font-size: 11px; color: rgba(36,26,18,.55); margin: 0; }
.s-name { font-family: var(--serif); font-size: 22px; margin: 2px 0 0; }
.s-pills { display: flex; gap: 6px; margin-top: 10px; }
.s-pill { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; background: #FFFDF6; border: 1px solid rgba(36,26,18,.1); border-radius: 999px; padding: 5px 9px; }
.s-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-deep); display: inline-block; }
.s-verse-card {
  margin: 14px 14px 0; border-radius: 16px; padding: 16px 15px 14px;
  color: #F3EAD6; position: relative;
  background: radial-gradient(130% 150% at 85% -10%, #4A3320, #241811 60%);
}
.s-flame { position: absolute; top: 12px; right: 14px; width: 6px; height: 12px; }
.s-flame span {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 50% 78%, #FFE9AE 0%, #F0B542 55%, transparent 78%);
  animation: flicker 2.6s ease-in-out infinite;
}
@keyframes flicker { 0%,100% { transform: scaleY(1); } 40% { transform: scaleY(1.15) translateX(.5px); } 70% { transform: scaleY(.92); } }
.s-verse-label { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: #C9A24B; margin: 0; }
.s-verse-text { font-family: var(--serif); font-style: italic; font-size: 13.5px; line-height: 1.5; margin: 8px 0 5px; }
.s-verse-ref { font-size: 9.5px; color: rgba(243,234,214,.65); margin: 0; }
.s-verse-actions { display: flex; gap: 6px; margin-top: 12px; }
.s-vbtn { font-size: 9.5px; border: 1px solid rgba(240,215,160,.3); border-radius: 999px; padding: 4px 10px; color: rgba(243,234,214,.85); }
.s-vbtn.primary { background: #C9A24B; color: #241708; border-color: #C9A24B; font-weight: 600; }
.s-rings { display: flex; gap: 10px; margin: 14px 14px 0; }
.s-ring-card { flex: 1; background: #FFFDF6; border: 1px solid rgba(36,26,18,.09); border-radius: 12px; padding: 10px; display: flex; align-items: center; gap: 8px; }
.s-ring-card b { display: block; font-size: 13px; }
.s-ring-card small { font-size: 9px; color: rgba(36,26,18,.55); }
.ring-anim { animation: ringDraw 1.6s var(--ease) .3s backwards; }
@keyframes ringDraw { from { stroke-dashoffset: 100.5; } }
.s-tabbar { margin-top: auto; display: flex; background: rgba(255,253,246,.9); border-top: 1px solid rgba(36,26,18,.08); padding: 9px 6px 12px; }
.s-tabbar span { flex: 1; text-align: center; font-size: 8px; color: rgba(36,26,18,.45); }
.s-tabbar span.on { color: #8A6D1F; font-weight: 700; }

/* ---- Library screen mock ---- */
.s-library { background: linear-gradient(#1B1319, #120C0A 40%, #15100C); color: #EDE1C8; }
.s-lib-beam {
  position: absolute; top: -20px; left: 10%; width: 110px; height: 240px; transform: rotate(16deg);
  background: linear-gradient(rgba(255,225,160,.09), transparent 75%); filter: blur(6px); pointer-events: none;
}
.s-lib-top { padding: 34px 16px 0; }
.s-lib-top h4 { font-family: var(--serif); font-size: 18px; margin: 0; }
.s-lib-top small { font-size: 9.5px; color: rgba(237,225,200,.5); letter-spacing: .1em; text-transform: uppercase; }
.s-lib-chips { display: flex; gap: 5px; padding: 10px 16px 4px; }
.s-lib-chips span { font-size: 9px; border: 1px solid rgba(237,225,200,.2); border-radius: 999px; padding: 4px 9px; color: rgba(237,225,200,.7); }
.s-lib-chips span.on { background: rgba(201,162,75,.18); border-color: #C9A24B; color: #E8C86C; }
.s-shelf-label { font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: #C9A24B; margin: 12px 0 6px 16px; }
.s-shelf { display: flex; align-items: flex-end; gap: 2px; padding: 0 16px; height: 72px; }
.spine {
  width: 20%; height: 88%; border-radius: 2px 2px 1px 1px; position: relative;
  box-shadow: inset 2px 0 3px rgba(255,255,255,.15), inset -2px 0 4px rgba(0,0,0,.4);
}
.spine span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; font-family: var(--serif); font-size: 6.5px; letter-spacing: .08em;
  color: #E8C86C;
}
.spine::after { content: ""; position: absolute; left: 12%; right: 12%; top: 10%; height: 1px; background: rgba(232,200,108,.45); }
.sp1 { background: linear-gradient(90deg,#5A2E28,#7A423A 55%,#4A241F); }
.sp2 { background: linear-gradient(90deg,#243447,#35506B 55%,#1C2938); }
.sp3 { background: linear-gradient(90deg,#4A3A20,#6B5530 55%,#3A2D18); }
.sp4 { background: linear-gradient(90deg,#2E4032,#43584A 55%,#243228); }
.sp5 { background: linear-gradient(90deg,#54301E,#78472E 55%,#42261A); }
.s-plank { height: 8px; margin: -1px 16px 0; background: linear-gradient(#5C3D22,#3C2413 60%,#2A1809); box-shadow: 0 5px 8px rgba(0,0,0,.45); border-radius: 1px; }

/* ---- Reading screen mock ---- */
.s-read { background: #F2E7CE; color: #3A2B1A; }
.s-read-top { display: flex; justify-content: space-between; align-items: center; padding: 34px 16px 6px; font-size: 10px; color: rgba(58,43,26,.6); }
.s-read-top b { font-family: var(--serif); font-weight: 400; font-size: 12px; color: #3A2B1A; }
.s-read-progress { height: 2px; background: rgba(58,43,26,.12); margin: 0 16px; border-radius: 2px; overflow: hidden; }
.s-read-progress i { display: block; height: 100%; width: 38%; background: #A97F1F; }
.s-read-body { padding: 16px 20px 0; font-family: var(--serif); font-size: 12.5px; line-height: 1.75; flex: 1; }
.s-read-body .dc { float: left; font-size: 38px; line-height: .8; padding: 4px 6px 0 0; color: #8A6428; }
.vn { font-size: 8px; vertical-align: super; color: #A97F1F; font-weight: 700; font-family: var(--sans); padding: 0 2px; }
.vn.hl { color: #A97F1F; }
.hl-text { background: linear-gradient(transparent 55%, rgba(201,162,75,.4) 55%, rgba(201,162,75,.4) 92%, transparent 92%); }
.s-read-toolbar {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 12px; background: rgba(46,33,18,.94); border-radius: 999px;
  padding: 9px 16px; box-shadow: 0 10px 24px rgba(40,25,8,.4);
}
.s-read-toolbar i { font-style: normal; font-size: 12px; opacity: .9; }

/* ---- Player screen mock ---- */
.s-player { background: #191008; color: #F3EAD6; align-items: center; padding-top: 34px; }
.s-player-top { text-align: center; }
.s-player-top small { font-size: 9px; letter-spacing: .16em; color: var(--gold); }
.s-player-top h4 { font-family: var(--serif); font-size: 18px; margin: 2px 0 0; }
.s-vinyl-wrap { position: relative; width: 150px; height: 150px; margin: 16px auto 10px; display: flex; align-items: center; justify-content: center; }
.s-vinyl-glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(232,200,108,.16), transparent 70%); }
.s-vinyl {
  width: 128px; height: 128px; border-radius: 50%;
  background:
    repeating-radial-gradient(circle, #2B2118 0 2px, #17110C 2px 9px);
  position: relative;
  animation: spin 5s linear infinite;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.s-vinyl-label {
  position: absolute; inset: 34%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #E8C86C, #A97F1F);
}
.s-vinyl-label i { position: absolute; inset: 44%; background: #17110C; border-radius: 50%; }
@keyframes spin { to { transform: rotate(360deg); } }
.s-player-scrub { height: 3px; background: rgba(240,215,160,.2); border-radius: 3px; margin: 0 30px; overflow: hidden; }
.s-player-scrub i { display: block; height: 100%; width: 44%; background: var(--gold); }
.s-player-controls { display: flex; align-items: center; justify-content: space-between; padding: 10px 32px 0; font-size: 10px; color: rgba(243,234,214,.6); }
.s-play-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--ember); color: #241708; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.s-caption { font-family: var(--serif); font-style: italic; font-size: 10.5px; line-height: 1.5; padding: 6px 22px; color: rgba(228,215,188,.5); }
.s-caption.active { color: var(--ember); background: rgba(232,200,108,.08); border-radius: 6px; margin: 0 14px; padding: 8px; }
.s-caption.dim { opacity: .55; }

/* ==========================================================================
   Trust strip
   ========================================================================== */
.trust { padding: 28px 24px; text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust p { font-size: 12.5px; letter-spacing: .04em; color: var(--ink-50); }

/* ==========================================================================
   Experience / feature rows
   ========================================================================== */
.experience { padding: 120px 24px; max-width: 1120px; margin: 0 auto; }
.section-head { max-width: 640px; margin: 0 auto 72px; text-align: center; }
.section-head h2 { font-size: clamp(30px, 3.6vw, 44px); margin-top: 8px; }
.section-head .lede { margin: 16px auto 0; }
.section-head.light .eyebrow { color: var(--ember); }
.section-head.light h2, .section-head.light .lede { color: var(--ivory-hi); }
.section-head.light .lede { color: rgba(245,238,223,.68); }

.feature-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
  margin-bottom: 130px;
}
.feature-row:last-child { margin-bottom: 0; }
.feature-row.reverse { direction: rtl; }
.feature-row.reverse > * { direction: ltr; }
.feature-index {
  font-family: var(--serif); font-size: 14px; color: var(--gold-deep);
  display: inline-block; margin-bottom: 12px;
}
.feature-copy h3 { font-size: 28px; line-height: 1.25; margin-bottom: 14px; }
.feature-copy p { color: var(--ink-70); font-size: 15.5px; line-height: 1.65; }
.feature-list { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.feature-list li {
  font-size: 14px; color: var(--ink-70); padding-left: 22px; position: relative;
}
.feature-list li::before {
  content: "✦"; position: absolute; left: 0; top: 1px; color: var(--gold-deep); font-size: 11px;
}
.feature-stage { display: flex; justify-content: center; }

@media (max-width: 860px) {
  .feature-row, .feature-row.reverse { grid-template-columns: 1fr; direction: ltr; text-align: center; }
  .feature-list li { text-align: left; }
}

/* ==========================================================================
   Daily liturgy
   ========================================================================== */
.daily {
  background: linear-gradient(180deg, var(--room-top), var(--room-mid) 45%, var(--room-bottom));
  padding: 120px 24px;
  color: var(--ivory-hi);
}
.daily-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.daily-card {
  background: rgba(245,238,223,.04);
  border: 1px solid var(--line-dark);
  border-radius: 20px;
  padding: 28px 26px;
}
.daily-card h4 { font-size: 18px; color: var(--ivory-hi); margin-bottom: 10px; }
.daily-card p { font-size: 14px; color: rgba(245,238,223,.62); line-height: 1.6; }

.candle-row { display: flex; gap: 8px; margin-bottom: 22px; align-items: flex-end; }
.candle { width: 10px; height: 24px; border-radius: 2px; background: #3A2E22; position: relative; }
.candle.lit { background: #E9DCB8; }
.candle.lit::before {
  content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 50% 78%, #FFE9AE, #F0B542 55%, transparent 78%);
  animation: flicker 2.4s ease-in-out infinite;
}

.journal-mini { background: rgba(245,238,223,.05); border-radius: 12px; padding: 12px 14px; margin-bottom: 22px; }
.jm-row { display: flex; align-items: center; gap: 8px; }
.jm-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(245,238,223,.4); }
.jm-dot.gold { background: var(--ember); }
.jm-row p { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ivory-hi); }
.jm-tag { display: inline-block; margin-top: 8px; font-size: 9.5px; background: rgba(245,238,223,.08); border-radius: 999px; padding: 3px 9px; color: rgba(245,238,223,.6); }
.jm-answer { display: inline-block; margin-top: 8px; margin-left: 6px; font-size: 9.5px; background: rgba(232,200,108,.14); color: var(--ember); border-radius: 999px; padding: 3px 9px; }

.env-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 22px; }
.env-swatch { aspect-ratio: 1; border-radius: 10px; }
.env-fire { background: radial-gradient(circle at 50% 30%, #E8913A, #33200F); }
.env-rain { background: radial-gradient(circle at 50% 20%, #B9CBD4, #20282F); }
.env-night { background: radial-gradient(circle at 50% 15%, #A79FE0, #1B1834); }
.env-forest { background: radial-gradient(circle at 50% 25%, #C1E084, #1B2918); }

@media (max-width: 860px) { .daily-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Stats band
   ========================================================================== */
.stats { padding: 80px 24px; border-bottom: 1px solid var(--line); }
.stats-inner {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center;
}
.stat b {
  display: block; font-family: var(--serif); font-size: clamp(32px, 4vw, 48px);
  color: var(--gold-deep); font-variant-numeric: tabular-nums;
}
.stat span { font-size: 13px; color: var(--ink-50); }
@media (max-width: 700px) { .stats-inner { grid-template-columns: repeat(2, 1fr); row-gap: 40px; } }

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews { padding: 120px 24px; max-width: 1120px; margin: 0 auto; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card {
  background: var(--ivory-hi); border: 1px solid var(--line); border-radius: 18px;
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
}
.review-card p { font-family: var(--serif); font-size: 16px; line-height: 1.6; font-style: italic; color: var(--ink); }
.review-card footer { font-size: 12.5px; color: var(--ink-50); font-style: normal; }
@media (max-width: 860px) { .review-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Final CTA
   ========================================================================== */
.cta {
  position: relative;
  padding: 140px 24px;
  text-align: center;
  background: linear-gradient(180deg, var(--room-mid), var(--room-bottom));
  overflow: hidden;
}
.cta-glow {
  position: absolute; top: -20%; left: 50%; transform: translateX(-50%);
  width: 60vw; height: 60vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,200,108,.14), transparent 70%);
  pointer-events: none;
}
.cta-inner { position: relative; max-width: 560px; margin: 0 auto; }
.cta-flame { width: 20px; height: 34px; margin: 0 auto 28px; }
.cta-flame span {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 50% 78%, #FFE9AE, #F0B542 55%, transparent 78%);
  animation: flicker 3s ease-in-out infinite;
  filter: drop-shadow(0 0 16px rgba(232,200,108,.5));
}
.cta h2 { color: var(--ivory-hi); font-size: clamp(30px, 4vw, 46px); line-height: 1.15; }
.cta p { color: rgba(245,238,223,.62); font-size: 15.5px; margin-top: 16px; }
.cta .btn-primary { background: var(--ember); color: #241708; margin-top: 34px; box-shadow: 0 16px 40px -14px rgba(232,200,108,.4); }
.cta .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -14px rgba(232,200,108,.55); }
.cta-note { margin-top: 16px; font-size: 12px; color: rgba(245,238,223,.4); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { padding: 56px 24px 40px; text-align: center; background: var(--room-bottom); }
.footer-inner { max-width: 480px; margin: 0 auto; }
.footer .brand { justify-content: center; color: var(--ivory-hi); margin-bottom: 14px; }
.footer .brand-mark { color: var(--gold); }
.footer p { color: rgba(245,238,223,.5); font-size: 13px; margin-top: 6px; }
.footer-copy { margin-top: 18px; font-size: 11.5px; color: rgba(245,238,223,.3); }

/* ==========================================================================
   Dark-mode viewer support (system / toggle)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  body { background: #15100C; color: var(--ivory-hi); }
  .nav { background: rgba(21,16,12,.75); }
  .nav.scrolled { background: rgba(21,16,12,.92); border-color: var(--line-dark); }
  .nav-links a { color: rgba(245,238,223,.65); }
  .nav-links a:hover { color: var(--ivory-hi); }
  .hero h1, .section-head h2, .feature-copy h3 { color: var(--ivory-hi); }
  .lede, .feature-copy p, .feature-list li { color: rgba(245,238,223,.6); }
  .hero-fade { background: linear-gradient(to bottom, transparent, #15100C); }
  .btn-ghost { color: var(--ivory-hi); border-color: var(--line-dark); }
  .btn-ghost:hover { background: rgba(245,238,223,.06); }
  .orbit-chip { background: #1E1712; border-color: var(--line-dark); color: rgba(245,238,223,.8); }
  .trust { border-color: var(--line-dark); }
  .trust p { color: rgba(245,238,223,.45); }
  .stats { border-color: var(--line-dark); }
  .stat span { color: rgba(245,238,223,.45); }
  .review-card { background: #1E1712; border-color: var(--line-dark); }
  .review-card p { color: var(--ivory-hi); }
}
:root[data-theme="dark"] body { background: #15100C; color: var(--ivory-hi); }
:root[data-theme="dark"] .nav { background: rgba(21,16,12,.75); }
:root[data-theme="dark"] .nav.scrolled { background: rgba(21,16,12,.92); border-color: var(--line-dark); }
:root[data-theme="dark"] .nav-links a { color: rgba(245,238,223,.65); }
:root[data-theme="dark"] .hero h1, :root[data-theme="dark"] .section-head h2, :root[data-theme="dark"] .feature-copy h3 { color: var(--ivory-hi); }
:root[data-theme="dark"] .lede, :root[data-theme="dark"] .feature-copy p, :root[data-theme="dark"] .feature-list li { color: rgba(245,238,223,.6); }
:root[data-theme="dark"] .hero-fade { background: linear-gradient(to bottom, transparent, #15100C); }
:root[data-theme="dark"] .btn-ghost { color: var(--ivory-hi); border-color: var(--line-dark); }
:root[data-theme="dark"] .orbit-chip { background: #1E1712; border-color: var(--line-dark); color: rgba(245,238,223,.8); }
:root[data-theme="dark"] .review-card { background: #1E1712; border-color: var(--line-dark); }
:root[data-theme="dark"] .review-card p { color: var(--ivory-hi); }
:root[data-theme="light"] body { background: var(--ivory); color: var(--ink); }