/* enterprise-it-solutions: uses shared design-system components. Add page-specific styles here. */



/*section 1 start here*/



/* =========================================================
   SINDYBAD ENTERPRISE IT HERO
   Section only / fully scoped / no global styles
========================================================= */

.sbit-hero,
.sbit-hero * {
  box-sizing: border-box;
}


.sbit-hero {
  --sbit-bg: #050816;
  --sbit-bg-2: #08111f;

  --sbit-panel: #0d1728;
  --sbit-panel-2: #111d31;

  --sbit-line:
    rgba(148,163,184,.16);

  --sbit-line-blue:
    rgba(96,165,250,.28);

  --sbit-text: #F8FBFF;
  --sbit-muted: #9FB0C7;

  --sbit-blue: #2F6BFF;
  --sbit-blue-2: #60A5FA;

  --sbit-cyan: #22D3EE;
  --sbit-green: #22C55E;
  --sbit-lime: #A3E635;

  position: relative;
  isolation: isolate;

  width: 100%;
  min-height:
    calc(100svh - 72px);

  overflow: hidden;

  color:
    var(--sbit-text);

  background:
    var(--sbit-bg);
}


/* =========================================================
   AMBIENT
========================================================= */

.sbit-hero
.sbit-hero__ambient {
  position: absolute;
  z-index: -2;

  inset: 0;

  overflow: hidden;

  pointer-events: none;
}


.sbit-hero
.sbit-hero__ambient-grid {
  position: absolute;

  inset: 0;

  opacity: .13;

  background-image:
    linear-gradient(
      rgba(96,165,250,.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96,165,250,.05) 1px,
      transparent 1px
    );

  background-size:
    70px 70px;
}


.sbit-hero
.sbit-hero__ambient-glow {
  position: absolute;

  top: -30%;
  left: -14%;

  width:
    min(46vw,760px);

  aspect-ratio: 1;

  border-radius: 50%;

  opacity: .12;

  background:
    var(--sbit-blue);

  filter:
    blur(120px);
}


.sbit-hero
.sbit-hero__ambient-line {
  position: absolute;

  top: 0;
  left: 5%;

  width: 120px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      var(--sbit-blue),
      var(--sbit-green)
    );
}


/* =========================================================
   SHELL
========================================================= */

.sbit-hero
.sbit-hero__shell {
  display: grid;

  grid-template-columns:
    minmax(390px,42%)
    minmax(0,58%);

  width: 100%;

  min-height:
    calc(100svh - 72px);
}


/* =========================================================
   COPY
========================================================= */

.sbit-hero
.sbit-hero__copy {
  position: relative;

  display: flex;

  align-items: center;

  min-width: 0;

  padding:
    clamp(54px,6vh,84px)
    clamp(38px,4.8vw,88px)
    clamp(54px,6vh,84px);

  background:
    radial-gradient(
      580px 420px
      at 84% 12%,
      rgba(47,107,255,.075),
      transparent 64%
    ),
    var(--sbit-bg);
}


.sbit-hero
.sbit-hero__copy-inner {
  width: 100%;
  max-width: 690px;

  margin-left: auto;
}


/* =========================================================
   TOPLINE
========================================================= */

.sbit-hero
.sbit-hero__topline {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 22px;

  margin-bottom: 22px;
}


.sbit-hero
.sbit-hero__kicker {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: #ADC8FF;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .17em;

  text-transform: uppercase;
}


.sbit-hero
.sbit-hero__kicker::before {
  width: 38px;
  height: 1px;

  flex: 0 0 auto;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--sbit-blue),
      var(--sbit-green)
    );
}


.sbit-hero
.sbit-hero__index {
  flex: 0 0 auto;

  color:
    rgba(159,176,199,.52);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .15em;
}


/* =========================================================
   TITLE
========================================================= */

.sbit-hero
.sbit-hero__title {
  max-width: 620px;

  margin: 0;

  color:
    var(--sbit-text);

  font-size:
    clamp(34px,3vw,39px);

  font-weight: 860;

  line-height: 1.02;

  letter-spacing:
    -.045em;

  text-wrap: balance;
}


.sbit-hero
.sbit-hero__title span {
  display: block;

  margin-top: 5px;

  color:
    var(--sbit-blue-2);
}


/* =========================================================
   COPY
========================================================= */

.sbit-hero
.sbit-hero__lead {
  max-width: 650px;

  margin:
    22px
    0
    0;

  color: #CBD6E5;

  font-size:
    clamp(14px,1vw,16px);

  line-height: 1.68;
}


.sbit-hero
.sbit-hero__description {
  max-width: 650px;

  margin:
    17px
    0
    0;

  color:
    var(--sbit-muted);

  font-size: 12px;

  line-height: 1.76;
}


/* =========================================================
   ACTIONS
========================================================= */

.sbit-hero
.sbit-hero__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 27px;
}


.sbit-hero
.sbit-hero__button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 14px;

  min-height: 46px;

  padding:
    10px
    17px;

  border:
    1px solid
    var(--sbit-line);

  border-radius:
    11px;

  color:
    var(--sbit-text);

  font-size: 10px;
  font-weight: 850;

  text-decoration: none;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}


.sbit-hero
.sbit-hero__button i {
  font-style: normal;

  transition:
    transform .18s ease;
}


.sbit-hero
.sbit-hero__button--primary {
  border-color:
    transparent;

  background:
    linear-gradient(
      135deg,
      var(--sbit-blue),
      #1D4ED8
    );

  box-shadow:
    0 15px 34px
    rgba(47,107,255,.22);
}


.sbit-hero
.sbit-hero__button--secondary {
  background:
    rgba(255,255,255,.025);
}


@media (hover:hover) {

  .sbit-hero
  .sbit-hero__button:hover {
    transform:
      translateY(-2px);

    border-color:
      rgba(96,165,250,.42);
  }


  .sbit-hero
  .sbit-hero__button:hover i {
    transform:
      translateX(2px);
  }

}


/* =========================================================
   CAPABILITIES
========================================================= */

.sbit-hero
.sbit-hero__capabilities {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 21px;
}


.sbit-hero
.sbit-hero__capabilities span {
  padding:
    7px
    10px;

  border:
    1px solid
    var(--sbit-line);

  border-radius:
    999px;

  color: #AEBED1;

  background:
    rgba(255,255,255,.018);

  font-size: 8px;
  font-weight: 650;
}


/* =========================================================
   TRUST LINE
========================================================= */

.sbit-hero
.sbit-hero__trust {
  display: flex;

  flex-wrap: wrap;

  gap:
    8px
    20px;

  margin-top: 23px;

  padding-top: 19px;

  border-top:
    1px solid
    rgba(148,163,184,.11);
}


.sbit-hero
.sbit-hero__trust div {
  display: flex;

  align-items: center;

  gap: 7px;
}


.sbit-hero
.sbit-hero__trust i {
  width: 5px;
  height: 5px;

  flex: 0 0 auto;

  border-radius: 50%;

  background:
    var(--sbit-green);

  box-shadow:
    0 0 10px
    rgba(34,197,94,.6);
}


.sbit-hero
.sbit-hero__trust span {
  color:
    rgba(159,176,199,.7);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .09em;

  text-transform: uppercase;
}


/* =========================================================
   VISUAL
========================================================= */

.sbit-hero
.sbit-hero__visual {
  min-width: 0;

  padding:
    16px
    16px
    16px
    0;
}


.sbit-hero
.sbit-hero__media {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 560px;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    28px;

  background:
    #07101D;

  box-shadow:
    0 30px 80px
    rgba(0,0,0,.30);
}


/* =========================================================
   IMAGE
========================================================= */

.sbit-hero
.sbit-hero__image {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    brightness(.63)
    saturate(.80)
    contrast(1.04);

  transform:
    scale(1.02);

  transition:
    transform 8s ease;
}


.sbit-hero.is-ready
.sbit-hero__image {
  transform:
    scale(1.06);
}


/* =========================================================
   IMAGE SHADING
========================================================= */

.sbit-hero
.sbit-hero__image-shade {
  position: absolute;
  z-index: 1;

  inset: 0;

  background:
    radial-gradient(
      640px 480px
      at 72% 26%,
      rgba(47,107,255,.17),
      transparent 62%
    ),
    linear-gradient(
      180deg,
      rgba(5,8,22,.02),
      rgba(5,8,22,.40) 52%,
      rgba(5,8,22,.90)
    );
}


/* =========================================================
   TECH GRID
========================================================= */

.sbit-hero
.sbit-hero__tech-grid {
  position: absolute;
  z-index: 2;

  inset: 0;

  opacity: .58;

  background-image:
    linear-gradient(
      rgba(96,165,250,.052) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96,165,250,.052) 1px,
      transparent 1px
    );

  background-size:
    46px 46px;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      rgba(0,0,0,.8) 60%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      rgba(0,0,0,.8) 60%,
      transparent 100%
    );
}


/* =========================================================
   SCAN
========================================================= */

.sbit-hero
.sbit-hero__scan {
  position: absolute;
  z-index: 3;

  inset: 0;

  overflow: hidden;

  pointer-events: none;
}


.sbit-hero
.sbit-hero__scan::before {
  position: absolute;

  top: -160px;
  right: 0;
  left: 0;

  height: 140px;

  content: "";

  opacity: .7;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(34,211,238,.05),
      transparent
    );

  animation:
    sbitScan 8s linear infinite;

  will-change:
    transform;
}


/* =========================================================
   VISUAL TOP
========================================================= */

.sbit-hero
.sbit-hero__visual-top {
  position: absolute;
  z-index: 8;

  top: 22px;
  right: 22px;
  left: 22px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;
}


.sbit-hero
.sbit-hero__live {
  display: flex;

  align-items: center;

  gap: 8px;

  color: #D7E5F8;

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .16em;
}


.sbit-hero
.sbit-hero__live i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--sbit-green);

  box-shadow:
    0 0 12px
    rgba(34,197,94,.8);
}


.sbit-hero
.sbit-hero__network {
  color:
    rgba(215,229,248,.48);

  font-size: 6px;
  font-weight: 850;

  letter-spacing: .14em;
}


/* =========================================================
   NETWORK MAP
========================================================= */

.sbit-hero
.sbit-hero__network-map {
  position: absolute;
  z-index: 4;

  top: 50%;
  left: 54%;

  width:
    min(42vw,560px);

  aspect-ratio: 1;

  transform:
    translate(-50%,-52%);
}


.sbit-hero
.sbit-hero__orbit {
  position: absolute;

  border-radius: 50%;
}


.sbit-hero
.sbit-hero__orbit--outer {
  inset: 0;

  border:
    1px solid
    rgba(96,165,250,.22);
}


.sbit-hero
.sbit-hero__orbit--middle {
  inset: 17%;

  border:
    1px dashed
    rgba(34,197,94,.26);

  animation:
    sbitSpin
    24s linear infinite;
}


.sbit-hero
.sbit-hero__orbit--inner {
  inset: 34%;

  border:
    1px solid
    rgba(34,211,238,.25);

  animation:
    sbitSpin
    15s linear infinite reverse;
}


/* =========================================================
   CORE
========================================================= */

.sbit-hero
.sbit-hero__network-core {
  position: absolute;

  top: 50%;
  left: 50%;

  display: grid;

  width: 104px;
  height: 104px;

  place-content: center;

  border:
    1px solid
    rgba(96,165,250,.30);

  border-radius: 50%;

  color:
    #FFFFFF;

  background:
    rgba(5,8,22,.76);

  box-shadow:
    0 0 55px
    rgba(47,107,255,.20);

  text-align: center;

  transform:
    translate(-50%,-50%);
}


.sbit-hero
.sbit-hero__network-core span {
  color: #7EA6FF;

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .14em;
}


.sbit-hero
.sbit-hero__network-core strong {
  display: block;

  margin:
    3px
    0
    1px;

  font-size: 21px;
}


.sbit-hero
.sbit-hero__network-core small {
  color:
    rgba(255,255,255,.47);

  font-size: 5px;

  letter-spacing: .13em;
}


/* =========================================================
   NODES
========================================================= */

.sbit-hero
.sbit-hero__node {
  position: absolute;

  width: 11px;
  height: 11px;

  border:
    3px solid
    var(--sbit-blue);

  border-radius: 50%;

  background:
    #DBEAFE;

  box-shadow:
    0 0 26px
    rgba(47,107,255,.9);

  animation:
    sbitNodePulse
    3.2s ease-in-out infinite;
}


.sbit-hero
.sbit-hero__node--1 {
  top: 17%;
  left: 22%;
}


.sbit-hero
.sbit-hero__node--2 {
  top: 28%;
  right: 12%;

  animation-delay:
    .7s;
}


.sbit-hero
.sbit-hero__node--3 {
  bottom: 20%;
  left: 20%;

  animation-delay:
    1.3s;
}


.sbit-hero
.sbit-hero__node--4 {
  right: 24%;
  bottom: 12%;

  animation-delay:
    1.9s;
}


/* =========================================================
   LINUX CARD
========================================================= */

.sbit-hero
.sbit-hero__linux {
  position: absolute;
  z-index: 8;

  top: 60px;
  left: 22px;

  width: 205px;

  padding:
    15px;

  border:
    1px solid
    rgba(34,197,94,.20);

  border-radius:
    15px;

  background:
    rgba(5,8,22,.85);

  box-shadow:
    0 18px 44px
    rgba(0,0,0,.20);
}


.sbit-hero
.sbit-hero__linux-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 8px;
}


.sbit-hero
.sbit-hero__linux-head span {
  color: #98AABD;

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .14em;
}


.sbit-hero
.sbit-hero__linux-head i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--sbit-green);

  box-shadow:
    0 0 9px
    rgba(34,197,94,.6);
}


.sbit-hero
.sbit-hero__linux > strong {
  display: block;

  font-size: 14px;
}


.sbit-hero
.sbit-hero__linux > small {
  display: block;

  margin-top: 4px;

  color:
    rgba(159,176,199,.64);

  font-size: 7px;
}


.sbit-hero
.sbit-hero__linux-stack {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 11px;
}


.sbit-hero
.sbit-hero__linux-stack span {
  padding:
    5px
    7px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    6px;

  color: #B8C9DB;

  font-size: 7px;
  font-weight: 700;
}


/* =========================================================
   TERMINAL
========================================================= */

.sbit-hero
.sbit-hero__terminal {
  position: absolute;
  z-index: 8;

  top: 60px;
  right: 22px;

  width:
    min(46%,440px);

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:
    15px;

  background:
    rgba(3,7,18,.90);

  box-shadow:
    0 22px 55px
    rgba(0,0,0,.25);
}


.sbit-hero
.sbit-hero__terminal-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  height: 34px;

  padding:
    0
    12px;

  border-bottom:
    1px solid
    rgba(255,255,255,.075);
}


.sbit-hero
.sbit-hero__terminal-head > div {
  display: flex;

  gap: 6px;
}


.sbit-hero
.sbit-hero__terminal-head i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #64748B;
}


.sbit-hero
.sbit-hero__terminal-head i:nth-child(1) {
  background: #EF4444;
}


.sbit-hero
.sbit-hero__terminal-head i:nth-child(2) {
  background: #F59E0B;
}


.sbit-hero
.sbit-hero__terminal-head i:nth-child(3) {
  background: #22C55E;
}


.sbit-hero
.sbit-hero__terminal-head > span {
  color:
    rgba(159,176,199,.48);

  font-size: 6px;
  font-weight: 700;

  letter-spacing: .08em;
}


.sbit-hero
.sbit-hero__terminal-body {
  padding:
    13px
    15px
    15px;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size: 8px;

  line-height: 1.72;

  color: #B7C8DC;
}


.sbit-hero
.sbit-hero__terminal-body p {
  margin:
    0
    0
    2px;
}


.sbit-hero
.is-green {
  color: #86EFAC;
}


.sbit-hero
.is-blue {
  color: #93C5FD;
}


.sbit-hero
.is-cyan {
  color: #67E8F9;
}


.sbit-hero
.sbit-hero__terminal-cursor {
  margin-top:
    6px;
}


.sbit-hero
.sbit-hero__terminal-cursor i {
  display: inline-block;

  width: 5px;
  height: 9px;

  margin-left: 3px;

  vertical-align: -1px;

  background:
    var(--sbit-green);

  animation:
    sbitCursor
    1s steps(1) infinite;
}


/* =========================================================
   STATS
========================================================= */

.sbit-hero
.sbit-hero__stats {
  position: absolute;
  z-index: 8;

  right: 22px;
  bottom: 22px;
  left: 22px;

  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap: 7px;

  padding:
    10px;

  border:
    1px solid
    rgba(255,255,255,.1);

  border-radius:
    16px;

  background:
    rgba(5,8,22,.87);

  box-shadow:
    0 18px 50px
    rgba(0,0,0,.20);
}


.sbit-hero
.sbit-hero__stat {
  min-width: 0;

  padding:
    10px
    11px;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius:
    10px;

  background:
    rgba(255,255,255,.016);
}


.sbit-hero
.sbit-hero__stat > span {
  display: block;

  margin-bottom:
    4px;

  color:
    var(--sbit-blue-2);

  font-size: 18px;
  font-weight: 850;

  letter-spacing:
    -.04em;
}


.sbit-hero
.sbit-hero__stat strong {
  display: block;

  color: #F4F8FD;

  font-size: 8px;
  font-weight: 800;
}


.sbit-hero
.sbit-hero__stat small {
  display: block;

  margin-top: 3px;

  overflow: hidden;

  color:
    rgba(159,176,199,.55);

  font-size: 6px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   SIDE LABEL
========================================================= */

.sbit-hero
.sbit-hero__side-label {
  position: absolute;
  z-index: 8;

  top: 50%;
  right: 8px;

  color:
    rgba(255,255,255,.25);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .19em;

  text-transform:
    uppercase;

  writing-mode:
    vertical-rl;

  transform:
    translateY(-50%);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width:1800px) {

  .sbit-hero
  .sbit-hero__shell {
    grid-template-columns:
      minmax(480px,40%)
      minmax(0,60%);
  }


  .sbit-hero
  .sbit-hero__copy {
    padding-inline:
      clamp(70px,5vw,110px);
  }


  .sbit-hero
  .sbit-hero__visual {
    padding-right:
      28px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1050px) {

  .sbit-hero {
    min-height: auto;
  }


  .sbit-hero
  .sbit-hero__shell {
    grid-template-columns:
      minmax(0,1fr);

    min-height: auto;
  }


  .sbit-hero
  .sbit-hero__copy {
    min-height: auto;

    padding:
      70px
      28px
      42px;
  }


  .sbit-hero
  .sbit-hero__copy-inner {
    max-width: 780px;

    margin: 0;
  }


  .sbit-hero
  .sbit-hero__visual {
    padding:
      0
      28px
      28px;
  }


  .sbit-hero
  .sbit-hero__media {
    min-height:
      620px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:650px) {

  .sbit-hero
  .sbit-hero__copy {
    padding:
      56px
      16px
      34px;
  }


  .sbit-hero
  .sbit-hero__topline {
    align-items:
      flex-start;
  }


  .sbit-hero
  .sbit-hero__index {
    display: none;
  }


  .sbit-hero
  .sbit-hero__title {
    font-size:
      clamp(34px,8.5vw,37px);
  }


  .sbit-hero
  .sbit-hero__actions {
    flex-direction:
      column;
  }


  .sbit-hero
  .sbit-hero__button {
    width: 100%;

    justify-content:
      space-between;
  }


  .sbit-hero
  .sbit-hero__visual {
    padding:
      0
      14px
      14px;
  }


  .sbit-hero
  .sbit-hero__media {
    min-height:
      580px;

    border-radius:
      21px;
  }


  .sbit-hero
  .sbit-hero__network {
    display: none;
  }


  .sbit-hero
  .sbit-hero__linux {
    top: 54px;
    left: 14px;

    width: 154px;
  }


  .sbit-hero
  .sbit-hero__terminal {
    top: 54px;
    right: 14px;

    width: 58%;
  }


  .sbit-hero
  .sbit-hero__terminal-body {
    font-size: 7px;
  }


  .sbit-hero
  .sbit-hero__network-map {
    top: 55%;
    left: 50%;

    width: 88vw;
  }


  .sbit-hero
  .sbit-hero__stats {
    right: 14px;
    bottom: 14px;
    left: 14px;

    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .sbit-hero
  .sbit-hero__side-label {
    display: none;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce) {

  .sbit-hero *,
  .sbit-hero *::before,
  .sbit-hero *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes sbitScan {

  to {
    transform:
      translateY(
        calc(100svh + 300px)
      );
  }

}


@keyframes sbitSpin {

  to {
    transform:
      rotate(360deg);
  }

}


@keyframes sbitNodePulse {

  0%,
  100% {
    opacity: .58;

    transform:
      scale(.86);
  }

  50% {
    opacity: 1;

    transform:
      scale(1.12);
  }

}


@keyframes sbitCursor {

  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }

}


/*section 1 end here*/

/*section 2 start here*/


/* =========================================================
   SINDYBAD ENTERPRISE IT — BUSINESS PROCESS
   Scoped / dark technology identity / no global CSS
========================================================= */

.sbit-process,
.sbit-process * {
  box-sizing: border-box;
}


.sbit-process {
  --sbp-bg: #050816;
  --sbp-bg-2: #08111F;

  --sbp-panel: #0D1728;
  --sbp-panel-2: #111D31;

  --sbp-line:
    rgba(148,163,184,.16);

  --sbp-text: #F8FBFF;
  --sbp-muted: #9FB0C7;

  --sbp-blue: #2F6BFF;
  --sbp-blue-2: #60A5FA;

  --sbp-cyan: #22D3EE;
  --sbp-green: #22C55E;

  position: relative;
  isolation: isolate;

  width: 100%;

  min-height:
    calc(100svh - 72px);

  overflow: hidden;

  color:
    var(--sbp-text);

  background:
    var(--sbp-bg);
}


/* =========================================================
   BACKGROUND
========================================================= */

.sbit-process
.sbit-process__ambient {
  position: absolute;
  z-index: -2;

  inset: 0;

  overflow: hidden;

  pointer-events: none;
}


.sbit-process
.sbit-process__ambient-grid {
  position: absolute;

  inset: 0;

  opacity: .12;

  background-image:
    linear-gradient(
      rgba(96,165,250,.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96,165,250,.05) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;
}


.sbit-process
.sbit-process__ambient-glow {
  position: absolute;

  top: -25%;
  right: -14%;

  width:
    min(44vw,760px);

  aspect-ratio: 1;

  border-radius: 50%;

  opacity: .105;

  background:
    var(--sbp-blue);

  filter:
    blur(120px);
}


.sbit-process
.sbit-process__ambient-line {
  position: absolute;

  top: 0;
  right: 6%;

  width: 120px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      var(--sbp-blue),
      var(--sbp-green)
    );
}


/* =========================================================
   SHELL
========================================================= */

.sbit-process
.sbit-process__shell {
  display: grid;

  grid-template-columns:
    minmax(0,58%)
    minmax(390px,42%);

  width: 100%;

  min-height:
    calc(100svh - 72px);
}


/* =========================================================
   VISUAL
========================================================= */

.sbit-process
.sbit-process__visual {
  min-width: 0;

  padding:
    16px
    0
    16px
    16px;
}


.sbit-process
.sbit-process__media {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 580px;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    28px;

  background:
    #07101D;

  box-shadow:
    0 30px 82px
    rgba(0,0,0,.30);
}


/* =========================================================
   IMAGE
========================================================= */

.sbit-process
.sbit-process__image {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    brightness(.52)
    saturate(.72)
    contrast(1.05);

  transform:
    scale(1.02);

  transition:
    transform 9s ease;
}


.sbit-process.is-ready
.sbit-process__image {
  transform:
    scale(1.065);
}


/* =========================================================
   VISUAL OVERLAY
========================================================= */

.sbit-process
.sbit-process__shade {
  position: absolute;
  z-index: 1;

  inset: 0;

  background:
    radial-gradient(
      580px 440px
      at 36% 40%,
      rgba(47,107,255,.18),
      transparent 65%
    ),
    linear-gradient(
      180deg,
      rgba(5,8,22,.06),
      rgba(5,8,22,.36) 50%,
      rgba(5,8,22,.91)
    );
}


.sbit-process
.sbit-process__visual-grid {
  position: absolute;
  z-index: 2;

  inset: 0;

  opacity: .52;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(96,165,250,.052) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96,165,250,.052) 1px,
      transparent 1px
    );

  background-size:
    46px 46px;

  -webkit-mask-image:
    linear-gradient(
      180deg,
      #000,
      rgba(0,0,0,.65) 62%,
      transparent
    );

  mask-image:
    linear-gradient(
      180deg,
      #000,
      rgba(0,0,0,.65) 62%,
      transparent
    );
}


/* =========================================================
   SCAN EFFECT
========================================================= */

.sbit-process
.sbit-process__scan {
  position: absolute;
  z-index: 3;

  inset: 0;

  overflow: hidden;

  pointer-events: none;
}


.sbit-process
.sbit-process__scan::before {
  position: absolute;

  top: -150px;
  right: 0;
  left: 0;

  height: 135px;

  content: "";

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(34,211,238,.052),
      transparent
    );

  animation:
    sbpScan
    8.5s linear infinite;

  will-change:
    transform;
}


/* =========================================================
   TOP VISUAL STATUS
========================================================= */

.sbit-process
.sbit-process__visual-top {
  position: absolute;
  z-index: 9;

  top: 22px;
  right: 22px;
  left: 22px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;
}


.sbit-process
.sbit-process__live {
  display: flex;

  align-items: center;

  gap: 8px;

  color: #D6E4F5;

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .15em;
}


.sbit-process
.sbit-process__live i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--sbp-green);

  box-shadow:
    0 0 12px
    rgba(34,197,94,.8);
}


.sbit-process
.sbit-process__system-status {
  color:
    rgba(214,228,245,.44);

  font-size: 6px;
  font-weight: 850;

  letter-spacing: .14em;
}


/* =========================================================
   ARCHITECTURE MAP
========================================================= */

.sbit-process
.sbit-process__architecture {
  position: absolute;
  z-index: 5;

  top: 48%;
  left: 50%;

  width:
    min(42vw,600px);

  height:
    min(36vw,490px);

  transform:
    translate(-50%,-50%);
}


/* Main path */

.sbit-process
.sbit-process__architecture-line {
  position: absolute;

  top: 50%;
  left: 8%;

  width: 84%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(96,165,250,.36) 12%,
      rgba(34,211,238,.55) 50%,
      rgba(34,197,94,.40) 88%,
      transparent
    );
}


.sbit-process
.sbit-process__architecture-line::before {
  position: absolute;

  top: -100px;
  left: 50%;

  width: 1px;
  height: 200px;

  content: "";

  opacity: .5;

  background:
    linear-gradient(
      transparent,
      rgba(96,165,250,.34),
      transparent
    );
}


/* =========================================================
   ARCHITECTURE NODES
========================================================= */

