/* ─── MOTUS LANDING PAGE ORTAK STILLERI ─── */
.mbs-wrap { color: #1A2236; -webkit-font-smoothing: antialiased; }
.mbs-wrap *, .mbs-wrap *::before, .mbs-wrap *::after { box-sizing: border-box; }
.mbs-wrap {
  --mb-primary: #1355E8;
  --mb-shadow-lg: 0 12px 40px rgba(19,85,232,.12);
}

/* ─── HERO ─── */
.mbs-hero {
  background: linear-gradient(135deg, #0A1C4A 0%, #1355E8 55%, #1E78FF 100%);
  position: relative;
  overflow: hidden;
  padding: 80px 5% 70px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  min-height: 540px;
  border-radius: 16px;
}
.mbs-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E");
  pointer-events: none;
}
.mbs-hero::after {
  content: '';
  position: absolute;
  right: -100px; top: -100px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,43,.15) 0%, transparent 70%);
  pointer-events: none;
}
.mbs-hero-content { position: relative; z-index: 1; }

.mbs-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: white;
  font-weight: 600;
  padding: .35rem .9rem;
  border-radius: 999px;
  margin-bottom: 1.4rem;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.mbs-badge-dot {
  width: 6px; height: 6px;
  background: #4ADE80;
  border-radius: 50%;
  flex-shrink: 0;
  animation: mbsPulse 2s infinite;
}
@keyframes mbsPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.3)} }

.mbs-hero-content h1 {
  font-weight: 800 !important;
  color: white !important;
  letter-spacing: -1px !important;
  margin-bottom: 1.1rem !important;
}
.mbs-hero-content p {
  color: rgba(255,255,255,.82) !important;
  margin-bottom: 1.8rem !important;
  max-width: 500px;
}

.mbs-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.mbs-btn-white {
  background: white !important;
  color: #1355E8 !important;
  padding: .8rem 1.6rem !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: transform .2s, box-shadow .2s !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.15) !important;
  display: inline-block !important;
  border: none !important;
}
.mbs-btn-white:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 30px rgba(0,0,0,.2) !important; color: #1355E8 !important; text-decoration: none !important; }
.mbs-btn-ghost {
  background: transparent !important;
  color: white !important;
  border: 2px solid rgba(255,255,255,.4) !important;
  padding: .8rem 1.6rem !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: border-color .2s !important;
  display: inline-block !important;
}
.mbs-btn-ghost:hover { border-color: white !important; color: white !important; text-decoration: none !important; }

.mbs-hero-stats {
  display: flex;
  gap: 2.2rem;
  margin-top: 2.2rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(255,255,255,.15);
  flex-wrap: wrap;
}
.mbs-stat-num { font-weight: 800; color: white; }
.mbs-stat-lbl { color: rgba(255,255,255,.6); margin-top: .15rem; }

