/* =================================================================
   Maxta MaxBlueprint — Design System
   File: maxblueprint.css
   Scope: body.page-product-maxblueprint
   ================================================================= */

/* =================================================================
   Maxta MaxBlueprint — Design System
   Inherits Partners light-theme tokens, adds dark-island overrides
   ================================================================= */



/* ── Reset ── */

/* ── Design Tokens ── */
:root {
  --brand-600: #1d4ed8;
  --brand-500: #3b82f6;
  --brand-400: #60a5fa;
  --brand-50:  #eff6ff;
  --gray-900: #0f172a;
  --gray-800: #1e293b;
  --gray-700: #334155;
  --gray-600: #475569;
  --gray-500: #64748b;
  --gray-300: #cbd5e1;
  --gray-200: #e2e8f0;
  --gray-100: #f1f5f9;
  --gray-50:  #f8fafc;
  --radius-sm:   .5rem;
  --radius-md:   .75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.25rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;
  /* MaxBlueprint accent */
  --sky-400: #38BDF8;
  --indigo-500: #6366F1;
  --emerald-400: #34D399;
  --violet-500: #8B5CF6;
}

body.page-product-maxblueprint {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #fff;
  color: var(--gray-700);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── AOS ── */
[data-aos] { opacity: 0; transition: opacity .68s cubic-bezier(.215,.61,.355,1), transform .68s cubic-bezier(.215,.61,.355,1); }
[data-aos="fade-up"]    { transform: translateY(24px); }
[data-aos="fade-right"] { transform: translateX(-24px); }
[data-aos="fade-left"]  { transform: translateX(24px); }
[data-aos].aos-animate  { opacity: 1; transform: translate(0,0); }

/* ── Keyframes ── */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes dash-flow { to { stroke-dashoffset: -20; } }
@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes pulse-glow { 0%,100% { opacity:.5; } 50% { opacity:1; } }

/* ── Layout ── */
.mb-container { max-width: 80rem; margin-inline: auto; padding-inline: 1.5rem; }
@media (min-width: 1024px) { .mb-container { padding-inline: 2rem; } }

.mb-section       { padding-block: 6rem; }
.mb-section--white { background: #fff; }
.mb-section--gray  { background: var(--gray-50); }
.mb-section--dark  {
  background: #030712;
  position: relative;
  overflow: hidden;
}

/* dark section glow orbs */
.mb-section--dark::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,.08) 0%, transparent 70%);
  top: -200px; left: -150px;
  pointer-events: none;
}
.mb-section--dark::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.07) 0%, transparent 70%);
  bottom: 10%; right: -100px;
  pointer-events: none;
}