.sbit-process
.sbit-process__architecture-node {
  position: absolute;

  display: grid;

  min-width: 94px;

  padding:
    9px
    11px;

  border:
    1px solid
    rgba(96,165,250,.17);

  border-radius:
    11px;

  background:
    rgba(5,8,22,.76);

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.18);
}


.sbit-process
.sbit-process__architecture-node i {
  position: absolute;

  top: -4px;
  left: 50%;

  width: 7px;
  height: 7px;

  border:
    2px solid
    var(--sbp-blue);

  border-radius: 50%;

  background: #DBEAFE;

  box-shadow:
    0 0 18px
    rgba(47,107,255,.85);

  transform:
    translateX(-50%);

  animation:
    sbpNode
    3.4s ease-in-out infinite;
}


.sbit-process
.sbit-process__architecture-node span {
  color:
    var(--sbp-blue-2);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .12em;
}


.sbit-process
.sbit-process__architecture-node strong {
  display: block;

  margin-top: 3px;

  color: #EEF6FF;

  font-size: 9px;
}


.sbit-process
.sbit-process__architecture-node--1 {
  top: 26%;
  left: 2%;
}


.sbit-process
.sbit-process__architecture-node--2 {
  top: 61%;
  left: 17%;
}


.sbit-process
.sbit-process__architecture-node--3 {
  top: 17%;
  left: 43%;
}


.sbit-process
.sbit-process__architecture-node--4 {
  top: 62%;
  right: 15%;
}


.sbit-process
.sbit-process__architecture-node--5 {
  top: 28%;
  right: 0;
}


.sbit-process
.sbit-process__architecture-node--2 i {
  animation-delay: .6s;
}


.sbit-process
.sbit-process__architecture-node--3 i {
  animation-delay: 1.2s;
}


.sbit-process
.sbit-process__architecture-node--4 i {
  animation-delay: 1.8s;
}


.sbit-process
.sbit-process__architecture-node--5 i {
  animation-delay: 2.4s;
}


/* =========================================================
   ARCHITECTURE CORE
========================================================= */

.sbit-process
.sbit-process__architecture-core {
  position: absolute;

  top: 50%;
  left: 50%;

  display: grid;

  width: 96px;
  height: 96px;

  place-content: center;

  border:
    1px solid
    rgba(96,165,250,.30);

  border-radius: 50%;

  background:
    rgba(5,8,22,.86);

  box-shadow:
    0 0 55px
    rgba(47,107,255,.20);

  text-align: center;

  transform:
    translate(-50%,-50%);
}


.sbit-process
.sbit-process__architecture-core small {
  color:
    rgba(159,176,199,.55);

  font-size: 5px;

  letter-spacing: .14em;
}


.sbit-process
.sbit-process__architecture-core strong {
  display: block;

  margin:
    2px
    0;

  color: #FFFFFF;

  font-size: 20px;
}


.sbit-process
.sbit-process__architecture-core span {
  color:
    var(--sbp-blue-2);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .14em;
}


/* =========================================================
   STRATEGY CARD
========================================================= */

.sbit-process
.sbit-process__strategy-card {
  position: absolute;
  z-index: 8;

  top: 62px;
  right: 22px;

  width: 220px;

  padding:
    15px;

  border:
    1px solid
    rgba(96,165,250,.16);

  border-radius:
    15px;

  background:
    rgba(5,8,22,.87);

  box-shadow:
    0 18px 44px
    rgba(0,0,0,.21);
}


.sbit-process
.sbit-process__strategy-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 9px;
}


.sbit-process
.sbit-process__strategy-head span {
  color: #94A8BE;

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .14em;
}


.sbit-process
.sbit-process__strategy-head i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--sbp-green);

  box-shadow:
    0 0 9px
    rgba(34,197,94,.60);
}


.sbit-process
.sbit-process__strategy-card > strong {
  display: block;

  color: #F4F8FD;

  font-size: 13px;

  line-height: 1.35;
}


.sbit-process
.sbit-process__strategy-card > p {
  margin:
    7px
    0
    0;

  color:
    rgba(159,176,199,.66);

  font-size: 7px;

  line-height: 1.55;
}


.sbit-process
.sbit-process__strategy-metrics {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 11px;
}


.sbit-process
.sbit-process__strategy-metrics span {
  display: inline-flex;

  align-items: center;

  gap: 5px;

  padding:
    5px
    7px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:
    7px;

  color: #B6C7D9;

  font-size: 6px;
  font-weight: 700;
}


.sbit-process
.sbit-process__strategy-metrics i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    var(--sbp-green);
}


/* =========================================================
   TERMINAL
========================================================= */

.sbit-process
.sbit-process__terminal {
  position: absolute;
  z-index: 8;

  top: 62px;
  left: 22px;

  width:
    min(45%,430px);

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:
    15px;

  background:
    rgba(3,7,18,.90);

  box-shadow:
    0 22px 55px
    rgba(0,0,0,.25);
}


.sbit-process
.sbit-process__terminal-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  height: 34px;

  padding:
    0
    12px;

  border-bottom:
    1px solid
    rgba(255,255,255,.075);
}


.sbit-process
.sbit-process__terminal-head > div {
  display: flex;

  gap: 6px;
}


.sbit-process
.sbit-process__terminal-head i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #64748B;
}


.sbit-process
.sbit-process__terminal-head i:nth-child(1) {
  background: #EF4444;
}


.sbit-process
.sbit-process__terminal-head i:nth-child(2) {
  background: #F59E0B;
}


.sbit-process
.sbit-process__terminal-head i:nth-child(3) {
  background: #22C55E;
}


.sbit-process
.sbit-process__terminal-head > span {
  color:
    rgba(159,176,199,.48);

  font-size: 6px;

  letter-spacing: .08em;
}


.sbit-process
.sbit-process__terminal-body {
  padding:
    13px
    15px
    15px;

  color: #B7C8DC;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size: 8px;

  line-height: 1.72;
}


.sbit-process
.sbit-process__terminal-body p {
  margin:
    0
    0
    2px;
}


.sbit-process
.is-green {
  color: #86EFAC;
}


.sbit-process
.is-blue {
  color: #93C5FD;
}


.sbit-process
.is-cyan {
  color: #67E8F9;
}


.sbit-process
.sbit-process__terminal-ready {
  margin-top:
    6px;
}


.sbit-process
.sbit-process__terminal-ready i {
  display: inline-block;

  width: 5px;
  height: 9px;

  margin-left: 4px;

  vertical-align: -1px;

  background:
    var(--sbp-green);

  animation:
    sbpCursor
    1s steps(1) infinite;
}


/* =========================================================
   VISUAL FOOTER
========================================================= */

.sbit-process
.sbit-process__visual-footer {
  position: absolute;
  z-index: 9;

  right: 22px;
  bottom: 22px;
  left: 22px;

  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  padding:
    16px
    18px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:
    15px;

  background:
    rgba(5,8,22,.88);

  box-shadow:
    0 18px 48px
    rgba(0,0,0,.20);
}


.sbit-process
.sbit-process__visual-footer > div > span {
  display: block;

  margin-bottom: 5px;

  color:
    rgba(159,176,199,.57);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .14em;
}


.sbit-process
.sbit-process__visual-footer strong {
  display: block;

  color: #F4F8FD;

  font-size:
    clamp(14px,1vw,18px);
}


.sbit-process
.sbit-process__visual-footer em {
  color:
    var(--sbp-blue-2);

  font-style: normal;
}


.sbit-process
.sbit-process__visual-index {
  flex: 0 0 auto;

  color:
    rgba(159,176,199,.43);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .13em;
}


/* =========================================================
   SIDE LABEL
========================================================= */

.sbit-process
.sbit-process__side-label {
  position: absolute;
  z-index: 8;

  top: 50%;
  left: 8px;

  color:
    rgba(255,255,255,.24);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .19em;

  text-transform: uppercase;

  writing-mode: vertical-rl;

  transform:
    translateY(-50%)
    rotate(180deg);
}


/* =========================================================
   COPY
========================================================= */

.sbit-process
.sbit-process__copy {
  position: relative;

  display: flex;

  align-items: center;

  min-width: 0;

  padding:
    clamp(50px,5.5vh,78px)
    clamp(38px,4.7vw,86px);

  background:
    radial-gradient(
      560px 420px
      at 10% 18%,
      rgba(47,107,255,.075),
      transparent 66%
    ),
    var(--sbp-bg);
}


.sbit-process
.sbit-process__copy-inner {
  width: 100%;
  max-width: 690px;

  margin-right: auto;
}


/* =========================================================
   COPY TOP
========================================================= */

.sbit-process
.sbit-process__topline {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom:
    21px;
}


.sbit-process
.sbit-process__kicker {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: #ADC8FF;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .16em;

  text-transform: uppercase;
}


.sbit-process
.sbit-process__kicker::before {
  width: 38px;
  height: 1px;

  flex: 0 0 auto;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--sbp-blue),
      var(--sbp-green)
    );
}


.sbit-process
.sbit-process__topline > span:last-child {
  color:
    rgba(159,176,199,.45);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .15em;
}


/* =========================================================
   TITLE
========================================================= */

.sbit-process
.sbit-process__title {
  max-width: 630px;

  margin: 0;

  color:
    var(--sbp-text);

  font-size:
    clamp(34px,3vw,39px);

  font-weight: 860;

  line-height: 1.03;

  letter-spacing:
    -.045em;

  text-wrap: balance;
}


.sbit-process
.sbit-process__title span {
  display: block;

  margin-top: 4px;

  color:
    var(--sbp-blue-2);
}


/* =========================================================
   LEAD
========================================================= */

.sbit-process
.sbit-process__lead {
  max-width: 650px;

  margin:
    21px
    0
    0;

  color: #CBD6E5;

  font-size:
    clamp(14px,1vw,16px);

  line-height: 1.67;
}


.sbit-process
.sbit-process__description {
  max-width: 640px;

  margin:
    14px
    0
    0;

  color:
    var(--sbp-muted);

  font-size: 11px;

  line-height: 1.74;
}


/* =========================================================
   PROCESS STEPS
========================================================= */

.sbit-process
.sbit-process__steps {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 8px;

  margin-top: 24px;
}


.sbit-process
.sbit-process__step {
  position: relative;

  display: grid;

  grid-template-columns:
    35px
    minmax(0,1fr);

  gap: 11px;

  min-width: 0;

  padding:
    13px;

  overflow: hidden;

  border:
    1px solid
    var(--sbp-line);

  border-radius:
    13px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.036),
      rgba(255,255,255,.012)
    );

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


.sbit-process
.sbit-process__step:nth-child(5) {
  grid-column:
    1 / -1;
}


/* subtle top accent */

.sbit-process
.sbit-process__step::before {
  position: absolute;

  top: 0;
  left: 13px;

  width: 32px;
  height: 1px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--sbp-blue),
      var(--sbp-cyan)
    );
}


@media (hover:hover) {

  .sbit-process
  .sbit-process__step:hover {
    transform:
      translateY(-2px);

    border-color:
      rgba(96,165,250,.28);

    background:
      rgba(255,255,255,.038);

    box-shadow:
      0 14px 32px
      rgba(0,0,0,.12);
  }

}


/* =========================================================
   STEP NUMBER
========================================================= */

.sbit-process
.sbit-process__step-number {
  position: relative;

  display: flex;

  flex-direction: column;
  align-items: center;
}


.sbit-process
.sbit-process__step-number span {
  display: grid;

  width: 30px;
  height: 30px;

  place-items: center;

  border:
    1px solid
    rgba(96,165,250,.22);

  border-radius:
    9px;

  color:
    var(--sbp-blue-2);

  background:
    rgba(47,107,255,.075);

  font-size: 7px;
  font-weight: 900;
}


.sbit-process
.sbit-process__step-number i {
  width: 1px;
  height: 22px;

  margin-top: 5px;

  background:
    linear-gradient(
      var(--sbp-blue),
      transparent
    );
}


/* =========================================================
   STEP CONTENT
========================================================= */

.sbit-process
.sbit-process__step-content {
  min-width: 0;
}


.sbit-process
.sbit-process__step-content small {
  display: block;

  margin-bottom: 4px;

  color:
    rgba(126,166,255,.65);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .13em;
}


.sbit-process
.sbit-process__step-content strong {
  display: block;

  color: #F0F6FE;

  font-size: 11px;
  font-weight: 800;
}


.sbit-process
.sbit-process__step-content p {
  margin:
    5px
    0
    0;

  color:
    rgba(159,176,199,.76);

  font-size: 8px;

  line-height: 1.55;
}


.sbit-process
.sbit-process__step-status {
  position: absolute;

  right: 9px;
  bottom: 6px;

  color:
    rgba(159,176,199,.12);

  font-size: 24px;
  font-weight: 900;

  line-height: 1;
}


/* =========================================================
   TRUST
========================================================= */

.sbit-process
.sbit-process__trust {
  display: flex;

  flex-wrap: wrap;

  gap:
    8px
    18px;

  margin-top:
    20px;

  padding-top:
    18px;

  border-top:
    1px solid
    rgba(148,163,184,.11);
}


.sbit-process
.sbit-process__trust span {
  display: flex;

  align-items: center;

  gap: 7px;

  color:
    rgba(159,176,199,.68);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.sbit-process
.sbit-process__trust i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--sbp-green);

  box-shadow:
    0 0 9px
    rgba(34,197,94,.55);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width:1800px) {

  .sbit-process
  .sbit-process__shell {
    grid-template-columns:
      minmax(0,60%)
      minmax(480px,40%);
  }


  .sbit-process
  .sbit-process__visual {
    padding-left:
      28px;
  }


  .sbit-process
  .sbit-process__copy {
    padding-inline:
      clamp(70px,5vw,108px);
  }

}


/* =========================================================
   SHORT DESKTOP
========================================================= */

@media
(min-width:1051px)
and
(max-height:760px) {

  .sbit-process
  .sbit-process__copy {
    padding-top: 35px;
    padding-bottom: 35px;
  }


  .sbit-process
  .sbit-process__lead {
    margin-top: 16px;
  }


  .sbit-process
  .sbit-process__steps {
    margin-top: 18px;
  }


  .sbit-process
  .sbit-process__step {
    padding: 10px 12px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1050px) {

  .sbit-process {
    min-height: auto;
  }


  .sbit-process
  .sbit-process__shell {
    grid-template-columns:
      minmax(0,1fr);

    min-height: auto;
  }


  .sbit-process
  .sbit-process__copy {
    order: 1;

    min-height: auto;

    padding:
      70px
      28px
      42px;
  }


  .sbit-process
  .sbit-process__copy-inner {
    max-width: 780px;

    margin: 0;
  }


  .sbit-process
  .sbit-process__visual {
    order: 2;

    padding:
      0
      28px
      28px;
  }


  .sbit-process
  .sbit-process__media {
    min-height:
      620px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:650px) {

  .sbit-process
  .sbit-process__copy {
    padding:
      56px
      16px
      34px;
  }


  .sbit-process
  .sbit-process__topline > span:last-child {
    display: none;
  }


  .sbit-process
  .sbit-process__title {
    font-size:
      clamp(34px,8.5vw,37px);
  }


  .sbit-process
  .sbit-process__steps {
    grid-template-columns:
      minmax(0,1fr);
  }


  .sbit-process
  .sbit-process__step:nth-child(5) {
    grid-column: auto;
  }


  .sbit-process
  .sbit-process__visual {
    padding:
      0
      14px
      14px;
  }


  .sbit-process
  .sbit-process__media {
    min-height:
      600px;

    border-radius:
      21px;
  }


  .sbit-process
  .sbit-process__system-status {
    display: none;
  }


  .sbit-process
  .sbit-process__terminal {
    top: 54px;
    left: 14px;

    width: 58%;
  }


  .sbit-process
  .sbit-process__strategy-card {
    top: 54px;
    right: 14px;

    width: 40%;
  }


  .sbit-process
  .sbit-process__strategy-card > p {
    display: none;
  }


  .sbit-process
  .sbit-process__strategy-metrics span {
    padding: 4px 5px;
  }


  .sbit-process
  .sbit-process__architecture {
    top: 55%;

    width: 94vw;
    height: 370px;
  }


  .sbit-process
  .sbit-process__architecture-node {
    min-width: 76px;

    padding: 7px;
  }


  .sbit-process
  .sbit-process__architecture-node strong {
    font-size: 7px;
  }


  .sbit-process
  .sbit-process__visual-footer {
    right: 14px;
    bottom: 14px;
    left: 14px;
  }


  .sbit-process
  .sbit-process__visual-index,
  .sbit-process
  .sbit-process__side-label {
    display: none;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width:420px) {

  .sbit-process
  .sbit-process__strategy-card {
    display: none;
  }


  .sbit-process
  .sbit-process__terminal {
    width:
      calc(100% - 28px);
  }


  .sbit-process
  .sbit-process__architecture {
    top: 57%;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce) {

  .sbit-process *,
  .sbit-process *::before,
  .sbit-process *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes sbpScan {

  to {
    transform:
      translateY(
        calc(100svh + 290px)
      );
  }

}


@keyframes sbpNode {

  0%,
  100% {
    opacity: .52;

    transform:
      translateX(-50%)
      scale(.86);
  }


  50% {
    opacity: 1;

    transform:
      translateX(-50%)
      scale(1.14);
  }

}


@keyframes sbpCursor {

  0%,
  49% {
    opacity: 1;
  }


  50%,
  100% {
    opacity: 0;
  }

}


/*section 2 end here*/


/*section 3 start here*/


/* =========================================================
   SINDYBAD ENTERPRISE IT — SERVICES
   Scoped / lightweight / no global styles
========================================================= */

.sbit-services,
.sbit-services * {
  box-sizing: border-box;
}


.sbit-services {
  --sbs-bg: #050816;
  --sbs-bg-2: #08111F;

  --sbs-panel: #0D1728;

  --sbs-line:
    rgba(148,163,184,.16);

  --sbs-text: #F8FBFF;
  --sbs-muted: #9FB0C7;

  --sbs-blue: #2F6BFF;
  --sbs-blue-2: #60A5FA;

  --sbs-cyan: #22D3EE;
  --sbs-green: #22C55E;

  position: relative;
  isolation: isolate;

  width: 100%;

  min-height:
    calc(100svh - 72px);

  overflow: hidden;

  color:
    var(--sbs-text);

  background:
    var(--sbs-bg);
}


/* =========================================================
   AMBIENT
========================================================= */

.sbit-services
.sbit-services__ambient {
  position: absolute;
  z-index: -2;

  inset: 0;

  overflow: hidden;

  pointer-events: none;
}


.sbit-services
.sbit-services__ambient-grid {
  position: absolute;

  inset: 0;

  opacity: .12;

  background-image:
    linear-gradient(
      rgba(96,165,250,.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96,165,250,.05) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;
}


.sbit-services
.sbit-services__ambient-glow {
  position: absolute;

  top: -30%;
  left: -12%;

  width:
    min(44vw,760px);

  aspect-ratio: 1;

  border-radius: 50%;

  opacity: .10;

  background:
    var(--sbs-blue);

  filter:
    blur(120px);
}


.sbit-services
.sbit-services__ambient-line {
  position: absolute;

  top: 0;
  left: 5%;

  width: 120px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      var(--sbs-blue),
      var(--sbs-green)
    );
}


/* =========================================================
   SHELL
========================================================= */

.sbit-services
.sbit-services__shell {
  display: grid;

  grid-template-columns:
    minmax(390px,42%)
    minmax(0,58%);

  width: 100%;

  min-height:
    calc(100svh - 72px);
}


/* =========================================================
   COPY
========================================================= */

.sbit-services
.sbit-services__copy {
  display: flex;

  align-items: center;

  min-width: 0;

  padding:
    clamp(48px,5vh,76px)
    clamp(38px,4.5vw,84px);

  background:
    radial-gradient(
      560px 430px
      at 84% 14%,
      rgba(47,107,255,.07),
      transparent 65%
    ),
    var(--sbs-bg);
}


.sbit-services
.sbit-services__copy-inner {
  width: 100%;
  max-width: 690px;

  margin-left: auto;
}


/* =========================================================
   TOPLINE
========================================================= */

.sbit-services
.sbit-services__topline {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom:
    20px;
}


.sbit-services
.sbit-services__kicker {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: #ADC8FF;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .17em;

  text-transform: uppercase;
}


.sbit-services
.sbit-services__kicker::before {
  width: 38px;
  height: 1px;

  flex: 0 0 auto;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--sbs-blue),
      var(--sbs-green)
    );
}


.sbit-services
.sbit-services__index {
  color:
    rgba(159,176,199,.44);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .15em;
}


/* =========================================================
   TITLE
========================================================= */

.sbit-services
.sbit-services__title {
  max-width: 620px;

  margin: 0;

  color:
    var(--sbs-text);

  font-size:
    clamp(34px,3vw,39px);

  font-weight: 860;

  line-height: 1.03;

  letter-spacing:
    -.045em;

  text-wrap: balance;
}


.sbit-services
.sbit-services__title span {
  display: block;

  margin-top: 4px;

  color:
    var(--sbs-blue-2);
}


/* =========================================================
   TEXT
========================================================= */

.sbit-services
.sbit-services__lead {
  max-width: 640px;

  margin:
    21px
    0
    0;

  color: #CBD6E5;

  font-size:
    clamp(14px,1vw,16px);

  line-height: 1.67;
}


.sbit-services
.sbit-services__description {
  max-width: 640px;

  margin:
    13px
    0
    0;

  color:
    var(--sbs-muted);

  font-size: 11px;

  line-height: 1.72;
}


/* =========================================================
   CARDS
========================================================= */

.sbit-services
.sbit-services__cards {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 9px;

  margin-top:
    24px;
}


.sbit-services
.sbit-services__card {
  position: relative;

  min-width: 0;

  min-height: 196px;

  overflow: hidden;

  padding:
    15px;

  border:
    1px solid
    var(--sbs-line);

  border-radius:
    15px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.038),
      rgba(255,255,255,.012)
    );

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


.sbit-services
.sbit-services__card::before {
  position: absolute;

  top: 0;
  left: 15px;

  width: 38px;
  height: 1px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--sbs-blue),
      var(--sbs-cyan)
    );
}


.sbit-services
.sbit-services__card::after {
  position: absolute;

  right: -35px;
  bottom: -35px;

  width: 100px;
  height: 100px;

  border:
    1px solid
    rgba(96,165,250,.06);

  border-radius: 50%;

  content: "";

  pointer-events: none;
}


/* =========================================================
   CARD TOP
========================================================= */

.sbit-services
.sbit-services__card-top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;
}


.sbit-services
.sbit-services__card-number {
  color:
    var(--sbs-blue-2);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .12em;
}


.sbit-services
.sbit-services__card-status {
  display: flex;

  align-items: center;

  gap: 5px;

  color:
    rgba(159,176,199,.55);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .11em;
}


.sbit-services
.sbit-services__card-status i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    var(--sbs-green);

  box-shadow:
    0 0 8px
    rgba(34,197,94,.6);
}


/* =========================================================
   ICON
========================================================= */

.sbit-services
.sbit-services__card-icon {
  display: grid;

  width: 37px;
  height: 37px;

  margin-top: 13px;

  place-items: center;

  border:
    1px solid
    rgba(96,165,250,.17);

  border-radius:
    10px;

  color:
    var(--sbs-blue-2);

  background:
    rgba(47,107,255,.055);
}


.sbit-services
.sbit-services__card-icon svg {
  width: 19px;
  height: 19px;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.sbit-services
.sbit-services__card > small {
  display: block;

  margin-top:
    13px;

  color:
    rgba(126,166,255,.65);

  font-size: 5px;
  font-weight: 900;

  letter-spacing:
    .13em;
}


.sbit-services
.sbit-services__card h3 {
  margin:
    5px
    0
    0;

  color: #F1F6FD;

  font-size: 12px;
  font-weight: 800;

  line-height: 1.35;
}


.sbit-services
.sbit-services__card > p {
  margin:
    7px
    0
    0;

  color:
    rgba(159,176,199,.75);

  font-size: 8px;

  line-height: 1.55;
}


/* =========================================================
   CARD FOOTER
========================================================= */

.sbit-services
.sbit-services__card-footer {
  display: flex;

  align-items: center;

  gap: 5px;

  margin-top:
    12px;
}


.sbit-services
.sbit-services__card-footer span {
  padding:
    4px
    6px;

  border:
    1px solid
    rgba(255,255,255,.065);

  border-radius: 6px;

  color:
    rgba(183,200,220,.70);

  font-size: 6px;
  font-weight: 700;
}


.sbit-services
.sbit-services__card-footer i {
  margin-left: auto;

  color:
    var(--sbs-blue-2);

  font-size: 11px;

  font-style: normal;

  transition:
    transform .2s ease;
}


/* =========================================================
   CARD HOVER
========================================================= */

@media (hover:hover) {

  .sbit-services
  .sbit-services__card:hover {
    transform:
      translateY(-3px);

    border-color:
      rgba(96,165,250,.27);

    background:
      rgba(255,255,255,.038);

    box-shadow:
      0 16px 35px
      rgba(0,0,0,.13);
  }


  .sbit-services
  .sbit-services__card:hover
  .sbit-services__card-footer i {
    transform:
      translate(2px,-2px);
  }

}


/* =========================================================
   TRUST
========================================================= */

.sbit-services
.sbit-services__trust {
  display: flex;

  flex-wrap: wrap;

  gap:
    8px
    18px;

  margin-top:
    19px;

  padding-top:
    17px;

  border-top:
    1px solid
    rgba(148,163,184,.10);
}


.sbit-services
.sbit-services__trust span {
  display: flex;

  align-items: center;

  gap: 7px;

  color:
    rgba(159,176,199,.67);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.sbit-services
.sbit-services__trust i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--sbs-green);

  box-shadow:
    0 0 9px
    rgba(34,197,94,.55);
}


/* =========================================================
   VISUAL
========================================================= */

.sbit-services
.sbit-services__visual {
  min-width: 0;

  padding:
    16px
    16px
    16px
    0;
}


.sbit-services
.sbit-services__media {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 600px;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    28px;

  background:
    #07101D;

  box-shadow:
    0 30px 82px
    rgba(0,0,0,.30);
}


/* =========================================================
   IMAGE
========================================================= */

.sbit-services
.sbit-services__image {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    brightness(.55)
    saturate(.78)
    contrast(1.05);

  transform:
    scale(1.02);

  transition:
    transform 9s ease;
}


.sbit-services.is-ready
.sbit-services__image {
  transform:
    scale(1.06);
}


/* =========================================================
   OVERLAY
========================================================= */

.sbit-services
.sbit-services__shade {
  position: absolute;
  z-index: 1;

  inset: 0;

  background:
    radial-gradient(
      600px 450px
      at 54% 40%,
      rgba(47,107,255,.19),
      transparent 64%
    ),
    linear-gradient(
      180deg,
      rgba(5,8,22,.04),
      rgba(5,8,22,.34) 50%,
      rgba(5,8,22,.91)
    );
}


