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

:root {
  --mb-ink: #0F172A;
  --mb-ink-soft: #334155;
  --mb-muted: #64748B;
  --mb-line: #E2E8F0;
  --mb-blue: #1E3A8A;
  --mb-blue-500: #3B82F6;
  --mb-cyan: #06B6D4;
  --mb-bg: #FFFFFF;
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  color: var(--mb-ink);
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6,.font-display{
  font-family: 'Outfit', system-ui, sans-serif;
  letter-spacing: -0.02em;
}

.mudboxx-mesh{
  background:
    radial-gradient(60% 50% at 10% 0%, #DBEAFE 0%, transparent 60%),
    radial-gradient(50% 40% at 90% 10%, #CFFAFE 0%, transparent 60%),
    radial-gradient(70% 50% at 50% 100%, #EFF6FF 0%, transparent 60%),
    #FFFFFF;
}

.mudboxx-orb{
  position:absolute;border-radius:9999px;filter:blur(80px);opacity:.55;pointer-events:none;
  animation: mb-float 18s ease-in-out infinite;
}
.mudboxx-orb.b1{background:#93C5FD;}
.mudboxx-orb.b2{background:#67E8F9;animation-duration:22s;}
.mudboxx-orb.b3{background:#C7D2FE;animation-duration:26s;}
@keyframes mb-float{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(30px,-20px) scale(1.05);}
}

.mb-ripple{position:relative;overflow:hidden;}
.mb-ripple::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.4) 0%, transparent 40%);
  opacity:0; transition: opacity .4s ease;
}
.mb-ripple:hover::after{opacity:1;}

.mb-lift{transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;}
.mb-lift:hover{transform: translateY(-6px);}

.mb-fade{opacity:0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease;}
.mb-fade.in{opacity:1; transform: translateY(0);}

.mb-grid-lines{
  background-image:
    linear-gradient(rgba(30,58,138,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,58,138,.06) 1px, transparent 1px);
  background-size: 48px 48px;
}

.mb-nav-link{position:relative;}
.mb-nav-link::after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;
  background: linear-gradient(90deg, #1E3A8A, #06B6D4);
  transition: width .3s ease;
}
.mb-nav-link:hover::after, .mb-nav-link.active::after{ width:100%; }

::selection{background:#BFDBFE;color:#0F172A;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:#F8FAFC;}
::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:999px;}
::-webkit-scrollbar-thumb:hover{background:#94A3B8;}

.mb-hero-underline{
  position: absolute; bottom: -8px; left:0; width:100%;
}

/* Simple dialog */
.mb-dialog-backdrop{
  position: fixed; inset: 0; background: rgba(15,23,42,0.45); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; z-index: 100;
  padding: 16px;
}
.mb-dialog-backdrop.open{display:flex;}
.mb-dialog{
  background:#fff; border-radius: 20px; padding: 28px; max-width: 560px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 80px rgba(2,132,199,0.2);
}

/* Toast */
.mb-toast{
  position: fixed; top: 20px; right: 20px; z-index: 200;
  background: #0F172A; color: #fff; border-radius: 14px; padding: 14px 18px;
  font-size: 14px; box-shadow: 0 20px 40px rgba(2,132,199,0.25);
  transform: translateX(400px); opacity: 0; transition: transform .35s ease, opacity .35s ease;
  max-width: 380px;
}
.mb-toast.show{ transform: translateX(0); opacity: 1; }
.mb-toast.success{ background: linear-gradient(90deg,#059669,#10b981); }
.mb-toast.error{ background: linear-gradient(90deg,#dc2626,#ef4444); }

/* Tab */
.mb-tab-list{ display: inline-flex; background:#F1F5F9; border-radius: 999px; padding: 4px;}
.mb-tab{
  padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color:#475569; cursor: pointer; border: none; background: transparent;
}
.mb-tab.active{ background: #fff; color:#0F172A; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

/* Utility */
.mb-input{
  width:100%; height: 40px; padding: 0 14px; border-radius: 12px;
  border: 1px solid #E2E8F0; background:#fff; font-size:14px; color:#0F172A;
  transition: border-color .2s, box-shadow .2s;
}
.mb-input:focus{ outline: none; border-color:#3B82F6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15);}
.mb-textarea{ min-height: 120px; padding: 12px 14px; height: auto; resize: vertical; font-family: inherit;}
.mb-label{ display:block; font-size: 13px; font-weight: 600; color:#334155; margin-bottom: 4px;}

/* Marker pulse */
.mb-pulse-outer{ animation: mb-pulse 2s ease-out infinite;}
@keyframes mb-pulse{
  0%{ r: 4; opacity:.5;}
  100%{ r: 12; opacity: 0;}
}