/* MarketEdge marketing site — decoded from the Nocturne design-system handoff
   (website_package/*.dc.html). Inter is loaded from Google Fonts rather than
   the handoff's own woff2 blobs, which only exist inside the bundler's
   manifest, not as real files. Everything else — tokens, component classes,
   copy, structure — matches the handoff exactly. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --color-bg: #2c2c30;
  --color-surface: #3a3a40;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-divider: rgba(237, 237, 238, 0.2);

  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Inter", system-ui, sans-serif;

  --radius-md: 8px;

  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0, 0, 0, 0.65);
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  background: var(--color-bg);
  /* The hero's decorative glows are deliberately wider than the viewport at
     desktop sizes (they bleed off the edge, part of the look) — without
     this they cause real horizontal scroll once the viewport gets narrow
     enough that the hero itself no longer contains them visually. */
  overflow-x: hidden;
}
body {
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}
a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover {
  color: var(--color-accent-300);
}
img {
  display: block;
  max-width: 100%;
}
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
::selection {
  background: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* — cards — */
.card {
  display: flex;
  flex-direction: column;
  gap: 5.6px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.elev-sm {
  box-shadow: var(--shadow-sm);
}

/* — buttons — */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  line-height: 1.2;
  background: transparent;
  border: 1px solid transparent;
  padding: 5.6px 10px;
  border-radius: var(--radius-md);
}
.btn-primary {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

/* — App Store buttons: replaces the handoff's per-instance hover style — */
.mw-store-btn:hover {
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
}

/* — shared animations — */
@keyframes mw-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes mw-scan {
  0% {
    top: 8%;
  }
  50% {
    top: 86%;
  }
  100% {
    top: 8%;
  }
}
@keyframes mw-wave {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.9);
  }
}
@keyframes mw-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

/* — FAQ accordion — needs no JS, <details>/<summary> handle open/close — */
details.mw-faq summary::-webkit-details-marker {
  display: none;
}
details.mw-faq summary {
  list-style: none;
  cursor: pointer;
}
details.mw-faq[open] .mw-chev {
  transform: rotate(180deg);
}

/* — responsive — */
@media (max-width: 900px) {
  .mw-hero-grid {
    grid-template-columns: 1fr !important;
  }
  .mw-how-grid {
    grid-template-columns: 1fr !important;
  }
  .mw-nav-links {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .mw-hero-h1 {
    font-size: 38px !important;
  }
  .mw-cta-h2 {
    font-size: 30px !important;
  }
}