.sbit-services
.sbit-services__tech-grid {
  position: absolute;
  z-index: 2;

  inset: 0;

  opacity: .50;

  background-image:
    linear-gradient(
      rgba(96,165,250,.052) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96,165,250,.052) 1px,
      transparent 1px
    );

  background-size:
    46px 46px;

  -webkit-mask-image:
    linear-gradient(
      180deg,
      #000,
      rgba(0,0,0,.62) 65%,
      transparent
    );

  mask-image:
    linear-gradient(
      180deg,
      #000,
      rgba(0,0,0,.62) 65%,
      transparent
    );
}


/* =========================================================
   SCAN
========================================================= */

.sbit-services
.sbit-services__scan {
  position: absolute;
  z-index: 3;

  inset: 0;

  overflow: hidden;

  pointer-events: none;
}


.sbit-services
.sbit-services__scan::before {
  position: absolute;

  top: -150px;
  right: 0;
  left: 0;

  height: 140px;

  content: "";

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(34,211,238,.05),
      transparent
    );

  animation:
    sbsScan
    8.5s linear infinite;

  will-change:
    transform;
}


/* =========================================================
   VISUAL TOP
========================================================= */

.sbit-services
.sbit-services__visual-top {
  position: absolute;
  z-index: 9;

  top: 22px;
  right: 22px;
  left: 22px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;
}


.sbit-services
.sbit-services__live {
  display: flex;

  align-items: center;

  gap: 8px;

  color: #D6E4F5;

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .15em;
}


.sbit-services
.sbit-services__live i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--sbs-green);

  box-shadow:
    0 0 12px
    rgba(34,197,94,.8);
}


.sbit-services
.sbit-services__visual-status {
  color:
    rgba(214,228,245,.44);

  font-size: 6px;
  font-weight: 850;

  letter-spacing: .13em;
}


/* =========================================================
   NETWORK
========================================================= */

.sbit-services
.sbit-services__network {
  position: absolute;
  z-index: 5;

  top: 51%;
  left: 52%;

  width:
    min(42vw,560px);

  aspect-ratio: 1;

  transform:
    translate(-50%,-52%);
}


.sbit-services
.sbit-services__network-ring {
  position: absolute;

  inset: 12%;

  border:
    1px solid
    rgba(96,165,250,.18);

  border-radius: 50%;

  animation:
    sbsRotate
    28s linear infinite;
}


.sbit-services
.sbit-services__network-ring::before {
  position: absolute;

  inset: 18%;

  border:
    1px dashed
    rgba(34,211,238,.17);

  border-radius: 50%;

  content: "";
}


/* =========================================================
   CORE
========================================================= */

.sbit-services
.sbit-services__core {
  position: absolute;

  top: 50%;
  left: 50%;

  display: grid;

  width: 110px;
  height: 110px;

  place-content: center;

  border:
    1px solid
    rgba(96,165,250,.30);

  border-radius: 50%;

  color: #FFFFFF;

  background:
    rgba(5,8,22,.88);

  box-shadow:
    0 0 62px
    rgba(47,107,255,.23);

  text-align: center;

  transform:
    translate(-50%,-50%);
}


.sbit-services
.sbit-services__core::before {
  position: absolute;

  inset: -10px;

  border:
    1px solid
    rgba(34,211,238,.10);

  border-radius: 50%;

  content: "";
}


.sbit-services
.sbit-services__core small {
  color:
    rgba(159,176,199,.55);

  font-size: 5px;
  font-weight: 800;

  letter-spacing: .14em;
}


.sbit-services
.sbit-services__core strong {
  display: block;

  margin:
    3px
    0;

  font-size: 22px;
}


.sbit-services
.sbit-services__core span {
  color:
    var(--sbs-blue-2);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .14em;
}


/* =========================================================
   SERVICE MODULES
========================================================= */

.sbit-services
.sbit-services__module {
  position: absolute;

  min-width: 96px;

  padding:
    10px
    11px;

  border:
    1px solid
    rgba(96,165,250,.17);

  border-radius:
    11px;

  background:
    rgba(5,8,22,.80);

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.18);
}


.sbit-services
.sbit-services__module > i {
  position: absolute;

  top: -4px;
  right: 11px;

  width: 7px;
  height: 7px;

  border:
    2px solid
    var(--sbs-blue);

  border-radius: 50%;

  background: #DBEAFE;

  box-shadow:
    0 0 18px
    rgba(47,107,255,.85);

  animation:
    sbsPulse
    3s ease-in-out infinite;
}


.sbit-services
.sbit-services__module > span {
  color:
    var(--sbs-blue-2);

  font-size: 6px;
  font-weight: 900;
}


.sbit-services
.sbit-services__module strong {
  display: block;

  margin-top: 3px;

  color: #F0F6FD;

  font-size: 9px;
}


.sbit-services
.sbit-services__module small {
  display: block;

  margin-top: 2px;

  color:
    rgba(159,176,199,.50);

  font-size: 5px;

  letter-spacing: .10em;
}


.sbit-services
.sbit-services__module--mobile {
  top: 12%;
  left: 9%;
}


.sbit-services
.sbit-services__module--web {
  top: 15%;
  right: 6%;
}


.sbit-services
.sbit-services__module--access {
  bottom: 13%;
  left: 8%;
}


.sbit-services
.sbit-services__module--cctv {
  right: 7%;
  bottom: 14%;
}


.sbit-services
.sbit-services__module--web > i {
  animation-delay:
    .7s;
}


.sbit-services
.sbit-services__module--access > i {
  animation-delay:
    1.4s;
}


.sbit-services
.sbit-services__module--cctv > i {
  animation-delay:
    2.1s;
}


/* =========================================================
   CONNECTION LINES
========================================================= */

.sbit-services
.sbit-services__network-path {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 31%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(96,165,250,.45),
      transparent
    );

  transform-origin:
    left center;
}


.sbit-services
.sbit-services__network-path--1 {
  transform:
    rotate(-139deg);
}


.sbit-services
.sbit-services__network-path--2 {
  transform:
    rotate(-42deg);
}


.sbit-services
.sbit-services__network-path--3 {
  transform:
    rotate(139deg);
}


.sbit-services
.sbit-services__network-path--4 {
  transform:
    rotate(41deg);
}


/* =========================================================
   STACK CARD
========================================================= */

.sbit-services
.sbit-services__stack {
  position: absolute;
  z-index: 8;

  top: 62px;
  left: 22px;

  width: 215px;

  padding: 15px;

  border:
    1px solid
    rgba(96,165,250,.17);

  border-radius: 15px;

  background:
    rgba(5,8,22,.88);

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.22);
}


.sbit-services
.sbit-services__stack-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 9px;
}


.sbit-services
.sbit-services__stack-head span {
  color: #94A8BE;

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .14em;
}


.sbit-services
.sbit-services__stack-head i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--sbs-green);

  box-shadow:
    0 0 9px
    rgba(34,197,94,.60);
}


.sbit-services
.sbit-services__stack > strong {
  display: block;

  font-size: 13px;
}


.sbit-services
.sbit-services__stack > p {
  margin:
    7px
    0
    0;

  color:
    rgba(159,176,199,.64);

  font-size: 7px;

  line-height: 1.52;
}


.sbit-services
.sbit-services__stack-items {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 11px;
}


.sbit-services
.sbit-services__stack-items span {
  padding:
    5px
    7px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius: 6px;

  color: #B5C7D9;

  font-size: 6px;
  font-weight: 700;
}


/* =========================================================
   TERMINAL
========================================================= */

.sbit-services
.sbit-services__terminal {
  position: absolute;
  z-index: 8;

  top: 62px;
  right: 22px;

  width:
    min(45%,430px);

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius: 15px;

  background:
    rgba(3,7,18,.91);

  box-shadow:
    0 22px 55px
    rgba(0,0,0,.25);
}


.sbit-services
.sbit-services__terminal-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  height: 34px;

  padding:
    0
    12px;

  border-bottom:
    1px solid
    rgba(255,255,255,.075);
}


.sbit-services
.sbit-services__terminal-head > div {
  display: flex;

  gap: 6px;
}


.sbit-services
.sbit-services__terminal-head i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #64748B;
}


.sbit-services
.sbit-services__terminal-head i:nth-child(1) {
  background: #EF4444;
}


.sbit-services
.sbit-services__terminal-head i:nth-child(2) {
  background: #F59E0B;
}


.sbit-services
.sbit-services__terminal-head i:nth-child(3) {
  background: #22C55E;
}


.sbit-services
.sbit-services__terminal-head > span {
  color:
    rgba(159,176,199,.46);

  font-size: 6px;

  letter-spacing: .08em;
}


.sbit-services
.sbit-services__terminal-body {
  padding:
    13px
    15px
    15px;

  color: #B7C8DC;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size: 8px;

  line-height: 1.67;
}


.sbit-services
.sbit-services__terminal-body p {
  margin:
    0
    0
    2px;
}


.sbit-services
.is-green {
  color: #86EFAC;
}


.sbit-services
.is-blue {
  color: #93C5FD;
}


.sbit-services
.is-cyan {
  color: #67E8F9;
}


.sbit-services
.sbit-services__terminal-ready {
  margin-top:
    6px;
}


.sbit-services
.sbit-services__terminal-ready i {
  display: inline-block;

  width: 5px;
  height: 9px;

  margin-left: 4px;

  vertical-align: -1px;

  background:
    var(--sbs-green);

  animation:
    sbsCursor
    1s steps(1) infinite;
}


/* =========================================================
   VISUAL FOOTER
========================================================= */

.sbit-services
.sbit-services__visual-footer {
  position: absolute;
  z-index: 9;

  right: 22px;
  bottom: 22px;
  left: 22px;

  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  padding:
    16px
    18px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius: 15px;

  background:
    rgba(5,8,22,.89);

  box-shadow:
    0 18px 48px
    rgba(0,0,0,.20);
}


.sbit-services
.sbit-services__visual-footer > div:first-child > span {
  display: block;

  margin-bottom: 5px;

  color:
    rgba(159,176,199,.56);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .14em;
}


.sbit-services
.sbit-services__visual-footer strong {
  display: block;

  color: #F4F8FD;

  font-size:
    clamp(14px,1vw,18px);
}


.sbit-services
.sbit-services__visual-footer em {
  color:
    var(--sbs-blue-2);

  font-style: normal;
}


/* =========================================================
   COVERAGE
========================================================= */

.sbit-services
.sbit-services__coverage {
  flex: 0 0 auto;

  text-align: right;
}


.sbit-services
.sbit-services__coverage span {
  display: block;

  margin-bottom:
    3px;

  color:
    rgba(159,176,199,.45);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .12em;
}


.sbit-services
.sbit-services__coverage strong {
  color:
    var(--sbs-blue-2);

  font-size: 20px;
}


/* =========================================================
   SIDE
========================================================= */

.sbit-services
.sbit-services__side-label {
  position: absolute;
  z-index: 8;

  top: 50%;
  right: 8px;

  color:
    rgba(255,255,255,.24);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .19em;

  text-transform: uppercase;

  writing-mode:
    vertical-rl;

  transform:
    translateY(-50%);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width:1800px) {

  .sbit-services
  .sbit-services__shell {
    grid-template-columns:
      minmax(480px,40%)
      minmax(0,60%);
  }


  .sbit-services
  .sbit-services__copy {
    padding-inline:
      clamp(70px,5vw,108px);
  }


  .sbit-services
  .sbit-services__visual {
    padding-right:
      28px;
  }

}


/* =========================================================
   SHORT DESKTOP
========================================================= */

@media
(min-width:1051px)
and
(max-height:780px) {

  .sbit-services
  .sbit-services__copy {
    padding-top: 34px;
    padding-bottom: 34px;
  }


  .sbit-services
  .sbit-services__cards {
    margin-top: 18px;
  }


  .sbit-services
  .sbit-services__card {
    min-height: 165px;

    padding: 12px;
  }


  .sbit-services
  .sbit-services__card-icon {
    width: 32px;
    height: 32px;

    margin-top: 9px;
  }


  .sbit-services
  .sbit-services__card > small {
    margin-top: 9px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1050px) {

  .sbit-services {
    min-height: auto;
  }


  .sbit-services
  .sbit-services__shell {
    grid-template-columns:
      minmax(0,1fr);

    min-height: auto;
  }


  .sbit-services
  .sbit-services__copy {
    min-height: auto;

    padding:
      70px
      28px
      42px;
  }


  .sbit-services
  .sbit-services__copy-inner {
    max-width: 780px;

    margin: 0;
  }


  .sbit-services
  .sbit-services__visual {
    padding:
      0
      28px
      28px;
  }


  .sbit-services
  .sbit-services__media {
    min-height:
      620px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:650px) {

  .sbit-services
  .sbit-services__copy {
    padding:
      56px
      16px
      34px;
  }


  .sbit-services
  .sbit-services__index {
    display: none;
  }


  .sbit-services
  .sbit-services__title {
    font-size:
      clamp(34px,8.5vw,37px);
  }


  .sbit-services
  .sbit-services__cards {
    grid-template-columns:
      minmax(0,1fr);
  }


  .sbit-services
  .sbit-services__card {
    min-height: auto;
  }


  .sbit-services
  .sbit-services__visual {
    padding:
      0
      14px
      14px;
  }


  .sbit-services
  .sbit-services__media {
    min-height:
      600px;

    border-radius:
      21px;
  }


  .sbit-services
  .sbit-services__visual-status {
    display: none;
  }


  .sbit-services
  .sbit-services__stack {
    top: 54px;
    left: 14px;

    width: 42%;
  }


  .sbit-services
  .sbit-services__stack > p {
    display: none;
  }


  .sbit-services
  .sbit-services__terminal {
    top: 54px;
    right: 14px;

    width: 51%;
  }


  .sbit-services
  .sbit-services__network {
    top: 56%;
    left: 50%;

    width: 91vw;
  }


  .sbit-services
  .sbit-services__module {
    min-width: 76px;

    padding: 7px;
  }


  .sbit-services
  .sbit-services__module strong {
    font-size: 7px;
  }


  .sbit-services
  .sbit-services__visual-footer {
    right: 14px;
    bottom: 14px;
    left: 14px;
  }


  .sbit-services
  .sbit-services__side-label {
    display: none;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:420px) {

  .sbit-services
  .sbit-services__stack {
    display: none;
  }


  .sbit-services
  .sbit-services__terminal {
    width:
      calc(100% - 28px);
  }


  .sbit-services
  .sbit-services__network {
    top: 58%;
  }


  .sbit-services
  .sbit-services__coverage {
    display: none;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce) {

  .sbit-services *,
  .sbit-services *::before,
  .sbit-services *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes sbsScan {

  to {
    transform:
      translateY(
        calc(100svh + 290px)
      );
  }

}


@keyframes sbsRotate {

  to {
    transform:
      rotate(360deg);
  }

}


@keyframes sbsPulse {

  0%,
  100% {
    opacity: .48;

    transform:
      scale(.85);
  }


  50% {
    opacity: 1;

    transform:
      scale(1.13);
  }

}


@keyframes sbsCursor {

  0%,
  49% {
    opacity: 1;
  }


  50%,
  100% {
    opacity: 0;
  }

}



/*section 3 end here*/


/*section 4 start here*/

/* =========================================================
   SINDYBAD ENTERPRISE IT — MOBILE APPLICATIONS
   Fully scoped / lightweight / no global styles
========================================================= */

.sbit-mobile,
.sbit-mobile * {
  box-sizing: border-box;
}


.sbit-mobile {
  --sbm-bg: #050816;
  --sbm-bg-2: #08111F;

  --sbm-panel: #0D1728;

  --sbm-line:
    rgba(148,163,184,.16);

  --sbm-text: #F8FBFF;
  --sbm-muted: #9FB0C7;

  --sbm-blue: #2F6BFF;
  --sbm-blue-2: #60A5FA;

  --sbm-cyan: #22D3EE;
  --sbm-green: #22C55E;

  position: relative;
  isolation: isolate;

  width: 100%;

  min-height:
    calc(100svh - 72px);

  overflow: hidden;

  color:
    var(--sbm-text);

  background:
    var(--sbm-bg);
}


/* =========================================================
   AMBIENT
========================================================= */

.sbit-mobile
.sbit-mobile__ambient {
  position: absolute;
  z-index: -2;

  inset: 0;

  overflow: hidden;

  pointer-events: none;
}


.sbit-mobile
.sbit-mobile__ambient-grid {
  position: absolute;

  inset: 0;

  opacity: .11;

  background-image:
    linear-gradient(
      rgba(96,165,250,.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96,165,250,.05) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;
}


.sbit-mobile
.sbit-mobile__ambient-glow {
  position: absolute;

  top: -26%;
  right: -14%;

  width:
    min(44vw,760px);

  aspect-ratio: 1;

  border-radius: 50%;

  opacity: .10;

  background:
    var(--sbm-blue);

  filter:
    blur(120px);
}


.sbit-mobile
.sbit-mobile__ambient-line {
  position: absolute;

  top: 0;
  right: 6%;

  width: 120px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      var(--sbm-blue),
      var(--sbm-green)
    );
}


/* =========================================================
   SHELL
========================================================= */

.sbit-mobile
.sbit-mobile__shell {
  display: grid;

  grid-template-columns:
    minmax(0,58%)
    minmax(400px,42%);

  width: 100%;

  min-height:
    calc(100svh - 72px);
}


/* =========================================================
   VISUAL
========================================================= */

.sbit-mobile
.sbit-mobile__visual {
  min-width: 0;

  padding:
    16px
    0
    16px
    16px;
}


.sbit-mobile
.sbit-mobile__media {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 650px;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    28px;

  background:
    #07101D;

  box-shadow:
    0 30px 82px
    rgba(0,0,0,.30);
}


/* =========================================================
   IMAGE
========================================================= */

.sbit-mobile
.sbit-mobile__image {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    brightness(.49)
    saturate(.72)
    contrast(1.05);

  transform:
    scale(1.02);

  transition:
    transform 9s ease;
}


.sbit-mobile.is-ready
.sbit-mobile__image {
  transform:
    scale(1.065);
}


/* =========================================================
   VISUAL OVERLAY
========================================================= */

.sbit-mobile
.sbit-mobile__shade {
  position: absolute;
  z-index: 1;

  inset: 0;

  background:
    radial-gradient(
      600px 520px
      at 50% 44%,
      rgba(47,107,255,.20),
      transparent 64%
    ),
    linear-gradient(
      180deg,
      rgba(5,8,22,.10),
      rgba(5,8,22,.36) 52%,
      rgba(5,8,22,.92)
    );
}


.sbit-mobile
.sbit-mobile__tech-grid {
  position: absolute;
  z-index: 2;

  inset: 0;

  opacity: .5;

  background-image:
    linear-gradient(
      rgba(96,165,250,.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96,165,250,.05) 1px,
      transparent 1px
    );

  background-size:
    46px 46px;

  -webkit-mask-image:
    linear-gradient(
      180deg,
      #000,
      rgba(0,0,0,.65) 68%,
      transparent
    );

  mask-image:
    linear-gradient(
      180deg,
      #000,
      rgba(0,0,0,.65) 68%,
      transparent
    );
}


/* =========================================================
   SCAN
========================================================= */

.sbit-mobile
.sbit-mobile__scan {
  position: absolute;
  z-index: 3;

  inset: 0;

  overflow: hidden;

  pointer-events: none;
}


.sbit-mobile
.sbit-mobile__scan::before {
  position: absolute;

  top: -160px;
  right: 0;
  left: 0;

  height: 140px;

  content: "";

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(34,211,238,.052),
      transparent
    );

  animation:
    sbmScan 9s linear infinite;

  will-change:
    transform;
}


/* =========================================================
   VISUAL TOP
========================================================= */

.sbit-mobile
.sbit-mobile__visual-top {
  position: absolute;
  z-index: 10;

  top: 22px;
  right: 22px;
  left: 22px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;
}


.sbit-mobile
.sbit-mobile__live {
  display: flex;

  align-items: center;

  gap: 8px;

  color: #D6E4F5;

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .15em;
}


.sbit-mobile
.sbit-mobile__live i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--sbm-green);

  box-shadow:
    0 0 12px
    rgba(34,197,94,.8);
}


.sbit-mobile
.sbit-mobile__visual-status {
  color:
    rgba(214,228,245,.43);

  font-size: 6px;
  font-weight: 850;

  letter-spacing: .13em;
}


/* =========================================================
   PHONE
========================================================= */

.sbit-mobile
.sbit-mobile__phone {
  position: absolute;
  z-index: 6;

  top: 49%;
  left: 50%;

  width:
    min(27vw,320px);

  transform:
    translate(-50%,-50%)
    rotate(-2deg);

  transition:
    transform .7s
    cubic-bezier(.2,.8,.2,1);
}


.sbit-mobile.is-ready
.sbit-mobile__phone {
  transform:
    translate(-50%,-50%)
    rotate(0);
}


.sbit-mobile
.sbit-mobile__phone-frame {
  position: relative;

  aspect-ratio: .52;

  padding: 9px;

  border:
    1px solid
    rgba(255,255,255,.24);

  border-radius:
    42px;

  background:
    #020611;

  box-shadow:
    0 38px 90px
    rgba(0,0,0,.54),
    0 0 70px
    rgba(47,107,255,.18);
}


.sbit-mobile
.sbit-mobile__phone-frame::after {
  position: absolute;

  inset: 4px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:
    37px;

  content: "";

  pointer-events: none;
}


.sbit-mobile
.sbit-mobile__phone-notch {
  position: absolute;
  z-index: 3;

  top: 9px;
  left: 50%;

  width: 34%;
  height: 21px;

  border-radius:
    0
    0
    14px
    14px;

  background:
    #01030A;

  transform:
    translateX(-50%);
}


.sbit-mobile
.sbit-mobile__screen {
  position: relative;

  height: 100%;

  overflow: hidden;

  padding:
    42px
    16px
    16px;

  border-radius:
    34px;

  background:
    radial-gradient(
      320px 260px
      at 100% 0,
      rgba(47,107,255,.18),
      transparent 64%
    ),
    linear-gradient(
      180deg,
      #0B1525,
      #07101C
    );
}


/* =========================================================
   PHONE TOP
========================================================= */

.sbit-mobile
.sbit-mobile__screen-top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;
}


.sbit-mobile
.sbit-mobile__screen-top small {
  display: block;

  color:
    rgba(159,176,199,.58);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .12em;
}


.sbit-mobile
.sbit-mobile__screen-top strong {
  display: block;

  margin-top: 4px;

  color: #F4F8FD;

  font-size: 13px;
}


.sbit-mobile
.sbit-mobile__avatar {
  display: grid;

  width: 33px;
  height: 33px;

  place-items: center;

  border:
    1px solid
    rgba(96,165,250,.23);

  border-radius: 50%;

  color:
    var(--sbm-blue-2);

  background:
    rgba(47,107,255,.08);

  font-size: 8px;
  font-weight: 900;
}


/* =========================================================
   SUMMARY
========================================================= */

.sbit-mobile
.sbit-mobile__screen-summary {
  margin-top: 20px;

  padding: 13px;

  border:
    1px solid
    rgba(96,165,250,.14);

  border-radius: 14px;

  background:
    rgba(47,107,255,.055);
}


.sbit-mobile
.sbit-mobile__screen-summary > span {
  display: block;

  color:
    rgba(159,176,199,.56);

  font-size: 6px;
}


.sbit-mobile
.sbit-mobile__screen-summary strong {
  display: flex;

  align-items: center;

  gap: 7px;

  margin-top: 5px;

  color: #EFF6FF;

  font-size: 12px;
}


.sbit-mobile
.sbit-mobile__screen-summary i {
  color:
    var(--sbm-green);

  font-size: 7px;

  font-style: normal;
}


/* =========================================================
   METRICS
========================================================= */

.sbit-mobile
.sbit-mobile__metrics {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 6px;

  margin-top: 8px;
}


.sbit-mobile
.sbit-mobile__metrics article {
  min-width: 0;

  padding:
    9px;

  border:
    1px solid
    rgba(255,255,255,.065);

  border-radius: 10px;

  background:
    rgba(255,255,255,.02);
}


.sbit-mobile
.sbit-mobile__metrics small {
  display: block;

  color:
    rgba(159,176,199,.46);

  font-size: 5px;
  font-weight: 850;
}


.sbit-mobile
.sbit-mobile__metrics strong {
  display: block;

  margin-top: 4px;

  color: #FFFFFF;

  font-size: 15px;
}


.sbit-mobile
.sbit-mobile__metrics span {
  display: block;

  margin-top: 2px;

  color:
    #86EFAC;

  font-size: 5px;
}


/* =========================================================
   CHART
========================================================= */

.sbit-mobile
.sbit-mobile__chart {
  margin-top: 8px;

  padding:
    12px;

  border:
    1px solid
    rgba(255,255,255,.065);

  border-radius: 12px;

  background:
    rgba(255,255,255,.018);
}


.sbit-mobile
.sbit-mobile__chart-head {
  display: flex;

  align-items: center;
  justify-content: space-between;
}


.sbit-mobile
.sbit-mobile__chart-head span {
  color: #EAF2FC;

  font-size: 8px;
  font-weight: 800;
}


.sbit-mobile
.sbit-mobile__chart-head small {
  color:
    rgba(159,176,199,.42);

  font-size: 5px;
}


.sbit-mobile
.sbit-mobile__bars {
  display: flex;

  align-items: flex-end;

  gap: 5px;

  height: 70px;

  margin-top: 10px;
}


.sbit-mobile
.sbit-mobile__bars i {
  width: 100%;
  height:
    var(--bar);

  border-radius:
    4px 4px 2px 2px;

  background:
    linear-gradient(
      180deg,
      var(--sbm-blue-2),
      rgba(47,107,255,.20)
    );

  animation:
    sbmBars 1.1s
    cubic-bezier(.2,.8,.2,1)
    both;
}


/* =========================================================
   QUICK
========================================================= */

.sbit-mobile
.sbit-mobile__quick {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 6px;

  margin-top: 8px;
}


.sbit-mobile
.sbit-mobile__quick article {
  position: relative;

  padding: 10px;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius: 10px;

  background:
    rgba(255,255,255,.016);
}


.sbit-mobile
.sbit-mobile__quick span {
  color:
    var(--sbm-blue-2);

  font-size: 5px;
  font-weight: 900;
}


.sbit-mobile
.sbit-mobile__quick strong {
  display: block;

  margin-top: 3px;

  font-size: 7px;
}


.sbit-mobile
.sbit-mobile__quick small {
  display: block;

  margin-top: 2px;

  color:
    rgba(159,176,199,.48);

  font-size: 5px;
}


/* =========================================================
   MOBILE NAV
========================================================= */

.sbit-mobile
.sbit-mobile__nav {
  position: absolute;

  right: 18px;
  bottom: 15px;
  left: 18px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 14px;
}


.sbit-mobile
.sbit-mobile__nav i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    rgba(159,176,199,.28);
}


.sbit-mobile
.sbit-mobile__nav i.active {
  width: 17px;

  border-radius: 999px;

  background:
    var(--sbm-blue-2);
}


/* =========================================================
   API CARD
========================================================= */

