@import url('colors_and_type.css');

*, *::before, *::after { box-sizing: border-box; }

/* Mobile/desktop copy swap utility — phone view (≤900px incl. the 390px
   preview iframe) shows .only-mobile, hides .only-desktop. */
.only-mobile { display: none !important; }
.only-desktop { }
@media (max-width: 900px) {
  .only-mobile { display: initial !important; }
  .only-desktop { display: none !important; }
  p.only-mobile, .only-mobile.block { display: block !important; }
}
html, body {
  margin: 0; padding: 0;
  width: 100%; max-width: 100%;
  overflow-x: hidden;
}
html { scroll-behavior: smooth; position: relative; }
body {
  background: var(--ds-bg);
  color: var(--ds-fg);
  font-family: var(--ds-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 0%,   rgba(59, 130, 246, 0.22), transparent),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(96, 165, 250, 0.14), transparent),
    radial-gradient(ellipse 70% 50% at 50% 50%,  rgba(124, 58, 237, 0.18), transparent);
  transition: background-color 400ms ease;
}
body.darker {
  background-color: #03020B;
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 0%,   rgba(59, 130, 246, 0.10), transparent),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(96, 165, 250, 0.06), transparent),
    radial-gradient(ellipse 70% 50% at 50% 50%,  rgba(124, 58, 237, 0.10), transparent);
}
body.glow-off .ambient, body.glow-off .cursor-aurora { opacity: 0 !important; }
body.accent-subtle { filter: saturate(0.75); }
body.accent-intense { filter: saturate(1.25) contrast(1.05); }

a { color: inherit; }
img { display: block; }

/* Ambient drifting blobs */
.ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; transition: opacity 400ms; }
.ambient .blob { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.55; }
.ambient .b1 { width: 620px; height: 620px; background: radial-gradient(circle, rgba(124,58,237,0.55), transparent 70%); top: -180px; left: -180px; animation: bdrift1 22s ease-in-out infinite; }
.ambient .b2 { width: 520px; height: 520px; background: radial-gradient(circle, rgba(96,165,250,0.35), transparent 70%); top: 35%; right: -160px; animation: bdrift2 26s ease-in-out infinite; }
.ambient .b3 { width: 480px; height: 480px; background: radial-gradient(circle, rgba(167,139,250,0.32), transparent 70%); bottom: 20%; left: 35%; animation: bdrift3 24s ease-in-out infinite; }
.ambient .b4 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(52,211,153,0.18), transparent 70%); top: 70%; left: -80px; animation: bdrift4 28s ease-in-out infinite; }
@keyframes bdrift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(80px,60px)} }
@keyframes bdrift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-60px,-40px)} }
@keyframes bdrift3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,-60px)} }
@keyframes bdrift4 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(50px,-30px)} }

/* Cursor aurora — the "alive" follower */
.cursor-aurora {
  position: fixed; pointer-events: none; z-index: 1;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,0.20), rgba(96,165,250,0.10) 40%, transparent 70%);
  filter: blur(40px);
  transform: translate(-50%, -50%);
  left: 50%; top: 50%;
  transition: opacity 400ms;
  mix-blend-mode: screen;
}

/* Nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 14px 0;
  background: rgba(10, 7, 28, 0.72);
  backdrop-filter: var(--ds-blur-nav);
  -webkit-backdrop-filter: var(--ds-blur-nav);
  border-bottom: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 8px 24px -12px rgba(0,0,0,0.4);
  transition: padding 300ms, background 300ms;
}
.nav.compact { padding: 8px 0; background: rgba(10, 7, 28, 0.85); }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ds-fg); }
.lockup img {
  width: 36px; height: 36px;
  border-radius: 9px;
  object-fit: cover;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.35),
    inset 0 0 0 0.5px rgba(255,255,255,0.1);
}
.lockup .name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--ds-violet-soft), var(--ds-blue));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lockup .breath {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ds-accent-green);
  box-shadow: 0 0 12px var(--ds-accent-green);
  animation: breath 4s ease-in-out infinite;
}
@keyframes breath {
  0%,100% { transform: scale(0.8); opacity: 0.6; }
  50% { transform: scale(1.2); opacity: 1; }
}
.nav-links { display: flex; gap: 32px; }
.nav-links a { text-decoration: none; color: var(--ds-fg-muted); font-size: 14px;
  font-weight: 500; transition: color var(--ds-dur-base); position: relative; }
.nav-links a:hover { color: var(--ds-fg); }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 1px;
  background: linear-gradient(90deg, var(--ds-violet-soft), var(--ds-blue));
  transition: width 300ms var(--ds-ease-out);
}
.nav-links a:hover::after { width: 100%; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: var(--ds-radius-md);
  font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: all var(--ds-dur-base) var(--ds-ease-out);
  white-space: nowrap;
}
.btn-primary { background: var(--ds-violet); color: #fff;
  box-shadow: var(--ds-shadow-violet-sm); position: relative; overflow: hidden; }
.btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: translateX(-100%);
  transition: transform 700ms;
}
.btn-primary:hover { background: var(--ds-violet-hover);
  box-shadow: var(--ds-shadow-violet-md); transform: translateY(-2px); }
.btn-primary:hover::before { transform: translateX(100%); }
.btn-lg { padding: 16px 30px; font-size: 15px; }
.btn-ghost { background: transparent; color: var(--ds-fg);
  border-color: var(--ds-border); }
.btn-ghost:hover { border-color: var(--ds-border-hover); background: rgba(124,58,237,0.08); transform: translateY(-2px); }

/* Hero "Explore More" — text-only with line-expand-on-hover (desktop).
   Override .btn/.btn-ghost/.btn-lg box treatment: strip background, border, shadow.
   A ::after pseudo acts as the underline; scaleX(0→1) from the left on hover,
   stopping before the arrow via `right: 28px` (accounts for 10px gap + 14px arrow). */
.hero-explore.btn.btn-ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 10px 0;
  position: relative;
  overflow: visible;
  color: var(--ds-fg-muted);
}
.hero-explore.btn.btn-ghost:hover {
  background: transparent;
  border-color: transparent;
  transform: none;
  color: var(--ds-fg);
}
.hero-explore::after {
  content: '';
  position: absolute;
  left: 0;
  right: 28px;
  bottom: 4px;
  height: 1.5px;
  background: currentColor;
  opacity: 0.8;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 500ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.hero-explore:hover::after { transform: scaleX(1); }
.hero-explore svg { transition: transform 400ms cubic-bezier(.2,.8,.2,1); }
.hero-explore:hover svg { transform: translateX(3px); }
.btn-nav { padding: 9px 18px; font-size: 13px; background: var(--ds-violet); color: #fff;
  border-radius: var(--ds-radius-pill); box-shadow: var(--ds-shadow-violet-sm);
  transition: padding 300ms var(--ds-ease-out), font-size 300ms var(--ds-ease-out),
              background 200ms, box-shadow 300ms; }
.btn-nav:hover { background: var(--ds-violet-hover); }
/* Shrink with the compact nav so the pill fits the thinner header */
.nav.compact .btn-nav {
  padding: 4px 12px;
  font-size: 11px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(124,58,237,0.35);
  min-height: 0;
}
.nav.compact .btn-nav svg { width: 11px; height: 11px; }
.nav.compact .btn-nav.btn { gap: 6px; }

/* Eyebrow / badge */
.badge { display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px; border-radius: var(--ds-radius-pill);
  background: rgba(124,58,237,0.10);
  border: 1px solid rgba(167,139,250,0.22);
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ds-violet-soft);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.badge .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ds-violet-soft);
  box-shadow: 0 0 8px var(--ds-violet-soft); }

/* Main container */
.main { position: relative; z-index: 2; }

/* ─── Section scaffolding ───────────────────────────────────────────────
   Rhythm: most sections use 112px vertical padding (primary beat).
   Showcase sections (temple, coins, merge, library) get 128px — a little
   more breathing room for their two-column layouts. Proof + CTA are
   compact (proof 64px, cta 96px). Horizontal gutter is unified at 40px
   on desktop; sides collapse on mobile. */
.section { padding: 96px 40px; position: relative; }
.section.section-lg { padding: 112px 40px; }
.section.section-sm { padding: 64px 40px; }
#temple { padding-top: 104px; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.section-head .badge { margin-bottom: 20px; }
.section-head h2 { font-size: clamp(34px, 3.6vw, 46px); font-weight: 700; letter-spacing: -0.028em;
  line-height: 1.1; margin: 0 0 16px; text-wrap: balance; color: #F7F4FF; }
.section-head p { font-size: 17px; line-height: 1.65; color: var(--ds-fg-muted); margin: 0; text-wrap: pretty; max-width: 600px; margin-left: auto; margin-right: auto; }
@media (max-width: 900px) {
  .section, .section.section-lg, .section.section-sm { padding: 72px 24px; }
  .section-head { margin-bottom: 36px; }
}

.accent-grad { background: linear-gradient(135deg, var(--ds-violet-soft), var(--ds-blue));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.accent-grad-warm { background: linear-gradient(135deg, var(--ds-violet-bright), var(--ds-violet-soft));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Section seam divider — softer, less-centered, more editorial */
.seam { position: relative; height: 1px; max-width: 1200px; margin: 0 auto;
  background: linear-gradient(90deg, transparent 8%, rgba(167,139,250,0.18) 30%, rgba(167,139,250,0.28) 50%, rgba(167,139,250,0.18) 70%, transparent 92%); }
.seam::before { display: none; }

/* ─── Hero ─── */
.hero { padding: 140px 32px 8px; text-align: center; position: relative;
  display: flex; align-items: flex-start; justify-content: center; overflow: visible; }

/* Calm-style full-bleed hero image. Sits behind hero-inner, covers the
   top ~55vh, dissolves into the page bg via a multi-stop gradient. The
   gradient terminates in var(--ds-bg) (the exact page bg hex) so there
   is no visible seam. The fade zone is the bottom ~32% of the image. */
.hero-bgimg {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(100% + 240px);
  min-height: 520px;
  z-index: 0;
  pointer-events: none;
  /* use mask to dissolve the IMAGE itself with a long, soft alpha ramp —
     so the photo physically fades to transparent before the container
     ends. combined with a matching color overlay, there is no visible
     seam and the page bg (radial blobs included) reads cleanly through. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 30%,
    rgba(0,0,0,0.85) 45%,
    rgba(0,0,0,0.55) 60%,
    rgba(0,0,0,0.25) 75%,
    rgba(0,0,0,0.08) 88%,
    rgba(0,0,0,0)    100%
  );
          mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 30%,
    rgba(0,0,0,0.85) 45%,
    rgba(0,0,0,0.55) 60%,
    rgba(0,0,0,0.25) 75%,
    rgba(0,0,0,0.08) 88%,
    rgba(0,0,0,0)    100%
  );
  background:
    /* darkening + color-harmonizing overlay on top of the photo */
    linear-gradient(
      to bottom,
      rgba(8, 6, 26, 0.25) 0%,
      rgba(8, 6, 26, 0.15) 30%,
      rgba(8, 6, 26, 0.20) 60%,
      rgba(8, 6, 26, 0.35) 80%,
      rgba(8, 6, 26, 0.55) 100%
    ),
    /* subtle violet wash so the photo fits our palette */
    linear-gradient(
      to bottom,
      rgba(124, 58, 237, 0.14) 0%,
      rgba(8, 6, 26, 0.10) 100%
    ),
    url('assets/backgrounds/hero-temple.webp') center 38% / cover no-repeat;
}

.hero-inner { max-width: 820px; margin: 0 auto; width: 100%; position: relative; z-index: 2; }
/* ─── Hero intro: cinematic, sacred, game-meditation professional ───
   Composition (top to bottom):
     sigil (breathing mark)  →  eyebrow rail (hairline · label · hairline)
     →  title (two-line, sans + gradient accent)
     →  subtitle (evocative, not descriptive)
     →  CTAs (primary w/ halo + ghost w/ arrow)
     →  trust rail (three glass chips)
   Everything has intentional rhythm. Type scale is restrained. */

/* Breathing sigil — ties to the app's breath motif */
.hero-sigil {
  width: 40px; height: 40px;
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  animation: sigilBreath 5s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(167,139,250,0.5));
}
@keyframes sigilBreath {
  0%, 100% { transform: scale(0.92); opacity: 0.75; }
  50%      { transform: scale(1.08); opacity: 1; }
}

/* Chapter-rail eyebrow */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
  color: rgba(240, 237, 255, 0.65);
}
.hero-eyebrow .rule {
  display: inline-block;
  width: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167,139,250,0.5));
}
.hero-eyebrow .rule:last-child {
  background: linear-gradient(90deg, rgba(167,139,250,0.5), transparent);
}
.hero-eyebrow .label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(240, 237, 255, 0.72);
  text-shadow: 0 1px 8px rgba(8,6,26,0.4);
}

