:root {
  --mg-primary-50: #ecfdf5;
  --mg-primary-100: #d1fae5;
  --mg-primary-200: #a7f3d0;
  --mg-primary-300: #6ee7b7;
  --mg-primary-400: #34d399;
  --mg-primary-500: #10b981;
  --mg-primary-600: #059669;
  --mg-primary-700: #047857;
  --mg-primary-900: #064e3b;
  --mg-ink: #0f172a;
  --mg-muted: #64748b;
  --mg-border: rgba(15, 23, 42, .09);
  --mg-card: rgba(255, 255, 255, .82);
  --mg-radius: 1.35rem;
  --mg-shadow: 0 24px 70px rgba(15, 23, 42, .10);
  --mg-shadow-soft: 0 16px 42px rgba(16, 185, 129, .18);
  --mg-anchor-offset: 6rem;
}

* {
  text-rendering: geometricPrecision;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--mg-anchor-offset);
}

body {
  color: var(--mg-ink);
  background:
    radial-gradient(circle at 15% 10%, rgba(110, 231, 183, .34), transparent 30rem),
    radial-gradient(circle at 85% 15%, rgba(167, 243, 208, .34), transparent 28rem),
    linear-gradient(180deg, #ffffff 0%, var(--mg-primary-50) 50%, #ffffff 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
  color: var(--mg-primary-700);
}

::selection {
  color: #fff;
  background: var(--mg-primary-600);
}

.mg-navbar {
  background: rgba(255, 255, 255, .76);
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  backdrop-filter: blur(18px);
}

.mg-brand-logo,
.mg-logo-tile {
  width: 3rem;
  height: 3rem;
  display: inline-grid;
  place-items: center;
  border-radius: 1rem;
  background: rgba(110, 231, 183, .14);
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .14);
}

.mg-brand-logo img,
.mg-logo-tile img {
  width: 2.25rem;
  height: 2.25rem;
}

.mg-brand-name {
  letter-spacing: -.03em;
  font-weight: 800;
}

.mg-nav-link {
  color: rgba(15, 23, 42, .72);
  font-weight: 650;
}

.mg-nav-link:hover,
.mg-nav-link.active {
  color: var(--mg-primary-700);
}

.mg-section {
  padding: 6rem 0;
}

main section[id] {
  scroll-margin-top: var(--mg-anchor-offset);
}

.mg-hero {
  position: relative;
  overflow: hidden;
  padding: 8.5rem 0 6rem;
}

.mg-hero::before {
  content: "";
  position: absolute;
  inset: 7rem auto auto 50%;
  width: min(38rem, 70vw);
  height: min(38rem, 70vw);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(110, 231, 183, .32), transparent 68%);
  transform: translateX(-2rem);
  pointer-events: none;
}

.mg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .75rem;
  color: var(--mg-primary-700);
  background: rgba(236, 253, 245, .86);
  border: 1px solid rgba(16, 185, 129, .18);
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 700;
}

.mg-title {
  max-width: 900px;
  margin-top: 1.25rem;
  font-size: clamp(2.55rem, 6vw, 5.35rem);
  line-height: .95;
  letter-spacing: -.075em;
  font-weight: 900;
}

.mg-gradient-text {
  color: transparent;
  background: linear-gradient(135deg, var(--mg-primary-600), var(--mg-primary-300));
  -webkit-background-clip: text;
  background-clip: text;
}

.mg-lead {
  max-width: 710px;
  color: var(--mg-muted);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.75;
}

.mg-btn-primary {
  --bs-btn-bg: var(--mg-primary-600);
  --bs-btn-border-color: var(--mg-primary-600);
  --bs-btn-hover-bg: var(--mg-primary-700);
  --bs-btn-hover-border-color: var(--mg-primary-700);
  --bs-btn-active-bg: var(--mg-primary-700);
  --bs-btn-active-border-color: var(--mg-primary-700);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-border-radius: 999px;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: .82rem;
  box-shadow: var(--mg-shadow-soft);
  font-weight: 800;
}

.mg-btn-outline {
  --bs-btn-color: var(--mg-ink);
  --bs-btn-border-color: rgba(15, 23, 42, .12);
  --bs-btn-hover-bg: var(--mg-primary-50);
  --bs-btn-hover-border-color: rgba(16, 185, 129, .28);
  --bs-btn-hover-color: var(--mg-primary-700);
  --bs-btn-border-radius: 999px;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: .82rem;
  background: rgba(255, 255, 255, .72);
  font-weight: 800;
}