.sbit-mobile
.sbit-mobile__api-card {
  position: absolute;
  z-index: 8;

  top: 69px;
  left: 22px;

  width: 220px;

  padding: 15px;

  border:
    1px solid
    rgba(96,165,250,.17);

  border-radius: 15px;

  background:
    rgba(5,8,22,.88);

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.22);
}


.sbit-mobile
.sbit-mobile__api-head {
  display: flex;

  align-items: center;
  justify-content: space-between;
}


.sbit-mobile
.sbit-mobile__api-head span {
  color: #94A8BE;

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .14em;
}


.sbit-mobile
.sbit-mobile__api-head i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--sbm-green);

  box-shadow:
    0 0 9px
    rgba(34,197,94,.6);
}


.sbit-mobile
.sbit-mobile__api-card > strong {
  display: block;

  margin-top: 9px;

  color: #F4F8FD;

  font-size: 13px;
}


.sbit-mobile
.sbit-mobile__api-card > p {
  margin:
    6px
    0
    0;

  color:
    rgba(159,176,199,.64);

  font-size: 7px;

  line-height: 1.52;
}


.sbit-mobile
.sbit-mobile__api-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 10px;
}


.sbit-mobile
.sbit-mobile__api-tags span {
  padding:
    5px
    7px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius: 6px;

  color: #B7C8D9;

  font-size: 6px;
}


/* =========================================================
   SECURITY CARD
========================================================= */

.sbit-mobile
.sbit-mobile__security-card {
  position: absolute;
  z-index: 8;

  top: 69px;
  right: 22px;

  width: 180px;

  padding: 14px;

  border:
    1px solid
    rgba(34,197,94,.16);

  border-radius: 14px;

  background:
    rgba(5,8,22,.88);

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.20);
}


.sbit-mobile
.sbit-mobile__security-card > span {
  display: block;

  color:
    rgba(159,176,199,.55);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .14em;
}


.sbit-mobile
.sbit-mobile__security-card > strong {
  display: block;

  margin-top: 7px;

  font-size: 11px;
}


.sbit-mobile
.sbit-mobile__security-card > div {
  display: flex;

  align-items: center;

  gap: 6px;

  margin-top: 9px;

  color:
    rgba(159,176,199,.62);

  font-size: 6px;
}


.sbit-mobile
.sbit-mobile__security-card > div i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--sbm-green);

  box-shadow:
    0 0 8px
    rgba(34,197,94,.6);
}


/* =========================================================
   VISUAL FOOTER
========================================================= */

.sbit-mobile
.sbit-mobile__visual-footer {
  position: absolute;
  z-index: 9;

  right: 22px;
  bottom: 22px;
  left: 22px;

  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 22px;

  padding:
    16px
    18px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius: 15px;

  background:
    rgba(5,8,22,.89);

  box-shadow:
    0 18px 48px
    rgba(0,0,0,.20);
}


.sbit-mobile
.sbit-mobile__visual-footer > div:first-child > span,
.sbit-mobile
.sbit-mobile__platforms > span {
  display: block;

  margin-bottom: 4px;

  color:
    rgba(159,176,199,.52);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .14em;
}


.sbit-mobile
.sbit-mobile__visual-footer strong {
  color: #F4F8FD;

  font-size:
    clamp(14px,1vw,18px);
}


.sbit-mobile
.sbit-mobile__visual-footer em {
  color:
    var(--sbm-blue-2);

  font-style: normal;
}


.sbit-mobile
.sbit-mobile__platforms {
  flex: 0 0 auto;

  text-align: right;
}


.sbit-mobile
.sbit-mobile__platforms strong {
  color:
    var(--sbm-blue-2);

  font-size: 10px;
}


/* =========================================================
   SIDE LABEL
========================================================= */

.sbit-mobile
.sbit-mobile__side-label {
  position: absolute;
  z-index: 8;

  top: 50%;
  left: 8px;

  color:
    rgba(255,255,255,.22);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .19em;

  text-transform: uppercase;

  writing-mode:
    vertical-rl;

  transform:
    translateY(-50%)
    rotate(180deg);
}


/* =========================================================
   COPY
========================================================= */

.sbit-mobile
.sbit-mobile__copy {
  display: flex;

  align-items: center;

  min-width: 0;

  padding:
    clamp(48px,5vh,76px)
    clamp(38px,4.5vw,84px);

  background:
    radial-gradient(
      560px 430px
      at 10% 16%,
      rgba(47,107,255,.07),
      transparent 65%
    ),
    var(--sbm-bg);
}


.sbit-mobile
.sbit-mobile__copy-inner {
  width: 100%;
  max-width: 700px;

  margin-right: auto;
}


/* =========================================================
   COPY TOP
========================================================= */

.sbit-mobile
.sbit-mobile__topline {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 20px;
}


.sbit-mobile
.sbit-mobile__kicker {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: #ADC8FF;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .16em;

  text-transform: uppercase;
}


.sbit-mobile
.sbit-mobile__kicker::before {
  width: 38px;
  height: 1px;

  flex: 0 0 auto;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--sbm-blue),
      var(--sbm-green)
    );
}


.sbit-mobile
.sbit-mobile__index {
  color:
    rgba(159,176,199,.43);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .15em;
}


/* =========================================================
   TITLE
========================================================= */

.sbit-mobile
.sbit-mobile__title {
  max-width: 640px;

  margin: 0;

  color:
    var(--sbm-text);

  font-size:
    clamp(34px,3vw,39px);

  font-weight: 860;

  line-height: 1.03;

  letter-spacing:
    -.045em;

  text-wrap: balance;
}


.sbit-mobile
.sbit-mobile__title span {
  display: block;

  margin-top: 4px;

  color:
    var(--sbm-blue-2);
}


/* =========================================================
   TEXT
========================================================= */

.sbit-mobile
.sbit-mobile__lead {
  max-width: 640px;

  margin:
    21px
    0
    0;

  color: #CBD6E5;

  font-size:
    clamp(14px,1vw,16px);

  line-height: 1.65;
}


.sbit-mobile
.sbit-mobile__description {
  max-width: 650px;

  margin:
    13px
    0
    0;

  color:
    var(--sbm-muted);

  font-size: 11px;

  line-height: 1.73;
}


/* =========================================================
   TABS
========================================================= */

.sbit-mobile
.sbit-mobile__tabs {
  display: flex;

  gap: 7px;

  margin-top: 23px;

  padding:
    5px;

  width: max-content;
  max-width: 100%;

  border:
    1px solid
    var(--sbm-line);

  border-radius: 12px;

  background:
    rgba(255,255,255,.018);
}


.sbit-mobile
.sbit-mobile__tab {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  min-height: 37px;

  padding:
    0
    12px;

  border:
    1px solid
    transparent;

  border-radius:
    8px;

  color:
    rgba(159,176,199,.72);

  background:
    transparent;

  font: inherit;

  font-size: 8px;
  font-weight: 850;

  cursor: pointer;

  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease;
}


.sbit-mobile
.sbit-mobile__tab span {
  color:
    rgba(96,165,250,.55);

  font-size: 6px;
}


.sbit-mobile
.sbit-mobile__tab.is-active {
  border-color:
    rgba(96,165,250,.18);

  color:
    #FFFFFF;

  background:
    rgba(47,107,255,.12);
}


.sbit-mobile
.sbit-mobile__tab.is-active span {
  color:
    var(--sbm-blue-2);
}


.sbit-mobile
.sbit-mobile__tab:focus-visible {
  outline:
    2px solid
    var(--sbm-blue-2);

  outline-offset: 2px;
}


/* =========================================================
   PANELS
========================================================= */

.sbit-mobile
.sbit-mobile__panel {
  margin-top: 14px;
}


.sbit-mobile
.sbit-mobile__panel[hidden] {
  display: none;
}


/* =========================================================
   SOLUTIONS
========================================================= */

.sbit-mobile
.sbit-mobile__solutions {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 7px;
}


.sbit-mobile
.sbit-mobile__solutions article {
  display: grid;

  grid-template-columns:
    27px
    minmax(0,1fr);

  gap: 9px;

  padding:
    10px;

  border:
    1px solid
    var(--sbm-line);

  border-radius: 10px;

  background:
    rgba(255,255,255,.018);

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}


.sbit-mobile
.sbit-mobile__solutions article > span {
  display: grid;

  width: 27px;
  height: 27px;

  place-items: center;

  border:
    1px solid
    rgba(96,165,250,.16);

  border-radius: 7px;

  color:
    var(--sbm-blue-2);

  background:
    rgba(47,107,255,.06);

  font-size: 6px;
  font-weight: 900;
}


.sbit-mobile
.sbit-mobile__solutions strong {
  display: block;

  color: #EFF6FF;

  font-size: 9px;
}


.sbit-mobile
.sbit-mobile__solutions p {
  margin:
    4px
    0
    0;

  color:
    rgba(159,176,199,.68);

  font-size: 7px;

  line-height: 1.5;
}


@media (hover:hover) {

  .sbit-mobile
  .sbit-mobile__solutions article:hover {
    transform:
      translateY(-2px);

    border-color:
      rgba(96,165,250,.25);

    background:
      rgba(255,255,255,.028);
  }

}


/* =========================================================
   FEATURES
========================================================= */

.sbit-mobile
.sbit-mobile__features {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;
}


.sbit-mobile
.sbit-mobile__features span {
  padding:
    9px
    11px;

  border:
    1px solid
    var(--sbm-line);

  border-radius: 9px;

  color: #AEBED1;

  background:
    rgba(255,255,255,.018);

  font-size: 8px;
}


/* =========================================================
   PROCESS
========================================================= */

.sbit-mobile
.sbit-mobile__process {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 7px;
}


.sbit-mobile
.sbit-mobile__process span {
  display: flex;

  align-items: center;

  gap: 8px;

  min-width: 0;

  padding:
    10px;

  border:
    1px solid
    var(--sbm-line);

  border-radius: 9px;

  color:
    rgba(223,232,243,.82);

  background:
    rgba(255,255,255,.018);

  font-size: 8px;
}


.sbit-mobile
.sbit-mobile__process i {
  color:
    var(--sbm-blue-2);

  font-size: 6px;
  font-weight: 900;

  font-style: normal;
}


/* =========================================================
   TRUST
========================================================= */

.sbit-mobile
.sbit-mobile__trust {
  display: flex;

  flex-wrap: wrap;

  gap:
    8px
    17px;

  margin-top:
    18px;

  padding-top:
    17px;

  border-top:
    1px solid
    rgba(148,163,184,.10);
}


.sbit-mobile
.sbit-mobile__trust span {
  display: flex;

  align-items: center;

  gap: 7px;

  color:
    rgba(159,176,199,.66);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .07em;

  text-transform: uppercase;
}


.sbit-mobile
.sbit-mobile__trust i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--sbm-green);

  box-shadow:
    0 0 9px
    rgba(34,197,94,.55);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width:1800px) {

  .sbit-mobile
  .sbit-mobile__shell {
    grid-template-columns:
      minmax(0,60%)
      minmax(480px,40%);
  }


  .sbit-mobile
  .sbit-mobile__visual {
    padding-left: 28px;
  }


  .sbit-mobile
  .sbit-mobile__copy {
    padding-inline:
      clamp(70px,5vw,108px);
  }

}


/* =========================================================
   SHORT DESKTOP
========================================================= */

@media
(min-width:1051px)
and
(max-height:820px) {

  .sbit-mobile
  .sbit-mobile__copy {
    padding-top: 32px;
    padding-bottom: 32px;
  }


  .sbit-mobile
  .sbit-mobile__topline {
    margin-bottom: 14px;
  }


  .sbit-mobile
  .sbit-mobile__lead {
    margin-top: 15px;
  }


  .sbit-mobile
  .sbit-mobile__tabs {
    margin-top: 17px;
  }


  .sbit-mobile
  .sbit-mobile__solutions article {
    padding: 8px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1050px) {

  .sbit-mobile {
    min-height: auto;
  }


  .sbit-mobile
  .sbit-mobile__shell {
    grid-template-columns:
      minmax(0,1fr);

    min-height: auto;
  }


  .sbit-mobile
  .sbit-mobile__copy {
    order: 1;

    padding:
      70px
      28px
      42px;
  }


  .sbit-mobile
  .sbit-mobile__copy-inner {
    max-width: 800px;

    margin: 0;
  }


  .sbit-mobile
  .sbit-mobile__visual {
    order: 2;

    padding:
      0
      28px
      28px;
  }


  .sbit-mobile
  .sbit-mobile__media {
    min-height: 700px;
  }


  .sbit-mobile
  .sbit-mobile__phone {
    width:
      min(43vw,320px);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:650px) {

  .sbit-mobile
  .sbit-mobile__copy {
    padding:
      56px
      16px
      34px;
  }


  .sbit-mobile
  .sbit-mobile__index {
    display: none;
  }


  .sbit-mobile
  .sbit-mobile__title {
    font-size:
      clamp(34px,8.5vw,37px);
  }


  .sbit-mobile
  .sbit-mobile__tabs {
    width: 100%;
  }


  .sbit-mobile
  .sbit-mobile__tab {
    flex: 1 1 0;

    justify-content: center;

    padding-inline: 7px;
  }


  .sbit-mobile
  .sbit-mobile__solutions {
    grid-template-columns:
      minmax(0,1fr);
  }


  .sbit-mobile
  .sbit-mobile__process {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .sbit-mobile
  .sbit-mobile__visual {
    padding:
      0
      14px
      14px;
  }


  .sbit-mobile
  .sbit-mobile__media {
    min-height: 650px;

    border-radius: 21px;
  }


  .sbit-mobile
  .sbit-mobile__visual-status {
    display: none;
  }


  .sbit-mobile
  .sbit-mobile__phone {
    top: 51%;

    width:
      min(65vw,300px);
  }


  .sbit-mobile
  .sbit-mobile__api-card {
    top: 54px;
    left: 14px;

    width: 155px;
  }


  .sbit-mobile
  .sbit-mobile__api-card > p {
    display: none;
  }


  .sbit-mobile
  .sbit-mobile__security-card {
    top: 54px;
    right: 14px;

    width: 145px;
  }


  .sbit-mobile
  .sbit-mobile__visual-footer {
    right: 14px;
    bottom: 14px;
    left: 14px;
  }


  .sbit-mobile
  .sbit-mobile__platforms,
  .sbit-mobile
  .sbit-mobile__side-label {
    display: none;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:420px) {

  .sbit-mobile
  .sbit-mobile__process {
    grid-template-columns:
      minmax(0,1fr);
  }


  .sbit-mobile
  .sbit-mobile__api-card {
    display: none;
  }


  .sbit-mobile
  .sbit-mobile__security-card {
    top: 54px;
    right: 14px;

    width: 150px;
  }


  .sbit-mobile
  .sbit-mobile__phone {
    top: 52%;

    width: 76vw;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce) {

  .sbit-mobile *,
  .sbit-mobile *::before,
  .sbit-mobile *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes sbmScan {

  to {
    transform:
      translateY(
        calc(100svh + 300px)
      );
  }

}


@keyframes sbmBars {

  from {
    transform:
      scaleY(.15);

    transform-origin:
      bottom;
  }


  to {
    transform:
      scaleY(1);

    transform-origin:
      bottom;
  }

}


/*section 4 end here*/


/*section 5 start here*/

/* =========================================================
   SINDYBAD — WEB DEVELOPMENT
   Lightweight / scoped / no global rules
========================================================= */

.sbit-web,
.sbit-web * {
  box-sizing: border-box;
}

.sbit-web {
  --sw-bg: #050816;
  --sw-text: #F8FBFF;
  --sw-muted: #9FB0C7;
  --sw-line: rgba(148,163,184,.16);
  --sw-blue: #2F6BFF;
  --sw-blue-2: #60A5FA;
  --sw-cyan: #22D3EE;
  --sw-green: #22C55E;

  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: calc(100svh - 72px);
  overflow: hidden;
  color: var(--sw-text);
  background: var(--sw-bg);
}

.sbit-web::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: .1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(96,165,250,.05) 1px, transparent 1px),
    linear-gradient(90deg,rgba(96,165,250,.05) 1px, transparent 1px);
  background-size: 72px 72px;
}


/* =========================
   LAYOUT
========================= */

.sbit-web__shell {
  display: grid;
  grid-template-columns: minmax(400px,42%) minmax(0,58%);
  min-height: calc(100svh - 72px);
}

.sbit-web__copy {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: clamp(48px,5vh,76px) clamp(38px,4.5vw,84px);
  background:
    radial-gradient(
      520px 380px at 90% 12%,
      rgba(47,107,255,.07),
      transparent 65%
    ),
    var(--sw-bg);
}

.sbit-web__inner {
  width: 100%;
  max-width: 690px;
  margin-left: auto;
}


/* =========================
   HEADING
========================= */

.sbit-web__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.sbit-web__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ADC8FF;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.sbit-web__kicker::before {
  width: 38px;
  height: 1px;
  content: "";
  background: linear-gradient(
    90deg,
    var(--sw-blue),
    var(--sw-green)
  );
}

.sbit-web__index {
  color: rgba(159,176,199,.44);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .15em;
}

.sbit-web__title {
  max-width: 640px;
  margin: 0;
  color: var(--sw-text);
  font-size: clamp(34px,3vw,39px);
  font-weight: 860;
  line-height: 1.03;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.sbit-web__title span {
  display: block;
  margin-top: 4px;
  color: var(--sw-blue-2);
}

.sbit-web__lead {
  margin: 21px 0 0;
  color: #CBD6E5;
  font-size: clamp(14px,1vw,16px);
  line-height: 1.65;
}

.sbit-web__description {
  max-width: 650px;
  margin: 13px 0 0;
  color: var(--sw-muted);
  font-size: 11px;
  line-height: 1.73;
}


/* =========================
   TABS
========================= */

.sbit-web__tabs {
  display: flex;
  width: max-content;
  max-width: 100%;
  gap: 6px;
  margin-top: 23px;
  padding: 5px;
  border: 1px solid var(--sw-line);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
}

.sbit-web__tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 37px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(159,176,199,.72);
  background: transparent;
  font: inherit;
  font-size: 8px;
  font-weight: 850;
  cursor: pointer;
  transition: .18s ease;
}

.sbit-web__tab span {
  color: rgba(96,165,250,.55);
  font-size: 6px;
}

.sbit-web__tab.is-active {
  color: #FFF;
  border-color: rgba(96,165,250,.18);
  background: rgba(47,107,255,.12);
}

.sbit-web__tab.is-active span {
  color: var(--sw-blue-2);
}

.sbit-web__tab:focus-visible {
  outline: 2px solid var(--sw-blue-2);
  outline-offset: 2px;
}

.sbit-web__panel {
  margin-top: 14px;
}

.sbit-web__panel[hidden] {
  display: none;
}


/* =========================
   SOLUTIONS
========================= */

.sbit-web__solutions {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px;
}

.sbit-web__solutions article {
  display: grid;
  grid-template-columns: 27px minmax(0,1fr);
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--sw-line);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
  transition: .18s ease;
}

.sbit-web__solutions article > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(96,165,250,.16);
  border-radius: 7px;
  color: var(--sw-blue-2);
  background: rgba(47,107,255,.06);
  font-size: 6px;
  font-weight: 900;
}

.sbit-web__solutions strong {
  display: block;
  color: #EFF6FF;
  font-size: 9px;
}

.sbit-web__solutions p {
  margin: 4px 0 0;
  color: rgba(159,176,199,.68);
  font-size: 7px;
  line-height: 1.5;
}

@media (hover:hover) {
  .sbit-web__solutions article:hover {
    transform: translateY(-2px);
    border-color: rgba(96,165,250,.26);
    background: rgba(255,255,255,.03);
  }
}


/* =========================
   FEATURES
========================= */

.sbit-web__features {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sbit-web__features span {
  padding: 9px 11px;
  border: 1px solid var(--sw-line);
  border-radius: 9px;
  color: #AEBED1;
  background: rgba(255,255,255,.018);
  font-size: 8px;
}


/* =========================
   PHILOSOPHY
========================= */

.sbit-web__principles {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
}

.sbit-web__principles article {
  position: relative;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--sw-line);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
}

.sbit-web__principles span {
  color: var(--sw-blue-2);
  font-size: 6px;
  font-weight: 900;
}

.sbit-web__principles strong {
  display: block;
  margin-top: 7px;
  font-size: 11px;
}

.sbit-web__principles p {
  margin: 6px 0 0;
  color: rgba(159,176,199,.7);
  font-size: 8px;
  line-height: 1.55;
}


/* =========================
   TRUST
========================= */

.sbit-web__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 17px;
  margin-top: 18px;
  padding-top: 17px;
  border-top: 1px solid rgba(148,163,184,.10);
}

.sbit-web__trust span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(159,176,199,.66);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.sbit-web__trust i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sw-green);
  box-shadow: 0 0 8px rgba(34,197,94,.55);
}


/* =========================
   VISUAL
========================= */

.sbit-web__visual {
  min-width: 0;
  padding: 16px 16px 16px 0;
}

.sbit-web__media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 620px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 28px;
  background: #07101D;
  box-shadow: 0 30px 80px rgba(0,0,0,.30);
}

.sbit-web__media::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(
      600px 440px at 58% 38%,
      rgba(47,107,255,.17),
      transparent 65%
    ),
    linear-gradient(
      180deg,
      rgba(5,8,22,.12),
      rgba(5,8,22,.43) 55%,
      rgba(5,8,22,.92)
    );
}

.sbit-web__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.52) saturate(.75);
  transform: scale(1.02);
  transition: transform 8s ease;
}

.sbit-web.is-ready .sbit-web__image {
  transform: scale(1.055);
}


/* =========================
   VISUAL TOP
========================= */

.sbit-web__visual-top {
  position: absolute;
  z-index: 6;
  top: 22px;
  right: 22px;
  left: 22px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.sbit-web__visual-top > span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #D6E4F5;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .15em;
}

.sbit-web__visual-top > span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sw-green);
  box-shadow: 0 0 10px rgba(34,197,94,.75);
}

.sbit-web__visual-top small {
  color: rgba(214,228,245,.42);
  font-size: 6px;
  font-weight: 850;
  letter-spacing: .13em;
}


/* =========================
   BROWSER
========================= */

.sbit-web__browser {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: min(72%,690px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: #091322;
  box-shadow: 0 35px 85px rgba(0,0,0,.45);
  transform: translate(-50%,-49%);
}

.sbit-web__browser-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  height: 39px;
  padding: 0 13px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.sbit-web__browser-bar > div {
  display: flex;
  gap: 5px;
}

.sbit-web__browser-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #64748B;
}

.sbit-web__browser-bar i:first-child {
  background: #EF4444;
}

.sbit-web__browser-bar i:nth-child(2) {
  background: #F59E0B;
}

.sbit-web__browser-bar i:last-child {
  background: var(--sw-green);
}

.sbit-web__browser-bar > span {
  padding: 6px 10px;
  border-radius: 6px;
  color: rgba(159,176,199,.62);
  background: rgba(255,255,255,.025);
  font-size: 6px;
}

.sbit-web__browser-bar small {
  color: #86EFAC;
  font-size: 5px;
  font-weight: 900;
}


/* =========================
   MOCK WEBSITE
========================= */

.sbit-web__browser-screen {
  padding: 18px;
  background:
    radial-gradient(
      330px 220px at 85% 15%,
      rgba(47,107,255,.12),
      transparent 68%
    ),
    #08111F;
}

.sbit-web__site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sbit-web__site-nav strong {
  color: var(--sw-blue-2);
  font-size: 13px;
}

.sbit-web__site-nav div {
  display: flex;
  gap: 9px;
}

.sbit-web__site-nav i {
  width: 27px;
  height: 4px;
  border-radius: 999px;
  background: rgba(159,176,199,.20);
}

.sbit-web__site-hero {
  margin-top: 36px;
  max-width: 70%;
}

.sbit-web__site-hero > span {
  color: var(--sw-blue-2);
  font-size: 5px;
  font-weight: 900;
  letter-spacing: .13em;
}

.sbit-web__site-hero > strong {
  display: block;
  margin-top: 8px;
  color: #F5F9FD;
  font-size: clamp(18px,2vw,29px);
  line-height: 1.08;
}

.sbit-web__site-hero em {
  display: block;
  color: var(--sw-blue-2);
  font-style: normal;
}

.sbit-web__site-hero p {
  max-width: 340px;
  margin: 11px 0 0;
  color: rgba(159,176,199,.65);
  font-size: 7px;
  line-height: 1.6;
}

.sbit-web__site-hero > div {
  display: flex;
  gap: 7px;
  margin-top: 16px;
}

.sbit-web__site-hero > div i {
  width: 70px;
  height: 20px;
  border-radius: 6px;
  background: var(--sw-blue);
}

.sbit-web__site-hero > div i:last-child {
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.025);
}

.sbit-web__site-cards {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 7px;
  margin-top: 40px;
}

.sbit-web__site-cards article {
  padding: 12px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
}

.sbit-web__site-cards span {
  color: var(--sw-blue-2);
  font-size: 5px;
  font-weight: 900;
}

.sbit-web__site-cards strong {
  display: block;
  margin-top: 7px;
  font-size: 7px;
}


/* =========================
   TERMINAL
========================= */