/* dot-grid overlay for dark sections */
.mb-dot-grid {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(255,255,255,0.025)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ── Typography ── */
.mb-g-text {
  background: linear-gradient(135deg, #38BDF8, #3b82f6, #8B5CF6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.mb-g-text--warm {
  background: linear-gradient(135deg, #1d4ed8, #3b82f6, #8B5CF6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
/* sec-label: unified in hero.css */

.mb-section-header { text-align: center; margin-bottom: 4rem; }
.mb-section-heading {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 700; color: var(--gray-900); line-height: 1.2; margin-bottom: 1rem;
}
.mb-section-heading--light { color: #fff; }
.mb-section-subtext { color: var(--gray-600); max-width: 40rem; margin-inline: auto; line-height: 1.7; }
.mb-section-subtext--light { color: #94A3B8; }

/* ── Hero — now using unified .page-hero from hero.css ── */


/* ── Buttons ── */
.mb-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.75rem; border-radius: var(--radius-lg);
  font-size: .9375rem; font-weight: 700; cursor: pointer;
  transition: all .25s;
}
.mb-btn--grad {
  background: linear-gradient(135deg, #0ea5e9, #3b82f6, #6366f1);
  color: #fff;
  box-shadow: 0 4px 20px rgba(14,165,233,.35);
}
.mb-btn--grad:hover {
  background: linear-gradient(135deg, #38BDF8, #60a5fa, #818CF8);
  box-shadow: 0 8px 30px rgba(14,165,233,.5);
  transform: translateY(-2px);
}
.mb-btn--outline-light {
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(255,255,255,.18);
  color: #E2E8F0;
}
.mb-btn--outline-light:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.35);
  transform: translateY(-2px);
}
.mb-btn--outline {
  background: #fff;
  border: 1.5px solid var(--gray-200);
  color: var(--gray-700);
}
.mb-btn--outline:hover {
  border-color: var(--brand-500);
  color: var(--brand-600);
  transform: translateY(-2px);
}

/* ── Glass panel (dark) ── */
.mb-glass {
  background: rgba(15,23,42,.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(148,163,184,.1);
  border-radius: var(--radius-2xl);
}
.mb-glass--glow {
  box-shadow: 0 0 60px rgba(14,165,233,.1);
  border-color: rgba(14,165,233,.2);
}

/* ── Architecture diagram (LIGHT theme) ── */
.mb-arch {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-2xl);
  padding: 3.5rem 2.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(59,130,246,.07), 0 2px 8px rgba(0,0,0,.04);
}
.mb-arch::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #38BDF8, #3b82f6, #8B5CF6);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}
.mb-arch__label {
  text-align: center;
  font-size: .65rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-600); margin-bottom: 3rem;
}
.mb-arch__inner { display: flex; flex-direction: column; align-items: center; }

/* ROI top node */
.mb-arch__roi {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border: 1.5px solid #6ee7b7;
  border-radius: var(--radius-xl);
  padding: 1.375rem 2.5rem;
  text-align: center;
  width: 18rem; margin-inline: auto;
  box-shadow: 0 4px 20px rgba(16,185,129,.12), 0 0 0 4px rgba(16,185,129,.06);
  animation: float 6s ease-in-out infinite;
}
.mb-arch__roi-icon { color: #059669; margin-inline: auto; margin-bottom: .5rem; }
.mb-arch__roi-title { font-size: 1.0625rem; font-weight: 800; color: var(--gray-900); margin-bottom: .2rem; }
.mb-arch__roi-sub   { font-size: .7rem; color: #065F46; font-weight: 500; }

/* connector SVGs */
.mb-arch__connector { margin: -4px 0; z-index: 1; position: relative; }
.mb-arch__connector--converge { overflow: visible; }

/* middle two nodes */
.mb-arch__mid { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; width: 100%; }
.mb-arch__node {
  flex: 1; min-width: 200px; max-width: 260px;
  border-radius: var(--radius-xl);
  padding: 1.75rem 1.5rem; text-align: center;
}
.mb-arch__node--model  {
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  border: 1px solid #c4b5fd;
  box-shadow: 0 2px 12px rgba(139,92,246,.08);
}
.mb-arch__node--deploy {
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border: 1px solid #7dd3fc;
  box-shadow: 0 2px 12px rgba(14,165,233,.08);
}
.mb-arch__node-icon {
  width: 3rem; height: 3rem;
  border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center;
  margin-inline: auto; margin-bottom: 1rem;
}
.mb-arch__node--model  .mb-arch__node-icon { background: #ede9fe; border: 1px solid #c4b5fd; color: #7C3AED; }
.mb-arch__node--deploy .mb-arch__node-icon { background: #e0f2fe; border: 1px solid #7dd3fc; color: #0284C7; }
.mb-arch__node-title { font-size: 1rem; font-weight: 700; color: var(--gray-900); margin-bottom: .5rem; }
.mb-arch__node-desc  { font-size: .75rem; color: var(--gray-600); line-height: 1.6; }

/* data source bar */
.mb-arch__sources {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: .875rem 1.75rem;
  display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap;
  width: fit-content; margin-inline: auto;
}
.mb-arch__source-item {
  display: flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-family: 'SF Mono', 'Fira Code', monospace;
  color: var(--gray-500); font-weight: 500;
}
.mb-arch__source-item svg { color: var(--gray-400); }

/* SVG flow lines */
.mb-flow-line { stroke-dasharray: 6 6; animation: dash-flow 1.5s linear infinite; }
.mb-flow-color { stroke: #3b82f6; }

/* ── Feature cards (light theme) ── */
.mb-feat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px)  { .mb-feat-grid { grid-template-columns: repeat(2, 1fr); } }

.mb-feat-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 2rem;
  display: flex; gap: 1.5rem; align-items: flex-start;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.mb-feat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(59,130,246,.08), 0 0 0 1px rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.2);
}
.mb-feat-icon {
  width: 3.25rem; height: 3.25rem; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mb-feat-icon--blue   { background: rgba(59,130,246,.1);  color: #2563EB; }
.mb-feat-icon--sky    { background: rgba(14,165,233,.1);   color: #0284C7; }
.mb-feat-icon--emerald{ background: rgba(16,185,129,.1);   color: #059669; }
.mb-feat-icon--violet { background: rgba(139,92,246,.1);   color: #7C3AED; }
.mb-feat-icon--amber  { background: rgba(245,158,11,.1);   color: #B45309; }
.mb-feat-icon--rose   { background: rgba(244,63,94,.1);    color: #BE123C; }

.mb-feat-title { font-size: 1rem; font-weight: 700; color: var(--gray-900); margin-bottom: .5rem; }
.mb-feat-badge { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--brand-500); background: rgba(59,130,246,.08); border-radius: var(--radius-full); padding: .2rem .6rem; display: inline-block; margin-bottom: .5rem; }
.mb-feat-desc  { font-size: .875rem; color: var(--gray-600); line-height: 1.7; }
.mb-feat-desc strong { color: var(--gray-800); font-weight: 600; }

/* ── Jay Lee advisor card ── */
.mb-advisor {
  background: rgba(15,23,42,.5);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(148,163,184,.1);
  border-radius: var(--radius-2xl);
  padding: 3rem;
  display: grid; gap: 3rem; align-items: center;
}
@media (min-width: 1024px) { .mb-advisor { grid-template-columns: 340px 1fr; } }

.mb-advisor__photo-wrap {
  position: relative;
  width: 220px; height: 220px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.15);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  margin-inline: auto;
}
.mb-advisor__photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.mb-advisor__photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, #030712 0%, transparent 50%);
  opacity: .85;
}
.mb-advisor__photo-name {
  position: absolute; bottom: 1rem; left: 1rem;
}
.mb-advisor__photo-name h3 { font-size: 1.0625rem; font-weight: 800; color: #fff; }
.mb-advisor__photo-name p  { font-size: .7rem; color: var(--sky-400); font-weight: 600; margin-top: .2rem; }

.mb-advisor__tags { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.5rem; }
.mb-advisor__tag {
  padding: .5rem .875rem;
  background: rgba(30,41,59,.8);
  border: 1px solid rgba(148,163,184,.12);
  border-radius: var(--radius-md);
  font-size: .78rem; font-weight: 500; color: #CBD5E1;
  display: flex; align-items: center; gap: .625rem;
}
.mb-advisor__tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sky-400); flex-shrink: 0; }

.mb-advisor__quote {
  position: relative;
  padding: 1.5rem 1.75rem;
  background: rgba(30,41,59,.4);
  border-radius: 0 var(--radius-xl) var(--radius-xl) var(--radius-xl);
  margin-bottom: 1.5rem;
}
.mb-advisor__quote::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, #38BDF8, #818CF8);
  border-radius: 4px;
}
.mb-advisor__quote p {
  font-size: 1rem; color: #E2E8F0; font-style: italic; line-height: 1.8; font-weight: 500;
}
.mb-advisor__body.page-product-maxblueprint { font-size: 1.2rem; color: #94A3B8; line-height: 1.5; }

/* ── 3P Framework section ── */
.mb-3p-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) { .mb-3p-grid { grid-template-columns: repeat(3, 1fr); } }

.mb-3p-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 2rem 1.75rem;
  text-align: center;
  transition: transform .3s, box-shadow .3s;
}
.mb-3p-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(59,130,246,.1);
}
.mb-3p-card__num {
  font-size: .65rem; font-weight: 800; letter-spacing: .16em;
  color: var(--gray-300); text-transform: uppercase; margin-bottom: .875rem;
}
.mb-3p-card__icon {
  width: 3.5rem; height: 3.5rem; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  margin-inline: auto; margin-bottom: 1.25rem;
}
.mb-3p-card__title { font-size: 1.1rem; font-weight: 800; color: var(--gray-900); margin-bottom: .5rem; }
.mb-3p-card__sub   { font-size: .8rem; font-weight: 600; color: var(--brand-500); margin-bottom: .875rem; }
.mb-3p-card__desc  { font-size: .8125rem; color: var(--gray-600); line-height: 1.7; }

/* ── Value table (light) ── */
.mb-value-grid {
  display: grid; gap: 3rem; align-items: start;
}
@media (min-width: 1024px) { .mb-value-grid { grid-template-columns: 1fr 1fr; } }

.mb-value-items { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.mb-value-item  { display: flex; gap: 1rem; align-items: flex-start; }
.mb-value-item__icon {
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mb-value-item__icon--blue   { background: rgba(59,130,246,.1);  color: #2563EB; }
.mb-value-item__icon--violet { background: rgba(139,92,246,.1);   color: #7C3AED; }
.mb-value-item__icon--emerald{ background: rgba(16,185,129,.1);   color: #059669; }
.mb-value-item__icon--amber  { background: rgba(245,158,11,.1);   color: #B45309; }
.mb-value-item__title { font-size: .9375rem; font-weight: 700; color: var(--gray-900); margin-bottom: .3rem; }
.mb-value-item__desc  { font-size: .8125rem; color: var(--gray-600); line-height: 1.7; }

/* Visual card on right */
.mb-value-visual {
  background: var(--gray-900);
  border-radius: var(--radius-2xl);
  padding: 2rem;
  color: #fff;
}
.mb-value-visual__header {
  font-size: .65rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sky-400); margin-bottom: 1.5rem;
}
.mb-roi-list { display: flex; flex-direction: column; gap: 1rem; }
.mb-roi-row {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-lg);
}
.mb-roi-icon {
  width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mb-roi-label { font-size: .8rem; font-weight: 600; color: #CBD5E1; flex: 1; }
.mb-roi-value { font-size: .875rem; font-weight: 800; }
.mb-roi-value--green  { color: #34D399; }
.mb-roi-value--blue   { color: #60A5FA; }
.mb-roi-value--violet { color: #A78BFA; }
.mb-roi-value--amber  { color: #FCD34D; }

/* ── CTA section ── */
.mb-cta {
  background: linear-gradient(165deg, #0f172a, #0d1b35);
  padding-block: 7rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mb-cta::before {
  content: '';
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 800px; height: 400px;
  background: radial-gradient(ellipse, rgba(56,189,248,.06) 0%, transparent 65%);
  pointer-events: none;
}
.mb-cta__inner { position: relative; z-index: 1; }
.mb-cta__title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 900; color: #fff; line-height: 1.15;
  letter-spacing: -.03em; margin-bottom: 1.25rem;
}
.mb-cta__body.page-product-maxblueprint { color: #94A3B8; font-size: 1.0625rem; line-height: 1.7; max-width: 38rem; margin-inline: auto 1.75rem auto; margin-bottom: 2.25rem; }
.mb-cta__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── Pill / badge ── */
.mb-pill {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .3rem .875rem;
  border-radius: var(--radius-full);
  font-size: .7rem; font-weight: 700;
}
.mb-pill--blue   { background: rgba(59,130,246,.1);  color: var(--brand-600); }
.mb-pill--sky    { background: rgba(14,165,233,.12);  color: #0284C7; }
.mb-pill--violet { background: rgba(139,92,246,.1);   color: #6D28D9; }
.mb-pill--emerald{ background: rgba(16,185,129,.1);   color: #047857; }

.mb-badge {
  display: inline-block;
  padding: .2rem .625rem;
  border-radius: var(--radius-full);
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
.mb-badge--sky   { background: rgba(14,165,233,.12); color: #0284C7; border: 1px solid rgba(14,165,233,.25); }
.mb-badge--green { background: rgba(16,185,129,.1);  color: #047857; border: 1px solid rgba(16,185,129,.25); }
.mb-badge--violet{ background: rgba(139,92,246,.1);  color: #6D28D9; border: 1px solid rgba(139,92,246,.25); }

/* ── Breadcrumb ── */
.mb-breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: #64748B; margin-bottom: 2rem; }
.mb-breadcrumb a { color: #94A3B8; }
.mb-breadcrumb a:hover { color: var(--sky-400); }
.mb-breadcrumb__sep { color: #334155; }

/* ── Section container z-index helpers ── */
.mb-arch-container { position: relative; z-index: 1; }

/* ── Utility classes (extracted from inline styles) ── */


/* Arch section (light background) */
.mb-section--arch { background: var(--gray-50); }

/* ROI section heading */
.mb-roi-heading {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700; color: var(--gray-900);
  line-height: 1.2; margin-bottom: 1rem;
}

/* ROI intro paragraph */
.mb-roi-intro {
  color: var(--gray-600); line-height: 1.75; margin-bottom: 2rem;
}

/* Badge tag row */
.mb-badge-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* Advisor body strong */
.mb-advisor__body strong { color: #CBD5E1; font-weight: 600; }

/* ROI data footer note */
.mb-roi-footnote {
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: .7rem; color: #475569; text-align: center;
}

/* ROI icon color variants — extracted from inline style= */
.mb-roi-icon--green  { background: rgba(16,185,129,.15);  color: #34D399; }
.mb-roi-icon--blue   { background: rgba(59,130,246,.15);  color: #60A5FA; }
.mb-roi-icon--violet { background: rgba(139,92,246,.15);  color: #A78BFA; }
.mb-roi-icon--amber  { background: rgba(245,158,11,.15);  color: #FCD34D; }

/* CTA body max-width */
.mb-cta__body.page-product-maxblueprint { color: #94A3B8; font-size: 1.0625rem; line-height: 1.7; max-width: 38rem; margin-inline: auto; margin-bottom: 2.25rem; }
@media (max-width: 767px) {
  .mb-section { padding-block: 4rem; }
  .mb-advisor { grid-template-columns: 1fr; }
  .mb-cta { padding-block: 5rem; }
}