h1, h2, h3 { font-family: 'Inter', system-ui, sans-serif; }

.hero h1 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(42px, 4.8vw, 60px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.06;
  margin: 0 0 24px;
  text-wrap: balance;
  color: #F7F4FF;
  text-shadow:
    0 1px 2px rgba(8, 6, 26, 0.55),
    0 8px 40px rgba(8, 6, 26, 0.45);
}
.hero h1 .line1 {
  display: block;
  font-weight: 600;
}
.hero h1 .line2 {
  display: block;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.022em;
  line-height: 1.18;
  padding-bottom: 0.12em;
  background: linear-gradient(180deg, #F3EAFF 0%, #C4B5FD 45%, #A78BFA 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 22px rgba(167, 139, 250, 0.4));
  text-shadow: none;
  margin-top: 2px;
}

/* Subtitle — evocative, short lines, elegant */
.hero-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  color: rgba(240, 237, 255, 0.78);
  max-width: 540px;
  margin: 0 auto 36px;
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(8, 6, 26, 0.5);
}

/* CTA row — primary button with halo, ghost with arrow */
.hero-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

/* Hero meta row — quietly credentialed line under the CTAs */
.hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 auto 40px;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-meta__item {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240, 237, 255, 0.62);
}
.hero-meta__sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(167,139,250,0.5);
}
.btn.btn-halo {
  position: relative;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 8px 32px rgba(124, 58, 237, 0.45),
    0 2px 8px rgba(8, 6, 26, 0.5);
}
.btn.btn-halo::after {
  content: '';
  position: absolute; inset: -8px;
  border-radius: inherit;
  background: radial-gradient(ellipse at center, rgba(167,139,250,0.35), transparent 70%);
  filter: blur(10px);
  z-index: -1;
  opacity: 0.8;
  pointer-events: none;
  animation: haloPulse 4s ease-in-out infinite;
}
@keyframes haloPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.98); }
  50%      { opacity: 0.9;  transform: scale(1.04); }
}

/* Trust rail — three small glass chips */
.hero-trust {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-trust .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(240, 237, 255, 0.72);
  background: rgba(15, 12, 41, 0.45);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 2px 12px rgba(8, 6, 26, 0.35);
}
.hero-trust .chip .g {
  color: var(--ds-violet-soft);
  font-size: 13px;
  line-height: 1;
  opacity: 0.85;
}

/* Legacy styles preserved for other pages that still use .badge/.hero-meta */
.hero .badge { display: none; }
.hero-meta { display: none; }

/* Radial spotlight behind the hero text — anchors copy without darkening
   the whole image. */
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1200px, 115%);
  height: 780px;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(
      ellipse 55% 60% at 50% 42%,
      rgba(8, 6, 26, 0.72) 0%,
      rgba(8, 6, 26, 0.50) 35%,
      rgba(8, 6, 26, 0.20) 65%,
      rgba(8, 6, 26, 0)    100%
    );
}

.hero-visual { margin-top: 80px; display: flex; justify-content: center; position: relative; }

/* Garden hero — living */
.hv-garden { width: 100%; display: flex; justify-content: center; }
.garden-frame {
  position: relative; width: 100%; max-width: 1100px;
  border-radius: var(--ds-radius-xl);
  overflow: hidden;
  border: 1px solid var(--ds-border-hover);
  box-shadow: var(--ds-shadow-xl), 0 0 160px rgba(124,58,237,0.45), 0 0 80px rgba(96,165,250,0.2);
  aspect-ratio: 16/9;
  perspective: 1200px;
}
.garden-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

/* Connected video mosaic — one living composition */
.video-mosaic {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 38% 1fr 26%;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "left center tr"
    "left center br";
  gap: 0;
  background: #030110;
}
.vm-center {
  grid-area: center;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.08) contrast(1.02);
  transform: scale(1.02);
}
.vm-tile {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 600ms, transform 800ms var(--ds-ease-out);
}
.vm-left { grid-area: left; filter: saturate(0.85) brightness(0.85) hue-rotate(-8deg); }
.vm-tr   { grid-area: tr;   filter: saturate(1.05) brightness(0.92); }
.vm-br   { grid-area: br;   filter: saturate(1.15) brightness(0.9)  hue-rotate(6deg); }

/* Luminous seams — the "connection" */
.vm-seam {
  position: absolute; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg,
    rgba(167,139,250,0.0) 0%,
    rgba(167,139,250,0.55) 20%,
    rgba(96,165,250,0.6) 50%,
    rgba(167,139,250,0.55) 80%,
    rgba(167,139,250,0.0) 100%);
  box-shadow: 0 0 12px rgba(167,139,250,0.55), 0 0 32px rgba(96,165,250,0.35);
  mix-blend-mode: screen;
  opacity: 0.8;
}
.vm-seam-v {
  /* Two vertical seams: at 38% and at 74% (100 - 26) of width */
  top: 0; bottom: 0; left: 38%;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(167,139,250,0.0) 0%,
    rgba(167,139,250,0.5) 15%,
    rgba(96,165,250,0.7) 50%,
    rgba(167,139,250,0.5) 85%,
    rgba(167,139,250,0.0) 100%);
  box-shadow: 0 0 10px rgba(167,139,250,0.5), 0 0 28px rgba(96,165,250,0.3);
}
.vm-seam-v::after {
  content: '';
}
/* Horizontal seam splitting the right column at 50% */
.vm-seam-h {
  top: 50%; left: 74%; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(167,139,250,0.0) 0%,
    rgba(167,139,250,0.45) 25%,
    rgba(96,165,250,0.65) 50%,
    rgba(167,139,250,0.45) 75%,
    rgba(167,139,250,0.0) 100%);
  box-shadow: 0 0 10px rgba(167,139,250,0.5), 0 0 24px rgba(96,165,250,0.3);
}

/* Extra vertical seam (74%) — separate element avoids pseudo trickery */
.video-mosaic::before {
  content: ''; position: absolute; z-index: 2; pointer-events: none;
  top: 0; bottom: 0; left: 74%;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(167,139,250,0.0) 0%,
    rgba(167,139,250,0.5) 15%,
    rgba(96,165,250,0.7) 50%,
    rgba(167,139,250,0.5) 85%,
    rgba(167,139,250,0.0) 100%);
  box-shadow: 0 0 10px rgba(167,139,250,0.5), 0 0 28px rgba(96,165,250,0.3);
  mix-blend-mode: screen;
}

/* Pulse shimmer along seams */
.vm-seam-v, .video-mosaic::before { animation: seamShimmer 6s ease-in-out infinite; }
.vm-seam-h { animation: seamShimmer 6s ease-in-out infinite 1.5s; }
@keyframes seamShimmer {
  0%,100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}

/* Subtle cross-blend gradients over edges so tiles feel continuous */
.video-mosaic::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3,1,16,0.35) 0%, transparent 8%, transparent 92%, rgba(3,1,16,0.35) 100%),
    radial-gradient(ellipse 80% 50% at 56% 50%, transparent 40%, rgba(3,1,16,0.4) 100%);
  mix-blend-mode: multiply;
}

@media (max-width: 900px) {
  .video-mosaic {
    grid-template-columns: 1fr 1.3fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
      "left center"
      "tr br";
  }
  .vm-seam-v { left: 43.5%; }
  .vm-seam-h { top: 50%; left: 43.5%; right: 0; }
  .video-mosaic::before { left: 50%; top: 50%; bottom: 0; height: 1px; width: auto; right: 0; background: linear-gradient(90deg, rgba(167,139,250,0.5), rgba(96,165,250,0.7), rgba(167,139,250,0.5)); }
}
/* Phone triptych (real screenshots) */
.phone-triptych {
  display: flex; gap: 24px; justify-content: center; align-items: center;
  perspective: 1800px;
}
.phone-real {
  width: 240px;
  border-radius: 36px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--ds-border-hover);
  box-shadow: var(--ds-shadow-phone), 0 0 80px rgba(124,58,237,0.3);
  transition: transform 600ms var(--ds-ease-out);
}
.phone-real img { width: 100%; height: auto; display: block; }
.phone-real.left { transform: perspective(1800px) rotateY(18deg) translateZ(-40px) translateY(20px); }
.phone-real.right { transform: perspective(1800px) rotateY(-18deg) translateZ(-40px) translateY(20px); }
.phone-real.center { transform: perspective(1800px) rotateY(0) translateZ(20px) scale(1.05); z-index: 2; box-shadow: var(--ds-shadow-phone), 0 0 120px rgba(124,58,237,0.5); }
.phone-real:hover { transform: perspective(1800px) rotateY(0) translateZ(30px) scale(1.08); }