.sbit-web__terminal {
  position: absolute;
  z-index: 7;
  top: 65px;
  right: 22px;
  width: min(42%,390px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 13px;
  background: rgba(3,7,18,.94);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

.sbit-web__terminal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 31px;
  padding: 0 11px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.sbit-web__terminal-head > div {
  display: flex;
  gap: 5px;
}

.sbit-web__terminal-head i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #64748B;
}

.sbit-web__terminal-head i:first-child {
  background: #EF4444;
}

.sbit-web__terminal-head i:nth-child(2) {
  background: #F59E0B;
}

.sbit-web__terminal-head i:last-child {
  background: var(--sw-green);
}

.sbit-web__terminal-head span {
  color: rgba(159,176,199,.42);
  font-size: 5px;
}

.sbit-web__terminal-body {
  padding: 12px 14px 14px;
  color: #B7C8DC;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: 7px;
  line-height: 1.65;
}

.sbit-web__terminal-body p {
  margin: 0 0 2px;
}

.sbit-web__terminal-body b,
.sbit-web__terminal-body strong {
  color: #86EFAC;
}


/* =========================
   METRICS
========================= */

.sbit-web__metrics {
  position: absolute;
  z-index: 6;
  left: 22px;
  bottom: 94px;
  display: flex;
  gap: 6px;
}

.sbit-web__metrics div {
  min-width: 82px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  background: rgba(5,8,22,.82);
}

.sbit-web__metrics span {
  display: block;
  color: rgba(159,176,199,.48);
  font-size: 5px;
  font-weight: 900;
}

.sbit-web__metrics strong {
  display: block;
  margin-top: 4px;
  color: var(--sw-blue-2);
  font-size: 13px;
}


/* =========================
   FOOTER
========================= */

.sbit-web__visual-footer {
  position: absolute;
  z-index: 7;
  right: 22px;
  bottom: 22px;
  left: 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 17px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(5,8,22,.90);
}

.sbit-web__visual-footer span {
  display: block;
  margin-bottom: 4px;
  color: rgba(159,176,199,.54);
  font-size: 5px;
  font-weight: 900;
  letter-spacing: .14em;
}

.sbit-web__visual-footer strong {
  font-size: clamp(14px,1vw,18px);
}

.sbit-web__visual-footer em {
  color: var(--sw-blue-2);
  font-style: normal;
}

.sbit-web__visual-footer small {
  color: rgba(159,176,199,.38);
  font-size: 5px;
  font-weight: 900;
  letter-spacing: .12em;
}


/* =========================
   TABLET
========================= */

@media (max-width:1050px) {

  .sbit-web {
    min-height: auto;
  }

  .sbit-web__shell {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .sbit-web__copy {
    padding: 70px 28px 42px;
  }

  .sbit-web__inner {
    max-width: 800px;
    margin: 0;
  }

  .sbit-web__visual {
    padding: 0 28px 28px;
  }

  .sbit-web__media {
    min-height: 650px;
  }
}


/* =========================
   MOBILE
========================= */

@media (max-width:650px) {

  .sbit-web__copy {
    padding: 56px 16px 34px;
  }

  .sbit-web__index {
    display: none;
  }

  .sbit-web__title {
    font-size: clamp(34px,8.5vw,37px);
  }

  .sbit-web__tabs {
    width: 100%;
  }

  .sbit-web__tab {
    flex: 1;
    justify-content: center;
    padding-inline: 7px;
  }

  .sbit-web__solutions,
  .sbit-web__principles {
    grid-template-columns: 1fr;
  }

  .sbit-web__visual {
    padding: 0 14px 14px;
  }

  .sbit-web__media {
    min-height: 580px;
    border-radius: 21px;
  }

  .sbit-web__browser {
    top: 52%;
    width: calc(100% - 28px);
  }

  .sbit-web__terminal {
    top: 54px;
    right: 14px;
    width: 60%;
  }

  .sbit-web__metrics {
    left: 14px;
    bottom: 88px;
  }

  .sbit-web__metrics div:nth-child(3) {
    display: none;
  }

  .sbit-web__visual-footer {
    right: 14px;
    bottom: 14px;
    left: 14px;
  }

  .sbit-web__visual-footer small,
  .sbit-web__visual-top small {
    display: none;
  }
}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width:420px) {

  .sbit-web__terminal {
    display: none;
  }

  .sbit-web__browser {
    top: 47%;
  }

  .sbit-web__metrics {
    right: 14px;
  }

  .sbit-web__metrics div {
    flex: 1;
  }
}


/* =========================
   REDUCED MOTION
========================= */

@media (prefers-reduced-motion:reduce) {

  .sbit-web *,
  .sbit-web *::before,
  .sbit-web *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}



/*section 5 end here */


/*section 6 start here*/



/* =========================================================
   SINDYBAD — ACCESS CONTROL & BIOMETRICS
   Scoped / premium / lightweight
========================================================= */

.sbit-access,
.sbit-access * {
  box-sizing: border-box;
}


.sbit-access {
  --sa-bg: #050816;
  --sa-text: #F8FBFF;
  --sa-muted: #9FB0C7;
  --sa-line: rgba(148,163,184,.16);

  --sa-blue: #2F6BFF;
  --sa-blue-2: #60A5FA;
  --sa-cyan: #22D3EE;
  --sa-green: #22C55E;

  position: relative;
  isolation: isolate;

  width: 100%;
  min-height: calc(100svh - 72px);

  overflow: hidden;

  color: var(--sa-text);
  background: var(--sa-bg);
}


/* subtle global section grid */

.sbit-access::before {
  position: absolute;
  z-index: -1;

  inset: 0;

  content: "";

  opacity: .10;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(96,165,250,.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96,165,250,.05) 1px,
      transparent 1px
    );

  background-size: 72px 72px;
}


/* =========================================================
   LAYOUT
========================================================= */

.sbit-access__shell {
  display: grid;

  grid-template-columns:
    minmax(0,58%)
    minmax(400px,42%);

  min-height: calc(100svh - 72px);
}


/* =========================================================
   VISUAL
========================================================= */

.sbit-access__visual {
  min-width: 0;

  padding:
    16px
    0
    16px
    16px;
}


.sbit-access__media {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 640px;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 28px;

  background: #07101D;

  box-shadow:
    0 30px 80px
    rgba(0,0,0,.30);
}


/* =========================================================
   IMAGE
========================================================= */

.sbit-access__image {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    brightness(.48)
    saturate(.68)
    contrast(1.05);

  transform: scale(1.02);

  transition:
    transform 8s ease;
}


.sbit-access.is-ready
.sbit-access__image {
  transform: scale(1.055);
}


.sbit-access__shade {
  position: absolute;
  z-index: 1;

  inset: 0;

  background:
    radial-gradient(
      570px 500px
      at 51% 44%,
      rgba(34,211,238,.13),
      transparent 64%
    ),
    radial-gradient(
      700px 520px
      at 60% 38%,
      rgba(47,107,255,.16),
      transparent 66%
    ),
    linear-gradient(
      180deg,
      rgba(5,8,22,.10),
      rgba(5,8,22,.43) 54%,
      rgba(5,8,22,.93)
    );
}


.sbit-access__grid {
  position: absolute;
  z-index: 2;

  inset: 0;

  opacity: .45;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(96,165,250,.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96,165,250,.05) 1px,
      transparent 1px
    );

  background-size: 46px 46px;

  mask-image:
    linear-gradient(
      180deg,
      #000,
      rgba(0,0,0,.55) 66%,
      transparent
    );
}


/* =========================================================
   TOP STATUS
========================================================= */

.sbit-access__visual-top {
  position: absolute;
  z-index: 8;

  top: 22px;
  right: 22px;
  left: 22px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;
}


.sbit-access__live {
  display: flex;

  align-items: center;

  gap: 8px;

  color: #D6E4F5;

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .15em;
}


.sbit-access__live i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--sa-green);

  box-shadow:
    0 0 11px
    rgba(34,197,94,.75);
}


.sbit-access__secure {
  color:
    rgba(214,228,245,.42);

  font-size: 6px;
  font-weight: 850;

  letter-spacing: .14em;
}


/* =========================================================
   BIOMETRIC SCANNER
========================================================= */

.sbit-access__scanner {
  position: absolute;
  z-index: 5;

  top: 49%;
  left: 50%;

  width:
    min(37vw,470px);

  aspect-ratio: 1;

  border:
    1px solid
    rgba(96,165,250,.20);

  border-radius: 26px;

  background:
    rgba(5,8,22,.35);

  box-shadow:
    inset 0 0 60px
    rgba(47,107,255,.06);

  transform:
    translate(-50%,-53%);
}


/* scanner corners */

.sbit-access__scanner-corners i {
  position: absolute;

  width: 35px;
  height: 35px;

  border-color:
    var(--sa-cyan);
}


.sbit-access__scanner-corners i:nth-child(1) {
  top: 16px;
  left: 16px;

  border-top: 2px solid;
  border-left: 2px solid;
}


.sbit-access__scanner-corners i:nth-child(2) {
  top: 16px;
  right: 16px;

  border-top: 2px solid;
  border-right: 2px solid;
}


.sbit-access__scanner-corners i:nth-child(3) {
  bottom: 16px;
  left: 16px;

  border-bottom: 2px solid;
  border-left: 2px solid;
}


.sbit-access__scanner-corners i:nth-child(4) {
  right: 16px;
  bottom: 16px;

  border-right: 2px solid;
  border-bottom: 2px solid;
}


/* =========================================================
   FACE
========================================================= */

.sbit-access__face {
  position: absolute;

  top: 44%;
  left: 50%;

  width: 42%;
  height: 51%;

  transform:
    translate(-50%,-50%);
}


.sbit-access__face-outline {
  position: absolute;

  inset: 0;

  border:
    1px solid
    rgba(34,211,238,.42);

  border-radius:
    47% 47% 43% 43%;

  box-shadow:
    0 0 40px
    rgba(34,211,238,.07);
}


.sbit-access__eye {
  position: absolute;

  top: 35%;

  width: 15px;
  height: 4px;

  border-radius: 999px;

  background:
    #67E8F9;

  box-shadow:
    0 0 12px
    rgba(34,211,238,.75);
}


.sbit-access__eye--left {
  left: 24%;
}


.sbit-access__eye--right {
  right: 24%;
}


.sbit-access__nose {
  position: absolute;

  top: 41%;
  left: 50%;

  width: 1px;
  height: 23%;

  background:
    linear-gradient(
      transparent,
      rgba(34,211,238,.65)
    );

  transform:
    translateX(-50%);
}


.sbit-access__mouth {
  position: absolute;

  bottom: 22%;
  left: 50%;

  width: 25%;
  height: 1px;

  background:
    rgba(34,211,238,.55);

  transform:
    translateX(-50%);
}


/* biometric points */

.sbit-access__points i {
  position: absolute;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--sa-cyan);

  box-shadow:
    0 0 9px
    rgba(34,211,238,.7);

  animation:
    saPoint
    2.5s ease-in-out infinite;
}


.sbit-access__points i:nth-child(1) {
  top: 18%;
  left: 20%;
}


.sbit-access__points i:nth-child(2) {
  top: 18%;
  right: 20%;
}


.sbit-access__points i:nth-child(3) {
  top: 43%;
  left: 6%;
}


.sbit-access__points i:nth-child(4) {
  top: 43%;
  right: 6%;
}


.sbit-access__points i:nth-child(5) {
  bottom: 20%;
  left: 20%;
}


.sbit-access__points i:nth-child(6) {
  right: 20%;
  bottom: 20%;
}


.sbit-access__points i:nth-child(7) {
  bottom: 5%;
  left: 42%;
}


.sbit-access__points i:nth-child(8) {
  right: 42%;
  bottom: 5%;
}


/* =========================================================
   SCAN LINE
========================================================= */

.sbit-access__scan-line {
  position: absolute;

  top: 20%;
  right: 8%;
  left: 8%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--sa-cyan),
      transparent
    );

  box-shadow:
    0 0 18px
    rgba(34,211,238,.8);

  animation:
    saScan
    3.8s ease-in-out infinite alternate;
}


/* =========================================================
   VERIFIED
========================================================= */

.sbit-access__verified {
  position: absolute;

  right: 11%;
  bottom: 8%;
  left: 11%;

  text-align: center;
}


.sbit-access__verified > span {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  color: #86EFAC;

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .14em;
}


.sbit-access__verified > span i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--sa-green);

  box-shadow:
    0 0 10px
    rgba(34,197,94,.7);
}


.sbit-access__verified strong {
  display: block;

  margin-top: 6px;

  color: #FFFFFF;

  font-size: 14px;
}


.sbit-access__verified small {
  display: block;

  margin-top: 4px;

  color:
    rgba(159,176,199,.55);

  font-size: 6px;
}


/* =========================================================
   IDENTITY CARD
========================================================= */

.sbit-access__identity {
  position: absolute;
  z-index: 8;

  top: 64px;
  left: 22px;

  width: 205px;

  padding: 14px;

  border:
    1px solid
    rgba(96,165,250,.15);

  border-radius: 14px;

  background:
    rgba(5,8,22,.89);

  box-shadow:
    0 18px 42px
    rgba(0,0,0,.22);
}


.sbit-access__identity-top {
  display: flex;

  align-items: center;
  justify-content: space-between;
}


.sbit-access__identity-top span {
  color:
    rgba(159,176,199,.58);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .14em;
}


.sbit-access__identity-top i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--sa-green);
}


.sbit-access__identity-user {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-top: 12px;
}


.sbit-access__identity-user > div {
  display: grid;

  width: 34px;
  height: 34px;

  flex: 0 0 auto;

  place-items: center;

  border:
    1px solid
    rgba(96,165,250,.20);

  border-radius: 50%;

  color:
    var(--sa-blue-2);

  background:
    rgba(47,107,255,.08);

  font-size: 8px;
  font-weight: 900;
}


.sbit-access__identity-user section {
  min-width: 0;
}


.sbit-access__identity-user strong {
  display: block;

  font-size: 9px;
}


.sbit-access__identity-user small {
  display: block;

  margin-top: 2px;

  color:
    rgba(159,176,199,.54);

  font-size: 5px;
}


.sbit-access__identity-data {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 6px;

  margin-top: 12px;
}


.sbit-access__identity-data div {
  padding: 8px;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius: 8px;

  background:
    rgba(255,255,255,.015);
}


.sbit-access__identity-data span {
  display: block;

  color:
    rgba(159,176,199,.42);

  font-size: 5px;
}


.sbit-access__identity-data strong {
  display: block;

  margin-top: 4px;

  color: #DCE8F6;

  font-size: 6px;
}


/* =========================================================
   HEALTH CARD
========================================================= */

.sbit-access__health {
  position: absolute;
  z-index: 8;

  top: 64px;
  right: 22px;

  width: 180px;

  padding: 14px;

  border:
    1px solid
    rgba(34,197,94,.14);

  border-radius: 14px;

  background:
    rgba(5,8,22,.89);
}


.sbit-access__health > span {
  color:
    rgba(159,176,199,.48);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .14em;
}


.sbit-access__health > strong {
  display: block;

  margin-top: 7px;

  font-size: 10px;

  line-height: 1.4;
}


.sbit-access__health > div {
  display: flex;

  align-items: center;

  gap: 6px;

  margin-top: 9px;

  color:
    #86EFAC;

  font-size: 6px;
}


.sbit-access__health i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--sa-green);
}


/* =========================================================
   VISUAL FOOTER
========================================================= */

.sbit-access__visual-footer {
  position: absolute;
  z-index: 9;

  right: 22px;
  bottom: 22px;
  left: 22px;

  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  padding:
    15px
    17px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 14px;

  background:
    rgba(5,8,22,.90);
}


.sbit-access__visual-footer span {
  display: block;

  margin-bottom: 4px;

  color:
    rgba(159,176,199,.50);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .14em;
}


.sbit-access__visual-footer strong {
  font-size:
    clamp(14px,1vw,18px);
}


.sbit-access__visual-footer em {
  color:
    var(--sa-blue-2);

  font-style: normal;
}


.sbit-access__footer-status {
  flex: 0 0 auto;

  text-align: right;
}


.sbit-access__footer-status strong {
  color: #86EFAC;

  font-size: 9px;
}


/* =========================================================
   COPY
========================================================= */

.sbit-access__copy {
  display: flex;

  align-items: center;

  min-width: 0;

  padding:
    clamp(48px,5vh,76px)
    clamp(38px,4.5vw,84px);

  background:
    radial-gradient(
      520px 380px
      at 10% 12%,
      rgba(47,107,255,.07),
      transparent 65%
    ),
    var(--sa-bg);
}


.sbit-access__inner {
  width: 100%;
  max-width: 700px;

  margin-right: auto;
}


/* =========================================================
   HEADING
========================================================= */

.sbit-access__topline {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 20px;
}


.sbit-access__kicker {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: #ADC8FF;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .16em;

  text-transform: uppercase;
}


.sbit-access__kicker::before {
  width: 38px;
  height: 1px;

  flex: 0 0 auto;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--sa-blue),
      var(--sa-green)
    );
}


.sbit-access__index {
  color:
    rgba(159,176,199,.43);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .15em;
}


.sbit-access__title {
  max-width: 640px;

  margin: 0;

  color: var(--sa-text);

  font-size:
    clamp(34px,3vw,39px);

  font-weight: 860;

  line-height: 1.03;

  letter-spacing: -.045em;

  text-wrap: balance;
}


.sbit-access__title span {
  display: block;

  margin-top: 4px;

  color:
    var(--sa-blue-2);
}


.sbit-access__lead {
  margin:
    21px
    0
    0;

  color: #CBD6E5;

  font-size:
    clamp(14px,1vw,16px);

  line-height: 1.65;
}


.sbit-access__description {
  max-width: 650px;

  margin:
    13px
    0
    0;

  color:
    var(--sa-muted);

  font-size: 11px;

  line-height: 1.73;
}


/* =========================================================
   TABS
========================================================= */

.sbit-access__tabs {
  display: flex;

  width: max-content;
  max-width: 100%;

  gap: 6px;

  margin-top: 23px;

  padding: 5px;

  border:
    1px solid
    var(--sa-line);

  border-radius: 12px;

  background:
    rgba(255,255,255,.018);
}


.sbit-access__tab {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  min-height: 37px;

  padding:
    0
    12px;

  border:
    1px solid
    transparent;

  border-radius: 8px;

  color:
    rgba(159,176,199,.72);

  background:
    transparent;

  font: inherit;

  font-size: 8px;
  font-weight: 850;

  cursor: pointer;

  transition: .18s ease;
}


.sbit-access__tab span {
  color:
    rgba(96,165,250,.55);

  font-size: 6px;
}


.sbit-access__tab.is-active {
  color: #FFFFFF;

  border-color:
    rgba(96,165,250,.18);

  background:
    rgba(47,107,255,.12);
}


.sbit-access__tab.is-active span {
  color:
    var(--sa-blue-2);
}


.sbit-access__tab:focus-visible {
  outline:
    2px solid
    var(--sa-blue-2);

  outline-offset: 2px;
}


.sbit-access__panel {
  margin-top: 14px;
}


.sbit-access__panel[hidden] {
  display: none;
}


/* =========================================================
   ACCESS METHODS
========================================================= */

.sbit-access__methods {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 7px;
}


.sbit-access__methods > span {
  display: flex;

  align-items: center;

  gap: 8px;

  min-width: 0;

  padding:
    10px;

  border:
    1px solid
    var(--sa-line);

  border-radius: 9px;

  color:
    #B6C5D6;

  background:
    rgba(255,255,255,.018);

  font-size: 7px;

  transition:
    border-color .18s ease,
    transform .18s ease;
}


.sbit-access__methods i {
  color:
    var(--sa-blue-2);

  font-size: 5px;
  font-weight: 900;

  font-style: normal;
}


@media (hover:hover) {

  .sbit-access__methods > span:hover {
    transform:
      translateY(-2px);

    border-color:
      rgba(96,165,250,.26);
  }

}


/* =========================================================
   BIOMETRICS
========================================================= */

.sbit-access__biometrics {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 8px;
}


.sbit-access__biometrics article {
  display: grid;

  grid-template-columns:
    30px
    minmax(0,1fr);

  gap: 10px;

  padding: 12px;

  border:
    1px solid
    var(--sa-line);

  border-radius: 11px;

  background:
    rgba(255,255,255,.018);
}


.sbit-access__biometrics article > span {
  display: grid;

  width: 30px;
  height: 30px;

  place-items: center;

  border:
    1px solid
    rgba(96,165,250,.17);

  border-radius: 8px;

  color:
    var(--sa-blue-2);

  background:
    rgba(47,107,255,.06);

  font-size: 6px;
  font-weight: 900;
}


.sbit-access__biometrics strong {
  display: block;

  color: #EFF6FF;

  font-size: 9px;
}


.sbit-access__biometrics p {
  margin:
    5px
    0
    0;

  color:
    rgba(159,176,199,.68);

  font-size: 7px;

  line-height: 1.5;
}


/* =========================================================
   FEATURES
========================================================= */

.sbit-access__features {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;
}


.sbit-access__features span {
  padding:
    9px
    11px;

  border:
    1px solid
    var(--sa-line);

  border-radius: 9px;

  color: #AEBED1;

  background:
    rgba(255,255,255,.018);

  font-size: 8px;
}


/* =========================================================
   TRUST
========================================================= */

.sbit-access__trust {
  display: flex;

  flex-wrap: wrap;

  gap:
    8px
    17px;

  margin-top: 18px;

  padding-top: 17px;

  border-top:
    1px solid
    rgba(148,163,184,.10);
}


.sbit-access__trust span {
  display: flex;

  align-items: center;

  gap: 7px;

  color:
    rgba(159,176,199,.66);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .07em;

  text-transform: uppercase;
}


.sbit-access__trust i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--sa-green);

  box-shadow:
    0 0 8px
    rgba(34,197,94,.55);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1050px) {

  .sbit-access {
    min-height: auto;
  }


  .sbit-access__shell {
    grid-template-columns: 1fr;

    min-height: auto;
  }


  .sbit-access__copy {
    order: 1;

    padding:
      70px
      28px
      42px;
  }


  .sbit-access__inner {
    max-width: 800px;

    margin: 0;
  }


  .sbit-access__visual {
    order: 2;

    padding:
      0
      28px
      28px;
  }


  .sbit-access__media {
    min-height: 680px;
  }


  .sbit-access__scanner {
    width:
      min(62vw,450px);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:650px) {

  .sbit-access__copy {
    padding:
      56px
      16px
      34px;
  }


  .sbit-access__index {
    display: none;
  }


  .sbit-access__title {
    font-size:
      clamp(34px,8.5vw,37px);
  }


  .sbit-access__tabs {
    width: 100%;
  }


  .sbit-access__tab {
    flex: 1;

    justify-content: center;

    padding-inline: 7px;
  }


  .sbit-access__methods {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .sbit-access__biometrics {
    grid-template-columns: 1fr;
  }


  .sbit-access__visual {
    padding:
      0
      14px
      14px;
  }


  .sbit-access__media {
    min-height: 620px;

    border-radius: 21px;
  }


  .sbit-access__secure {
    display: none;
  }


  .sbit-access__identity {
    top: 54px;
    left: 14px;

    width: 165px;
  }


  .sbit-access__health {
    top: 54px;
    right: 14px;

    width: 150px;
  }


  .sbit-access__identity-data {
    display: none;
  }


  .sbit-access__scanner {
    top: 53%;

    width:
      min(87vw,420px);
  }


  .sbit-access__visual-footer {
    right: 14px;
    bottom: 14px;
    left: 14px;
  }


  .sbit-access__footer-status {
    display: none;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:420px) {

  .sbit-access__methods {
    grid-template-columns: 1fr;
  }


  .sbit-access__health {
    display: none;
  }


  .sbit-access__identity {
    width:
      calc(100% - 28px);
  }


  .sbit-access__scanner {
    top: 55%;

    width:
      calc(100% - 28px);
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce) {

  .sbit-access *,
  .sbit-access *::before,
  .sbit-access *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes saScan {

  from {
    top: 20%;
  }

  to {
    top: 74%;
  }

}


@keyframes saPoint {

  0%,
  100% {
    opacity: .45;
  }

  50% {
    opacity: 1;
  }

}


/*section 6 end here*/


/*section 7 start here*/


/* =========================================================
   SINDYBAD — CCTV & SURVEILLANCE
   Premium / scoped / lightweight
========================================================= */

.sbit-cctv,
.sbit-cctv * {
  box-sizing: border-box;
}


.sbit-cctv {
  --sc-bg: #050816;
  --sc-text: #F8FBFF;
  --sc-muted: #9FB0C7;
  --sc-line: rgba(148,163,184,.16);

  --sc-blue: #2F6BFF;
  --sc-blue-2: #60A5FA;
  --sc-cyan: #22D3EE;
  --sc-green: #22C55E;

  position: relative;
  isolation: isolate;

  width: 100%;
  min-height: calc(100svh - 72px);

  overflow: hidden;

  color: var(--sc-text);
  background: var(--sc-bg);
}


/* background */

.sbit-cctv::before {
  position: absolute;
  z-index: -1;

  inset: 0;

  content: "";

  opacity: .1;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(96,165,250,.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96,165,250,.05) 1px,
      transparent 1px
    );

  background-size: 72px 72px;
}


/* =========================================================
   LAYOUT
========================================================= */

.sbit-cctv__shell {
  display: grid;

  grid-template-columns:
    minmax(400px,42%)
    minmax(0,58%);

  min-height:
    calc(100svh - 72px);
}


/* =========================================================
   COPY
========================================================= */

.sbit-cctv__copy {
  display: flex;

  align-items: center;

  min-width: 0;

  padding:
    clamp(48px,5vh,76px)
    clamp(38px,4.5vw,84px);

  background:
    radial-gradient(
      520px 380px
      at 90% 12%,
      rgba(47,107,255,.07),
      transparent 65%
    ),
    var(--sc-bg);
}


.sbit-cctv__inner {
  width: 100%;
  max-width: 700px;

  margin-left: auto;
}


/* =========================================================
   HEADING
========================================================= */

.sbit-cctv__topline {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 20px;
}


.sbit-cctv__kicker {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: #ADC8FF;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .16em;

  text-transform: uppercase;
}


.sbit-cctv__kicker::before {
  width: 38px;
  height: 1px;

  flex: 0 0 auto;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--sc-blue),
      var(--sc-green)
    );
}


.sbit-cctv__index {
  color:
    rgba(159,176,199,.43);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .15em;
}


.sbit-cctv__title {
  max-width: 650px;

  margin: 0;

  color:
    var(--sc-text);

  font-size:
    clamp(34px,3vw,39px);

  font-weight: 860;

  line-height: 1.03;

  letter-spacing: -.045em;

  text-wrap: balance;
}


.sbit-cctv__title span {
  display: block;

  margin-top: 4px;

  color:
    var(--sc-blue-2);
}


.sbit-cctv__lead {
  margin:
    21px
    0
    0;

  color: #CBD6E5;

  font-size:
    clamp(14px,1vw,16px);

  line-height: 1.65;
}


.sbit-cctv__description {
  max-width: 650px;

  margin:
    13px
    0
    0;

  color:
    var(--sc-muted);

  font-size: 11px;

  line-height: 1.73;
}


/* =========================================================
   TABS
========================================================= */

.sbit-cctv__tabs {
  display: flex;

  width: max-content;
  max-width: 100%;

  gap: 6px;

  margin-top: 23px;

  padding: 5px;

  border:
    1px solid
    var(--sc-line);

  border-radius: 12px;

  background:
    rgba(255,255,255,.018);
}


.sbit-cctv__tab {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  min-height: 37px;

  padding:
    0
    12px;

  border:
    1px solid transparent;

  border-radius: 8px;

  color:
    rgba(159,176,199,.72);

  background:
    transparent;

  font: inherit;

  font-size: 8px;
  font-weight: 850;

  cursor: pointer;

  transition: .18s ease;
}


.sbit-cctv__tab span {
  color:
    rgba(96,165,250,.55);

  font-size: 6px;
}


.sbit-cctv__tab.is-active {
  color: #FFFFFF;

  border-color:
    rgba(96,165,250,.18);

  background:
    rgba(47,107,255,.12);
}


.sbit-cctv__tab.is-active span {
  color:
    var(--sc-blue-2);
}


.sbit-cctv__tab:focus-visible {
  outline:
    2px solid
    var(--sc-blue-2);

  outline-offset: 2px;
}


.sbit-cctv__panel {
  margin-top: 14px;
}


.sbit-cctv__panel[hidden] {
  display: none;
}


/* =========================================================
   SOLUTION METHODS
========================================================= */

.sbit-cctv__methods {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 7px;
}


.sbit-cctv__methods > span {
  display: flex;

  align-items: center;

  gap: 8px;

  min-width: 0;

  padding: 10px;

  border:
    1px solid
    var(--sc-line);

  border-radius: 9px;

  color: #B6C5D6;

  background:
    rgba(255,255,255,.018);

  font-size: 7px;

  transition:
    transform .18s ease,
    border-color .18s ease;
}


.sbit-cctv__methods i {
  color:
    var(--sc-blue-2);

  font-size: 5px;
  font-weight: 900;

  font-style: normal;
}


@media (hover:hover) {

  .sbit-cctv__methods > span:hover {
    transform: translateY(-2px);

    border-color:
      rgba(96,165,250,.27);
  }

}


/* =========================================================
   ANALYTICS
========================================================= */

.sbit-cctv__analytics {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 8px;
}


.sbit-cctv__analytics article {
  display: grid;

  grid-template-columns:
    30px minmax(0,1fr);

  gap: 10px;

  padding: 12px;

  border:
    1px solid
    var(--sc-line);

  border-radius: 11px;

  background:
    rgba(255,255,255,.018);
}


.sbit-cctv__analytics article > span {
  display: grid;

  width: 30px;
  height: 30px;

  place-items: center;

  border:
    1px solid
    rgba(96,165,250,.17);

  border-radius: 8px;

  color:
    var(--sc-blue-2);

  background:
    rgba(47,107,255,.06);

  font-size: 6px;
  font-weight: 900;
}


.sbit-cctv__analytics strong {
  display: block;

  color: #EFF6FF;

  font-size: 9px;
}


.sbit-cctv__analytics p {
  margin:
    5px
    0
    0;

  color:
    rgba(159,176,199,.68);

  font-size: 7px;

  line-height: 1.5;
}


/* =========================================================
   INFRASTRUCTURE
========================================================= */

.sbit-cctv__features {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;
}


.sbit-cctv__features span {
  padding:
    9px
    11px;

  border:
    1px solid
    var(--sc-line);

  border-radius: 9px;

  color: #AEBED1;

  background:
    rgba(255,255,255,.018);

  font-size: 8px;
}


/* =========================================================
   TRUST
========================================================= */

.sbit-cctv__trust {
  display: flex;

  flex-wrap: wrap;

  gap:
    8px
    17px;

  margin-top: 18px;

  padding-top: 17px;

  border-top:
    1px solid
    rgba(148,163,184,.10);
}


.sbit-cctv__trust span {
  display: flex;

  align-items: center;

  gap: 7px;

  color:
    rgba(159,176,199,.66);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .07em;

  text-transform: uppercase;
}


.sbit-cctv__trust i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--sc-green);

  box-shadow:
    0 0 8px
    rgba(34,197,94,.55);
}