/* Screen mockup */
.mbs-hero-visual { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; }
.mbs-screen {
  background: white;
  border-radius: 16px;
  box-shadow: 0 40px 80px rgba(0,0,0,.3);
  overflow: hidden;
  width: 100%;
  max-width: 400px;
}
.mbs-screen-bar {
  background: #F3F6FC;
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
  border-bottom: 1px solid #E4E9F2;
}
.mbs-screen-dot { width: 10px; height: 10px; border-radius: 50%; }
.mbs-screen-body { padding: 18px; }
.mbs-screen-title { font-weight: 700; color: #0D1526; margin-bottom: 10px; }
.mbs-screen-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 10px;
  border-radius: 7px;
  margin-bottom: 5px;
}
.mbs-screen-row:nth-child(odd) { background: #F3F6FC; }
.mbs-screen-row span:last-child { font-weight: 700; color: #1355E8; }
.mbs-screen-total {
  margin-top: 10px;
  padding: 13px;
  background: #1355E8;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}
.mbs-screen-total .mbs-lbl { opacity: .85; }
.mbs-screen-total .mbs-val { font-weight: 800; }

/* ─── SECTION HELPERS ─── */
.mbs-section { padding: 65px 0; }
.mbs-section-bg { background: #F3F6FC; padding: 65px 0; }
.mbs-section-dark { background: #0D1526; padding: 65px 0; }

.mbs-section-label {
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #1355E8;
  margin-bottom: .5rem;
}
.mbs-section-label-light { color: #60A5FA; }
.mbs-section-title {
  font-weight: 800 !important;
  color: #0D1526 !important;
  letter-spacing: -.5px !important;
  margin-bottom: .8rem !important;
}
.mbs-section-title-light { color: white !important; }
.mbs-section-sub { color: #6B7A99; max-width: 540px; margin-bottom: 0; }
.mbs-section-sub-light { color: rgba(255,255,255,.6); }

/* ─── SECTORS ─── */
.mbs-sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .9rem;
  margin-top: 2.5rem;
}
.mbs-sector-card {
  background: white;
  border: 1px solid #E4E9F2;
  border-radius: 12px;
  padding: 1.1rem .8rem;
  text-align: center;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  cursor: default;
}
.mbs-sector-card:hover {
  border-color: #1355E8;
  box-shadow: var(--mb-shadow-lg);
  transform: translateY(-3px);
}
.mbs-sector-icon { font-size: 1.8rem; margin-bottom: .4rem; display: block; color: #1355E8; }
.mbs-sector-name { font-weight: 600; color: #3D4A63; }

/* ─── MODULES ─── */
.mbs-modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.4rem;
  margin-top: 2.5rem;
}
.mbs-module-card {
  border: 1.5px solid #E4E9F2;
  border-radius: 16px;
  padding: 1.6rem;
  transition: border-color .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
  background: white;
}
.mbs-module-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: #1355E8;
  transform: scaleX(0);
  transition: transform .3s;
  transform-origin: left;
}
.mbs-module-card:hover { border-color: #1355E8; box-shadow: var(--mb-shadow-lg); }
.mbs-module-card:hover::before { transform: scaleX(1); }
.mbs-module-icon {
  width: 46px; height: 46px;
  background: #EEF3FF;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: .9rem;
  color: #1355E8;
}
.mbs-module-title { font-weight: 700; color: #0D1526; margin-bottom: .5rem; }
.mbs-module-desc { color: #6B7A99; }
.mbs-module-feats { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid #E4E9F2; padding-left: 0; }
.mbs-module-feats li {
  list-style: none;
  color: #3D4A63;
  padding: .25rem 0 .25rem 1.1rem;
  position: relative;
  margin: 0;
}
.mbs-module-feats li::before {
  content: '\f00c';
  font-family: FontAwesome;
  position: absolute;
  left: 0;
  color: #12B76A;
  font-size: .75rem;
}

/* ─── FEATURES HIGHLIGHT ─── */
.mbs-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.4rem;
  margin-top: 2.5rem;
}
.mbs-feature-card {
  background: white;
  border: 1px solid #E4E9F2;
  border-radius: 14px;
  padding: 1.6rem;
  transition: box-shadow .2s, transform .2s;
}
.mbs-feature-card:hover { box-shadow: var(--mb-shadow-lg); transform: translateY(-3px); }
.mbs-feature-icon {
  width: 42px; height: 42px;
  background: #EEF3FF;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: .8rem;
  color: #1355E8;
}
.mbs-feature-title { font-weight: 700; color: #0D1526; margin-bottom: .4rem; }
.mbs-feature-desc { color: #6B7A99; line-height: 1.6; }

/* ─── DEVICES ─── */
.mbs-devices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.mbs-device-list { margin-top: 2rem; display: flex; flex-direction: column; gap: .9rem; }
.mbs-device-item {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: .9rem 1.1rem;
  transition: background .2s;
}
.mbs-device-item:hover { background: rgba(255,255,255,.08); }
.mbs-device-icon { font-size: 1.7rem; flex-shrink: 0; color: #60A5FA; }
.mbs-device-name { font-weight: 600; color: white; }
.mbs-device-desc { color: rgba(255,255,255,.5); }

.mbs-device-visual { display: flex; justify-content: center; align-items: center; }
.mbs-device-showcase { position: relative; width: 260px; height: 310px; }
.mbs-d-card {
  position: absolute;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 1.1rem;
  backdrop-filter: blur(10px);
}
.mbs-d-card-1 { top: 0; left: 0; width: 150px; }
.mbs-d-card-2 { bottom: 0; right: 0; width: 165px; }
.mbs-d-card-3 { top: 55px; right: 0; width: 135px; }
.mbs-d-lbl { color: rgba(255,255,255,.5); margin-bottom: .25rem; }
.mbs-d-val { font-weight: 700; color: white; }
.mbs-d-sub { color: #4ADE80; margin-top: .15rem; }
.mbs-d-sub-warn { color: #FCD34D; }

/* ─── STEPS ─── */
.mbs-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.mbs-step {
  text-align: center;
  padding: 1.8rem 1.3rem;
  background: white;
  border-radius: 14px;
  border: 1px solid #E4E9F2;
}
.mbs-step-num {
  width: 46px; height: 46px;
  background: #1355E8;
  color: white;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 8px 20px rgba(19,85,232,.3);
}
.mbs-step-title { font-weight: 700; color: #0D1526; margin-bottom: .45rem; }
.mbs-step-desc { color: #6B7A99; }

/* ─── COMPARE TABLE ─── */
.mbs-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #E4E9F2;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  margin-top: 2.5rem;
}
.mbs-compare-table th {
  padding: 1.1rem 1.4rem;
  font-weight: 700;
  text-align: left;
  border-bottom: 2px solid #E4E9F2;
}
.mbs-compare-table th:first-child { background: #F3F6FC; color: #6B7A99; }
.mbs-compare-table th.mbs-th-primary { background: #EEF3FF; color: #1355E8; text-align: center; }
.mbs-compare-table th.mbs-th-other { background: #F3F6FC; color: #6B7A99; text-align: center; }
.mbs-recommend-badge {
  display: inline-block;
  background: #1355E8;
  color: white;
  padding: .15rem .55rem;
  border-radius: 999px;
  margin-left: .4rem;
  vertical-align: middle;
  font-weight: 700;
}
.mbs-compare-table td { padding: .85rem 1.4rem; border-bottom: 1px solid #E4E9F2; }
.mbs-compare-table tr:last-child td { border-bottom: none; }
.mbs-compare-table td.mbs-td-primary { background: rgba(19,85,232,.03); text-align: center; font-weight: 600; color: #1355E8; }
.mbs-compare-table td.mbs-td-other { text-align: center; color: #6B7A99; }
.mbs-compare-table td:first-child { color: #3D4A63; }
.mbs-check { color: #12B76A; }
.mbs-cross { color: #EF4444; }

/* ─── CTA BANNER ─── */
.mbs-cta {
  background: linear-gradient(135deg, #1355E8 0%, #1E78FF 100%);
  border-radius: 20px;
  padding: 60px 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mbs-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='1.5' fill='rgba(255,255,255,0.06)'/%3E%3C/svg%3E");
  pointer-events: none;
}
.mbs-cta h2 { font-weight: 800 !important; color: white !important; margin-bottom: .9rem !important; position: relative; }
.mbs-cta p { color: rgba(255,255,255,.8) !important; margin-bottom: 2rem !important; position: relative; }
.mbs-cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; }
.mbs-btn-cta-white {
  background: white !important;
  color: #1355E8 !important;
  padding: .9rem 2rem !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.15) !important;
  transition: transform .2s !important;
  display: inline-block !important;
}
.mbs-btn-cta-white:hover { transform: translateY(-2px) !important; color: #1355E8 !important; text-decoration: none !important; }
.mbs-btn-cta-ghost {
  background: transparent !important;
  color: white !important;
  border: 2px solid rgba(255,255,255,.5) !important;
  padding: .9rem 2rem !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: border-color .2s !important;
  display: inline-block !important;
}
.mbs-btn-cta-ghost:hover { border-color: white !important; color: white !important; text-decoration: none !important; }

/* ─── PRICING ─── */
.mbs-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.mbs-price-card {
  background: white;
  border: 2px solid #E4E9F2;
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.mbs-price-card:hover { border-color: #1355E8; box-shadow: var(--mb-shadow-lg); transform: translateY(-3px); }
.mbs-price-card.mbs-price-featured { border-color: #1355E8; box-shadow: var(--mb-shadow-lg); position: relative; }
.mbs-price-header { margin-bottom: 1.5rem; }
.mbs-price-icon {
  width: 56px; height: 56px;
  background: #EEF3FF;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto .8rem;
  color: #1355E8;
}
.mbs-price-name { font-weight: 700; color: #0D1526; margin-bottom: .3rem; }
.mbs-price-desc { color: #6B7A99; }
.mbs-price-amount { margin-bottom: 1.5rem; }
.mbs-price-old { text-decoration: line-through; color: #9CA3AF; margin-bottom: .3rem; }
.mbs-price-current { font-weight: 800; color: #1355E8; }
.mbs-price-current span { font-size: 1rem; font-weight: 400; color: #6B7A99; }
.mbs-price-period { color: #6B7A99; }
.mbs-price-features { text-align: left; margin-bottom: 1.5rem; padding-left: 0; }
.mbs-price-features li {
  list-style: none;
  padding: .35rem 0 .35rem 1.3rem;
  position: relative;
  color: #3D4A63;
}
.mbs-price-features li::before {
  content: '\f00c';
  font-family: FontAwesome;
  position: absolute;
  left: 0;
  color: #12B76A;
  font-size: .8rem;
}
.mbs-price-btn {
  display: block;
  background: #1355E8;
  color: white !important;
  padding: .75rem 1.5rem;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background .2s, transform .2s;
}
.mbs-price-btn:hover { background: #0D47D1; transform: translateY(-1px); color: white !important; text-decoration: none !important; }
.mbs-price-tag {
  position: absolute;
  top: -1px; right: 20px;
  background: #1355E8;
  color: white;
  padding: .3rem .8rem;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  font-size: .85rem;
}

/* ─── TEMPLATE 2: SORUN-ÇÖZÜM (zigzag) ─── */
.mbs-problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-top: 2.5rem;
}
.mbs-problem-grid.mbs-reverse { direction: rtl; }
.mbs-problem-grid.mbs-reverse > * { direction: ltr; }
.mbs-problem-box, .mbs-solution-box {
  padding: 2rem;
  border-radius: 16px;
}
.mbs-problem-box {
  background: #FEF2F2;
  border: 1px solid #FECACA;
}
.mbs-problem-box h3 { color: #DC2626; font-weight: 700; margin-bottom: .6rem; }
.mbs-problem-box p { color: #7F1D1D; }
.mbs-solution-box {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
}
.mbs-solution-box h3 { color: #16A34A; font-weight: 700; margin-bottom: .6rem; }
.mbs-solution-box p { color: #14532D; }

/* ─── TEMPLATE 2: FAQ ─── */
.mbs-faq-list { margin-top: 2.5rem; max-width: 800px; margin-left: auto; margin-right: auto; }
.mbs-faq-item {
  background: white;
  border: 1px solid #E4E9F2;
  border-radius: 12px;
  margin-bottom: .8rem;
  overflow: hidden;
  transition: box-shadow .2s;
}
.mbs-faq-item:hover { box-shadow: var(--mb-shadow-lg); }
.mbs-faq-q {
  padding: 1.2rem 1.5rem;
  font-weight: 700;
  color: #0D1526;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.mbs-faq-q::after {
  content: '\f107';
  font-family: FontAwesome;
  color: #1355E8;
  font-size: 1.2rem;
  transition: transform .3s;
}
.mbs-faq-item.active .mbs-faq-q::after { transform: rotate(180deg); }
.mbs-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
  padding: 0 1.5rem;
  color: #6B7A99;
  line-height: 1.7;
}
.mbs-faq-item.active .mbs-faq-a {
  max-height: 300px;
  padding: 0 1.5rem 1.2rem;
}

/* ─── TEMPLATE 2: STATS BAND ─── */
.mbs-stats-band {
  background: linear-gradient(135deg, #0A1C4A 0%, #1355E8 100%);
  border-radius: 16px;
  padding: 3rem 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
  text-align: center;
  margin-top: 2.5rem;
}
.mbs-stats-item {}
.mbs-stats-num { font-size: 2.5rem; font-weight: 800; color: white; }
.mbs-stats-label { color: rgba(255,255,255,.7); margin-top: .3rem; }

/* ─── TEMPLATE 2: ZIGZAG FEATURES ─── */
.mbs-zigzag { margin-top: 2.5rem; }
.mbs-zigzag-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 3rem;
  padding: 2rem;
  background: white;
  border-radius: 16px;
  border: 1px solid #E4E9F2;
  transition: box-shadow .2s;
}
.mbs-zigzag-row:hover { box-shadow: var(--mb-shadow-lg); }
.mbs-zigzag-row:nth-child(even) { direction: rtl; }
.mbs-zigzag-row:nth-child(even) > * { direction: ltr; }
.mbs-zigzag-icon {
  width: 80px; height: 80px;
  background: #EEF3FF;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1rem;
  color: #1355E8;
}
.mbs-zigzag-title { font-weight: 700; color: #0D1526; margin-bottom: .5rem; }
.mbs-zigzag-desc { color: #6B7A99; line-height: 1.7; }

/* ─── TEMPLATE 2: TIMELINE STEPS ─── */
.mbs-timeline { margin-top: 2.5rem; position: relative; max-width: 700px; margin-left: auto; margin-right: auto; }
.mbs-timeline::before {
  content: '';
  position: absolute;
  left: 24px; top: 0; bottom: 0;
  width: 3px;
  background: #E4E9F2;
}
.mbs-timeline-item {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
  position: relative;
}
.mbs-timeline-dot {
  width: 50px; height: 50px;
  min-width: 50px;
  background: #1355E8;
  color: white;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(19,85,232,.3);
  z-index: 1;
}
.mbs-timeline-content {
  background: white;
  border: 1px solid #E4E9F2;
  border-radius: 12px;
  padding: 1.2rem 1.5rem;
  flex: 1;
}
.mbs-timeline-title { font-weight: 700; color: #0D1526; margin-bottom: .3rem; }
.mbs-timeline-desc { color: #6B7A99; }

/* ─── TEMPLATE 3: NUMBERED BENEFITS ─── */
.mbs-benefits { margin-top: 2.5rem; }
.mbs-benefit-item {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.5rem;
  border-bottom: 1px solid #E4E9F2;
}
.mbs-benefit-item:last-child { border-bottom: none; }
.mbs-benefit-num {
  width: 44px; height: 44px;
  min-width: 44px;
  background: linear-gradient(135deg, #1355E8, #1E78FF);
  color: white;
  font-weight: 800;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mbs-benefit-title { font-weight: 700; color: #0D1526; margin-bottom: .3rem; }
.mbs-benefit-desc { color: #6B7A99; line-height: 1.6; }

/* ─── TEMPLATE 3: BEFORE/AFTER ─── */
.mbs-ba-grid {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 0;
  align-items: stretch;
  margin-top: 2.5rem;
}
.mbs-ba-col {
  padding: 2rem;
  border-radius: 16px;
}
.mbs-ba-before {
  background: #FEF2F2;
  border: 1px solid #FECACA;
}
.mbs-ba-before h3 { color: #DC2626; font-weight: 700; margin-bottom: 1rem; }
.mbs-ba-after {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
}
.mbs-ba-after h3 { color: #16A34A; font-weight: 700; margin-bottom: 1rem; }
.mbs-ba-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #1355E8;
}
.mbs-ba-list { padding-left: 0; }
.mbs-ba-list li {
  list-style: none;
  padding: .4rem 0 .4rem 1.3rem;
  position: relative;
}
.mbs-ba-before .mbs-ba-list li::before {
  content: '\f00d';
  font-family: FontAwesome;
  position: absolute;
  left: 0;
  color: #EF4444;
}
.mbs-ba-after .mbs-ba-list li::before {
  content: '\f00c';
  font-family: FontAwesome;
  position: absolute;
  left: 0;
  color: #12B76A;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  .mbs-hero { grid-template-columns: 1fr !important; padding: 50px 20px !important; }
  .mbs-hero-visual { display: none !important; }
  .mbs-devices-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .mbs-device-visual { display: none !important; }
  .mbs-hero-stats { gap: 1.2rem !important; }
  .mbs-cta { padding: 40px 25px !important; }
  .mbs-features-grid { grid-template-columns: 1fr !important; }
  .mbs-price-grid { grid-template-columns: 1fr !important; }
  .mbs-problem-grid { grid-template-columns: 1fr !important; }
  .mbs-zigzag-row { grid-template-columns: 1fr !important; }
  .mbs-zigzag-row:nth-child(even) { direction: ltr !important; }
  .mbs-ba-grid { grid-template-columns: 1fr !important; }
  .mbs-ba-arrow { transform: rotate(90deg); padding: 1rem 0; }
  .mbs-stats-band { grid-template-columns: 1fr 1fr !important; }
}

@keyframes mbsFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.mbs-fu { animation: mbsFadeUp .6s ease forwards; opacity: 0; }
.mbs-fu-1 { animation-delay: .1s; }
.mbs-fu-2 { animation-delay: .2s; }