/* Screenshots gallery */
.screens-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.screen {
  margin: 0;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: 20px 20px 22px;
  transition: all 400ms var(--ds-ease-out);
  position: relative;
  overflow: hidden;
}
.screen::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124,58,237,0.14), transparent);
  opacity: 0; transition: opacity 400ms;
  pointer-events: none;
}
.screen:hover {
  border-color: var(--ds-border-hover);
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 60px rgba(124,58,237,0.25);
}
.screen:hover::before { opacity: 1; }
.screen img {
  width: 100%; height: auto; display: block;
  border-radius: 22px;
  margin-bottom: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.screen figcaption {
  font-size: 13px; color: var(--ds-fg-muted);
  text-align: center; letter-spacing: 0.01em;
  line-height: 1.5;
}
@media (max-width: 900px) {
  .screens-grid { grid-template-columns: 1fr 1fr; }
  .phone-triptych { flex-direction: column; gap: 16px; }
  .phone-real, .phone-real.left, .phone-real.right, .phone-real.center { transform: none; width: 200px; }
}

.garden-layer {
  position: absolute; inset: -4%;
  will-change: transform;
  transition: transform 1200ms cubic-bezier(0.2,0.7,0.2,1);
}
.garden-layer img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  animation: gardenBreathe 14s ease-in-out infinite;
}
@keyframes gardenBreathe {
  0%,100% { filter: saturate(1) brightness(1) hue-rotate(0deg); transform: scale(1.02); }
  50%     { filter: saturate(1.12) brightness(1.06) hue-rotate(-4deg); transform: scale(1.045); }
}
/* Volumetric light rays (god rays) */
.garden-rays {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(115deg, transparent 35%, rgba(253,224,71,0.10) 42%, transparent 48%),
    linear-gradient(120deg, transparent 50%, rgba(167,139,250,0.08) 56%, transparent 62%),
    linear-gradient(108deg, transparent 25%, rgba(255,255,255,0.06) 32%, transparent 38%);
  mix-blend-mode: screen;
  animation: rayShift 10s ease-in-out infinite;
}
@keyframes rayShift {
  0%,100% { opacity: 0.7; transform: translateX(0); }
  50%     { opacity: 1;   transform: translateX(-3%); }
}
/* Fog / atmosphere drifting across foreground */
.garden-fog {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 40% 30% at 20% 80%, rgba(167,139,250,0.22), transparent 70%),
    radial-gradient(ellipse 50% 30% at 75% 85%, rgba(96,165,250,0.18), transparent 70%);
  mix-blend-mode: screen;
  animation: fogDrift 18s ease-in-out infinite;
}
@keyframes fogDrift {
  0%,100% { transform: translate(0,0); opacity: 0.8; }
  50%     { transform: translate(4%, -2%); opacity: 1; }
}
/* Pulsing aura around the central obelisk */
.garden-aura {
  position: absolute; left: 42%; top: 18%; width: 22%; height: 55%;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 40%, rgba(253,224,71,0.30), rgba(167,139,250,0.18) 45%, transparent 70%);
  mix-blend-mode: screen;
  filter: blur(14px);
  animation: auraPulse 5s ease-in-out infinite;
}
@keyframes auraPulse {
  0%,100% { opacity: 0.55; transform: scale(0.95); }
  50%     { opacity: 1;    transform: scale(1.12); }
}
/* Fireflies — spawned by JS */
.garden-fireflies { position: absolute; inset: 0; pointer-events: none; }
.garden-fireflies .ff {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #FDE047;
  box-shadow: 0 0 8px #FDE047, 0 0 16px rgba(253,224,71,0.7);
  animation: fflyDrift 10s linear infinite, fflyPulse 2.2s ease-in-out infinite;
  opacity: 0;
}
@keyframes fflyDrift {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(30px,-20px); }
  50%  { transform: translate(60px,10px); }
  75%  { transform: translate(20px,30px); }
  100% { transform: translate(0,0); }
}
@keyframes fflyPulse {
  0%,100% { opacity: 0; }
  50%     { opacity: 1; }
}
/* Crystal twinkle points — positioned over the image by JS */
.garden-twinkles { position: absolute; inset: 0; pointer-events: none; }
.garden-twinkles .tw {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px #fff, 0 0 24px currentColor;
  animation: twPulse 2.8s ease-in-out infinite;
}
@keyframes twPulse {
  0%,100% { opacity: 0; transform: scale(0.4); }
  50%     { opacity: 1; transform: scale(1.2); }
}
/* Rain of drifting sparkles (dust motes) */
.garden-motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.garden-motes .mote {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: rgba(255,255,255,0.8);
  animation: moteFloat 14s linear infinite;
  opacity: 0;
}
@keyframes moteFloat {
  0%   { transform: translate(0, 20px) scale(1); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.7; }
  100% { transform: translate(-40px, -200px) scale(0.6); opacity: 0; }
}
.garden-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 75% 55% at 50% 40%, transparent 50%, rgba(8,6,26,0.55)),
    linear-gradient(180deg, transparent 60%, rgba(8,6,26,0.65));
  pointer-events: none;
}
.garden-sparkles { position: absolute; inset: 0; pointer-events: none; display:none; }
.garden-sparkles .sp {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px #fff, 0 0 12px rgba(167,139,250,0.8);
  animation: sparkleTwink 3s ease-in-out infinite;
}
@keyframes sparkleTwink {
  0%,100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.3); }
}
.garden-chips {
  position: absolute; inset: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 24px; pointer-events: none;
}
.garden-chips .v-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 100px;
  background: rgba(8,6,26,0.7); backdrop-filter: blur(12px);
  border: 1px solid var(--ds-border-hover);
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ds-fg);
}
.garden-chips .v-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ds-accent-green);
  box-shadow: 0 0 10px var(--ds-accent-green);
  animation: breath 3s ease-in-out infinite;
}
.garden-chips .coin-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px 8px 10px; border-radius: 100px;
  background: rgba(8,6,26,0.7); backdrop-filter: blur(12px);
  border: 1px solid rgba(251,191,36,0.45);
  font-size: 15px; font-weight: 700; color: var(--ds-accent-amber);
  font-variant-numeric: tabular-nums;
}
.garden-chips .coin-chip img { width: 20px; height: 20px; filter: drop-shadow(0 0 6px rgba(251,191,36,0.6)); }