/* =========================================================
   VISUAL
========================================================= */

.sbit-cctv__visual {
  min-width: 0;

  padding:
    16px
    16px
    16px
    0;
}


.sbit-cctv__media {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 640px;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 28px;

  background: #07101D;

  box-shadow:
    0 30px 80px
    rgba(0,0,0,.30);
}


.sbit-cctv__image {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    brightness(.46)
    saturate(.66)
    contrast(1.07);

  transform: scale(1.02);

  transition:
    transform 8s ease;
}


.sbit-cctv.is-ready
.sbit-cctv__image {
  transform: scale(1.055);
}


.sbit-cctv__shade {
  position: absolute;
  z-index: 1;

  inset: 0;

  background:
    radial-gradient(
      600px 500px
      at 50% 44%,
      rgba(34,211,238,.11),
      transparent 63%
    ),
    radial-gradient(
      720px 500px
      at 60% 32%,
      rgba(47,107,255,.16),
      transparent 65%
    ),
    linear-gradient(
      180deg,
      rgba(5,8,22,.07),
      rgba(5,8,22,.38) 55%,
      rgba(5,8,22,.94)
    );
}


.sbit-cctv__grid {
  position: absolute;
  z-index: 2;

  inset: 0;

  opacity: .42;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(96,165,250,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96,165,250,.045) 1px,
      transparent 1px
    );

  background-size: 46px 46px;

  mask-image:
    linear-gradient(
      180deg,
      #000,
      rgba(0,0,0,.5) 68%,
      transparent
    );
}


/* =========================================================
   VISUAL TOP
========================================================= */

.sbit-cctv__visual-top {
  position: absolute;
  z-index: 8;

  top: 22px;
  right: 22px;
  left: 22px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;
}


.sbit-cctv__live {
  display: flex;

  align-items: center;

  gap: 8px;

  color: #D6E4F5;

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .15em;
}


.sbit-cctv__live i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--sc-green);

  box-shadow:
    0 0 11px
    rgba(34,197,94,.75);
}


.sbit-cctv__clock {
  color:
    rgba(214,228,245,.42);

  font-size: 6px;
  font-weight: 850;

  letter-spacing: .13em;
}


/* =========================================================
   CAMERA FRAME
========================================================= */

.sbit-cctv__camera {
  position: absolute;
  z-index: 5;

  top: 49%;
  left: 50%;

  width:
    min(60%,600px);

  height:
    min(53%,430px);

  border:
    1px solid
    rgba(96,165,250,.20);

  border-radius: 16px;

  background:
    rgba(5,8,22,.18);

  box-shadow:
    inset 0 0 50px
    rgba(47,107,255,.055);

  transform:
    translate(-50%,-52%);
}


.sbit-cctv__camera::before,
.sbit-cctv__camera::after {
  position: absolute;

  width: 36px;
  height: 36px;

  content: "";

  border-color:
    var(--sc-cyan);
}


.sbit-cctv__camera::before {
  top: -1px;
  left: -1px;

  border-top: 2px solid;
  border-left: 2px solid;
}


.sbit-cctv__camera::after {
  right: -1px;
  bottom: -1px;

  border-right: 2px solid;
  border-bottom: 2px solid;
}


/* =========================================================
   CAMERA HEADER
========================================================= */

.sbit-cctv__camera-top {
  position: absolute;

  top: 14px;
  right: 15px;
  left: 15px;

  display: flex;

  align-items: flex-start;
  justify-content: space-between;
}


.sbit-cctv__camera-top span {
  color:
    rgba(159,176,199,.55);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .12em;
}


.sbit-cctv__camera-top strong {
  display: block;

  margin-top: 3px;

  color: #EFF6FF;

  font-size: 8px;
}


.sbit-cctv__recording {
  display: flex;

  align-items: center;

  gap: 5px;

  color: #FCA5A5 !important;
}


.sbit-cctv__recording i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #EF4444;

  animation:
    scRecord 1.5s ease-in-out infinite;
}


/* =========================================================
   RETICLE
========================================================= */

.sbit-cctv__reticle {
  position: absolute;

  top: 49%;
  left: 50%;

  width:
    min(55%,230px);

  aspect-ratio: 1;

  transform:
    translate(-50%,-50%);
}


.sbit-cctv__reticle-ring {
  position: absolute;

  inset: 0;

  border:
    1px solid
    rgba(96,165,250,.35);

  border-radius: 50%;
}


.sbit-cctv__reticle-ring::after {
  position: absolute;

  inset: 22%;

  border:
    1px dashed
    rgba(34,211,238,.42);

  border-radius: 50%;

  content: "";

  animation:
    scRotate 15s linear infinite;
}


.sbit-cctv__reticle-cross-x {
  position: absolute;

  top: 50%;
  right: 0;
  left: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(34,211,238,.52),
      transparent
    );
}


.sbit-cctv__reticle-cross-y {
  position: absolute;

  top: 0;
  bottom: 0;
  left: 50%;

  width: 1px;

  background:
    linear-gradient(
      transparent,
      rgba(34,211,238,.52),
      transparent
    );
}


.sbit-cctv__target-box {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 29%;
  height: 43%;

  border:
    1px solid
    rgba(34,197,94,.70);

  transform:
    translate(-50%,-48%);
}


/* =========================================================
   DETECTION
========================================================= */

.sbit-cctv__detection {
  position: absolute;

  right: 14px;
  bottom: 43px;

  padding:
    9px
    11px;

  border:
    1px solid
    rgba(34,197,94,.18);

  border-radius: 8px;

  background:
    rgba(5,8,22,.73);
}


.sbit-cctv__detection span {
  display: block;

  color:
    rgba(134,239,172,.65);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .11em;
}


.sbit-cctv__detection strong {
  display: block;

  margin-top: 3px;

  color: #86EFAC;

  font-size: 8px;
}


/* =========================================================
   CAMERA FOOTER
========================================================= */

.sbit-cctv__camera-footer {
  position: absolute;

  right: 14px;
  bottom: 13px;
  left: 14px;

  display: flex;

  gap: 14px;

  color:
    rgba(159,176,199,.47);

  font-size: 5px;
  font-weight: 800;

  letter-spacing: .08em;
}


/* =========================================================
   VMS PANEL
========================================================= */

.sbit-cctv__vms {
  position: absolute;
  z-index: 8;

  top: 64px;
  left: 22px;

  width: 195px;

  padding: 14px;

  border:
    1px solid
    rgba(96,165,250,.15);

  border-radius: 14px;

  background:
    rgba(5,8,22,.90);

  box-shadow:
    0 18px 42px
    rgba(0,0,0,.22);
}


.sbit-cctv__vms-head {
  display: flex;

  align-items: center;
  justify-content: space-between;
}


.sbit-cctv__vms-head span {
  color:
    rgba(159,176,199,.52);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .14em;
}


.sbit-cctv__vms-head i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--sc-green);
}


.sbit-cctv__vms > strong {
  display: block;

  margin-top: 8px;

  font-size: 11px;
}


.sbit-cctv__vms-list {
  display: grid;

  gap: 5px;

  margin-top: 10px;
}


.sbit-cctv__vms-list span {
  display: flex;

  justify-content: space-between;

  gap: 8px;

  padding-top: 5px;

  border-top:
    1px solid
    rgba(255,255,255,.055);
}


.sbit-cctv__vms-list b {
  color:
    rgba(159,176,199,.48);

  font-size: 5px;
  font-weight: 800;
}


.sbit-cctv__vms-list em {
  color: #86EFAC;

  font-size: 5px;
  font-weight: 800;

  font-style: normal;
}


/* =========================================================
   LIVE EVENTS
========================================================= */

.sbit-cctv__events {
  position: absolute;
  z-index: 8;

  top: 64px;
  right: 22px;

  width: 215px;

  padding: 13px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 14px;

  background:
    rgba(5,8,22,.90);
}


.sbit-cctv__events-label {
  display: block;

  margin-bottom: 7px;

  color:
    rgba(159,176,199,.5);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .14em;
}


.sbit-cctv__events > div {
  display: grid;

  grid-template-columns:
    5px 46px 1fr auto;

  align-items: center;

  gap: 6px;

  padding: 6px 0;

  border-top:
    1px solid
    rgba(255,255,255,.055);
}


.sbit-cctv__events i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #64748B;
}


.sbit-cctv__events i.is-green {
  background:
    var(--sc-green);

  box-shadow:
    0 0 7px
    rgba(34,197,94,.5);
}


.sbit-cctv__events div span {
  color:
    rgba(159,176,199,.55);

  font-size: 5px;
}


.sbit-cctv__events div strong {
  overflow: hidden;

  color: #DEE8F4;

  font-size: 6px;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.sbit-cctv__events small {
  color:
    var(--sc-blue-2);

  font-size: 5px;
}


/* =========================================================
   FOOTER
========================================================= */

.sbit-cctv__visual-footer {
  position: absolute;
  z-index: 9;

  right: 22px;
  bottom: 22px;
  left: 22px;

  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  padding:
    15px
    17px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 14px;

  background:
    rgba(5,8,22,.91);
}


.sbit-cctv__visual-footer span {
  display: block;

  margin-bottom: 4px;

  color:
    rgba(159,176,199,.50);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .14em;
}


.sbit-cctv__visual-footer strong {
  font-size:
    clamp(14px,1vw,18px);
}


.sbit-cctv__visual-footer em {
  color:
    var(--sc-blue-2);

  font-style: normal;
}


.sbit-cctv__coverage {
  flex: 0 0 auto;

  text-align: right;
}


.sbit-cctv__coverage strong {
  color: #86EFAC;

  font-size: 9px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1050px) {

  .sbit-cctv {
    min-height: auto;
  }


  .sbit-cctv__shell {
    grid-template-columns: 1fr;

    min-height: auto;
  }


  .sbit-cctv__copy {
    padding:
      70px
      28px
      42px;
  }


  .sbit-cctv__inner {
    max-width: 800px;

    margin: 0;
  }


  .sbit-cctv__visual {
    padding:
      0
      28px
      28px;
  }


  .sbit-cctv__media {
    min-height: 680px;
  }


  .sbit-cctv__camera {
    width:
      min(68%,620px);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:650px) {

  .sbit-cctv__copy {
    padding:
      56px
      16px
      34px;
  }


  .sbit-cctv__index {
    display: none;
  }


  .sbit-cctv__title {
    font-size:
      clamp(34px,8.5vw,37px);
  }


  .sbit-cctv__tabs {
    width: 100%;
  }


  .sbit-cctv__tab {
    flex: 1;

    justify-content: center;

    padding-inline: 6px;
  }


  .sbit-cctv__methods {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .sbit-cctv__analytics {
    grid-template-columns: 1fr;
  }


  .sbit-cctv__visual {
    padding:
      0
      14px
      14px;
  }


  .sbit-cctv__media {
    min-height: 620px;

    border-radius: 21px;
  }


  .sbit-cctv__clock {
    display: none;
  }


  .sbit-cctv__camera {
    top: 53%;

    width:
      calc(100% - 28px);

    height: 330px;
  }


  .sbit-cctv__vms {
    top: 54px;
    left: 14px;

    width: 155px;
  }


  .sbit-cctv__events {
    top: 54px;
    right: 14px;

    width: 170px;
  }


  .sbit-cctv__events > div {
    grid-template-columns:
      5px 1fr auto;
  }


  .sbit-cctv__events div > span {
    display: none;
  }


  .sbit-cctv__visual-footer {
    right: 14px;
    bottom: 14px;
    left: 14px;
  }


  .sbit-cctv__coverage {
    display: none;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:420px) {

  .sbit-cctv__methods {
    grid-template-columns: 1fr;
  }


  .sbit-cctv__events {
    display: none;
  }


  .sbit-cctv__vms {
    width:
      calc(100% - 28px);
  }


  .sbit-cctv__camera {
    top: 56%;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .sbit-cctv *,
  .sbit-cctv *::before,
  .sbit-cctv *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes scRotate {

  to {
    transform:
      rotate(360deg);
  }

}


@keyframes scRecord {

  0%,
  100% {
    opacity: .45;
  }

  50% {
    opacity: 1;
  }

}



/*section 7 end here*/

/*section 8 start here*/

/* =========================================================
   SINDYBAD — INTEGRATED TECHNOLOGY
   Full-width / scoped / lightweight
========================================================= */

.sbit-integrated,
.sbit-integrated * {
  box-sizing: border-box;
}


.sbit-integrated {
  --si-bg: #050816;
  --si-panel: #08111F;

  --si-text: #F8FBFF;
  --si-muted: #9FB0C7;

  --si-line:
    rgba(148,163,184,.15);

  --si-blue: #2F6BFF;
  --si-blue-2: #60A5FA;

  --si-cyan: #22D3EE;
  --si-green: #22C55E;

  position: relative;
  isolation: isolate;

  width: 100%;

  min-height:
    calc(100svh - 72px);

  overflow: hidden;

  color:
    var(--si-text);

  background:
    radial-gradient(
      750px 520px
      at 50% 54%,
      rgba(47,107,255,.11),
      transparent 68%
    ),
    var(--si-bg);
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.sbit-integrated::before {
  position: absolute;
  z-index: -1;

  inset: 0;

  content: "";

  opacity: .1;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(96,165,250,.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96,165,250,.05) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;
}


/* top accent */

.sbit-integrated::after {
  position: absolute;

  top: 0;
  left: 6%;

  width: 120px;
  height: 2px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--si-blue),
      var(--si-green)
    );
}


/* =========================================================
   INNER
========================================================= */

.sbit-integrated__inner {
  width:
    min(calc(100% - 64px),1680px);

  min-height:
    calc(100svh - 72px);

  margin-inline: auto;

  padding:
    clamp(64px,6vw,92px)
    0
    clamp(46px,5vw,72px);
}


/* =========================================================
   INTRO
========================================================= */

.sbit-integrated__intro {
  display: grid;

  grid-template-columns:
    minmax(0,1.05fr)
    minmax(320px,.65fr);

  align-items: end;

  gap:
    clamp(40px,6vw,100px);
}


.sbit-integrated__topline {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 18px;
}


.sbit-integrated__kicker {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: #ADC8FF;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .17em;

  text-transform: uppercase;
}


.sbit-integrated__kicker::before {
  width: 38px;
  height: 1px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--si-blue),
      var(--si-green)
    );
}


.sbit-integrated__index {
  color:
    rgba(159,176,199,.42);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .15em;
}


.sbit-integrated__title {
  max-width: 700px;

  margin: 0;

  color:
    var(--si-text);

  font-size:
    clamp(34px,3vw,39px);

  font-weight: 860;

  line-height: 1.03;

  letter-spacing:
    -.045em;

  text-wrap: balance;
}


.sbit-integrated__title span {
  display: block;

  margin-top: 4px;

  color:
    var(--si-blue-2);
}


.sbit-integrated__intro-copy > p {
  max-width: 570px;

  margin: 0;

  color: #CBD6E5;

  font-size:
    clamp(13px,1vw,15px);

  line-height: 1.72;
}


/* =========================================================
   INTRO STATUS
========================================================= */

.sbit-integrated__intro-status {
  display: flex;

  flex-wrap: wrap;

  gap:
    8px
    16px;

  margin-top: 18px;
}


.sbit-integrated__intro-status span {
  display: flex;

  align-items: center;

  gap: 7px;

  color:
    rgba(159,176,199,.68);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .07em;

  text-transform: uppercase;
}


.sbit-integrated__intro-status i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--si-green);

  box-shadow:
    0 0 8px
    rgba(34,197,94,.6);
}


/* =========================================================
   MAP
========================================================= */

.sbit-integrated__map {
  position: relative;

  min-height: 590px;

  margin-top: 34px;

  overflow: hidden;

  border:
    1px solid
    rgba(96,165,250,.14);

  border-radius: 24px;

  background:
    radial-gradient(
      520px 390px
      at 50% 50%,
      rgba(47,107,255,.10),
      transparent 68%
    ),
    rgba(255,255,255,.012);

  box-shadow:
    inset 0 0 100px
    rgba(47,107,255,.025);
}


/* =========================================================
   MAP GRID
========================================================= */

.sbit-integrated__grid {
  position: absolute;

  inset: 0;

  opacity: .45;

  background-image:
    linear-gradient(
      rgba(96,165,250,.04) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96,165,250,.04) 1px,
      transparent 1px
    );

  background-size:
    48px 48px;

  mask-image:
    radial-gradient(
      circle at center,
      #000,
      transparent 76%
    );

  pointer-events: none;
}


/* =========================================================
   SVG CONNECTIONS
========================================================= */

.sbit-integrated__connections {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;
}


.sbit-integrated__connections line {
  stroke:
    rgba(96,165,250,.24);

  stroke-width: 1;

  stroke-dasharray:
    4 7;
}


/* =========================================================
   ORBIT
========================================================= */

.sbit-integrated__orbit {
  position: absolute;

  top: 50%;
  left: 50%;

  width:
    min(39vw,470px);

  aspect-ratio: 1;

  border:
    1px solid
    rgba(96,165,250,.16);

  border-radius: 50%;

  transform:
    translate(-50%,-50%);

  pointer-events: none;
}


.sbit-integrated__orbit > span:first-child {
  position: absolute;

  inset: 12%;

  border:
    1px dashed
    rgba(34,211,238,.17);

  border-radius: 50%;

  animation:
    siRotate
    28s linear infinite;
}


.sbit-integrated__orbit > span:last-child {
  position: absolute;

  inset: 29%;

  border:
    1px solid
    rgba(34,197,94,.13);

  border-radius: 50%;
}


/* =========================================================
   CORE
========================================================= */

.sbit-integrated__core {
  position: absolute;
  z-index: 5;

  top: 50%;
  left: 50%;

  display: grid;

  width: 220px;
  height: 220px;

  place-items: center;

  border:
    1px solid
    rgba(96,165,250,.33);

  border-radius: 50%;

  background:
    #081321;

  box-shadow:
    0 0 90px
    rgba(47,107,255,.22);

  transform:
    translate(-50%,-50%);
}


.sbit-integrated__core-ring {
  position: absolute;

  inset: 13px;

  border:
    1px solid
    rgba(34,211,238,.10);

  border-radius: 50%;

  pointer-events: none;
}


.sbit-integrated__core-content {
  position: relative;
  z-index: 2;

  padding: 20px;

  text-align: center;
}


.sbit-integrated__core-content > span {
  display: block;

  color:
    rgba(159,176,199,.58);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .14em;
}


.sbit-integrated__core-content > strong {
  display: block;

  margin:
    10px
    0
    7px;

  color: #FFFFFF;

  font-size:
    clamp(19px,1.6vw,26px);

  line-height: 1.02;
}


.sbit-integrated__core-content > small {
  display: block;

  color:
    var(--si-blue-2);

  font-size: 7px;
}


.sbit-integrated__core-status {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  margin-top: 16px;

  padding:
    7px
    9px;

  border:
    1px solid
    rgba(34,197,94,.14);

  border-radius: 999px;

  color: #86EFAC;

  background:
    rgba(34,197,94,.035);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .09em;
}


.sbit-integrated__core-status i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--si-green);

  box-shadow:
    0 0 8px
    rgba(34,197,94,.65);
}


/* =========================================================
   NODES
========================================================= */

.sbit-integrated__node {
  position: absolute;
  z-index: 6;

  display: grid;

  grid-template-columns:
    28px
    minmax(0,1fr)
    7px;

  align-items: center;

  gap: 10px;

  width:
    min(230px,19%);

  min-width: 180px;

  padding:
    11px
    12px;

  border:
    1px solid
    rgba(96,165,250,.15);

  border-radius: 12px;

  color: inherit;

  background:
    rgba(8,17,31,.92);

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.16);

  font: inherit;

  text-align: left;

  cursor: pointer;

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}


.sbit-integrated__node > span {
  display: grid;

  width: 28px;
  height: 28px;

  place-items: center;

  border:
    1px solid
    rgba(96,165,250,.17);

  border-radius: 7px;

  color:
    var(--si-blue-2);

  background:
    rgba(47,107,255,.06);

  font-size: 6px;
  font-weight: 900;
}


.sbit-integrated__node div {
  min-width: 0;
}


.sbit-integrated__node small {
  display: block;

  overflow: hidden;

  color:
    rgba(159,176,199,.48);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .09em;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.sbit-integrated__node strong {
  display: block;

  margin-top: 4px;

  overflow: hidden;

  color: #DFEAF7;

  font-size: 8px;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.sbit-integrated__node > i {
  width: 7px;
  height: 7px;

  border:
    2px solid
    var(--si-blue);

  border-radius: 50%;

  background:
    #DBEAFE;

  box-shadow:
    0 0 12px
    rgba(47,107,255,.7);
}


/* positions */

.sbit-integrated__node--a {
  top: 17%;
  left: 4%;
}


.sbit-integrated__node--b {
  top: 17%;
  right: 4%;
}


.sbit-integrated__node--c {
  bottom: 17%;
  left: 4%;
}


.sbit-integrated__node--d {
  right: 4%;
  bottom: 17%;
}


.sbit-integrated__node--e {
  top: 5%;
  left: 50%;

  transform:
    translateX(-50%);
}


.sbit-integrated__node--f {
  bottom: 5%;
  left: 50%;

  transform:
    translateX(-50%);
}


/* =========================================================
   ACTIVE NODE
========================================================= */

@media (hover:hover) {

  .sbit-integrated__node:hover {
    transform:
      translateY(-3px);

    border-color:
      rgba(96,165,250,.36);

    background:
      rgba(10,24,43,.97);

    box-shadow:
      0 17px 38px
      rgba(0,0,0,.22);
  }


  .sbit-integrated__node--e:hover,
  .sbit-integrated__node--f:hover {
    transform:
      translate(-50%,-3px);
  }

}


.sbit-integrated__node.is-active {
  border-color:
    rgba(34,211,238,.36);

  background:
    rgba(10,25,45,.97);

  box-shadow:
    0 15px 38px
    rgba(0,0,0,.20),
    0 0 24px
    rgba(34,211,238,.05);
}


.sbit-integrated__node:focus-visible {
  outline:
    2px solid
    var(--si-cyan);

  outline-offset: 3px;
}


/* =========================================================
   PLATFORM BAR
========================================================= */

.sbit-integrated__platform {
  position: absolute;
  z-index: 8;

  right: 18px;
  bottom: 18px;
  left: 18px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    11px
    14px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius: 11px;

  background:
    rgba(5,8,22,.84);
}


.sbit-integrated__platform-label {
  display: flex;

  align-items: center;

  gap: 9px;
}


.sbit-integrated__platform-label > i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--si-green);

  box-shadow:
    0 0 9px
    rgba(34,197,94,.6);
}


.sbit-integrated__platform-label span {
  display: block;

  color:
    rgba(159,176,199,.43);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .11em;
}


.sbit-integrated__platform-label strong {
  display: block;

  margin-top: 2px;

  font-size: 7px;
}


.sbit-integrated__platform-stack {
  display: flex;

  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 5px;
}


.sbit-integrated__platform-stack span {
  padding:
    5px
    7px;

  border:
    1px solid
    rgba(255,255,255,.065);

  border-radius: 6px;

  color: #B7C7D9;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  font-size: 6px;
}


/* =========================================================
   CAPABILITIES
========================================================= */

.sbit-integrated__capabilities {
  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap: 8px;

  margin-top: 10px;
}


.sbit-integrated__capabilities > div {
  display: grid;

  grid-template-columns:
    28px
    minmax(0,1fr);

  gap: 10px;

  padding:
    13px;

  border:
    1px solid
    var(--si-line);

  border-radius: 11px;

  background:
    rgba(255,255,255,.014);
}


.sbit-integrated__capabilities > div > span {
  display: grid;

  width: 28px;
  height: 28px;

  place-items: center;

  border:
    1px solid
    rgba(96,165,250,.16);

  border-radius: 7px;

  color:
    var(--si-blue-2);

  background:
    rgba(47,107,255,.05);

  font-size: 6px;
  font-weight: 900;
}


.sbit-integrated__capabilities section {
  min-width: 0;
}


.sbit-integrated__capabilities strong {
  display: block;

  color: #EFF6FF;

  font-size: 8px;
}