.mg-hero-card {
  position: relative;
  z-index: 1;
  padding: 1rem;
  border: 1px solid rgba(16, 185, 129, .14);
  border-radius: 2rem;
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--mg-shadow);
  backdrop-filter: blur(18px);
}

.mg-preview-window {
  overflow: hidden;
  border-radius: 1.55rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
}

.mg-preview-topbar {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .95rem 1rem;
  background: linear-gradient(180deg, rgba(236, 253, 245, .9), rgba(255, 255, 255, .88));
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}

.mg-dot {
  width: .72rem;
  height: .72rem;
  border-radius: 50%;
  background: var(--mg-primary-300);
  opacity: .78;
}

.mg-preview-body {
  padding: clamp(1.25rem, 4vw, 2rem);
}

.mg-metric {
  padding: 1rem;
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 1.2rem;
  background: linear-gradient(180deg, rgba(236, 253, 245, .72), rgba(255, 255, 255, .9));
}

.mg-metric strong {
  display: block;
  color: var(--mg-primary-700);
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: -.05em;
}

.mg-card {
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius);
  background: var(--mg-card);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
  backdrop-filter: blur(16px);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.mg-card:hover {
  transform: translateY(-4px);
  border-color: rgba(16, 185, 129, .25);
  box-shadow: 0 22px 52px rgba(15, 23, 42, .095);
}

.mg-icon {
  width: 3rem;
  height: 3rem;
  display: inline-grid;
  place-items: center;
  border-radius: 1rem;
  color: var(--mg-primary-700);
  background: rgba(110, 231, 183, .18);
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .12);
}

.mg-card h3,
.mg-card h4 {
  letter-spacing: -.035em;
}

.mg-section-title {
  max-width: 760px;
}

.mg-section-title h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -.065em;
  font-weight: 900;
}

.mg-section-title p {
  color: var(--mg-muted);
  font-size: 1.08rem;
  line-height: 1.75;
}

.mg-band {
  border: 1px solid rgba(16, 185, 129, .14);
  border-radius: 2rem;
  background:
    radial-gradient(circle at 15% 20%, rgba(110, 231, 183, .28), transparent 22rem),
    linear-gradient(135deg, rgba(236, 253, 245, .95), rgba(255, 255, 255, .86));
  box-shadow: var(--mg-shadow);
  overflow: hidden;
}

.mg-step {
  display: flex;
  gap: 1rem;
}

.mg-step-number {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-grid;
  place-items: center;
  border-radius: .85rem;
  color: #fff;
  background: var(--mg-primary-600);
  box-shadow: var(--mg-shadow-soft);
  font-weight: 900;
}

.mg-gallery-item {
  min-height: 220px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 1.35rem;
  background:
    linear-gradient(135deg, rgba(16, 185, 129, .18), transparent 46%),
    linear-gradient(180deg, #ffffff, var(--mg-primary-50));
  overflow: hidden;
}

.mg-gallery-bar {
  height: .55rem;
  width: 62%;
  border-radius: 999px;
  background: rgba(16, 185, 129, .22);
}

.mg-gallery-line {
  height: .55rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, .09);
}

.mg-cta {
  color: #fff;
  border-radius: 2rem;
  background:
    radial-gradient(circle at 80% 10%, rgba(110, 231, 183, .36), transparent 25rem),
    linear-gradient(135deg, var(--mg-primary-900), var(--mg-primary-700));
  box-shadow: 0 24px 74px rgba(6, 78, 59, .26);
}

.mg-cta p {
  color: rgba(255, 255, 255, .76);
}

.mg-form-control {
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 1rem;
  padding: .9rem 1rem;
  background: rgba(255, 255, 255, .78);
}

.mg-footer {
  padding: 3rem 0;
  color: var(--mg-muted);
  border-top: 1px solid rgba(15, 23, 42, .06);
  background: rgba(255, 255, 255, .6);
}

@media (max-width: 991.98px) {
  .mg-hero {
    padding-top: 7rem;
  }

  .mg-section {
    padding: 4rem 0;
  }
}