/* Soul Core (SVG) */
.soul-core-wrap { width: 440px; height: 440px; position: relative; }
.soul-core-wrap svg { width: 100%; height: 100%; overflow: visible; }
.soul-core-wrap .ring {
  fill: none; stroke-width: 2; opacity: 0.85;
  transform-origin: center; transform-box: fill-box;
  filter: drop-shadow(0 0 8px currentColor);
}
.soul-core-wrap .core-center {
  animation: corePulse 4s ease-in-out infinite;
  transform-origin: center; transform-box: fill-box;
}
@keyframes corePulse {
  0%,100% { transform: scale(0.92); opacity: 0.85; }
  50% { transform: scale(1.08); opacity: 1; }
}
.soul-core-wrap .ring-glow {
  animation: ringGlow 6s ease-in-out infinite;
}
@keyframes ringGlow {
  0%,100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Floating Soul Coins */
.coin {
  position: absolute;
  width: 56px; height: 56px;
  filter: drop-shadow(0 6px 20px rgba(251,191,36,0.4));
  animation: coinDrift 8s ease-in-out infinite;
  opacity: 0.85;
}
.coin img { width: 100%; height: 100%; }
@keyframes coinDrift {
  0%,100% { transform: translate(0,0) rotate(-6deg); }
  50% { transform: translate(10px,-24px) rotate(6deg); }
}

/* Hero type-only */
.hero-type-ornament { display: flex; justify-content: center; gap: 18px; margin-top: 48px; }
.hero-type-ornament .chip {
  padding: 10px 20px; border-radius: var(--ds-radius-pill);
  background: rgba(124,58,237,0.10);
  border: 1px solid var(--ds-border);
  font-size: 13px; color: var(--ds-fg-muted); font-weight: 500;
  display: flex; align-items: center; gap: 10px;
  transition: all 300ms var(--ds-ease-out);
}
.hero-type-ornament .chip:hover { border-color: var(--ds-border-hover); color: var(--ds-fg); transform: translateY(-2px); }
.hero-type-ornament .chip .glyph { width: 18px; height: 18px; opacity: 0.9; }

/* Phone frame */
.phone-frame {
  width: 320px; height: 660px;
  border-radius: 46px;
  background: #0a0820;
  border: 1px solid var(--ds-border-hover);
  box-shadow: var(--ds-shadow-phone), 0 0 140px rgba(124,58,237,0.30);
  padding: 8px;
  position: relative;
  transform: perspective(1800px) rotateY(-10deg) rotateX(4deg);
  transition: transform 600ms var(--ds-ease-out);
}
.phone-frame:hover { transform: perspective(1800px) rotateY(-4deg) rotateX(2deg); }
.phone-frame .notch {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 28px; border-radius: 20px;
  background: #000;
  z-index: 3;
}
.phone-screen {
  width: 100%; height: 100%; border-radius: 38px;
  background: linear-gradient(180deg, #0b0820, #050311);
  overflow: hidden; position: relative;
}

/* Temple placeholder scene — isometric-style with CSS */
.temple-scene {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 30%, rgba(124,58,237,0.45), transparent),
    radial-gradient(ellipse 80% 50% at 50% 80%, rgba(96,165,250,0.35), transparent),
    linear-gradient(180deg, #1a1340 0%, #0b0820 60%, #030110 100%);
}
.temple-scene .ground {
  position: absolute; bottom: 0; left: 0; right: 0; height: 45%;
  background: linear-gradient(180deg, transparent, rgba(167,139,250,0.10));
  border-top: 1px solid rgba(167,139,250,0.2);
}
.temple-scene .star {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #fff; opacity: 0.8;
  animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle { 0%,100%{opacity:0.3} 50%{opacity:1} }

.temple-structure {
  position: absolute; bottom: 18%; left: 50%; transform: translateX(-50%);
  width: 180px; height: 200px;
}
.temple-structure .pillar {
  position: absolute; bottom: 0; width: 10px; height: 80px;
  background: linear-gradient(180deg, #A78BFA, #7C3AED);
  border-radius: 3px;
  box-shadow: 0 0 14px rgba(167,139,250,0.6);
}
.temple-structure .pillar.p1 { left: 20px; }
.temple-structure .pillar.p2 { left: 60px; height: 95px; }
.temple-structure .pillar.p3 { left: 100px; height: 95px; }
.temple-structure .pillar.p4 { right: 20px; }
.temple-structure .roof {
  position: absolute; bottom: 80px; left: 10px; right: 10px; height: 24px;
  background: linear-gradient(180deg, #60A5FA, #7C3AED);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  box-shadow: 0 0 24px rgba(96,165,250,0.6);
}
.temple-structure .floating-orb {
  position: absolute; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle, #FDE047, #F59E0B);
  box-shadow: 0 0 18px #FDE047, 0 0 40px rgba(253,224,71,0.5);
  top: -10px; left: 50%; transform: translateX(-50%);
  animation: orbBob 4s ease-in-out infinite;
}
@keyframes orbBob { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,-12px)} }

.temple-hud {
  position: absolute; top: 48px; left: 16px; right: 16px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 600; color: var(--ds-fg);
  letter-spacing: 0.04em;
}
.temple-hud .coins-chip {
  background: rgba(0,0,0,0.4); border: 1px solid rgba(251,191,36,0.3);
  padding: 6px 12px; border-radius: 100px; display: flex; align-items: center; gap: 6px;
  color: var(--ds-accent-amber);
}
.temple-hud .coins-chip::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle, #FDE047, #F59E0B);
  box-shadow: 0 0 6px #FDE047;
}
.temple-hud .streak-chip {
  background: rgba(0,0,0,0.4); border: 1px solid var(--ds-border);
  padding: 6px 12px; border-radius: 100px;
  color: var(--ds-fg-muted);
}
.temple-bottombar {
  position: absolute; bottom: 14px; left: 14px; right: 14px;
  height: 52px; border-radius: 18px;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(10px);
  border: 1px solid var(--ds-border);
  display: flex; align-items: center; justify-content: space-around;
  color: var(--ds-fg-muted); font-size: 10px; font-weight: 600;
}
.temple-bottombar .tab { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.temple-bottombar .tab.active { color: var(--ds-violet-soft); }
.temple-bottombar .tab .icon { width: 18px; height: 18px; background: currentColor; border-radius: 4px; opacity: 0.6; -webkit-mask-size: contain; mask-size: contain; }

/* ─── Living Temple feature section ─── */
.temple-showcase {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: center;
}
.temple-showcase h2 { font-size: clamp(34px, 3.6vw, 46px); font-weight: 700; letter-spacing: -0.028em; margin: 0 0 20px; line-height: 1.1; text-wrap: balance; }
.temple-showcase p { font-size: 17px; line-height: 1.65; color: var(--ds-fg-muted); margin: 0 0 28px; max-width: 520px; text-wrap: pretty; }
.temple-showcase .bullets { display: flex; flex-direction: column; gap: 20px; }
.community-showcase .bullets { gap: 22px; }
.community-showcase > .reveal:first-child > p { margin-bottom: 24px; }
.temple-showcase .bullet { display: flex; gap: 16px; align-items: flex-start; }
.temple-showcase .bullet .chip {
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 18px;
}
.temple-showcase .bullet h4 { margin: 0 0 3px; font-size: 15px; font-weight: 700; color: var(--ds-fg); letter-spacing: -0.005em; }
.temple-showcase .bullet p { margin: 0; font-size: 14px; color: var(--ds-fg-muted); line-height: 1.6; max-width: none; }

/* ─── Community section visual ─── */
.community-showcase { align-items: center; grid-template-columns: 1.05fr 1fr; gap: 48px; }
.community-showcase > .reveal:first-child { max-width: 580px; }
.community-showcase > .reveal:last-child { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.community-showcase h2 { margin-bottom: 16px; }
.community-showcase > .reveal:first-child > p { margin-bottom: 28px; }
/* Quiet chip — single muted violet for all three bullets, reduces rainbow noise */
.community-showcase .chip--quiet {
  background: rgba(167,139,250,0.10);
  color: rgba(199,184,255,0.92);
  border: 1px solid rgba(167,139,250,0.18);
}
.community-showcase .bullet h4 { font-size: 16px; margin-bottom: 4px; }
.community-showcase .bullet p { font-size: 14.5px; color: rgba(240,237,255,0.62); line-height: 1.55; }
.community-showcase .bullets { gap: 18px; }

/* Dotted globe — abstract presence visual, no metrics */
.community-globe-wrap {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.community-globe {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
}
.community-globe__glow {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(167,139,250,0.12) 0%, rgba(124,58,237,0.05) 40%, transparent 70%);
  filter: blur(36px);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 900px) {
  .community-globe-wrap { max-width: 360px; }
}

/* Globe caption — frames the gold sparks as community presence.
   Desktop: editorial layout with a centered chapter-rail eyebrow.
   Mobile: tighter, no eyebrow, centered text only. */
.globe-caption {
  margin: -28px auto 0;
  max-width: 420px;
  text-align: center;
  position: relative;
}
.globe-caption__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(240,237,255,0.55);
  margin-bottom: 14px;
}
.globe-caption__rule {
  display: inline-block;
  width: 36px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167,139,250,0.55));
}
.globe-caption__rule:last-child {
  background: linear-gradient(90deg, rgba(167,139,250,0.55), transparent);
}
.globe-caption__text {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(240,237,255,0.72);
  margin: 0;
  text-wrap: pretty;
}
.globe-caption__gold {
  color: #FDE047;
  font-weight: 600;
  text-shadow: 0 0 14px rgba(253,224,71,0.5);
}
@media (max-width: 900px) {
  .globe-caption {
    margin-top: 18px;
    max-width: 360px;
  }
  .globe-caption__text { font-size: 14px; line-height: 1.55; }
}

.community-visual {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border-radius: 44px;
  padding: 10px;
  background: linear-gradient(145deg, #2a2450 0%, #1a1533 45%, #0f0c28 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 30px 80px rgba(8,6,26,0.55),
    0 0 120px rgba(124,58,237,0.35);
}
.community-visual__shot {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 34px;
  display: block;
  position: relative;
  z-index: 2;
}
.community-visual__glow {
  position: absolute;
  inset: -40px;
  border-radius: 60px;
  background:
    radial-gradient(ellipse 60% 40% at 30% 20%, rgba(167,139,250,0.35), transparent 60%),
    radial-gradient(ellipse 60% 40% at 70% 80%, rgba(96,165,250,0.28), transparent 60%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 900px) {
  .community-visual { max-width: 320px; border-radius: 36px; padding: 8px; }
  .community-visual__shot { border-radius: 28px; }
}
.temple-showcase .bullet h4 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bullet__stat {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-violet-soft);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(167,139,250,0.1);
  border: 1px solid rgba(167,139,250,0.22);
}
/* Temple bullets: drop the stat pill — cleaner read, keeps Community intact */
#temple .bullet__stat { display: none; }
/* Single smooth pill, three beats, hairline dividers. Editorial + quiet. */
.temple-meta {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-top: 28px;
  padding: 10px 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
  border: 1px solid rgba(167,139,250,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 8px 30px rgba(8,6,26,0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.temple-meta__item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 18px;
  position: relative;
  white-space: nowrap;
}
.temple-meta__item + .temple-meta__item::before {
  content: '';
  position: absolute;
  left: 0; top: 22%; bottom: 22%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(167,139,250,0.28), transparent);
}
.temple-meta__item strong {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #F7F4FF;
  text-transform: none;
  line-height: 1;
  background: linear-gradient(180deg, #F3EAFF 0%, #C4B5FD 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.temple-meta__item span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(240,237,255,0.48);
}
/* Mobile: stack vertically inside the same pill so it fits the 390px
   frame without shrinking the type into illegibility. */
@media (max-width: 900px) {
  /* Hide the full vertical strip on mobile — only the compact pill
     under the video stays. Desktop keeps the full version. */
  .temple-meta:not(.temple-meta--compact) { display: none; }
  .temple-meta {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 4px 0;
    border-radius: 18px;
  }
  .temple-meta__item {
    justify-content: space-between;
    width: 100%;
    padding: 12px 20px;
  }
  .temple-meta__item + .temple-meta__item::before {
    left: 20px; right: 20px;
    top: 0; bottom: auto;
    width: auto; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167,139,250,0.22), transparent);
  }
  /* Compact variant — small horizontal pill echoing the full triptych,
     verbs on top, tiny caps qualifier beneath each, like desktop. */
  .temple-meta.temple-meta--compact {
    display: inline-flex;
    flex-direction: row;
    width: auto;
    margin: 18px auto 0;
    padding: 8px 6px;
    border-radius: 22px;
  }
  .temple-meta--compact .temple-meta__item {
    width: auto;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 12px;
    justify-content: center;
  }
  .temple-meta--compact .temple-meta__item strong { font-size: 13px; line-height: 1; }
  .temple-meta--compact .temple-meta__item span {
    font-size: 8px;
    letter-spacing: 0.14em;
    color: rgba(240,237,255,0.42);
    white-space: nowrap;
  }
  .temple-meta--compact .temple-meta__item + .temple-meta__item::before {
    left: 0; right: auto;
    top: 18%; bottom: 18%;
    width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, rgba(167,139,250,0.28), transparent);
  }
  /* The parent column is flex by default; center the pill under video */
  .temple-showcase > .reveal:last-child { display: flex; flex-direction: column; align-items: center; }
}

.temple-iso {
  width: 100%; aspect-ratio: 1/1; max-width: 520px; margin: 0 auto;
  position: relative; border-radius: var(--ds-radius-xl);
  background:
    radial-gradient(ellipse 70% 50% at 50% 40%, rgba(124,58,237,0.35), transparent),
    radial-gradient(ellipse 80% 60% at 50% 90%, rgba(96,165,250,0.25), transparent),
    linear-gradient(180deg, #14102f 0%, #0a0820 60%, #050311 100%);
  border: 1px solid var(--ds-border);
  overflow: hidden;
  box-shadow: var(--ds-shadow-xl), 0 0 100px rgba(124,58,237,0.25);
}
/* On mobile, the temple-showcase text block is already inside a dark
   surface, so wrapping the video in a second bordered box creates a
   visible "box within a box". Strip the chrome — let the video itself
   be the image. */
@media (max-width: 900px) {
  .temple-iso {
    background: transparent;
    border: none;
    box-shadow: 0 20px 60px rgba(8,6,26,0.5);
  }
}
.temple-iso svg { width: 100%; height: 100%; position: absolute; inset: 0; }
.temple-iso .iso-label {
  position: absolute; bottom: 18px; left: 18px;
  display: flex; gap: 10px; align-items: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ds-violet-soft);
  background: rgba(0,0,0,0.5); padding: 8px 14px; border-radius: 100px;
  border: 1px solid var(--ds-border-hover);
  backdrop-filter: blur(6px);
}
.temple-iso .iso-label .pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ds-accent-green);
  box-shadow: 0 0 8px var(--ds-accent-green);
  animation: breath 3s ease-in-out infinite;
}