.sbit-integrated__capabilities small {
  display: block;

  margin-top: 4px;

  color:
    rgba(159,176,199,.60);

  font-size: 6px;

  line-height: 1.5;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1050px) {

  .sbit-integrated {
    min-height: auto;
  }


  .sbit-integrated__inner {
    width:
      calc(100% - 56px);

    min-height: auto;

    padding:
      70px
      0
      52px;
  }


  .sbit-integrated__intro {
    grid-template-columns: 1fr;

    gap: 22px;
  }


  .sbit-integrated__intro-copy > p {
    max-width: 700px;
  }


  .sbit-integrated__map {
    min-height: 650px;
  }


  .sbit-integrated__orbit {
    width:
      min(58vw,460px);
  }


  .sbit-integrated__node {
    width: 200px;

    min-width: 0;
  }


  .sbit-integrated__capabilities {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:700px) {

  .sbit-integrated__inner {
    width:
      calc(100% - 28px);

    padding:
      56px
      0
      36px;
  }


  .sbit-integrated__index {
    display: none;
  }


  .sbit-integrated__title {
    font-size:
      clamp(34px,8.5vw,37px);
  }


  .sbit-integrated__map {
    display: grid;

    gap: 7px;

    min-height: auto;

    padding:
      16px;

    overflow: visible;
  }


  .sbit-integrated__connections,
  .sbit-integrated__orbit,
  .sbit-integrated__grid {
    display: none;
  }


  .sbit-integrated__core {
    position: relative;

    top: auto;
    left: auto;

    width: 190px;
    height: 190px;

    margin:
      16px
      auto
      14px;

    transform: none;
  }


  .sbit-integrated__node {
    position: relative;

    top: auto;
    right: auto;
    bottom: auto;
    left: auto;

    width: 100%;

    min-width: 0;

    transform: none !important;
  }


  .sbit-integrated__platform {
    position: relative;

    right: auto;
    bottom: auto;
    left: auto;

    flex-direction: column;

    align-items: flex-start;

    margin-top: 8px;
  }


  .sbit-integrated__platform-stack {
    justify-content: flex-start;
  }


  .sbit-integrated__capabilities {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce) {

  .sbit-integrated *,
  .sbit-integrated *::before,
  .sbit-integrated *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes siRotate {

  to {
    transform:
      rotate(360deg);
  }

}


/*section 8 end here*/

/*section 9 start here*/


/* =========================================================
   SINDYBAD — INDUSTRIES + WHY SINDYBAD
   Premium / scoped / lightweight
========================================================= */

.sbit-sectors,
.sbit-sectors * {
  box-sizing: border-box;
}


.sbit-sectors {
  --ss-bg: #050816;
  --ss-panel: #08111F;

  --ss-text: #F8FBFF;
  --ss-muted: #9FB0C7;

  --ss-line:
    rgba(148,163,184,.15);

  --ss-blue: #2F6BFF;
  --ss-blue-2: #60A5FA;

  --ss-cyan: #22D3EE;
  --ss-green: #22C55E;

  position: relative;
  isolation: isolate;

  width: 100%;

  min-height:
    calc(100svh - 72px);

  overflow: hidden;

  color:
    var(--ss-text);

  background:
    radial-gradient(
      720px 500px
      at 15% 16%,
      rgba(47,107,255,.08),
      transparent 66%
    ),
    var(--ss-bg);
}


/* subtle background */

.sbit-sectors::before {
  position: absolute;
  z-index: -1;

  inset: 0;

  content: "";

  opacity: .09;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(96,165,250,.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96,165,250,.05) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;
}


/* top accent */

.sbit-sectors::after {
  position: absolute;

  top: 0;
  left: 6%;

  width: 120px;
  height: 2px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--ss-blue),
      var(--ss-green)
    );
}


/* =========================================================
   INNER
========================================================= */

.sbit-sectors__inner {
  width:
    min(calc(100% - 64px),1680px);

  margin-inline: auto;

  padding:
    clamp(64px,6vw,94px)
    0
    clamp(50px,5vw,74px);
}


/* =========================================================
   INTRO
========================================================= */

.sbit-sectors__intro {
  display: grid;

  grid-template-columns:
    minmax(0,1.1fr)
    minmax(320px,.65fr);

  align-items: end;

  gap:
    clamp(40px,6vw,100px);
}


.sbit-sectors__topline {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 18px;
}


.sbit-sectors__kicker {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: #ADC8FF;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .17em;

  text-transform: uppercase;
}


.sbit-sectors__kicker::before {
  width: 38px;
  height: 1px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--ss-blue),
      var(--ss-green)
    );
}


.sbit-sectors__index {
  color:
    rgba(159,176,199,.42);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .15em;
}


.sbit-sectors__title {
  max-width: 780px;

  margin: 0;

  color:
    var(--ss-text);

  font-size:
    clamp(34px,3vw,39px);

  font-weight: 860;

  line-height: 1.03;

  letter-spacing:
    -.045em;

  text-wrap: balance;
}


.sbit-sectors__title span {
  display: block;

  margin-top: 4px;

  color:
    var(--ss-blue-2);
}


/* intro copy */

.sbit-sectors__intro-copy > p {
  max-width: 580px;

  margin: 0;

  color: #CBD6E5;

  font-size:
    clamp(13px,1vw,15px);

  line-height: 1.72;
}


.sbit-sectors__intro-status {
  display: flex;

  flex-wrap: wrap;

  gap:
    8px
    16px;

  margin-top: 18px;
}


.sbit-sectors__intro-status span {
  display: flex;

  align-items: center;

  gap: 7px;

  color:
    rgba(159,176,199,.67);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .07em;

  text-transform: uppercase;
}


.sbit-sectors__intro-status i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--ss-green);

  box-shadow:
    0 0 8px
    rgba(34,197,94,.55);
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.sbit-sectors__layout {
  display: grid;

  grid-template-columns:
    minmax(0,1.03fr)
    minmax(0,.97fr);

  gap: 10px;

  margin-top: 34px;
}


.sbit-sectors__industries,
.sbit-sectors__why {
  min-width: 0;

  padding: 18px;

  border:
    1px solid
    var(--ss-line);

  border-radius: 20px;

  background:
    rgba(255,255,255,.012);

  box-shadow:
    0 20px 55px
    rgba(0,0,0,.09);
}


/* =========================================================
   SECTION TOP
========================================================= */

.sbit-sectors__section-top {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  padding:
    3px
    2px
    17px;
}


.sbit-sectors__section-top > div > span {
  display: block;

  color:
    var(--ss-blue-2);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .15em;
}


.sbit-sectors__section-top > div > strong {
  display: block;

  max-width: 440px;

  margin-top: 7px;

  color: #EEF5FD;

  font-size:
    clamp(15px,1.25vw,19px);

  line-height: 1.25;
}


.sbit-sectors__section-top em {
  color:
    var(--ss-blue-2);

  font-style: normal;
}


.sbit-sectors__section-top > small {
  flex: 0 0 auto;

  color:
    rgba(159,176,199,.38);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .12em;
}


/* =========================================================
   INDUSTRY GRID
========================================================= */

.sbit-sectors__industry-grid {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  border-top:
    1px solid
    var(--ss-line);

  border-left:
    1px solid
    var(--ss-line);
}


.sbit-sectors__industry-grid article {
  position: relative;

  display: grid;

  grid-template-columns:
    28px
    minmax(0,1fr)
    auto;

  align-items: center;

  gap: 11px;

  min-width: 0;
  min-height: 78px;

  padding:
    13px;

  border-right:
    1px solid
    var(--ss-line);

  border-bottom:
    1px solid
    var(--ss-line);

  background:
    rgba(255,255,255,.008);

  transition:
    background .18s ease,
    transform .18s ease;
}


.sbit-sectors__industry-grid article > span {
  display: grid;

  width: 28px;
  height: 28px;

  place-items: center;

  border:
    1px solid
    rgba(96,165,250,.15);

  border-radius: 7px;

  color:
    var(--ss-blue-2);

  background:
    rgba(47,107,255,.055);

  font-size: 6px;
  font-weight: 900;
}


.sbit-sectors__industry-grid div {
  min-width: 0;
}


.sbit-sectors__industry-grid small {
  display: block;

  color:
    rgba(159,176,199,.43);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .11em;
}


.sbit-sectors__industry-grid strong {
  display: block;

  margin-top: 5px;

  overflow: hidden;

  color: #EAF2FC;

  font-size: 9px;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.sbit-sectors__industry-grid article > i {
  color:
    rgba(96,165,250,.42);

  font-size: 11px;

  font-style: normal;

  transition:
    color .18s ease,
    transform .18s ease;
}


@media (hover:hover) {

  .sbit-sectors__industry-grid article:hover {
    z-index: 2;

    background:
      rgba(47,107,255,.045);

    transform:
      translateY(-1px);
  }


  .sbit-sectors__industry-grid article:hover > i {
    color:
      var(--ss-cyan);

    transform:
      translate(2px,-2px);
  }

}


/* =========================================================
   INDUSTRY FOOTER
========================================================= */

.sbit-sectors__industry-footer {
  display: flex;

  flex-wrap: wrap;

  gap:
    8px
    17px;

  padding-top: 16px;
}


.sbit-sectors__industry-footer span {
  display: flex;

  align-items: center;

  gap: 6px;

  color:
    rgba(159,176,199,.60);

  font-size: 6px;
  font-weight: 800;

  letter-spacing: .06em;

  text-transform: uppercase;
}


.sbit-sectors__industry-footer i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    var(--ss-green);
}


/* =========================================================
   WHY SINDYBAD
========================================================= */

.sbit-sectors__why-grid {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 7px;
}


.sbit-sectors__why-grid > article {
  position: relative;

  min-width: 0;
  min-height: 138px;

  padding: 13px;

  overflow: hidden;

  border:
    1px solid
    var(--ss-line);

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.028),
      rgba(255,255,255,.008)
    );

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}


.sbit-sectors__why-grid > article::after {
  position: absolute;

  right: -28px;
  bottom: -28px;

  width: 78px;
  height: 78px;

  border:
    1px solid
    rgba(96,165,250,.045);

  border-radius: 50%;

  content: "";
}


.sbit-sectors__why-top {
  display: flex;

  align-items: center;
  justify-content: space-between;
}


.sbit-sectors__why-top span {
  color:
    var(--ss-blue-2);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .1em;
}


.sbit-sectors__why-top i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--ss-green);

  box-shadow:
    0 0 7px
    rgba(34,197,94,.45);
}


.sbit-sectors__why-grid > article > strong {
  display: block;

  margin-top: 18px;

  color: #F1F6FD;

  font-size: 10px;
  font-weight: 800;
}


.sbit-sectors__why-grid > article > p {
  max-width: 280px;

  margin:
    7px
    0
    0;

  color:
    rgba(159,176,199,.68);

  font-size: 7px;

  line-height: 1.55;
}


@media (hover:hover) {

  .sbit-sectors__why-grid > article:hover {
    transform:
      translateY(-2px);

    border-color:
      rgba(96,165,250,.25);

    background:
      rgba(255,255,255,.026);
  }

}


/* =========================================================
   BOTTOM SUMMARY
========================================================= */

.sbit-sectors__bottom {
  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap: 7px;

  margin-top: 10px;
}


.sbit-sectors__bottom > div {
  display: flex;

  align-items: center;

  gap: 11px;

  min-width: 0;

  padding:
    13px
    14px;

  border:
    1px solid
    var(--ss-line);

  border-radius: 11px;

  background:
    rgba(255,255,255,.012);
}


.sbit-sectors__bottom > div > span {
  color:
    var(--ss-blue-2);

  font-size: 19px;
  font-weight: 850;

  letter-spacing: -.04em;
}


.sbit-sectors__bottom section {
  min-width: 0;
}


.sbit-sectors__bottom small {
  display: block;

  color:
    rgba(159,176,199,.43);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .11em;
}


.sbit-sectors__bottom strong {
  display: block;

  margin-top: 3px;

  overflow: hidden;

  color: #E8F1FB;

  font-size: 7px;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* last summary */

.sbit-sectors__bottom-status > i {
  width: 8px;
  height: 8px;

  flex: 0 0 auto;

  border-radius: 50%;

  background:
    var(--ss-green);

  box-shadow:
    0 0 11px
    rgba(34,197,94,.65);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width:1800px) {

  .sbit-sectors__inner {
    width:
      min(calc(100% - 96px),1680px);
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1050px) {

  .sbit-sectors {
    min-height: auto;
  }


  .sbit-sectors__inner {
    width:
      calc(100% - 56px);

    padding:
      70px
      0
      52px;
  }


  .sbit-sectors__intro {
    grid-template-columns: 1fr;

    gap: 22px;
  }


  .sbit-sectors__intro-copy > p {
    max-width: 720px;
  }


  .sbit-sectors__layout {
    grid-template-columns: 1fr;
  }


  .sbit-sectors__bottom {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:650px) {

  .sbit-sectors__inner {
    width:
      calc(100% - 28px);

    padding:
      56px
      0
      36px;
  }


  .sbit-sectors__index {
    display: none;
  }


  .sbit-sectors__title {
    font-size:
      clamp(34px,8.5vw,37px);
  }


  .sbit-sectors__industries,
  .sbit-sectors__why {
    padding: 13px;

    border-radius: 16px;
  }


  .sbit-sectors__section-top {
    align-items: flex-start;
  }


  .sbit-sectors__section-top > small {
    display: none;
  }


  .sbit-sectors__industry-grid {
    grid-template-columns: 1fr;
  }


  .sbit-sectors__industry-grid article {
    min-height: 70px;
  }


  .sbit-sectors__why-grid {
    grid-template-columns: 1fr;
  }


  .sbit-sectors__why-grid > article {
    min-height: auto;
  }


  .sbit-sectors__bottom {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .sbit-sectors *,
  .sbit-sectors *::before,
  .sbit-sectors *::after {
    transition-duration:
      .01ms !important;
  }

}



/*section 9 end here*/


/*section 10 start here*/


/* =========================================================
   SINDYBAD — PROJECT DELIVERY + TECHNOLOGY
   Scoped / premium / lightweight
========================================================= */

.sbit-delivery,
.sbit-delivery * {
  box-sizing: border-box;
}


.sbit-delivery {
  --sd-bg: #050816;
  --sd-panel: #08111F;

  --sd-text: #F8FBFF;
  --sd-muted: #9FB0C7;

  --sd-line:
    rgba(148,163,184,.15);

  --sd-blue: #2F6BFF;
  --sd-blue-2: #60A5FA;
  --sd-cyan: #22D3EE;
  --sd-green: #22C55E;

  position: relative;
  isolation: isolate;

  width: 100%;

  min-height:
    calc(100svh - 72px);

  overflow: hidden;

  color:
    var(--sd-text);

  background:
    radial-gradient(
      720px 520px
      at 82% 15%,
      rgba(34,197,94,.045),
      transparent 66%
    ),
    radial-gradient(
      620px 450px
      at 12% 18%,
      rgba(47,107,255,.07),
      transparent 67%
    ),
    var(--sd-bg);
}


/* =========================================================
   BACKGROUND
========================================================= */

.sbit-delivery::before {
  position: absolute;
  z-index: -1;

  inset: 0;

  content: "";

  opacity: .085;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(96,165,250,.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96,165,250,.05) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;
}


.sbit-delivery::after {
  position: absolute;

  top: 0;
  right: 6%;

  width: 120px;
  height: 2px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--sd-blue),
      var(--sd-green)
    );
}


/* =========================================================
   INNER
========================================================= */

.sbit-delivery__inner {
  width:
    min(calc(100% - 64px),1680px);

  margin-inline: auto;

  padding:
    clamp(64px,6vw,94px)
    0
    clamp(50px,5vw,74px);
}


/* =========================================================
   INTRO
========================================================= */

.sbit-delivery__intro {
  display: grid;

  grid-template-columns:
    minmax(0,1.1fr)
    minmax(320px,.65fr);

  align-items: end;

  gap:
    clamp(40px,6vw,100px);
}


.sbit-delivery__topline {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 18px;
}


.sbit-delivery__kicker {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: #ADC8FF;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .17em;

  text-transform: uppercase;
}


.sbit-delivery__kicker::before {
  width: 38px;
  height: 1px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--sd-blue),
      var(--sd-green)
    );
}


.sbit-delivery__index {
  color:
    rgba(159,176,199,.42);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .15em;
}


.sbit-delivery__title {
  max-width: 790px;

  margin: 0;

  color:
    var(--sd-text);

  font-size:
    clamp(34px,3vw,39px);

  font-weight: 860;

  line-height: 1.03;

  letter-spacing: -.045em;

  text-wrap: balance;
}


.sbit-delivery__title span {
  display: block;

  margin-top: 4px;

  color:
    var(--sd-blue-2);
}


.sbit-delivery__intro-copy > p {
  max-width: 580px;

  margin: 0;

  color: #CBD6E5;

  font-size:
    clamp(13px,1vw,15px);

  line-height: 1.72;
}


.sbit-delivery__intro-status {
  display: flex;

  flex-wrap: wrap;

  gap:
    8px
    16px;

  margin-top: 18px;
}


.sbit-delivery__intro-status span {
  display: flex;

  align-items: center;

  gap: 7px;

  color:
    rgba(159,176,199,.67);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .07em;

  text-transform: uppercase;
}


.sbit-delivery__intro-status i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--sd-green);

  box-shadow:
    0 0 8px
    rgba(34,197,94,.55);
}


/* =========================================================
   LAYOUT
========================================================= */

.sbit-delivery__layout {
  display: grid;

  grid-template-columns:
    minmax(0,1.02fr)
    minmax(0,.98fr);

  gap: 10px;

  margin-top: 34px;
}


.sbit-delivery__process,
.sbit-delivery__technology {
  min-width: 0;

  padding: 18px;

  border:
    1px solid
    var(--sd-line);

  border-radius: 20px;

  background:
    rgba(255,255,255,.012);

  box-shadow:
    0 20px 55px
    rgba(0,0,0,.08);
}


/* =========================================================
   PANEL HEADER
========================================================= */

.sbit-delivery__panel-head {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  padding:
    3px
    2px
    17px;
}


.sbit-delivery__panel-head > div > span {
  display: block;

  color:
    var(--sd-blue-2);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .15em;
}


.sbit-delivery__panel-head > div > strong {
  display: block;

  margin-top: 7px;

  color: #EEF5FD;

  font-size:
    clamp(15px,1.25vw,19px);

  line-height: 1.25;
}


.sbit-delivery__panel-head em {
  color:
    var(--sd-blue-2);

  font-style: normal;
}


.sbit-delivery__panel-head > small {
  flex: 0 0 auto;

  color:
    rgba(159,176,199,.38);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .12em;
}


/* =========================================================
   DELIVERY TIMELINE
========================================================= */

.sbit-delivery__timeline {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 7px;

  margin: 0;

  padding: 0;

  list-style: none;
}


.sbit-delivery__timeline li {
  position: relative;

  display: grid;

  grid-template-columns:
    34px
    minmax(0,1fr);

  gap: 10px;

  min-width: 0;

  min-height: 105px;

  padding: 12px;

  overflow: hidden;

  border:
    1px solid
    var(--sd-line);

  border-radius: 11px;

  background:
    rgba(255,255,255,.015);

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}


.sbit-delivery__timeline li::after {
  position: absolute;

  right: -22px;
  bottom: -22px;

  width: 68px;
  height: 68px;

  border:
    1px solid
    rgba(96,165,250,.04);

  border-radius: 50%;

  content: "";
}


/* marker */

.sbit-delivery__step-marker {
  display: flex;

  flex-direction: column;
  align-items: center;
}


.sbit-delivery__step-marker span {
  display: grid;

  width: 30px;
  height: 30px;

  place-items: center;

  border:
    1px solid
    rgba(96,165,250,.17);

  border-radius: 8px;

  color:
    var(--sd-blue-2);

  background:
    rgba(47,107,255,.055);

  font-size: 6px;
  font-weight: 900;
}


.sbit-delivery__step-marker i {
  width: 1px;
  height: 25px;

  margin-top: 5px;

  background:
    linear-gradient(
      var(--sd-blue),
      transparent
    );
}


/* step copy */

.sbit-delivery__timeline small {
  display: block;

  color:
    rgba(126,166,255,.60);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .11em;
}


.sbit-delivery__timeline strong {
  display: block;

  margin-top: 5px;

  color: #EEF5FD;

  font-size: 9px;
}


.sbit-delivery__timeline p {
  margin:
    6px
    0
    0;

  color:
    rgba(159,176,199,.66);

  font-size: 7px;

  line-height: 1.5;
}


@media (hover:hover) {

  .sbit-delivery__timeline li:hover {
    transform:
      translateY(-2px);

    border-color:
      rgba(96,165,250,.25);

    background:
      rgba(255,255,255,.025);
  }

}


/* =========================================================
   TECHNOLOGY GRID
========================================================= */

.sbit-delivery__tech-grid {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 7px;
}


.sbit-delivery__tech-grid article {
  min-width: 0;

  padding: 13px;

  border:
    1px solid
    var(--sd-line);

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      rgba(47,107,255,.035),
      rgba(255,255,255,.009)
    );

  transition:
    transform .18s ease,
    border-color .18s ease;
}


.sbit-delivery__tech-wide {
  grid-column:
    1 / -1;
}


.sbit-delivery__tech-top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 13px;
}


.sbit-delivery__tech-top span {
  color:
    var(--sd-blue-2);

  font-size: 6px;
  font-weight: 900;
}


.sbit-delivery__tech-top i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--sd-green);

  box-shadow:
    0 0 7px
    rgba(34,197,94,.5);
}


.sbit-delivery__tech-grid article > small {
  display: block;

  color:
    rgba(159,176,199,.43);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .11em;
}


.sbit-delivery__tech-grid article > strong {
  display: block;

  margin-top: 6px;

  color: #F0F6FD;

  font-size: 10px;
}


.sbit-delivery__tech-grid article > p {
  margin:
    7px
    0
    0;

  color:
    rgba(159,176,199,.68);

  font-size: 7px;

  line-height: 1.55;
}


.sbit-delivery__tech-grid article > div:last-child {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 11px;
}


.sbit-delivery__tech-grid article > div:last-child span {
  padding:
    5px
    7px;

  border:
    1px solid
    rgba(255,255,255,.065);

  border-radius: 6px;

  color: #B8C7D9;

  font-size: 6px;
}


@media (hover:hover) {

  .sbit-delivery__tech-grid article:hover {
    transform:
      translateY(-2px);

    border-color:
      rgba(96,165,250,.26);
  }

}


/* =========================================================
   STACK STATUS
========================================================= */

.sbit-delivery__stack {
  margin-top: 8px;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 13px;

  background:
    rgba(3,7,18,.77);
}


.sbit-delivery__stack-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 16px;

  min-height: 35px;

  padding:
    0
    13px;

  border-bottom:
    1px solid
    rgba(255,255,255,.065);
}


.sbit-delivery__stack-head > div {
  display: flex;

  align-items: center;

  gap: 7px;
}


.sbit-delivery__stack-head i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--sd-green);

  box-shadow:
    0 0 8px
    rgba(34,197,94,.6);
}


.sbit-delivery__stack-head span {
  color: #DCE8F6;

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .11em;
}


.sbit-delivery__stack-head small {
  color:
    rgba(159,176,199,.42);

  font-size: 5px;
  font-weight: 900;
}


/* command */

.sbit-delivery__stack-command {
  padding:
    11px
    13px
    5px;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}


.sbit-delivery__stack-command p {
  margin: 0;

  color:
    #B7C8DC;

  font-size: 7px;
}


.sbit-delivery__stack-command span {
  color: #86EFAC;
}


/* status */

.sbit-delivery__stack-status {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 5px;

  padding:
    8px
    13px
    13px;
}


.sbit-delivery__stack-status > span {
  display: grid;

  grid-template-columns:
    5px
    minmax(0,1fr)
    auto;

  align-items: center;

  gap: 7px;

  padding:
    7px
    8px;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius: 7px;

  background:
    rgba(255,255,255,.012);
}


.sbit-delivery__stack-status i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--sd-green);
}


.sbit-delivery__stack-status b {
  color: #BDCAD9;

  font-size: 6px;
}


.sbit-delivery__stack-status em {
  color: #86EFAC;

  font-size: 5px;
  font-weight: 900;

  font-style: normal;
}


/* =========================================================
   SUMMARY
========================================================= */

.sbit-delivery__summary {
  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap: 7px;

  margin-top: 10px;
}


.sbit-delivery__summary > div {
  display: flex;

  align-items: center;

  gap: 11px;

  min-width: 0;

  padding:
    13px
    14px;

  border:
    1px solid
    var(--sd-line);

  border-radius: 11px;

  background:
    rgba(255,255,255,.012);
}


.sbit-delivery__summary > div > span {
  color:
    var(--sd-blue-2);

  font-size: 19px;
  font-weight: 850;

  letter-spacing: -.04em;
}


.sbit-delivery__summary section {
  min-width: 0;
}


.sbit-delivery__summary small {
  display: block;

  color:
    rgba(159,176,199,.43);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .11em;
}


.sbit-delivery__summary strong {
  display: block;

  margin-top: 3px;

  overflow: hidden;

  color: #E8F1FB;

  font-size: 7px;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.sbit-delivery__summary-status > i {
  width: 8px;
  height: 8px;

  flex: 0 0 auto;

  border-radius: 50%;

  background:
    var(--sd-green);

  box-shadow:
    0 0 11px
    rgba(34,197,94,.65);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1050px) {

  .sbit-delivery {
    min-height: auto;
  }


  .sbit-delivery__inner {
    width:
      calc(100% - 56px);

    padding:
      70px
      0
      52px;
  }


  .sbit-delivery__intro {
    grid-template-columns: 1fr;

    gap: 22px;
  }


  .sbit-delivery__intro-copy > p {
    max-width: 720px;
  }


  .sbit-delivery__layout {
    grid-template-columns: 1fr;
  }


  .sbit-delivery__summary {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:650px) {

  .sbit-delivery__inner {
    width:
      calc(100% - 28px);

    padding:
      56px
      0
      36px;
  }


  .sbit-delivery__index {
    display: none;
  }


  .sbit-delivery__title {
    font-size:
      clamp(34px,8.5vw,37px);
  }


  .sbit-delivery__process,
  .sbit-delivery__technology {
    padding: 13px;

    border-radius: 16px;
  }


  .sbit-delivery__panel-head {
    align-items: flex-start;
  }


  .sbit-delivery__panel-head > small {
    display: none;
  }


  .sbit-delivery__timeline {
    grid-template-columns: 1fr;
  }


  .sbit-delivery__timeline li {
    min-height: auto;
  }


  .sbit-delivery__tech-grid {
    grid-template-columns: 1fr;
  }


  .sbit-delivery__tech-wide {
    grid-column: auto;
  }


  .sbit-delivery__stack-status {
    grid-template-columns: 1fr;
  }


  .sbit-delivery__summary {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .sbit-delivery *,
  .sbit-delivery *::before,
  .sbit-delivery *::after {
    transition-duration:
      .01ms !important;
  }

}


/*section 10 end here*/

/*section 11 start here*/

/* =========================================================
   SINDYBAD — SECURITY + SUPPORT
   Premium / scoped / lightweight
========================================================= */

.sbit-continuity,
.sbit-continuity * {
  box-sizing: border-box;
}


.sbit-continuity {
  --sbc-bg: #050816;
  --sbc-panel: #08111F;

  --sbc-text: #F8FBFF;
  --sbc-muted: #9FB0C7;

  --sbc-line:
    rgba(148,163,184,.15);

  --sbc-blue: #2F6BFF;
  --sbc-blue-2: #60A5FA;
  --sbc-cyan: #22D3EE;
  --sbc-green: #22C55E;

  position: relative;
  isolation: isolate;

  width: 100%;

  min-height:
    calc(100svh - 72px);

  overflow: hidden;

  color:
    var(--sbc-text);

  background:
    radial-gradient(
      680px 480px
      at 18% 20%,
      rgba(47,107,255,.075),
      transparent 66%
    ),
    radial-gradient(
      620px 460px
      at 84% 70%,
      rgba(34,197,94,.035),
      transparent 68%
    ),
    var(--sbc-bg);
}


/* =========================================================
   BACKGROUND
========================================================= */

.sbit-continuity::before {
  position: absolute;
  z-index: -1;

  inset: 0;

  content: "";

  opacity: .085;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(96,165,250,.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96,165,250,.05) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;
}


.sbit-continuity::after {
  position: absolute;

  top: 0;
  left: 6%;

  width: 120px;
  height: 2px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--sbc-blue),
      var(--sbc-green)
    );
}


/* =========================================================
   INNER
========================================================= */

.sbit-continuity__inner {
  width:
    min(calc(100% - 64px),1680px);

  margin-inline: auto;

  padding:
    clamp(64px,6vw,94px)
    0
    clamp(50px,5vw,74px);
}


/* =========================================================
   INTRO
========================================================= */

.sbit-continuity__intro {
  display: grid;

  grid-template-columns:
    minmax(0,1.1fr)
    minmax(320px,.65fr);

  align-items: end;

  gap:
    clamp(40px,6vw,100px);
}


.sbit-continuity__topline {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 18px;
}


.sbit-continuity__kicker {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: #ADC8FF;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .17em;

  text-transform: uppercase;
}


.sbit-continuity__kicker::before {
  width: 38px;
  height: 1px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--sbc-blue),
      var(--sbc-green)
    );
}


