/* ==========================================================================
   Business Tools — an intro panel and five tool panels switched by the tab
   strip. Layout keeps the original page-builder geometry: rows of columns,
   stacked widgets with 20px spacing, and images overlapping via negative
   margins.
   ========================================================================== */

body { background: #fff; }

.bt { display: flex; flex-wrap: wrap; align-content: flex-start; margin-top: 30px; }
.bt > * { width: 100%; }

/* Rows, columns and widget stacks */
.row { position: relative; display: flex; max-width: 1200px; margin: 0 auto; }
.col { position: relative; display: flex; min-height: 1px; width: 50%; }
.stack {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  width: 100%;
}
.stack > * { position: relative; width: 100%; }
.stack > :not(:last-child) { margin-bottom: 20px; }
.stack > .fixed-w:not(:last-child),
.stack > .abs:not(:last-child) { margin-bottom: 0; }
.abs { position: absolute !important; z-index: 1; top: 100%; }

.img { text-align: center; }
.img img,
.img .ghost { display: inline-block; vertical-align: middle; max-width: 100%; }
.img-left { text-align: left; }
.img-right { text-align: right; }
.z10 { z-index: 10; }
.z0 { z-index: 0; }
/* Placeholders for animations that were fully transparent in the original. */
.ghost { opacity: 0; }

.text { line-height: 20px; }
.text p { margin: 0 0 1.75em; }
.title { font-size: 40px; text-align: left; }
.subtitle { color: #7a7a7a; font-size: 24px; text-align: left; }
.body { color: var(--nav); font-size: 20px; text-align: justify; }
.explore { width: 100%; font-size: 18px; font-weight: 500; line-height: 20px; text-align: center; }
.explore p { margin: 0 0 1.75em; }
.explore > * { margin-right: -127%; }

/* Buttons */
.btn-cell { align-self: center; }
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 0 solid;
  border-radius: 10px;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  text-transform: capitalize;
  transition: all .3s;
}
.btn--blue { background-image: linear-gradient(180deg, #3a98d7 0%, #166aa1 100%); color: #fff; }
.btn--red { background-image: linear-gradient(90deg, #c01823 0%, #ff5b5b 100%); color: #fff; }
.btn--outline { border-width: 1px; border-color: #2d94d8; color: #2d94d8; }
.btn--outline-red { border-width: 1px; border-color: #c01823; color: #c01823; }
.w40 { width: 40%; }
.w60 { width: 60%; }

/* Panels: only the selected one shows; columns slide in when revealed. */
.panel { display: none; margin-top: 20px; padding-bottom: 40px; }
.panel.is-active { display: block; }
.panel > .row { min-height: 71.9vh; }
.panel .col:first-child { width: 44%; }
.panel .col:last-child { width: 56%; }
.panel .col:first-child > .stack { padding-right: 50px; }

.slide-left, .slide-right { visibility: hidden; }
.slide-left.in, .slide-right.in { visibility: visible; animation: .75s both; }
.slide-left.in { animation-name: slide-in-left; }
.slide-right.in { animation-name: slide-in-right; }
@keyframes slide-in-left { from { transform: translate3d(-100%, 0, 0); visibility: visible; } to { transform: none; } }
@keyframes slide-in-right { from { transform: translate3d(100%, 0, 0); visibility: visible; } to { transform: none; } }

/* Intro */
#intro { margin-top: 0; }
#intro > .row { max-width: 1206px; min-height: 33.9vw; }
#intro .col:first-child,
#intro .col:last-child { width: 50%; }
#intro .col:first-child > .stack { padding-right: 0; }
#intro .col:last-child > .stack { margin-top: 80px; }
.bots-logo { text-align: left; }
.bots-logo > div { margin: 0 0 -10px -92px; }
.bots-logo img { width: 30%; }
.tagline { width: 100.46%; max-width: 100.46%; font-size: 35px; line-height: 35px; text-align: left; }
.tagline > div { color: #4cacec; font-size: 20px; }
.explore--intro { left: 0; }
.explore--intro > * { margin-right: -100%; }
.dash > div { margin-bottom: -65px; }
.dash img { max-width: 95%; }
.dash-graph > div { margin: -375px 0 0 -100px; }
.dash-graph .ghost { width: 25%; aspect-ratio: 1000 / 754; }
.dash-counter > div { margin-top: -115px; }
.dash-counter .ghost { width: 20%; aspect-ratio: 1; }
.dash-radar > div { margin: -400px -200px 0 0; }
.dash-radar img { max-width: 50%; }

/* Populator */
#populator > .row { min-height: 32.6vw; }
#populator .col:first-child { width: 45%; }
#populator .col:last-child { width: 55%; }
#populator .subtitle > div { margin-bottom: -30px; }
#populator .body > div { margin-bottom: -25px; }
.shot > div { margin-top: 50px; }
.shot img { max-width: 85%; }
.pop-circles > div { margin: -140px 0 0 20px; }
.pop-circles .ghost { width: 15%; aspect-ratio: 1000 / 1004; }
.pop-radar > div { margin-top: -425px; }
.pop-radar img { max-width: 60%; }

/* Investor Retail */
#investor > .row { min-height: 32.6vw; }
#investor .subtitle > div { margin-bottom: -35px; }
#investor .body > div { margin-bottom: -5px; }
.inv-shot > div { margin-bottom: -50px; }
.inv-shot img { max-width: 85%; }
.inv-red > div { margin: -100px 0 0 15px; }
.inv-red .ghost { width: 17%; aspect-ratio: 1; }

/* iPort */
.iport-name { width: 18%; font-size: 24px; }
.iport-name > div { margin-top: 35px; }
.iport-icon { width: 82%; }
.iport-icon > div { margin: 35px 0 0 -5px; }
.iport-icon .icon { display: inline-block; font-size: 40px; line-height: 1; }
.iport-icon svg { display: block; width: 1em; height: 1em; }
#iport .subtitle { width: 90%; }
#iport .subtitle > div { margin-bottom: -35px; }
.iport-body { font-size: 17px; }
.iport-body > div { margin: 5px 0 -35px; }
.iport-body ul { margin: 0 0 1.5em 3em; padding: 0; }
.iport-radar > div { margin: -400px -200px 0 0; }
.iport-radar img { max-width: 45%; }

/* R.E.D. */
.red-name { width: 40%; color: #c01823; }
.red-pulse { width: 56%; }
.red-pulse > div { margin: 0 0 11px -200px; }
.red-pulse .ghost { width: 23%; aspect-ratio: 1000 / 814; }
#red .subtitle > div { margin: -20px 0 -35px; }
#red .body > div { margin-bottom: -5px; }
.red-bar > div { margin: -120px 105px 0 0; }
.red-bar .ghost { width: 10%; aspect-ratio: 148 / 120; }

/* Van Man */
#vanman .subtitle > div { margin-bottom: -35px; }
#vanman .body > div { margin-bottom: -5px; }
.van-shot img { max-width: 84%; }
.van-cta { color: #4cacec; }
.van-radar > div { margin: -420px -200px 0 0; }
.van-radar img { max-width: 44%; }
#vanman .explore > * { margin-right: -126%; }

/* Tab strip */
.tabs { margin-bottom: 30px; }
.tabs .col { width: 20%; }
.tabs .stack { margin: 0 15px; }
.tab { cursor: pointer; }
.tab-on { display: none; }
.tab-on > div { margin-top: -20px; }
.tabs .col.is-selected .tab-off { display: none; }
.tabs .col.is-selected .tab-on { display: block; }

@media (max-width: 1024px) {
  .row { flex-wrap: wrap; }
  .rev > .col:first-child { order: 10; }
}

@media (max-width: 767px) {
  .col,
  .panel .col:first-child,
  .panel .col:last-child,
  #intro .col:first-child,
  #intro .col:last-child,
  #populator .col:first-child,
  #populator .col:last-child,
  .tabs .col { width: 100%; }
  .panel { margin-top: -30px; }
  #intro { margin-top: 0; padding-bottom: 0; }
  .panel .col:first-child > .stack { padding: 0 25px; }
  #intro .col:first-child > .stack { padding: 0 20px; }
  #intro .col:last-child > .stack { margin-top: 0; }

  .bots-logo > div { margin: 0; }
  .bots-logo img { width: 40%; }
  .tagline { width: 100%; max-width: 100%; font-size: 14px; line-height: 20px; }
  .explore--intro { width: 50%; top: 140px; font-size: 16px; }
  .dash-graph > div { margin: -170px 0 0 -25px; }
  .dash-graph .ghost { width: 40%; }
  .dash-counter > div { margin: -50px 0 0 10px; }
  .dash-counter .ghost { width: 17%; }
  .dash-radar > div { margin: -235px -90px 0 0; }

  .title { font-size: 25px; }
  .subtitle { font-size: 18px; }
  .body, .iport-body { font-size: 14px; }
  .btn { font-size: 12px; }
  .w40 { width: 50%; }
  .w60 { width: 50%; }
  .w60 > div { margin-left: -15px; }
  #populator .w60 { width: 46%; }
  .explore { width: 50%; }
  .explore > *, #vanman .explore > * { margin-right: -70%; }
  #populator .explore { top: 109%; }
  #investor .explore { top: 113%; }
  #iport .explore { top: 105%; }
  #red .explore { top: 110%; }
  #vanman .explore { top: 107%; }

  .shot > div { margin: 0 0 0 15px; }
  .shot img, .inv-shot img, .van-shot img { max-width: 100%; }
  .pop-circles > div { margin: -90px 0 0 10px; }
  .pop-radar > div { margin-top: -292px; }
  .pop-radar img { max-width: 65%; }
  .inv-shot > div { margin: 0 0 0 15px; }
  .inv-red > div { margin: -120px 270px 0 0; }
  .inv-red .ghost { width: 70%; }
  .iport-name { width: 28%; font-size: 25px; }
  .iport-icon { width: 31%; }
  .iport-radar > div { margin: -260px -88px 0 0; }
  .iport-radar img { max-width: 50%; }
  .red-name { width: 44%; }
  .red-pulse { width: 55%; }
  .red-pulse > div { margin: 0 0 0 -200px; }
  .red-pulse .ghost { width: 22%; }
  #red .subtitle > div { margin: -10px 0 -35px; }
  .red-bar > div { margin: -95px 30px 0 0; }
  .red-bar .ghost { width: 15%; }
  .van-radar > div { margin: -285px -90px 0 0; }
  .van-radar img { max-width: 50%; }

  .tabs { margin-bottom: 0; }
  .tabs .stack { margin: 0; }
  .tabs .col:first-child .stack { margin-top: 20px; }
  .tab img { width: 44%; }
  .tab-on > div { margin: 0 0 20px; }
}

.ink { color: #000; }
.red { color: #c01823; }
.accent { color: #4cacec; }

/* Arabic: screenshots and radars overlap by design, so keep the geometry and flip text only. */
[dir="rtl"] .bt .row { direction: ltr; }
[dir="rtl"] .bt .col:first-child .stack { direction: rtl; }
[dir="rtl"] .bt .title,
[dir="rtl"] .bt .subtitle,
[dir="rtl"] .bt .tagline { text-align: right; }
[dir="rtl"] .bt .iport-body ul { margin: 0 3em 1.5em 0; }
[dir="rtl"] .bt { overflow-x: clip; }
[dir="rtl"] .bt .explore { direction: ltr; }
[dir="rtl"] .bt .explore { left: 0; width: 100%; }
[dir="rtl"] .bt .explore > * { margin: 0 !important; }