/* ─── Steps section ─── */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; }
@media (max-width: 1100px) { .steps-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
.step-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: 36px 30px;
  position: relative;
  transition: all 400ms var(--ds-ease-out);
  text-align: left;
  overflow: hidden;
}
.step-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(124,58,237,0.14), transparent);
  opacity: 0; transition: opacity 400ms;
  pointer-events: none;
}
.step-card:hover {
  border-color: var(--ds-border-hover);
  background: var(--ds-surface-hover);
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 40px rgba(124,58,237,0.2);
}
.step-card:hover::before { opacity: 1; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--ds-violet), var(--ds-blue-deep));
  color: #fff; font-size: 17px; font-weight: 700; margin-bottom: 22px;
  box-shadow: var(--ds-shadow-violet-sm);
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.005em;
}
.step-card h3 { font-size: 20px; font-weight: 700; margin: 0 0 10px; letter-spacing: -0.015em; }
.step-card p { font-size: 14.5px; line-height: 1.65; color: var(--ds-fg-muted); margin: 0; text-wrap: pretty; }

/* ─── More than a garden (feature tile grid) ─── */
.more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.more-tile {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 320ms var(--ds-ease-out);
  position: relative;
  overflow: hidden;
}
.more-tile::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124,58,237,0.10), transparent);
  opacity: 0; transition: opacity 320ms;
  pointer-events: none;
}
.more-tile:hover {
  border-color: var(--ds-border-hover);
  transform: translateY(-3px);
  box-shadow: var(--ds-shadow-md);
}
.more-tile:hover::before { opacity: 1; }
.more-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.more-icon svg { width: 20px; height: 20px; }
.more-tile h4 {
  margin: 0; font-size: 16px; font-weight: 650;
  color: var(--ds-fg); letter-spacing: -0.01em;
}
.more-tile p {
  margin: 0; font-size: 14px; line-height: 1.6;
  color: var(--ds-fg-muted); text-wrap: pretty;
}
@media (max-width: 960px) {
  .more-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .more-grid { grid-template-columns: 1fr; }
}

/* ─── Coins section ─── */
.coins-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.coins-big {
  width: 100%; aspect-ratio: 1/1; max-width: 520px;
  position: relative;
}
.coins-big .coin-float {
  position: absolute;
  animation: coinDrift 9s ease-in-out infinite;
  filter: drop-shadow(0 10px 30px rgba(251,191,36,0.5));
}
.coins-big .coin-float img { width: 100%; height: 100%; }
.counter {
  font-size: clamp(64px, 8vw, 108px); font-weight: 800; letter-spacing: -0.04em;
  background: linear-gradient(135deg, #FDE047, #F59E0B);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1; margin: 0 0 12px;
  font-variant-numeric: tabular-nums;
}
.counter-label {
  font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ds-fg-subtle); font-weight: 600; margin-bottom: 28px;
  display: inline-flex; align-items: center; gap: 10px;
}
/* LIVE broadcast-style badge — sits beside the counter so the number
   reads unambiguously as a real-time value. */
.counter-row {
  display: flex; align-items: center; gap: 14px; margin-bottom: 4px;
  flex-wrap: wrap;
}
.live-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px 6px 9px;
  border-radius: 6px;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.35);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em;
  color: #6EE7B7;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 12px;
}
.live-badge__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 8px #34D399;
  animation: liveBadgePulse 1.4s ease-in-out infinite;
}
@keyframes liveBadgePulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(1.15); }
}
/* Brief golden flash when the counter value actually ticks up — makes
   the liveness visceral, not just decorative. */
.counter.tick {
  animation: counterTick 700ms ease-out;
}
@keyframes counterTick {
  0%   { text-shadow: 0 0 0 rgba(253,224,71,0); }
  30%  { text-shadow: 0 0 24px rgba(253,224,71,0.6); }
  100% { text-shadow: 0 0 0 rgba(253,224,71,0); }
}
.counter-label .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 8px #34D399;
  animation: breath 2.6s ease-in-out infinite;
}
.coins-copy h2 { font-size: clamp(34px, 3.6vw, 46px); font-weight: 700; letter-spacing: -0.028em; margin: 0 0 20px; line-height: 1.1; text-wrap: balance; }
/* Mobile-only Soul Coins pill above the coins animation */
.coins-badge-mobile { margin: 0 auto 18px; display: none; }
@media (max-width: 900px) {
  .coins-badge-mobile.only-mobile { display: inline-flex; }
  .coins-layout > .reveal:first-child { display: flex; flex-direction: column; align-items: center; }
  .coins-copy > .badge { display: none; }
}
.coins-copy p { font-size: 17px; line-height: 1.65; color: var(--ds-fg-muted); margin: 0 0 28px; }
/* Coin equation — visual statement of the core rule */
.coin-equation {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 22px 32px;
  margin: 8px 0 14px;
  border-radius: 22px;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(253,224,71,0.08), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
  border: 1px solid rgba(253,224,71,0.18);
  box-shadow:
    0 10px 40px rgba(8,6,26,0.4),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 60px rgba(251,191,36,0.08);
  position: relative;
}
.coin-equation__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 76px;
}
.coin-equation__num {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #F7F4FF;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 14px rgba(167,139,250,0.25);
}
.coin-equation__unit {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(240,237,255,0.55);
}
.coin-equation__op {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 36px;
  font-weight: 300;
  color: rgba(253,224,71,0.7);
  line-height: 1;
}
.coin-equation__coin {
  width: 56px; height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(251,191,36,0.55)) drop-shadow(0 0 24px rgba(253,224,71,0.4));
  animation: coinSpin 6s ease-in-out infinite;
}
@keyframes coinSpin {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(8deg); }
}
.coin-equation__caption {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ds-fg-muted);
  margin: 0 0 4px;
  max-width: 440px;
}
@media (max-width: 900px) {
  .coin-equation {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 20px 22px;
    width: 100%;
  }
  .coin-equation__num { font-size: 44px; }
  .coin-equation__op { font-size: 28px; }
  .coin-equation__coin { width: 46px; height: 46px; }
  .coin-equation__side { min-width: 64px; }
  .coin-equation__caption { font-size: 14px; text-align: center; }
}

/* ─── Merge & Evolve interactive ─── */
.merge-showcase {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: center;
}
.merge-copy h2 { font-size: clamp(34px, 3.6vw, 46px); font-weight: 700; letter-spacing: -0.028em; margin: 0 0 20px; line-height: 1.1; text-wrap: balance; }
.merge-copy > p { font-size: 17px; line-height: 1.65; color: var(--ds-fg-muted); margin: 0 0 28px; }

.merge-demo {
  position: relative;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  padding: 64px 40px;
  min-height: 500px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: var(--ds-shadow-xl), 0 0 60px rgba(124,58,237,0.2);
}
@media (max-width: 900px) {
  .merge-demo { padding: 28px 24px 48px; min-height: 0; aspect-ratio: 1 / 1; justify-content: center; }
}
.merge-demo::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(124,58,237,0.25), transparent 70%);
}
.merge-stage {
  position: relative; z-index: 2;
  width: 100%; max-width: 520px;
  display: block;
  margin-bottom: 40px; min-height: 320px;
}
@media (max-width: 900px) {
  .merge-stage { max-width: 420px; margin-bottom: 20px; min-height: 180px; }
}
.merge-item {
  width: 170px; height: 170px;
  border-radius: 28px;
  background: radial-gradient(circle at 50% 40%, rgba(167,139,250,0.22), rgba(96,165,250,0.10) 70%, transparent);
  display: flex; align-items: center; justify-content: center;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 500ms var(--ds-ease-out), transform 600ms var(--ds-ease-out), filter 500ms;
  overflow: visible;
}
.merge-item.a { transform: translate(-50%, -50%) translateX(-115px); }
.merge-item.b { transform: translate(-50%, -50%) translateX( 115px); }
.merge-item .glyph {
  width: 200px; height: 200px; object-fit: contain;
  object-position: center;
  margin-top: -36px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.5)) drop-shadow(0 0 24px rgba(167,139,250,0.5));
  animation: orbFloat 4s ease-in-out infinite;
}
@media (max-width: 900px) {
  .merge-item { width: 110px; height: 110px; border-radius: 22px; }
  .merge-item.a { transform: translate(-50%, -50%) translateX(-80px); }
  .merge-item.b { transform: translate(-50%, -50%) translateX( 80px); }
  .merge-item .glyph { width: 140px; height: 140px; margin-top: -26px;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5)) drop-shadow(0 0 20px rgba(167,139,250,0.5)); }
}
.merge-item.b .glyph { animation-delay: -2s; }
@keyframes orbFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-6px) rotate(1deg); }
}
.merge-plus {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px; font-weight: 300; color: var(--ds-fg-subtle);
  transition: opacity 300ms, transform 300ms;
  text-shadow: 0 0 20px rgba(167,139,250,0.6);
}
.merge-result {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 190px; height: 190px;
  border-radius: 32px;
  background: radial-gradient(circle at 50% 40%, rgba(253,224,71,0.35), rgba(167,139,250,0.30) 50%, transparent 80%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 100px rgba(167,139,250,0.7), 0 0 200px rgba(253,224,71,0.25);
  opacity: 0; transition: opacity 400ms, transform 700ms var(--ds-ease-out);
  z-index: 3;
}
.merge-result .glyph {
  width: 170px; height: 170px; object-fit: contain;
  object-position: center;
  margin-top: -30px;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.6)) drop-shadow(0 0 24px rgba(255,255,255,0.6));
  animation: orbFloat 4s ease-in-out infinite;
}

/* Mystic rune rings — spin outward during merge */
.merge-rune {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  width: 280px; height: 280px;
  border-radius: 50%;
  border: 1.5px solid rgba(167,139,250,0);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.merge-rune.r2 { width: 360px; height: 360px; }
.merge-demo.merging .merge-rune {
  animation: runeSpin 1300ms ease-out forwards;
  border-color: rgba(167,139,250,0.7);
  box-shadow: 0 0 40px rgba(167,139,250,0.5), inset 0 0 40px rgba(253,224,71,0.3);
}
.merge-demo.merging .merge-rune.r2 {
  animation: runeSpin2 1500ms ease-out forwards;
  border-color: rgba(253,224,71,0.6);
}
@keyframes runeSpin {
  0%   { transform: translate(-50%,-50%) scale(0.6) rotate(0deg);   opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.6) rotate(360deg); opacity: 0; }
}
@keyframes runeSpin2 {
  0%   { transform: translate(-50%,-50%) scale(0.8) rotate(0deg);    opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(2.2) rotate(-480deg); opacity: 0; }
}

