/* Mewnarch: a sunlit royal meadow. Warm ivory, royal plum ink and stained-kingdom tiles. */
.app-mewnarch {
  --bg: #FCF8F1; --bg2: #F3EAD9; --surface: #FFFFFF; --line: #E2D5C1;
  --text: #3A3350; --muted: #675C7D; --accent: #6D4BB2; --accent-ink: #FFFFFF; --accent2: #E8788A;
  --font-head: "Quicksand", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --radius: 22px; --shadow: 0 20px 46px rgba(58, 51, 80, .10);
  background:
    radial-gradient(ellipse 88% 48% at 78% 4%, rgba(197, 178, 238, .36), transparent 64%),
    radial-gradient(circle at 14% 26%, rgba(169, 220, 110, .16), transparent 46%),
    linear-gradient(180deg, #FBF6ED 0%, #FCF8F1 45%, #F6EFE2 100%);
}
.app-mewnarch .topbar {
  background: rgba(252, 248, 241, .84);
  border-bottom: 1px solid rgba(226, 213, 193, .85);
}
.app-mewnarch .hero h1 { font-weight: 800; letter-spacing: -.015em; }
.app-mewnarch .badge {
  background: #FFFDF8;
  border: 1.5px solid #F2C14E;
  color: #5C4388;
  box-shadow: 0 3px 0 rgba(242, 193, 78, .28);
}
.app-mewnarch .store-btn,
.app-mewnarch .home-pill {
  background: linear-gradient(180deg, #7B5AC0, #6D4BB2);
  color: #FFFFFF;
  box-shadow: 0 4px 0 #4B3085, 0 12px 24px rgba(109, 75, 178, .26);
  transition: transform .15s ease, box-shadow .15s ease;
}
.app-mewnarch .store-btn:hover,
.app-mewnarch .home-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #4B3085, 0 16px 28px rgba(109, 75, 178, .32);
}
.app-mewnarch .store-btn.soon {
  background: #FFFDF9;
  color: var(--muted);
  border: 1.5px solid var(--line);
  box-shadow: 0 4px 0 var(--line);
}
.app-mewnarch .store-btn.soon:hover { transform: none; box-shadow: 0 4px 0 var(--line); }

/* Storybook cards with crisp biscuit/plum depth matching in-game panels. */
.app-mewnarch .feature,
.app-mewnarch .promise,
.app-mewnarch .faq,
.app-mewnarch .contact-card {
  background: #FFFFFF;
  border: 2px solid var(--line);
  box-shadow: 0 6px 0 var(--line), 0 14px 32px rgba(58, 51, 80, .06);
}
.app-mewnarch .feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 0 var(--line), 0 18px 36px rgba(58, 51, 80, .10);
}

/* Pastel kingdom tiles for the six feature icons. */
.app-mewnarch .feature-icon {
  border-radius: 15px;
  border: 2px solid #3A3350;
  color: #3A3350;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 3px 0 rgba(58, 51, 80, .14);
}
.app-mewnarch .feature:nth-child(6n+1) .feature-icon { background: #F786AC; }
.app-mewnarch .feature:nth-child(6n+2) .feature-icon { background: #F7C844; }
.app-mewnarch .feature:nth-child(6n+3) .feature-icon { background: #84C8F4; }
.app-mewnarch .feature:nth-child(6n+4) .feature-icon { background: #C5B2EE; }
.app-mewnarch .feature:nth-child(6n+5) .feature-icon { background: #62D4AE; }
.app-mewnarch .feature:nth-child(6n) .feature-icon   { background: #F59360; }

.app-mewnarch .section-title::after {
  content: ""; display: block; width: 88px; height: 7px; margin-top: 14px; border-radius: 999px;
  background: linear-gradient(90deg, #F786AC 0 25%, #F7C844 25% 50%, #62D4AE 50% 75%, #C5B2EE 75% 100%);
  box-shadow: 0 2px 0 rgba(58, 51, 80, .16);
}

/* Royal plum phone bezel framing sunlit screenshots. */
.app-mewnarch .phone {
  background: linear-gradient(155deg, #4B4068, #2B233D);
  box-shadow: var(--shadow), inset 0 0 0 1.5px rgba(242, 193, 78, .38);
}
@media (min-width: 900px) {
  .app-mewnarch .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 780px) {
  .app-mewnarch .shots .phone:nth-child(even) { transform: translateY(14px); }
}

/* Hero stained-kingdom mosaic tiles & crown glints in .motif */
.app-mewnarch .kgrid {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.app-mewnarch .ktile {
  position: absolute; border-radius: 14px; border: 2px solid rgba(58, 51, 80, .16);
  display: grid; place-items: center; color: rgba(255, 255, 255, .92);
  font-family: var(--font-head); font-weight: 800; font-size: 20px;
  animation: kbob 7.5s ease-in-out infinite;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .38), 0 6px 16px rgba(58, 51, 80, .06);
}
.app-mewnarch .kt1 { width: 52px; height: 52px; left: 6%; top: 14%; background: rgba(247, 134, 172, .22); color: rgba(232, 88, 116, .65); animation-delay: 0s; }
.app-mewnarch .kt2 { width: 44px; height: 44px; left: 11.5%; top: 18%; background: rgba(247, 200, 68, .25); color: rgba(196, 136, 16, .7); animation-delay: -1.6s; }
.app-mewnarch .kt3 { width: 48px; height: 48px; left: 46%; top: 10%; background: rgba(132, 200, 244, .22); color: rgba(74, 134, 198, .62); animation-delay: -3.2s; }
.app-mewnarch .kt4 { width: 56px; height: 56px; right: 5%; top: 16%; background: rgba(197, 178, 238, .26); color: rgba(109, 75, 178, .62); animation-delay: -4.4s; }
.app-mewnarch .kt5 { width: 42px; height: 42px; left: 40%; bottom: 14%; background: rgba(98, 212, 174, .22); color: rgba(45, 148, 114, .65); animation-delay: -2.4s; }
.app-mewnarch .kt6 { width: 46px; height: 46px; right: 34%; bottom: 18%; background: rgba(245, 147, 96, .20); color: rgba(210, 96, 46, .62); animation-delay: -5.5s; }
.app-mewnarch .ktile svg { width: 24px; height: 24px; }
@keyframes kbob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}

.app-mewnarch .promise-list li .ico { color: var(--accent); }
.app-mewnarch .faq summary { font-weight: 700; }
.app-mewnarch .faq[open] { border-color: #C5B2EE; }