.sbit-continuity__index {
  color:
    rgba(159,176,199,.42);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .15em;
}


.sbit-continuity__title {
  max-width: 780px;

  margin: 0;

  color:
    var(--sbc-text);

  font-size:
    clamp(34px,3vw,39px);

  font-weight: 860;

  line-height: 1.03;

  letter-spacing:
    -.045em;

  text-wrap: balance;
}


.sbit-continuity__title span {
  display: block;

  margin-top: 4px;

  color:
    var(--sbc-blue-2);
}


.sbit-continuity__intro-copy > p {
  max-width: 580px;

  margin: 0;

  color: #CBD6E5;

  font-size:
    clamp(13px,1vw,15px);

  line-height: 1.72;
}


.sbit-continuity__intro-status {
  display: flex;

  flex-wrap: wrap;

  gap:
    8px
    16px;

  margin-top: 18px;
}


.sbit-continuity__intro-status span {
  display: flex;

  align-items: center;

  gap: 7px;

  color:
    rgba(159,176,199,.67);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .07em;

  text-transform: uppercase;
}


.sbit-continuity__intro-status i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--sbc-green);

  box-shadow:
    0 0 8px
    rgba(34,197,94,.55);
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.sbit-continuity__layout {
  display: grid;

  grid-template-columns:
    minmax(0,.96fr)
    minmax(0,1.04fr);

  gap: 10px;

  margin-top: 34px;
}


.sbit-continuity__security,
.sbit-continuity__support {
  position: relative;

  min-width: 0;

  padding: 18px;

  overflow: hidden;

  border:
    1px solid
    var(--sbc-line);

  border-radius: 20px;

  background:
    rgba(255,255,255,.012);

  box-shadow:
    0 20px 55px
    rgba(0,0,0,.08);
}


.sbit-continuity__security {
  background:
    radial-gradient(
      420px 320px
      at 50% 35%,
      rgba(47,107,255,.065),
      transparent 70%
    ),
    rgba(255,255,255,.012);
}


/* =========================================================
   PANEL TOP
========================================================= */

.sbit-continuity__panel-top {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;
}


.sbit-continuity__panel-top > div:first-child > span {
  display: block;

  color:
    var(--sbc-blue-2);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .15em;
}


.sbit-continuity__panel-top > div:first-child > strong {
  display: block;

  margin-top: 7px;

  color: #EEF5FD;

  font-size:
    clamp(17px,1.45vw,22px);

  line-height: 1.18;
}


.sbit-continuity__panel-top em {
  color:
    var(--sbc-blue-2);

  font-style: normal;
}


/* status pill */

.sbit-continuity__state {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  flex: 0 0 auto;

  padding:
    7px
    9px;

  border:
    1px solid
    rgba(34,197,94,.14);

  border-radius: 999px;

  color: #86EFAC;

  background:
    rgba(34,197,94,.03);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .1em;
}


.sbit-continuity__state i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--sbc-green);

  box-shadow:
    0 0 8px
    rgba(34,197,94,.65);
}


.sbit-continuity__panel-copy {
  max-width: 610px;

  margin:
    12px
    0
    0;

  color:
    var(--sbc-muted);

  font-size: 10px;

  line-height: 1.65;
}


/* =========================================================
   SECURITY CORE
========================================================= */

.sbit-continuity__security-core {
  display: grid;

  grid-template-columns:
    minmax(190px,.8fr)
    minmax(170px,1fr);

  align-items: center;

  gap: 18px;

  margin-top: 22px;

  padding:
    17px;

  border:
    1px solid
    rgba(96,165,250,.10);

  border-radius: 15px;

  background:
    rgba(5,8,22,.42);
}


/* =========================================================
   SHIELD
========================================================= */

.sbit-continuity__shield {
  position: relative;

  display: grid;

  width: 190px;
  height: 190px;

  margin-inline: auto;

  place-items: center;

  border:
    1px solid
    rgba(96,165,250,.19);

  border-radius: 50%;

  background:
    rgba(8,17,31,.64);
}


.sbit-continuity__shield::before {
  position: absolute;

  inset: 20px;

  border:
    1px solid
    rgba(34,211,238,.08);

  border-radius: 50%;

  content: "";
}


.sbit-continuity__shield-ring {
  position: absolute;

  inset: 8px;

  border:
    1px dashed
    rgba(34,211,238,.20);

  border-radius: 50%;

  animation:
    sbcRotate
    22s linear infinite;
}


/* shield mark */

.sbit-continuity__shield-mark {
  position: absolute;

  top: 34px;
  left: 50%;

  width: 52px;
  height: 62px;

  transform:
    translateX(-50%);
}


.sbit-continuity__shield-mark span {
  position: absolute;

  inset: 0;

  border:
    1px solid
    rgba(34,211,238,.65);

  border-radius:
    22px 22px 28px 28px;

  clip-path:
    polygon(
      50% 0,
      100% 19%,
      90% 70%,
      50% 100%,
      10% 70%,
      0 19%
    );
}


.sbit-continuity__shield-mark i {
  position: absolute;

  top: 24px;
  left: 50%;

  width: 16px;
  height: 8px;

  border-left:
    2px solid
    #86EFAC;

  border-bottom:
    2px solid
    #86EFAC;

  transform:
    translateX(-50%)
    rotate(-45deg);
}


/* shield status */

.sbit-continuity__shield-status {
  position: absolute;

  right: 14px;
  bottom: 23px;
  left: 14px;

  text-align: center;
}


.sbit-continuity__shield-status small {
  display: block;

  color:
    rgba(159,176,199,.43);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .12em;
}


.sbit-continuity__shield-status strong {
  display: block;

  margin-top: 5px;

  color:
    #86EFAC;

  font-size: 14px;
}


.sbit-continuity__shield-status > span {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 5px;

  margin-top: 5px;

  color:
    rgba(159,176,199,.58);

  font-size: 5px;
}


.sbit-continuity__shield-status > span i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    var(--sbc-green);
}


/* =========================================================
   SECURITY META
========================================================= */

.sbit-continuity__security-meta {
  display: grid;

  gap: 7px;
}


.sbit-continuity__security-meta > div {
  padding: 12px;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius: 10px;

  background:
    rgba(255,255,255,.012);
}


.sbit-continuity__security-meta span {
  display: block;

  color:
    rgba(159,176,199,.43);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .11em;
}


.sbit-continuity__security-meta strong {
  display: block;

  margin-top: 5px;

  color:
    #E5EEF9;

  font-size: 9px;
}


/* =========================================================
   SECURITY GRID
========================================================= */

.sbit-continuity__security-grid {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 6px;

  margin-top: 8px;
}


.sbit-continuity__security-grid > span {
  display: flex;

  align-items: center;

  gap: 7px;

  min-width: 0;

  padding:
    9px;

  border:
    1px solid
    var(--sbc-line);

  border-radius: 8px;

  color:
    #B4C3D5;

  background:
    rgba(255,255,255,.012);

  font-size: 6px;

  transition:
    transform .18s ease,
    border-color .18s ease;
}


.sbit-continuity__security-grid i {
  color:
    var(--sbc-blue-2);

  font-size: 5px;
  font-weight: 900;

  font-style: normal;
}


@media (hover:hover) {

  .sbit-continuity__security-grid > span:hover {
    transform:
      translateY(-2px);

    border-color:
      rgba(96,165,250,.25);
  }

}


/* =========================================================
   SECURITY FOOTER
========================================================= */

.sbit-continuity__panel-footer {
  display: flex;

  flex-wrap: wrap;

  gap:
    8px
    16px;

  margin-top: 15px;

  padding-top: 14px;

  border-top:
    1px solid
    rgba(148,163,184,.08);
}


.sbit-continuity__panel-footer span {
  display: flex;

  align-items: center;

  gap: 6px;

  color:
    rgba(159,176,199,.57);

  font-size: 6px;
  font-weight: 800;

  text-transform: uppercase;
}


.sbit-continuity__panel-footer i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    var(--sbc-green);
}


/* =========================================================
   SUPPORT STATUS
========================================================= */

.sbit-continuity__support-status {
  margin-top: 22px;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.085);

  border-radius: 14px;

  background:
    rgba(3,7,18,.72);
}


.sbit-continuity__support-status-top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding:
    11px
    13px;

  border-bottom:
    1px solid
    rgba(255,255,255,.06);
}


.sbit-continuity__support-status-top span {
  display: block;

  color:
    rgba(159,176,199,.43);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .12em;
}


.sbit-continuity__support-status-top strong {
  display: block;

  margin-top: 3px;

  font-size: 9px;
}


.sbit-continuity__support-status-top > i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--sbc-green);

  box-shadow:
    0 0 9px
    rgba(34,197,94,.65);
}


/* command */

.sbit-continuity__support-command {
  padding:
    11px
    13px;

  color:
    #B8C9DC;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  font-size: 7px;
}


.sbit-continuity__support-command span {
  color:
    #86EFAC;
}


/* health rows */

.sbit-continuity__support-health {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 5px;

  padding:
    0
    13px
    13px;
}


.sbit-continuity__support-health > span {
  display: grid;

  grid-template-columns:
    5px
    minmax(0,1fr)
    auto;

  align-items: center;

  gap: 7px;

  padding:
    8px;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius: 7px;

  background:
    rgba(255,255,255,.012);
}


.sbit-continuity__support-health i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--sbc-green);
}


.sbit-continuity__support-health b {
  color:
    #BCCBDB;

  font-size: 6px;
}


.sbit-continuity__support-health em {
  color:
    #86EFAC;

  font-size: 5px;
  font-weight: 900;

  font-style: normal;
}


/* =========================================================
   SUPPORT GROUPS
========================================================= */

.sbit-continuity__support-groups {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 7px;

  margin-top: 8px;
}


.sbit-continuity__support-groups > section {
  min-width: 0;

  padding: 12px;

  border:
    1px solid
    var(--sbc-line);

  border-radius: 11px;

  background:
    rgba(255,255,255,.012);

  transition:
    transform .18s ease,
    border-color .18s ease;
}


.sbit-continuity__group-head {
  display: grid;

  grid-template-columns:
    28px
    minmax(0,1fr);

  align-items: center;

  gap: 9px;
}


.sbit-continuity__group-head > span {
  display: grid;

  width: 28px;
  height: 28px;

  place-items: center;

  border:
    1px solid
    rgba(96,165,250,.16);

  border-radius: 7px;

  color:
    var(--sbc-blue-2);

  background:
    rgba(47,107,255,.05);

  font-size: 6px;
  font-weight: 900;
}


.sbit-continuity__group-head small {
  display: block;

  color:
    rgba(159,176,199,.43);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .09em;
}


.sbit-continuity__group-head strong {
  display: block;

  margin-top: 3px;

  color: #EEF5FD;

  font-size: 8px;
}


.sbit-continuity__group-items {
  display: grid;

  gap: 5px;

  margin-top: 11px;
}


.sbit-continuity__group-items span {
  position: relative;

  padding-left: 10px;

  color:
    rgba(159,176,199,.68);

  font-size: 6px;

  line-height: 1.45;
}


.sbit-continuity__group-items span::before {
  position: absolute;

  top: .55em;
  left: 0;

  width: 3px;
  height: 3px;

  border-radius: 50%;

  content: "";

  background:
    var(--sbc-green);
}


@media (hover:hover) {

  .sbit-continuity__support-groups > section:hover {
    transform:
      translateY(-2px);

    border-color:
      rgba(96,165,250,.23);
  }

}


/* =========================================================
   SUMMARY
========================================================= */

.sbit-continuity__summary {
  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap: 7px;

  margin-top: 10px;
}


.sbit-continuity__summary > div {
  display: flex;

  align-items: center;

  gap: 11px;

  min-width: 0;

  padding:
    13px
    14px;

  border:
    1px solid
    var(--sbc-line);

  border-radius: 11px;

  background:
    rgba(255,255,255,.012);
}


.sbit-continuity__summary > div > span {
  color:
    var(--sbc-blue-2);

  font-size: 19px;
  font-weight: 850;

  letter-spacing: -.04em;
}


.sbit-continuity__summary section {
  min-width: 0;
}


.sbit-continuity__summary small {
  display: block;

  color:
    rgba(159,176,199,.43);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .11em;
}


.sbit-continuity__summary strong {
  display: block;

  margin-top: 3px;

  overflow: hidden;

  color: #E8F1FB;

  font-size: 7px;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.sbit-continuity__summary-status > i {
  width: 8px;
  height: 8px;

  flex: 0 0 auto;

  border-radius: 50%;

  background:
    var(--sbc-green);

  box-shadow:
    0 0 11px
    rgba(34,197,94,.65);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width:1800px) {

  .sbit-continuity__inner {
    width:
      min(calc(100% - 96px),1680px);
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1050px) {

  .sbit-continuity {
    min-height: auto;
  }


  .sbit-continuity__inner {
    width:
      calc(100% - 56px);

    padding:
      70px
      0
      52px;
  }


  .sbit-continuity__intro {
    grid-template-columns: 1fr;

    gap: 22px;
  }


  .sbit-continuity__intro-copy > p {
    max-width: 720px;
  }


  .sbit-continuity__layout {
    grid-template-columns: 1fr;
  }


  .sbit-continuity__summary {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:650px) {

  .sbit-continuity__inner {
    width:
      calc(100% - 28px);

    padding:
      56px
      0
      36px;
  }


  .sbit-continuity__index {
    display: none;
  }


  .sbit-continuity__title {
    font-size:
      clamp(34px,8.5vw,37px);
  }


  .sbit-continuity__security,
  .sbit-continuity__support {
    padding: 13px;

    border-radius: 16px;
  }


  .sbit-continuity__state {
    display: none;
  }


  .sbit-continuity__security-core {
    grid-template-columns: 1fr;
  }


  .sbit-continuity__shield {
    width: 180px;
    height: 180px;
  }


  .sbit-continuity__security-meta {
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }


  .sbit-continuity__security-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .sbit-continuity__support-health,
  .sbit-continuity__support-groups {
    grid-template-columns: 1fr;
  }


  .sbit-continuity__summary {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:420px) {

  .sbit-continuity__security-meta,
  .sbit-continuity__security-grid {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .sbit-continuity *,
  .sbit-continuity *::before,
  .sbit-continuity *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes sbcRotate {

  to {
    transform:
      rotate(360deg);
  }

}


/*section 11 ends here*/


/*section 12 start here*/

/* =========================================================
   SINDYBAD — ENTERPRISE IT FINAL CTA
   Scoped / premium / lightweight
========================================================= */

.sbit-cta,
.sbit-cta * {
  box-sizing: border-box;
}


.sbit-cta {
  --scta-bg: #050816;
  --scta-panel: #08111F;

  --scta-text: #F8FBFF;
  --scta-muted: #9FB0C7;

  --scta-line:
    rgba(148,163,184,.15);

  --scta-blue: #2F6BFF;
  --scta-blue-2: #60A5FA;

  --scta-cyan: #22D3EE;
  --scta-green: #22C55E;

  position: relative;
  isolation: isolate;

  width: 100%;

  min-height:
    calc(100svh - 72px);

  overflow: hidden;

  color:
    var(--scta-text);

  background:
    radial-gradient(
      720px 540px
      at 78% 18%,
      rgba(47,107,255,.12),
      transparent 65%
    ),
    radial-gradient(
      620px 480px
      at 16% 84%,
      rgba(34,197,94,.045),
      transparent 68%
    ),
    var(--scta-bg);
}


/* =========================================================
   BACKGROUND
========================================================= */

.sbit-cta::before {
  position: absolute;
  z-index: -1;

  inset: 0;

  content: "";

  opacity: .09;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(96,165,250,.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96,165,250,.05) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;
}


.sbit-cta::after {
  position: absolute;

  top: 0;
  left: 6%;

  width: 120px;
  height: 2px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--scta-blue),
      var(--scta-green)
    );
}


/* =========================================================
   INNER
========================================================= */

.sbit-cta__inner {
  width:
    min(calc(100% - 64px),1680px);

  min-height:
    calc(100svh - 72px);

  margin-inline: auto;

  padding:
    clamp(62px,6vw,90px)
    0
    34px;
}


/* =========================================================
   TOPLINE
========================================================= */

.sbit-cta__topline {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 18px;
}


.sbit-cta__kicker {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: #ADC8FF;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .17em;

  text-transform: uppercase;
}


.sbit-cta__kicker::before {
  width: 38px;
  height: 1px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--scta-blue),
      var(--scta-green)
    );
}


.sbit-cta__index {
  color:
    rgba(159,176,199,.42);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .15em;
}


/* =========================================================
   PANEL
========================================================= */

.sbit-cta__panel {
  position: relative;

  overflow: hidden;

  padding:
    clamp(28px,4vw,58px);

  border:
    1px solid
    rgba(96,165,250,.15);

  border-radius: 28px;

  background:
    radial-gradient(
      560px 420px
      at 50% 40%,
      rgba(47,107,255,.08),
      transparent 70%
    ),
    rgba(255,255,255,.012);

  box-shadow:
    0 32px 90px
    rgba(0,0,0,.20);
}


/* internal grid */

.sbit-cta__gridfx {
  position: absolute;

  inset: 0;

  opacity: .4;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(96,165,250,.04) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96,165,250,.04) 1px,
      transparent 1px
    );

  background-size:
    46px 46px;

  mask-image:
    radial-gradient(
      circle at 50% 48%,
      #000,
      transparent 76%
    );
}


/* =========================================================
   STATUS
========================================================= */

.sbit-cta__status {
  position: relative;
  z-index: 2;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding-bottom: 18px;

  border-bottom:
    1px solid
    rgba(148,163,184,.09);
}


.sbit-cta__status > span {
  display: flex;

  align-items: center;

  gap: 8px;

  color: #D9E6F5;

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .14em;
}


.sbit-cta__status i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--scta-green);

  box-shadow:
    0 0 10px
    rgba(34,197,94,.7);
}


.sbit-cta__status small {
  color:
    rgba(159,176,199,.40);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .13em;
}


/* =========================================================
   STATS
========================================================= */

.sbit-cta__stats {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap: 8px;

  max-width: 1080px;

  margin:
    28px
    auto
    0;
}


.sbit-cta__stats article {
  position: relative;

  min-width: 0;

  padding:
    17px
    18px;

  overflow: hidden;

  border:
    1px solid
    var(--scta-line);

  border-radius: 13px;

  background:
    rgba(255,255,255,.018);

  text-align: left;

  transition:
    transform .18s ease,
    border-color .18s ease;
}


.sbit-cta__stats article::after {
  position: absolute;

  right: -25px;
  bottom: -25px;

  width: 75px;
  height: 75px;

  border:
    1px solid
    rgba(96,165,250,.05);

  border-radius: 50%;

  content: "";
}


.sbit-cta__stats article > span {
  display: block;

  color:
    rgba(96,165,250,.55);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .12em;
}


.sbit-cta__stats strong {
  display: block;

  margin-top: 15px;

  color: #FFFFFF;

  font-size:
    clamp(27px,2.6vw,42px);

  font-weight: 850;

  line-height: 1;

  letter-spacing: -.055em;
}


.sbit-cta__stats p {
  margin:
    7px
    0
    0;

  color:
    rgba(159,176,199,.63);

  font-size: 7px;
  font-weight: 700;

  line-height: 1.4;

  text-transform: uppercase;

  letter-spacing: .06em;
}


@media (hover:hover) {

  .sbit-cta__stats article:hover {
    transform:
      translateY(-3px);

    border-color:
      rgba(96,165,250,.27);
  }

}


/* =========================================================
   CONTENT
========================================================= */

.sbit-cta__content {
  position: relative;
  z-index: 2;

  max-width: 980px;

  margin:
    clamp(42px,5vw,68px)
    auto
    0;

  text-align: center;
}


.sbit-cta__eyebrow {
  display: block;

  color:
    var(--scta-blue-2);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .16em;

  text-transform: uppercase;
}


.sbit-cta__title {
  max-width: 760px;

  margin:
    15px
    auto
    0;

  color:
    var(--scta-text);

  font-size:
    clamp(34px,3vw,39px);

  font-weight: 860;

  line-height: 1.03;

  letter-spacing:
    -.045em;

  text-wrap: balance;
}


.sbit-cta__title span {
  display: block;

  margin-top: 4px;

  color:
    var(--scta-blue-2);
}


.sbit-cta__lead {
  max-width: 900px;

  margin:
    22px
    auto
    0;

  color: #CBD6E5;

  font-size:
    clamp(13px,1vw,15px);

  line-height: 1.74;
}


.sbit-cta__description {
  max-width: 720px;

  margin:
    13px
    auto
    0;

  color:
    var(--scta-muted);

  font-size: 10px;

  line-height: 1.7;
}


/* =========================================================
   ACTIONS
========================================================= */

.sbit-cta__actions {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 9px;

  margin-top: 27px;
}


.sbit-cta__button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 14px;

  min-height: 47px;

  padding:
    0
    18px;

  border:
    1px solid
    var(--scta-line);

  border-radius: 10px;

  color: #FFFFFF;

  text-decoration: none;

  font-size: 9px;
  font-weight: 850;

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}


.sbit-cta__button i {
  font-size: 13px;

  font-style: normal;

  transition:
    transform .18s ease;
}


.sbit-cta__button--primary {
  border-color: transparent;

  background:
    linear-gradient(
      135deg,
      var(--scta-blue),
      #1D4ED8
    );

  box-shadow:
    0 14px 30px
    rgba(47,107,255,.22);
}


.sbit-cta__button--secondary {
  background:
    rgba(255,255,255,.025);
}


@media (hover:hover) {

  .sbit-cta__button:hover {
    transform:
      translateY(-2px);

    border-color:
      rgba(96,165,250,.34);
  }


  .sbit-cta__button:hover i {
    transform:
      translateX(2px);
  }

}


.sbit-cta__button:focus-visible {
  outline:
    2px solid
    var(--scta-blue-2);

  outline-offset: 3px;
}


/* =========================================================
   SERVICES
========================================================= */

.sbit-cta__services {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 7px;

  margin-top: 24px;
}


.sbit-cta__services span {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding:
    7px
    9px;

  border:
    1px solid
    var(--scta-line);

  border-radius: 8px;

  color:
    rgba(183,200,220,.74);

  background:
    rgba(255,255,255,.012);

  font-size: 7px;
}


.sbit-cta__services i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    var(--scta-green);
}


/* =========================================================
   SYSTEM STRIP
========================================================= */

.sbit-cta__system {
  position: relative;
  z-index: 2;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 24px;

  margin-top:
    clamp(38px,5vw,60px);

  padding:
    14px
    16px;

  border:
    1px solid
    rgba(255,255,255,.075);

  border-radius: 12px;

  background:
    rgba(3,7,18,.54);
}


.sbit-cta__system > div:first-child > span {
  display: flex;

  align-items: center;

  gap: 7px;

  color:
    rgba(159,176,199,.49);

  font-size: 5px;
  font-weight: 900;

  letter-spacing: .12em;
}


.sbit-cta__system > div:first-child > span i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--scta-green);
}


.sbit-cta__system > div:first-child > strong {
  display: block;

  margin-top: 4px;

  color: #E8F1FB;

  font-size: 8px;
}


.sbit-cta__system-stack {
  display: flex;

  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 5px;
}


.sbit-cta__system-stack span {
  padding:
    5px
    7px;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius: 6px;

  color:
    #B8C8D9;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  font-size: 6px;
}


/* =========================================================
   FOOTER
========================================================= */

.sbit-cta__footer {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 24px;

  margin-top: 18px;

  color:
    rgba(113,133,159,.75);

  font-size: 6px;
  font-weight: 800;

  letter-spacing: .12em;

  text-transform: uppercase;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1050px) {

  .sbit-cta {
    min-height: auto;
  }


  .sbit-cta__inner {
    width:
      calc(100% - 56px);

    min-height: auto;

    padding:
      70px
      0
      42px;
  }


  .sbit-cta__stats {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:650px) {

  .sbit-cta__inner {
    width:
      calc(100% - 28px);

    padding:
      56px
      0
      32px;
  }


  .sbit-cta__index,
  .sbit-cta__status small {
    display: none;
  }


  .sbit-cta__panel {
    padding:
      20px
      14px;

    border-radius: 20px;
  }


  .sbit-cta__stats {
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap: 6px;
  }


  .sbit-cta__stats article {
    padding: 13px;
  }


  .sbit-cta__title {
    font-size:
      clamp(34px,8.5vw,37px);
  }


  .sbit-cta__actions {
    flex-direction: column;
  }


  .sbit-cta__button {
    width: 100%;
  }


  .sbit-cta__system {
    flex-direction: column;

    align-items: flex-start;
  }


  .sbit-cta__system-stack {
    justify-content: flex-start;
  }


  .sbit-cta__footer {
    flex-direction: column;

    align-items: flex-start;

    gap: 7px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:420px) {

  .sbit-cta__stats {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .sbit-cta *,
  .sbit-cta *::before,
  .sbit-cta *::after {
    transition-duration:
      .01ms !important;
  }

}

/*section 12 ends here*/