/* Sparkle burst radiating out from center during merge */
.merge-spark {
  position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(253,224,71,0.9) 40%, transparent 70%);
  pointer-events: none; opacity: 0; z-index: 4;
  box-shadow: 0 0 8px rgba(255,255,255,0.9);
}
.merge-demo.merging .merge-spark { animation: sparkFly 1000ms ease-out forwards; }
@keyframes sparkFly {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px))) scale(1.3); }
}

/* Center flash — pulse of white at the moment of merge */
.merge-flash {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(253,224,71,0.8) 30%, transparent 70%);
  opacity: 0; pointer-events: none; z-index: 5;
}
.merge-demo.merging .merge-flash { animation: flashPulse 600ms ease-out forwards; }
@keyframes flashPulse {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0); }
  40%  { opacity: 1; transform: translate(-50%,-50%) scale(3); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(4); }
}

/* Merging state — items pull toward center, fade into light, result pops */
.merge-demo.merging .merge-item.a,
.merge-demo.merging .merge-item.b {
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  filter: blur(4px) brightness(2.5);
}
.merge-demo.merging .merge-plus {
  transform: translate(-50%, -50%) scale(2.5);
  opacity: 0;
}
.merge-demo.merging .merge-result {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  animation: resultPulse 800ms 350ms ease-out;
}
@keyframes resultPulse {
  0%   { transform: translate(-50%,-50%) scale(0.5) rotate(-10deg); }
  60%  { transform: translate(-50%,-50%) scale(1.18) rotate(3deg); }
  100% { transform: translate(-50%,-50%) scale(1) rotate(0deg); }
}

.merge-demo.showing-result .merge-item.a,
.merge-demo.showing-result .merge-item.b,
.merge-demo.showing-result .merge-plus { opacity: 0; }
.merge-demo.showing-result .merge-result { transform: translate(-50%,-50%) scale(1); opacity: 1; }

/* Max-tier state — single centered orb, merge controls locked */
.merge-demo.maxed .merge-item.a,
.merge-demo.maxed .merge-item.b,
.merge-demo.maxed .merge-plus { opacity: 0; }
.merge-demo.maxed .merge-result {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.merge-demo.maxed .merge-btn {
  background: rgba(167,139,250,0.18);
  color: var(--ds-violet-soft);
  cursor: default;
  box-shadow: none;
}
.merge-demo.maxed .merge-btn:hover { background: rgba(167,139,250,0.18); transform: none; }

.merge-caption {
  position: relative; z-index: 2;
  font-size: 14px; color: var(--ds-fg-muted); text-align: center;
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}
.merge-caption .highlight { color: var(--ds-violet-soft); font-weight: 600; }
.merge-btn {
  position: relative; z-index: 2;
  padding: 10px 22px; border-radius: 100px;
  background: var(--ds-violet); color: #fff;
  border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  box-shadow: var(--ds-shadow-violet-sm);
  transition: all 200ms;
}
.merge-btn:hover { background: var(--ds-violet-hover); transform: translateY(-1px); }

/* ─── Library section ─── */
.library-layout {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: center;
}
.library-copy h2 { font-size: clamp(34px, 3.6vw, 46px); font-weight: 700; letter-spacing: -0.028em; margin: 0 0 20px; line-height: 1.1; text-wrap: balance; }
.library-copy > p { font-size: 17px; line-height: 1.65; color: var(--ds-fg-muted); margin: 0 0 28px; }
.library-copy .features {
  display: flex; flex-direction: column; gap: 14px;
}
.library-copy .feat {
  display: flex; gap: 14px; align-items: center;
  padding: 14px 20px;
  background: rgba(12,10,36,0.4);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  transition: all 300ms;
}
.library-copy .feat:hover { border-color: var(--ds-border-hover); background: rgba(18,14,50,0.5); }
.library-copy .feat .chip {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ds-accent-violet-tint); color: var(--ds-accent-violet);
  flex-shrink: 0;
}
.library-copy .feat span { font-size: 14px; font-weight: 500; color: var(--ds-fg); }

.player-mock {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  padding: 32px;
  position: relative;
  box-shadow: var(--ds-shadow-xl), 0 0 80px rgba(96,165,250,0.2);
  overflow: hidden;
}
.player-mock::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(96,165,250,0.20), transparent);
  pointer-events: none;
}
.player-now {
  display: flex; gap: 16px; align-items: center; margin-bottom: 24px;
  position: relative; z-index: 2;
}
.player-art {
  width: 68px; height: 68px; border-radius: 14px;
  background: linear-gradient(135deg, #7C3AED, #60A5FA, #34D399);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 30px rgba(124,58,237,0.5);
  flex-shrink: 0;
}
.player-art-glyph { width: 34px; height: 34px; filter: brightness(0) invert(1); opacity: 0.9; }
.player-meta .eyebrow { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ds-violet-soft); font-weight: 600; margin-bottom: 6px; }
.player-meta h4 { font-size: 17px; font-weight: 700; margin: 0 0 2px; color: var(--ds-fg); }
.player-meta .sub { font-size: 13px; color: var(--ds-fg-muted); }

.waveform {
  display: flex; align-items: center; gap: 3px; height: 48px;
  margin-bottom: 20px; position: relative; z-index: 2;
}
.waveform .bar {
  flex: 1; background: linear-gradient(180deg, var(--ds-violet-soft), var(--ds-blue));
  border-radius: 2px;
  animation: waveBar 1.2s ease-in-out infinite;
  opacity: 0.8;
  min-height: 4px;
}
.waveform .bar.passed { opacity: 0.3; }
@keyframes waveBar { 0%,100%{transform:scaleY(0.4)} 50%{transform:scaleY(1)} }

.player-controls {
  display: flex; justify-content: space-between; align-items: center;
  position: relative; z-index: 2;
}
.player-time { font-size: 12px; color: var(--ds-fg-subtle); font-variant-numeric: tabular-nums; }
.player-actions { display: flex; gap: 16px; align-items: center; }
.player-actions button {
  background: none; border: none; color: var(--ds-fg-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; transition: color 200ms, transform 200ms;
}
.player-actions button:hover { color: var(--ds-fg); transform: scale(1.1); }
.player-actions .play {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ds-violet); color: #fff;
  box-shadow: var(--ds-shadow-violet-sm);
}
.player-actions .play:hover { background: var(--ds-violet-hover); transform: scale(1.05); }

.playlist {
  margin-top: 24px; display: flex; flex-direction: column; gap: 2px;
  position: relative; z-index: 2;
  border-top: 1px solid var(--ds-border); padding-top: 16px;
}
.playlist .row {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 14px; align-items: center;
  padding: 10px 8px; border-radius: 8px; transition: background 200ms;
  cursor: pointer;
}
.playlist .row:hover { background: rgba(124,58,237,0.08); }
.playlist .row.active { background: rgba(124,58,237,0.12); }
.playlist .row .num { font-size: 12px; color: var(--ds-fg-subtle); font-variant-numeric: tabular-nums; }
.playlist .row .title { font-size: 14px; color: var(--ds-fg); font-weight: 500; }
.playlist .row .dur { font-size: 12px; color: var(--ds-fg-subtle); font-variant-numeric: tabular-nums; }
.playlist .row.active .title { color: var(--ds-violet-soft); }

/* ─── Privacy band ─── */
.privacy-band {
  max-width: 900px; margin: 0 auto;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  padding: 64px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--ds-shadow-xl);
}
.privacy-band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(52,211,153,0.15), transparent);
}
.privacy-band .lock {
  width: 64px; height: 64px; border-radius: 18px;
  background: var(--ds-accent-green-tint);
  color: var(--ds-accent-green);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  position: relative; z-index: 2;
  animation: lockGlow 4s ease-in-out infinite;
}
@keyframes lockGlow {
  0%,100% { box-shadow: 0 0 20px rgba(52,211,153,0.3); }
  50% { box-shadow: 0 0 60px rgba(52,211,153,0.6); }
}
.privacy-band h2 { position: relative; z-index: 2; font-size: clamp(32px, 3.4vw, 42px); font-weight: 700; letter-spacing: -0.028em; margin: 0 0 16px; line-height: 1.15; text-wrap: balance; }
.privacy-band p { position: relative; z-index: 2; font-size: 17px; line-height: 1.65; color: var(--ds-fg-muted); max-width: 560px; margin: 0 auto; }
.privacy-list { position: relative; z-index: 2; display: flex; gap: 32px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.privacy-list li { list-style: none; display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ds-fg); font-weight: 500; }
.privacy-list li .check { color: var(--ds-accent-green); }

/* ─── Proof ─── */
.proof-strip { display: flex; gap: 56px; flex-wrap: wrap; justify-content: center; padding: 40px 0;
  border-top: 1px solid var(--ds-border); border-bottom: 1px solid var(--ds-border);
  max-width: 1100px; margin: 0 auto;
}
.proof-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.proof-value { font-size: 34px; font-weight: 700; letter-spacing: -0.025em;
  background: linear-gradient(135deg, var(--ds-violet-soft), var(--ds-blue));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.proof-label { font-size: 12px; color: var(--ds-fg-muted); font-weight: 500; text-align: center; letter-spacing: 0.1em; text-transform: uppercase; }

/* Reviews */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 0; }
.review {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: 28px 26px;
  transition: all 300ms;
}
.review:hover { border-color: var(--ds-border-hover); background: var(--ds-surface-hover); transform: translateY(-4px); }
.review .stars { color: var(--ds-accent-amber); font-size: 13px; letter-spacing: 3px; margin-bottom: 14px; }
.review .quote { font-size: 14.5px; line-height: 1.65; color: var(--ds-fg); margin: 0 0 18px; font-weight: 500; text-wrap: pretty; }
.review .author { font-size: 13px; color: var(--ds-fg-muted); }
.review .author b { color: var(--ds-fg); font-weight: 600; }

/* ─── FAQ ─── */
.faq { max-width: 780px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--ds-border);
  padding: 24px 0;
  cursor: pointer;
}
.faq-item summary {
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  font-size: 17px; font-weight: 600; color: var(--ds-fg); letter-spacing: -0.005em;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(124,58,237,0.14); border: 1px solid var(--ds-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--ds-violet-soft);
  flex-shrink: 0;
  transition: all 300ms;
}
.faq-item[open] summary .plus { transform: rotate(45deg); background: rgba(124,58,237,0.25); border-color: var(--ds-border-hover); }
.faq-item .answer {
  margin-top: 14px;
  font-size: 15px; line-height: 1.7; color: var(--ds-fg-muted);
  max-width: 640px;
}

