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

:root {
  --mf-bg: #070817;
  --mf-panel: rgba(255, 255, 255, 0.065);
  --mf-panel-strong: rgba(255, 255, 255, 0.1);
  --mf-border: rgba(255, 255, 255, 0.14);
  --mf-text: #f8fafc;
  --mf-muted: rgba(226, 232, 240, 0.68);
  --mf-cyan: #00f5d4;
  --mf-blue: #38bdf8;
  --mf-violet: #8b5cf6;
  --mf-pink: #ec4899;
  --mf-gold: #f5c842;
  --mf-green: #14b8a6;
  --mf-shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
  --mf-radius: 22px;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--mf-bg);
  color: var(--mf-text);
  font-family: Inter, system-ui, sans-serif;
}

.mf-site {
  width: 100%;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 8%, rgba(139, 92, 246, 0.32), transparent 30rem),
    radial-gradient(circle at 88% 20%, rgba(0, 245, 212, 0.18), transparent 26rem),
    #070817;
}

.mf-wrap {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.mf-section,
.mf-layout {
  position: relative;
  padding: 96px 0;
}

.mf-hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 80px 0;
  background:
    linear-gradient(120deg, rgba(11, 16, 42, 0.8), rgba(26, 10, 62, 0.72)),
    radial-gradient(circle at 70% 72%, rgba(236, 72, 153, 0.2), transparent 34rem);
}

.mf-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr);
  align-items: center;
  gap: 58px;
}

.mf-kicker,
.mf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--mf-cyan);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mf-kicker span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--mf-cyan);
  box-shadow: 0 0 18px var(--mf-cyan);
}

.mf-hero h1,
.mf-section-head h2,
.mf-builder h2 {
  margin: 18px 0 18px;
  color: #fff;
  font-size: clamp(42px, 6vw, 78px);
  line-height: 0.98;
  letter-spacing: 0;
  font-weight: 900;
}

.mf-hero h1 strong,
.mf-section-head h2 strong {
  font-weight: 900;
  background: linear-gradient(100deg, var(--mf-cyan), var(--mf-blue), var(--mf-violet), var(--mf-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mf-hero p,
.mf-section-head p,
.mf-builder p {
  max-width: 720px;
  margin: 0;
  color: var(--mf-muted);
  font-size: 19px;
  line-height: 1.7;
}

.mf-pills,
.mf-control-list,
.mf-library-list,
.mf-module-grid,
.mf-feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mf-pills {
  margin-top: 32px;
}

.mf-pills span,
.mf-control-list span,
.mf-library-list span,
.mf-module-grid span {
  border: 1px solid var(--mf-border);
  background: var(--mf-panel);
  color: rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
}

.mf-hero__panel,
.mf-ui-panel,
.mf-proof-card,
.mf-feature-grid > div {
  border: 1px solid var(--mf-border);
  background: linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.035));
  box-shadow: var(--mf-shadow);
  backdrop-filter: blur(18px);
}

.mf-hero__panel {
  border-radius: 30px;
  padding: 34px;
}

.mf-window-dots {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
}

.mf-window-dots span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ff5f57;
}

.mf-window-dots span:nth-child(2) { background: #febc2e; }
.mf-window-dots span:nth-child(3) { background: #28c840; }

.mf-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.mf-mini-grid div {
  min-height: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.055);
}

.mf-mini-grid strong {
  font-size: 36px;
  line-height: 1;
  background: linear-gradient(90deg, var(--mf-cyan), var(--mf-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mf-mini-grid span {
  margin-top: 10px;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mf-section-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 54px;
}

.mf-section-head--left {
  text-align: left;
  margin-left: 0;
}

.mf-section-head h2,
.mf-builder h2 {
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.08;
}

.mf-proof {
  background: #0a1024;
}

.mf-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.mf-proof-card {
  border-radius: var(--mf-radius);
  padding: 28px;
}

.mf-proof-card h3 {
  margin: 18px 0 10px;
  color: #fff;
  font-size: 22px;
}

.mf-proof-card p {
  margin: 0 0 22px;
  color: var(--mf-muted);
  line-height: 1.65;
}

.mf-proof-icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: var(--mf-cyan);
  background: rgba(0,245,212,0.1);
  border: 1px solid rgba(0,245,212,0.25);
  font-weight: 900;
}

.mf-proof-icon--gradient {
  background: linear-gradient(135deg, var(--mf-cyan), var(--mf-violet), var(--mf-pink));
}

.mf-default-mark svg {
  width: 24px;
  height: 24px;
}

.mf-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  color: rgba(255,255,255,0.86);
  font-weight: 700;
}

.mf-color-row span:first-child {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--swatch);
  box-shadow: 0 0 20px color-mix(in srgb, var(--swatch), transparent 40%);
}

.mf-proof-counter {
  margin-top: 8px;
  color: #e2e8f0;
}

.mf-proof-counter .statflow-default-icon {
  width: 36px;
  height: 36px;
  color: var(--mf-cyan);
}

.mf-builder {
  background: linear-gradient(180deg, #070817, #0e1530);
}

.mf-builder__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1fr);
  gap: 48px;
  align-items: start;
}