/* ─── CTA final ─── */
.cta-card {
  max-width: 1100px; margin: 0 auto;
  background: linear-gradient(135deg, rgba(10,8,28,0.92), rgba(6,4,18,0.96));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--ds-radius-xl);
  padding: 72px 48px;
  text-align: center;
  position: relative; overflow: hidden;
  box-shadow: var(--ds-shadow-xl), 0 0 120px rgba(124,58,237,0.18);
}
.cta-card::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 35% at 28% 22%, rgba(124,58,237,0.14), transparent 70%),
    radial-gradient(ellipse 50% 35% at 72% 78%, rgba(96,165,250,0.10), transparent 70%);
  pointer-events: none;
}
.cta-card h2 { position: relative; z-index: 2; font-size: clamp(36px, 4.2vw, 52px); font-weight: 700; letter-spacing: -0.03em; margin: 0 0 18px; line-height: 1.08; text-wrap: balance; }
.cta-card p { position: relative; z-index: 2; font-size: 17px; line-height: 1.65; color: var(--ds-fg-muted); margin: 0 auto 32px; max-width: 520px; text-wrap: pretty; }
.cta-card .hero-ctas { position: relative; z-index: 2; }

/* Split layout: text left, hero logo right. Keeps existing .cta-card bg. */
.cta-card--split {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  text-align: left;
  padding: 64px 56px;
}
.cta-card--split .cta-card__text {
  position: relative; z-index: 2;
  flex: 1; max-width: 520px;
}
.cta-card--split .cta-card__text p { margin-left: 0; }
.cta-card--split .hero-ctas { justify-content: flex-start; }
.cta-card__hero-logo {
  position: relative; z-index: 2;
  flex-shrink: 0;
}
.cta-card__hero-logo-img {
  width: 240px; height: 240px;
  object-fit: cover;
  border-radius: 48px;
  box-shadow:
    0 18px 60px rgba(124,58,237,0.55),
    0 0 140px rgba(167,139,250,0.35),
    0 0 220px rgba(96,165,250,0.22);
}
@media (max-width: 900px) {
  .cta-card--split {
    flex-direction: column;
    text-align: center;
    padding: 44px 24px;
    gap: 28px;
    max-width: 420px;
  }
  .cta-card--split .cta-card__text {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: none;
  }
  .cta-card--split .cta-card__text h2 { margin: 0; font-size: 32px; }
  .cta-card--split .cta-card__text p { margin: 0 auto; }
  .cta-card--split .hero-ctas { justify-content: center; margin-top: 6px; }
  .cta-card__hero-logo-img { width: 200px; height: 200px; border-radius: 36px; }
}

/* ─── Footer ─── */
.footer {
  padding: 40px 24px 40px;
  position: relative; z-index: 2;
}
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  gap: 24px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-fg);
  text-decoration: none;
}
.footer-brand img {
  width: 36px; height: 36px;
  border-radius: 10px;
  object-fit: cover;
}
.footer-links {
  display: flex;
  gap: 28px;
}
.footer-links a {
  font-size: 14px;
  color: var(--ds-fg-muted);
  text-decoration: none;
  transition: color 200ms;
}
.footer-links a:hover { color: var(--ds-fg); }
.footer-divider {
  height: 1px;
  background: var(--ds-border);
}
.footer-copy {
  padding-top: 20px;
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--ds-fg-subtle);
}
@media (max-width: 900px) {
  .footer { padding: 24px 24px 12px; }
  .footer-top {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 12px 0;
  }
  .footer-links { gap: 20px; justify-content: center; flex-wrap: wrap; }
  .footer-copy { padding-top: 14px; }
}

/* ─── Reveal animations ─── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ds-ease-out), transform 700ms var(--ds-ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Ambient video layers */
.merge-bg-video, .coins-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.35; pointer-events: none;
  mix-blend-mode: screen;
  filter: saturate(1.1);
}
.merge-bg-video { border-radius: var(--ds-radius-xl); }
.coins-big { position: relative; overflow: hidden; border-radius: var(--ds-radius-xl); }
.coins-bg-video { opacity: 0.45; }

/* ─── Phone carousel — coverflow ─── */
.phone-carousel {
  position: relative;
  margin: 0 auto;
  padding: 0;
  user-select: none;
  width: 100%;
}
.pc-viewport {
  overflow: visible;
  position: relative;
  height: 780px;
  padding: 20px 0 40px;
  perspective: 2800px;
  perspective-origin: 50% 50%;
}
.pc-track {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pc-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  margin: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 20px;
  transform-style: preserve-3d;
  transition:
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
  cursor: pointer;
}
.pc-slide.active {
  cursor: default;
  z-index: 10;
}
.pc-slide.near { z-index: 5; }
/* legacy fallbacks for old .active/.near styles kept benign */

/* phone frame built in pure CSS — 3D bezel with real depth cues + side thickness */
.pc-phone {
  width: 280px;
  height: 580px;
  border-radius: 44px;
  padding: 6px;
  /* Metallic rim gradient — catches light around the chassis edge */
  background:
    linear-gradient(135deg,
      #2a2450 0%,
      #1a1533 20%,
      #0f0c28 50%,
      #1a1533 80%,
      #2a2450 100%);
  box-shadow:
    /* polished chassis edge */
    inset 0 0 0 1px rgba(255,255,255,0.10),
    inset 0 0 0 2px rgba(0,0,0,0.6),
    inset 2px 0 6px rgba(255,255,255,0.08),
    inset -2px 0 6px rgba(0,0,0,0.4),
    /* cast shadow — kept vertical so it doesn't band with neighbors */
    0 20px 40px rgba(0,0,0,0.55);
  position: relative;
  transition: box-shadow 500ms ease;
  transform-style: preserve-3d;
}
.pc-phone img {
  transition: filter 700ms ease;
}
/* ::before — phone BACK / bottom face, pushed in Z so when the phone
   rotates you see the rim emerge as thickness. Slightly larger inset
   so it wraps around the front on all sides. */
.pc-phone::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 44px;
  background:
    linear-gradient(135deg,
      #2a2450 0%,
      #1a1533 30%,
      #0a0820 60%,
      #1a1533 90%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 0 2px 6px rgba(255,255,255,0.06),
    inset 0 -4px 8px rgba(0,0,0,0.6);
  transform: translateZ(-22px);
  z-index: 0;
}
/* ::after — top-face glass gloss that sits in front of the screen image */
.pc-phone::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 44px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.02) 8%,
    transparent 20%,
    transparent 80%,
    rgba(0,0,0,0.22) 100%);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,0.15),
    inset 0 -2px 2px rgba(0,0,0,0.55),
    inset 3px 0 4px rgba(255,255,255,0.06),
    inset -3px 0 4px rgba(0,0,0,0.3);
  pointer-events: none;
  z-index: 5;
  transform: translateZ(0.5px);
}

/* True 3D side walls — thin panels rotated 90° on Y-axis so they form
   the phone's metal band. Invisible when phone faces directly forward
   (θ=0); revealed as the phone rotates in the carousel arc. */
.pc-side {
  position: absolute;
  top: 22px; bottom: 22px;
  width: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg,
    #3a3268 0%,
    #211c42 18%,
    #0a0820 50%,
    #211c42 82%,
    #3a3268 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.18),
    inset 0 -1px 1px rgba(0,0,0,0.6),
    inset 2px 0 3px rgba(255,255,255,0.10),
    inset -2px 0 3px rgba(0,0,0,0.55);
  pointer-events: none;
  z-index: 2;
  backface-visibility: hidden;
}
.pc-side-l {
  left: -11px;
  transform: rotateY(-90deg);
  transform-origin: right center;
}
.pc-side-r {
  right: -11px;
  transform: rotateY(90deg);
  transform-origin: left center;
}
/* Directional darkening applied dynamically by JS to reinforce depth cue
   on the trailing edge as the phone rotates. */
.pc-lite {
  position: absolute;
  inset: 0;
  border-radius: 44px;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: opacity 500ms ease, background 500ms ease;
  transform: translateZ(0.6px);
}

/* ─── Onboarding label — "Tap to switch" — anchored below the pulse
   on the right-adjacent non-active phone. Fades in when the carousel
   enters the viewport, then stays until the user taps (or indefinitely
   if they never do). Dismissed via .pc-tapped on first side-phone tap.
   Background is strong enough to read over any screenshot behind it. */
.pc-tap__label {
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(12,8,28,0.92);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
          backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(167,139,250,0.45);
  color: rgba(240,237,255,0.96);
  box-shadow:
    0 12px 36px rgba(8,6,26,0.65),
    0 0 20px rgba(124,58,237,0.22),
    inset 0 1px 0 rgba(255,255,255,0.08);
  pointer-events: none;
  opacity: 0;
  z-index: 12;
  white-space: nowrap;
  transition: opacity 600ms cubic-bezier(.2,.8,.2,1),
              transform 600ms cubic-bezier(.2,.8,.2,1);
}
.pc-tap__label--show {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 300ms;
  animation: pcLabelFloat 3.2s ease-in-out 1s infinite;
}
.phone-carousel.pc-tapped .pc-tap__label {
  opacity: 0 !important;
  animation: none !important;
  transition: opacity 400ms ease;
}
@keyframes pcLabelFloat {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -2px); }
}
@media (max-width: 900px) {
  .pc-tap__label { font-size: 11px; padding: 6px 12px; top: 50px; }
}

/* ─── Tap-pulse hint — concentric rings centered on each non-active phone.
   Discoverability cue: signals "this is tappable" right on the target.
   Vanishes once the user taps anywhere in the carousel. */
/* Pulse — desktop is locked to dead-center (no tweaking).
   Mobile is tunable via the variables block below the media query. */
.pc-tap {
  position: absolute;
  top: 50%; left: 50%;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  pointer-events: none;
  z-index: 7;
  opacity: 0;
  transform: translateZ(1px);
  transform-style: preserve-3d;
  transition: opacity 400ms ease;
}
.pc-slide.active .pc-tap,
.phone-carousel.pc-tapped .pc-tap { opacity: 0 !important; }
/* Show only on visible non-active phones; delay so it appears after entry */
.pc-slide:not(.active) .pc-tap { opacity: 1; transition-delay: 1.2s; }
.phone-carousel.pc-tapped .pc-tap { transition-delay: 0s; }

.pc-tap__ring,
.pc-tap__dot {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  pointer-events: none;
}
.pc-tap__ring {
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  border: 2px solid rgba(167,139,250,0.85);
  background: transparent;
  box-shadow: 0 0 18px rgba(167,139,250,0.55);
  animation: pcTapRipple 2.2s ease-out infinite;
}
.pc-tap__ring--2 { animation-delay: 1.1s; }
.pc-tap__dot {
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  background: radial-gradient(circle at 50% 45%, #FFFFFF 0%, #E9D9FF 35%, #A78BFA 100%);
  box-shadow:
    0 0 12px rgba(167,139,250,0.85),
    0 0 28px rgba(124,58,237,0.55);
  animation: pcTapDot 2.2s ease-in-out infinite;
}
@keyframes pcTapRipple {
  0%   { transform: scale(0.6); opacity: 0;   border-width: 2px; }
  20%  {                         opacity: 0.95; }
  100% { transform: scale(3.4);  opacity: 0;   border-width: 1px; }
}
@keyframes pcTapDot {
  0%, 100% { transform: scale(1);    opacity: 0.95; }
  50%      { transform: scale(0.85); opacity: 0.7;  }
}
.pc-notch {
  position: absolute;
  top: 10px; left: 50%; transform: translateX(-50%);
  width: 74px; height: 20px;
  background: radial-gradient(ellipse at 50% 40%, #0a0818 0%, #000 80%);
  border-radius: 12px;
  z-index: 4;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.10),
    inset 0 -1px 2px rgba(0,0,0,0.8),
    0 1px 2px rgba(0,0,0,0.6);
}
.pc-phone img {
  width: 100%; height: 100%;
  border-radius: 38px;
  object-fit: cover;
  object-position: top;
  display: block;
  background: #05030d;
}
.pc-slide.active .pc-phone {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.12),
    inset 0 0 0 2px rgba(0,0,0,0.6),
    inset 2px 0 6px rgba(255,255,255,0.10),
    inset -2px 0 6px rgba(0,0,0,0.4),
    /* vertical-only cast shadow — no horizontal bleed so neighboring
       phones don't leave visible bands in the gaps between them */
    0 40px 80px rgba(0,0,0,0.55);
}
.pc-slide figcaption {
  text-align: center;
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0;
  transition: opacity 500ms;
  pointer-events: none;
}
.pc-slide.active figcaption { opacity: 1; }
.pc-slide figcaption .eyebrow {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ds-violet-soft); font-weight: 700;
}
.pc-slide figcaption .title {
  font-size: 19px; font-weight: 600; color: var(--ds-violet-soft);
  letter-spacing: -0.01em;
}
.pc-slide figcaption .desc {
  font-size: 13px; font-weight: 400; color: var(--ds-fg-muted);
  line-height: 1.4; max-width: 320px; margin: 2px auto 0;
}

/* arrows — hidden on desktop (dots + drag/keyboard suffice); mobile keeps them hidden too */
.pc-arrow {
  display: none;
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  font-size: 18px; font-weight: 300; line-height: 1;
  cursor: pointer;
  align-items: center; justify-content: center;
  transition: all 200ms var(--ds-ease-out);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 4px 14px rgba(0,0,0,0.25);
}
.pc-arrow:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
  transform: translateY(-50%) scale(1.06);
}
.pc-prev { left: 24px; }
.pc-next { right: 24px; }

/* dots */
.pc-dots {
  display: flex; gap: 8px; justify-content: center;
  margin-top: 8px;
}
.pc-dots button {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: none; padding: 0; cursor: pointer;
  transition: all 200ms;
}
.pc-dots button:hover { background: rgba(255,255,255,0.35); }
.pc-dots button.active {
  background: var(--ds-violet-soft);
  width: 24px; border-radius: 4px;
  box-shadow: 0 0 10px var(--ds-violet-soft);
}

@media (max-width: 900px) {
  .pc-viewport { height: 660px; padding: 10px 0 32px; }
  .pc-slide { width: 220px; }
  .pc-phone { width: 220px; height: 460px; }
  .pc-arrow { display: none; }

  /* ╭─────────────────────────────────────────────────────────╮
     │  PULSE POSITION (MOBILE ONLY) — tweak to taste          │
     │  Values are % of the phone surface (50% = center).      │
     │  --pc-tap-x   horizontal anchor for both side phones    │
     │  --pc-tap-y   vertical anchor                           │
     │  --pc-tap-x-l override LEFT phone only (defaults to x)  │
     │  --pc-tap-x-r override RIGHT phone only (defaults to x) │
     ╰─────────────────────────────────────────────────────────╯ */
  .phone-carousel {
    --pc-tap-x: 50%;
    --pc-tap-y: 50%;
    --pc-tap-x-l: 35%;  /* LEFT phone pulse — 15% outward total  */
    --pc-tap-x-r: 65%;  /* RIGHT phone pulse — 15% outward total */
  }
  .pc-tap { top: var(--pc-tap-y); left: var(--pc-tap-x); }
  .pc-slide.side-l .pc-tap { left: var(--pc-tap-x-l); }
  .pc-slide.side-r .pc-tap { left: var(--pc-tap-x-r); }
}

/* ─── Hero video cinema — one video at a time, crossfade ─── */
.video-cinema {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: hidden;
}
.vc-clip {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: saturate(1.08);
  /* Pure opacity crossfade — both clips play simultaneously during
     the fade, so motion overlays motion without any transform work
     that could stutter on mobile GPUs. */
  transition: opacity 1200ms linear;
  will-change: opacity;
}
.vc-clip.active { opacity: 1; }

.vc-progress {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
  z-index: 5;
  padding: 8px 12px;
  background: rgba(5,3,15,0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 100px;
}
.vc-seg {
  width: 34px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.15);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: background 200ms;
}
.vc-seg:hover { background: rgba(255,255,255,0.25); }
.vc-seg i {
  display: block; width: 0; height: 100%;
  background: linear-gradient(90deg, var(--ds-violet-soft), var(--ds-blue));
  box-shadow: 0 0 10px var(--ds-violet-soft);
  border-radius: 2px;
}
.vc-seg.active i {
  animation: vcProgress var(--vc-dur, 7s) linear forwards;
}
@keyframes vcProgress {
  0% { width: 0; }
  100% { width: 100%; }
}
.vc-label {
  position: absolute;
  top: 18px; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700;
  color: var(--ds-fg);
  background: rgba(5,3,15,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 8px 16px; border-radius: 100px;
  z-index: 5;
  transition: opacity 400ms;
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .section { padding: 56px 22px; }
  /* Vertical-center the hero so title lands at optical center and the
     CTA sits naturally in the thumb zone — eliminates the void below. */
  .hero {
    padding: 104px 22px 56px;
    min-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .hero-inner, .hero h1, .hero-sub { width: 100%; }
  .hero-eyebrow { width: auto; margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; flex-direction: column; align-items: center; gap: 12px; }
  .hero-ctas .btn { width: auto; }
  /* On phone: Explore More = plain text, no box, no animation, arrow hidden */
  .hero-explore {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
    color: var(--ds-fg-muted) !important;
    transform: none !important;
  }
  .hero-explore svg { display: none !important; }
  .hero-explore::after { display: none !important; }
  /* Ghost "Explore More" sits directly under the Download button on phone */
  .hero-explore { padding: 10px 18px; font-size: 14px; }
  .hero h1 { font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; margin: 8px 0 20px; }
  .hero-sub { margin-bottom: 32px; }
  .hero-sub { font-size: 17px; line-height: 1.55; }
  .section-head { text-align: left; margin-left: 0; margin-right: 0; }
  .section-head p { margin-left: 0; margin-right: 0; }
  .section-head h2 { font-size: 32px; line-height: 1.12; }
  .section-head p { font-size: 16px; line-height: 1.55; }
  /* Tighter gap between "More than a garden." and the phone carousel */
  #screens .section-head { margin-bottom: 8px; }
  #screens .pc-viewport { padding-top: 0; padding-bottom: 16px; }
  /* Research: 30–50 chars/line, 1.5–1.6 line-height; tighter rhythm, less fatigue */
  .bullet p, .step-card p, .coins-copy p, .faq p.answer,
  .review-card .quote, .merge-copy p, .library-copy p, .privacy-copy p {
    font-size: 16px; line-height: 1.55;
  }
  /* Tap targets: NN/g + 2026 research — ≥44px to cut mis-taps 31% */
  .btn, .btn-lg, .pc-dots button, .faq-item summary { min-height: 44px; }
  .pc-dots button { height: 10px; min-height: 10px; }
  .pc-dots button.active { height: 10px; }

  .steps-grid { grid-template-columns: 1fr; }
  /* Reviews → horizontal swipe carousel on mobile to save vertical space.
     Left-aligned snap so the next card always peeks on the right, making it
     clear there are more reviews. The last card snaps to the end so nothing
     hangs off its right. */
  .review-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 22px;
    scroll-padding-right: 22px;
    padding: 4px 22px 14px;
    margin: 0 -22px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .review-grid::-webkit-scrollbar { display: none; }
  .review-grid .review {
    flex: 0 0 80%;
    scroll-snap-align: start;
    margin: 0;
  }
  .review-grid .review:last-child {
    scroll-snap-align: end;
  }
  .temple-showcase, .coins-layout, .merge-showcase, .library-layout { grid-template-columns: 1fr; gap: 40px; }
  .coins-layout { gap: 16px; }
  .community-showcase { gap: 20px; }
  .community-showcase > .reveal:first-child > p { margin-bottom: 0; }
  .community-showcase > .reveal:last-child { gap: 16px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .soul-core-wrap { width: 320px; height: 320px; }
  .phone-frame { transform: none; }

  /* Sticky CTA auto-hides near the final CTA section, so no extra body
     padding is needed — the footer sits flush at the bottom. */
  body { padding-bottom: 0; }
}

/* ─── Sticky mobile download CTA — thumb zone, +14% conversion per 2026 landing-page research ─── */
.sticky-mobile-cta {
  display: none;
}
@media (max-width: 900px) {
  .sticky-mobile-cta {
    display: flex;
    position: fixed;
    left: 12px; right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 90;
    align-items: center; justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 999px;
    font-size: 15px; font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    box-shadow:
      0 10px 30px rgba(124,58,237,0.45),
      0 0 0 1px rgba(255,255,255,0.08) inset;
    text-decoration: none;
    min-height: 52px;
    transform: translateY(120%);
    opacity: 0;
    transition: transform 350ms cubic-bezier(.2,.8,.2,1), opacity 300ms;
    will-change: transform, opacity;
  }
  .sticky-mobile-cta.visible {
    transform: translateY(0);
    opacity: 1;
  }
  .sticky-mobile-cta svg { flex-shrink: 0; }
}