.mf-ui-stack {
  display: grid;
  gap: 18px;
}

.mf-ui-panel {
  padding: 22px;
  border-radius: 18px;
}

.mf-ui-title {
  margin-bottom: 16px;
  color: #fff;
  font-weight: 900;
}

.mf-library-list span,
.mf-module-grid span {
  border-radius: 12px;
}

.mf-layout {
  overflow: hidden;
}

.mf-layout--saas {
  background:
    radial-gradient(circle at 10% 15%, rgba(0,245,212,0.13), transparent 28rem),
    radial-gradient(circle at 86% 76%, rgba(139,92,246,0.18), transparent 28rem),
    #050816;
}

.mf-layout--finance {
  background: linear-gradient(180deg, #0a0a0f, #121118);
}

.mf-layout--agency {
  background: linear-gradient(180deg, #fbfaff, #f1efff);
  color: #111827;
}

.mf-layout--agency .mf-section-head h2,
.mf-layout--agency .mf-section-head p {
  color: #111827;
}

.mf-layout--agency .mf-section-head p {
  color: #64748b;
}

.mf-layout--progress {
  background: #080810;
}

.mf-layout--commerce {
  background: linear-gradient(180deg, #f8fbff, #eef7ff);
  color: #0f172a;
}

.mf-layout--commerce .mf-section-head h2,
.mf-layout--commerce .mf-section-head p {
  color: #0f172a;
}

.mf-layout--commerce .mf-section-head p {
  color: #64748b;
}

.mf-layout .statflow-title {
  color: rgba(255,255,255,0.68);
  font-size: 13px;
  font-weight: 700;
}

.mf-layout--saas .statflow-counter {
  min-height: 208px;
  padding: 32px 24px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.055);
  box-shadow: 0 18px 60px rgba(0,0,0,0.32);
}

.mf-layout--saas .statflow-title {
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.mf-layout--finance .statflow-counter {
  min-height: 220px;
  padding: 32px 22px;
  border-radius: 18px;
  border: 1px solid rgba(245,200,66,0.25);
  background: linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
  box-shadow: 0 28px 70px rgba(0,0,0,0.38);
}

.mf-layout--agency .statflow-counter,
.mf-layout--commerce .statflow-counter {
  min-height: 176px;
  padding: 28px 22px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.08);
  background: #fff;
  box-shadow: 0 18px 48px rgba(15,23,42,0.08);
}

.mf-layout--agency .statflow-title,
.mf-layout--commerce .statflow-title {
  color: #475569;
}

.mf-layout--progress .statflow-counter {
  min-height: 170px;
  padding: 26px 20px 34px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.045);
}

.mf-layout--progress .statflow-number {
  color: #fff;
  font-size: 42px;
}

.mf-layout--progress .statflow-suffix {
  color: #a5b4fc;
  font-weight: 800;
}

.mf-layout--progress .statflow-progress-bar {
  height: 6px;
  border-radius: 999px;
  box-shadow: 0 0 22px rgba(0,245,212,0.28);
}

.mf-layout--commerce .statflow-number {
  color: #0f172a;
  font-size: 44px;
}

.mf-layout--commerce .statflow-prefix,
.mf-layout--commerce .statflow-suffix {
  color: var(--mf-green);
  font-weight: 800;
}

.mf-features {
  background: linear-gradient(180deg, #0e1530, #070817);
}

.mf-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mf-feature-grid > div {
  border-radius: 18px;
  padding: 24px;
}

.mf-feature-grid strong {
  display: block;
  margin-bottom: 10px;
  color: #fff;
  font-size: 18px;
}

.mf-feature-grid span {
  color: var(--mf-muted);
  line-height: 1.65;
}

@media (max-width: 1080px) {
  .mf-hero__grid,
  .mf-builder__grid {
    grid-template-columns: 1fr;
  }

  .mf-proof-grid,
  .mf-feature-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .mf-wrap {
    width: min(100% - 32px, 1180px);
  }

  .mf-section,
  .mf-layout {
    padding: 72px 0;
  }

  .mf-hero {
    min-height: auto;
    padding: 72px 0;
  }

  .mf-hero h1 {
    font-size: 46px;
  }

  .mf-mini-grid,
  .mf-proof-grid,
  .mf-feature-grid {
    grid-template-columns: 1fr;
  }

  .mf-section-head,
  .mf-section-head--left {
    text-align: left;
    margin-left: 0;
  }

  .mf-hero__panel {
    padding: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .statflow-counter { transition: none; }
}