/* =========================================================
   SINDYBAD®
   INDUSTRIAL SUPPLY SOLUTIONS
   FULL-SCREEN PREMIUM ALTERNATING LAYOUT

   Prefix: sbis
========================================================= */


.sbis,
.sbis *,
.sbis *::before,
.sbis *::after {
  box-sizing: border-box;
}


/* =========================================================
   ROOT
========================================================= */

.sbis {
  --sbis-bg: #f6f7fc;
  --sbis-white: #ffffff;

  --sbis-navy: #171629;
  --sbis-navy-2: #222c59;

  --sbis-muted: #687087;

  --sbis-purple: #9b4dff;
  --sbis-purple-dark: #7137d6;

  --sbis-orange: #ff7a00;
  --sbis-orange-soft: #f09a2b;

  --sbis-blue: #3978e8;

  --sbis-line:
    rgba(23,22,41,.09);

  position: relative;
  isolation: isolate;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  overflow: clip;

  color:
    var(--sbis-navy);

  background:
    var(--sbis-bg);

  font-family: inherit;
}


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

.sbis__ambient {
  position: absolute;
  z-index: 0;

  inset: 0;

  overflow: hidden;

  pointer-events: none;
}


.sbis__ambient-grid {
  position: absolute;

  inset: 0;

  opacity: .22;

  background:
    linear-gradient(
      rgba(23,22,41,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(23,22,41,.025) 1px,
      transparent 1px
    );

  background-size:
    80px 80px;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent,
      #000 7%,
      #000 93%,
      transparent
    );

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      #000 7%,
      #000 93%,
      transparent
    );
}


.sbis__ambient-orb {
  position: absolute;

  width: 520px;
  height: 520px;

  border-radius: 50%;

  filter:
    blur(10px);
}


.sbis__ambient-orb--one {
  top: -200px;
  left: -190px;

  background:
    radial-gradient(
      circle,
      rgba(155,77,255,.075),
      transparent 70%
    );
}


.sbis__ambient-orb--two {
  right: -210px;
  bottom: -200px;

  background:
    radial-gradient(
      circle,
      rgba(255,122,0,.065),
      transparent 70%
    );
}


/* =========================================================
   ROWS
========================================================= */

.sbis__row {
  position: relative;
  z-index: 2;

  display: grid;

  width: 100%;
  max-width: none;

  min-height:
    clamp(
      690px,
      86svh,
      930px
    );

  margin: 0;

  overflow: hidden;

  border-bottom:
    1px solid
    var(--sbis-line);

  background:
    var(--sbis-white);
}


/* IMAGE LEFT */

.sbis__row--image-left {
  grid-template-columns:
    minmax(0,54%)
    minmax(0,46%);
}


/* IMAGE RIGHT */

.sbis__row--image-right {
  grid-template-columns:
    minmax(0,46%)
    minmax(0,54%);
}


/* HERO */

.sbis__row--hero {
  min-height:
    calc(100svh - 72px);
}


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

.sbis__content {
  position: relative;

  display: flex;

  min-width: 0;

  align-items: center;

  padding:
    clamp(76px,8vw,126px)
    clamp(46px,6.8vw,126px);

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(57,120,232,.052),
      transparent 26rem
    ),
    radial-gradient(
      circle at 92% 91%,
      rgba(155,77,255,.04),
      transparent 25rem
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #f8f9fc
    );
}


/* separation line */

.sbis__row--image-left
.sbis__content::before {
  position: absolute;

  top: 9%;
  bottom: 9%;
  left: 0;

  width: 1px;

  content: "";

  background:
    linear-gradient(
      transparent,
      rgba(57,120,232,.16),
      rgba(155,77,255,.13),
      rgba(255,122,0,.11),
      transparent
    );
}


.sbis__row--image-right
.sbis__content::after {
  position: absolute;

  top: 9%;
  right: 0;
  bottom: 9%;

  width: 1px;

  content: "";

  background:
    linear-gradient(
      transparent,
      rgba(57,120,232,.16),
      rgba(155,77,255,.13),
      rgba(255,122,0,.11),
      transparent
    );
}


.sbis__content-inner {
  width: 100%;

  max-width: 700px;
}


/* =========================================================
   KICKER
========================================================= */

.sbis__kicker {
  margin:
    0
    0
    14px;

  color:
    var(--sbis-purple-dark);

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

  letter-spacing: .17em;

  text-transform: uppercase;
}


/* =========================================================
   CLASSIFICATION
========================================================= */

.sbis__classification {
  display: flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 19px;
}


.sbis__classification > span {
  color:
    var(--sbis-orange);

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


.sbis__classification > i {
  width: 36px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--sbis-orange),
      var(--sbis-purple),
      var(--sbis-blue)
    );
}


.sbis__classification > strong {
  color:
    rgba(23,22,41,.43);

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

  letter-spacing: .12em;

  line-height: 1.45;

  text-transform: uppercase;
}


/* =========================================================
   HEADINGS
========================================================= */

.sbis h1,
.sbis h2 {
  max-width: 710px;

  margin: 0;

  color:
    var(--sbis-navy-2);

  font-weight: 800;

  line-height: 1.01;

  letter-spacing:
    -.048em;

  text-wrap: balance;
}


.sbis h1 {
  font-size:
    clamp(39px,4.25vw,69px);
}


.sbis h2 {
  font-size:
    clamp(34px,3.5vw,55px);
}


.sbis h1 span,
.sbis h2 span {
  display: block;

  margin-top: 5px;

  color:
    var(--sbis-purple-dark);
}


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

.sbis__lead {
  max-width: 650px;

  margin:
    23px
    0
    0;

  color:
    var(--sbis-navy-2);

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

  font-weight: 500;

  line-height: 1.68;
}


.sbis__description {
  max-width: 630px;

  margin:
    11px
    0
    0;

  color:
    var(--sbis-muted);

  font-size:
    clamp(12px,.9vw,14px);

  line-height: 1.72;
}


/* =========================================================
   TAGS
========================================================= */

.sbis__tags {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 22px;
}


.sbis__tags span {
  padding:
    7px
    10px;

  border:
    1px solid
    rgba(113,55,214,.10);

  border-radius: 5px;

  color:
    rgba(23,22,41,.61);

  background:
    rgba(155,77,255,.026);

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


/* =========================================================
   FEATURE LIST
========================================================= */

.sbis__feature-list {
  display: grid;

  max-width: 640px;

  gap: 8px;

  margin-top: 23px;
}


.sbis__feature-list > span {
  position: relative;

  display: grid;

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

  align-items: center;

  gap: 10px;

  min-height: 42px;

  padding:
    7px
    12px;

  overflow: hidden;

  border:
    1px solid
    rgba(23,22,41,.07);

  border-radius: 8px;

  color:
    rgba(34,44,89,.69);

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

  font-size: 10px;

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


.sbis__feature-list i {
  display: grid;

  width: 27px;
  height: 27px;

  place-items: center;

  border-radius: 50%;

  color:
    var(--sbis-purple-dark);

  background:
    linear-gradient(
      135deg,
      rgba(155,77,255,.10),
      rgba(255,122,0,.08)
    );

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


@media (hover:hover) {

  .sbis__feature-list > span:hover {
    color:
      var(--sbis-navy-2);

    border-color:
      rgba(155,77,255,.17);

    box-shadow:
      0 10px 28px
      rgba(23,22,41,.05);

    transform:
      translateX(4px);
  }

}


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

.sbis__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 29px;
}


.sbis-btn {
  display: inline-flex;

  min-width: 200px;
  min-height: 50px;

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

  gap: 14px;

  padding:
    0
    21px;

  border-radius: 999px;

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

  text-decoration: none;

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


.sbis-btn--primary {
  color:
    var(--sbis-blue);

  border:
    1px solid
    var(--sbis-orange);

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


.sbis-btn--secondary {
  color:
    #ffffff;

  border:
    1px solid
    var(--sbis-orange);

  background:
    linear-gradient(
      135deg,
      #b52ce9,
      #8035e8
    );

  box-shadow:
    0 14px 35px
    rgba(155,77,255,.18);
}


@media (hover:hover) {

  .sbis-btn:hover {
    transform:
      translateY(-2px);
  }

}


/* =========================================================
   VALUE STRIP
========================================================= */

.sbis__values {
  display: grid;

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

  margin-top: 34px;

  border-top:
    1px solid
    var(--sbis-line);

  border-bottom:
    1px solid
    var(--sbis-line);
}


.sbis__values > div {
  padding:
    14px
    12px;
}


.sbis__values > div:first-child {
  padding-left: 0;
}


.sbis__values > div + div {
  border-left:
    1px solid
    var(--sbis-line);
}


.sbis__values span {
  display: block;

  color:
    var(--sbis-orange);

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


.sbis__values strong {
  display: block;

  margin-top: 5px;

  color:
    rgba(34,44,89,.68);

  font-size: 8px;
}


/* =========================================================
   MEDIA WRAPPER
========================================================= */

.sbis__media {
  --mx: 50%;
  --my: 50%;

  position: relative;

  min-width: 0;
  min-height: 100%;
}


/* LEFT IMAGE */

.sbis__row--image-left
.sbis__media {
  padding:
    16px
    0
    16px
    16px;
}


/* RIGHT IMAGE */

.sbis__row--image-right
.sbis__media {
  padding:
    16px
    16px
    16px
    0;
}


/* =========================================================
   FIGURE
========================================================= */

.sbis__figure {
  position: relative;

  width: 100%;
  height: 100%;

  min-height:
    calc(100% - 0px);

  margin: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(113,55,214,.11);

  background:
    #0d1122;

  box-shadow:
    0 30px 80px
    rgba(20,25,55,.18);
}


/* LEFT IMAGE SHAPE */

.sbis__row--image-left
.sbis__figure {
  border-radius:
    28px
    28px
    80px
    28px;
}


/* RIGHT IMAGE SHAPE */

.sbis__row--image-right
.sbis__figure {
  border-radius:
    28px
    28px
    28px
    80px;
}


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

.sbis__figure > img {
  position: absolute;

  inset: -2%;

  display: block;

  width: 104%;
  height: 104%;

  max-width: none;

  object-fit: cover;

  filter:
    saturate(.91)
    contrast(1.06)
    brightness(.82);

  transform:
    translate3d(
      var(--sbis-x,0px),
      var(--sbis-y,0px),
      0
    )
    scale(1.025);

  transition:
    transform .42s ease-out,
    filter .35s ease;
}


@media (hover:hover) and (pointer:fine) {

  .sbis__figure:hover > img {
    filter:
      saturate(1)
      contrast(1.07)
      brightness(.87);

    transform:
      translate3d(
        var(--sbis-x,0px),
        var(--sbis-y,0px),
        0
      )
      scale(1.055);
  }

}


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

.sbis__shade {
  position: absolute;
  z-index: 2;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(9,15,34,.04),
      transparent 34%,
      rgba(9,15,34,.16) 62%,
      rgba(9,15,34,.91)
    ),
    radial-gradient(
      circle at 72% 34%,
      rgba(155,77,255,.14),
      transparent 28%
    ),
    radial-gradient(
      circle at 35% 60%,
      rgba(255,122,0,.09),
      transparent 25%
    );
}


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

.sbis__tech-grid {
  position: absolute;
  z-index: 3;

  inset: 0;

  opacity: .16;

  background:
    linear-gradient(
      rgba(255,255,255,.09) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.09) 1px,
      transparent 1px
    );

  background-size:
    68px 68px;

  -webkit-mask-image:
    radial-gradient(
      circle at 70% 40%,
      #000,
      transparent 75%
    );

  mask-image:
    radial-gradient(
      circle at 70% 40%,
      #000,
      transparent 75%
    );
}


/* =========================================================
   CURSOR LIGHT
========================================================= */

.sbis__cursor-light {
  position: absolute;
  z-index: 4;

  inset: 0;

  opacity: 0;

  pointer-events: none;

  background:
    radial-gradient(
      340px circle
      at var(--mx) var(--my),
      rgba(255,255,255,.20),
      rgba(155,77,255,.055) 30%,
      transparent 68%
    );

  transition:
    opacity .22s ease;
}


@media (hover:hover) and (pointer:fine) {

  .sbis__figure:hover
  .sbis__cursor-light {
    opacity: 1;
  }

}


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

.sbis__visual-top {
  position: absolute;
  z-index: 9;

  top: 28px;
  right: 30px;
  left: 30px;

  display: flex;

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

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

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

  letter-spacing: .13em;

  text-transform: uppercase;
}


.sbis__visual-top > span:first-child {
  display: flex;

  align-items: center;

  gap: 8px;
}


.sbis__visual-top i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--sbis-orange);

  box-shadow:
    0 0 14px
    rgba(255,122,0,.72);
}


/* =========================================================
   TECH TARGET
========================================================= */

.sbis__target {
  position: absolute;
  z-index: 5;

  top: 42%;
  right: 6%;

  width:
    min(40%,340px);

  aspect-ratio: 1;

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

  border-radius: 50%;

  transform:
    translateY(-50%);

  pointer-events: none;
}


.sbis__target span {
  position: absolute;

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

  border-radius: 50%;
}


.sbis__target span:nth-child(1) {
  inset: 18%;
}


.sbis__target span:nth-child(2) {
  inset: 35%;

  border-style: dashed;

  border-color:
    rgba(155,77,255,.35);
}


.sbis__target span:nth-child(3) {
  inset: 47%;
}


.sbis__target i {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background:
    var(--sbis-orange);

  box-shadow:
    0 0 0 6px
    rgba(255,122,0,.11),
    0 0 18px
    rgba(255,122,0,.44);

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


/* =========================================================
   GHOST NUMBER
========================================================= */

.sbis__ghost {
  position: absolute;
  z-index: 3;

  top: 44%;
  right: 7%;

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

  font-size:
    clamp(125px,11vw,215px);

  font-weight: 900;

  line-height: 1;

  letter-spacing:
    -.08em;

  transform:
    translateY(-50%);
}


/* =========================================================
   BRAND DISC
========================================================= */

.sbis__brand {
  position: absolute;
  z-index: 8;

  top: 74px;
  left: 30px;

  display: grid;

  width: 72px;
  height: 72px;

  place-items: center;

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

  border-radius: 50%;

  background:
    rgba(10,15,33,.38);
}


.sbis__brand strong {
  color:
    #fff;

  font-size: 17px;
}


.sbis__brand small {
  position: absolute;

  bottom: 12px;

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

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

  letter-spacing: .12em;
}


/* =========================================================
   VERTICAL LABEL
========================================================= */

.sbis__vertical {
  position: absolute;
  z-index: 8;

  top: 50%;
  right: 19px;

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

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

  letter-spacing: .17em;

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


/* =========================================================
   GLASS PANEL
========================================================= */

.sbis__panel {
  position: absolute;
  z-index: 10;

  right:
    clamp(24px,3vw,47px);

  bottom:
    clamp(76px,7vw,105px);

  left:
    clamp(24px,3vw,47px);

  max-width: 690px;

  padding:
    20px
    22px;

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

  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      rgba(12,17,38,.91),
      rgba(34,24,65,.77)
    );

  box-shadow:
    0 24px 62px
    rgba(0,0,0,.26);
}


.sbis__panel-head {
  display: flex;

  align-items: center;

  gap: 9px;
}


.sbis__panel-head span {
  color:
    #c99cff;

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

  letter-spacing: .12em;
}


.sbis__panel-head i {
  width: 36px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--sbis-orange),
      var(--sbis-purple),
      var(--sbis-blue)
    );
}


.sbis__panel-head small {
  color:
    rgba(255,255,255,.40);

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


.sbis__panel > strong {
  display: block;

  max-width: 580px;

  margin-top: 9px;

  color:
    #ffffff;

  font-size:
    clamp(20px,1.7vw,28px);

  font-weight: 800;

  line-height: 1.06;

  letter-spacing:
    -.035em;
}


.sbis__panel p {
  max-width: 560px;

  margin:
    8px
    0
    0;

  color:
    rgba(236,231,248,.64);

  font-size: 9px;

  line-height: 1.6;
}


.sbis__panel-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 12px;
}


.sbis__panel-tags span {
  padding:
    5px
    7px;

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

  border-radius: 4px;

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

  font-size: 6px;
}


/* =========================================================
   PROCESS STRIP
========================================================= */

.sbis__visual-process {
  position: absolute;
  z-index: 10;

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

  display: grid;

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

  overflow: hidden;

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

  border-radius: 9px;

  background:
    rgba(8,12,27,.59);
}


.sbis__visual-process div {
  padding:
    9px
    12px;
}


.sbis__visual-process div + div {
  border-left:
    1px solid
    rgba(255,255,255,.075);
}


.sbis__visual-process span {
  color:
    var(--sbis-orange);

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


.sbis__visual-process strong {
  display: block;

  margin-top: 3px;

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

  font-size: 7px;
}


/* =========================================================
   SAFE REVEAL
   REMAINS VISIBLE IF JS FAILS
========================================================= */

.sbis.is-enhanced
[data-reveal] {
  opacity: 0;

  transform:
    translateY(20px);

  transition:
    opacity .6s ease,
    transform .6s ease;
}


.sbis.is-enhanced
[data-reveal].is-visible {
  opacity: 1;

  transform: none;
}


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

@media (max-width:1050px) {

  .sbis__row,
  .sbis__row--image-left,
  .sbis__row--image-right {
    grid-template-columns: 1fr;

    min-height: auto;
  }


  /*
    CONTENT FIRST ON TABLET / MOBILE
  */

  .sbis__row
  .sbis__content {
    order: 1;
  }


  .sbis__row
  .sbis__media {
    order: 2;
  }


  .sbis__content {
    min-height: 600px;

    padding:
      84px
      30px
      52px;
  }


  .sbis__row--image-left
  .sbis__content::before,
  .sbis__row--image-right
  .sbis__content::after {
    display: none;
  }


  .sbis__row--image-left
  .sbis__media,
  .sbis__row--image-right
  .sbis__media {
    padding:
      0
      28px
      28px;
  }


  .sbis__row
  .sbis__figure {
    height: 670px;

    min-height: 670px;

    border-radius:
      24px
      24px
      24px
      68px;
  }

}


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

@media (max-width:650px) {

  .sbis__content {
    min-height: auto;

    padding:
      64px
      17px
      40px;
  }


  .sbis h1 {
    font-size:
      clamp(35px,10.3vw,46px);
  }


  .sbis h2 {
    font-size:
      clamp(33px,9.4vw,42px);
  }


  .sbis__classification {
    align-items: flex-start;
  }


  .sbis__lead {
    font-size: 13px;
  }


  .sbis__description {
    font-size: 12px;
  }


  .sbis__actions {
    flex-direction: column;
  }


  .sbis-btn {
    width: 100%;

    min-width: 0;
  }


  .sbis__values {
    grid-template-columns: 1fr;
  }


  .sbis__values > div {
    padding:
      11px
      0;
  }


  .sbis__values > div + div {
    border-top:
      1px solid
      var(--sbis-line);

    border-left: 0;
  }


  .sbis__row--image-left
  .sbis__media,
  .sbis__row--image-right
  .sbis__media {
    padding:
      0
      14px
      14px;
  }


  .sbis__row
  .sbis__figure {
    height: 550px;

    min-height: 550px;

    border-radius:
      20px
      20px
      20px
      48px;
  }


  .sbis__brand {
    top: 60px;
    left: 18px;

    width: 58px;
    height: 58px;
  }


  .sbis__target {
    right: -55px;

    width: 225px;
  }


  .sbis__vertical {
    display: none;
  }


  .sbis__panel {
    right: 14px;
    bottom: 105px;
    left: 14px;

    padding: 15px;
  }


  .sbis__panel > strong {
    font-size: 19px;
  }


  .sbis__visual-process {
    right: 14px;
    bottom: 14px;
    left: 14px;

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


  .sbis__visual-process div:nth-child(3),
  .sbis__visual-process div:nth-child(4) {
    border-top:
      1px solid
      rgba(255,255,255,.07);
  }

}


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

@media (max-width:430px) {

  .sbis__content {
    padding:
      56px
      15px
      35px;
  }


  .sbis__row
  .sbis__figure {
    height: 505px;

    min-height: 505px;
  }


  .sbis__panel {
    bottom: 101px;
  }


  .sbis__panel p {
    font-size: 8px;
  }


  .sbis__panel-tags span:nth-child(n+4) {
    display: none;
  }

}


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

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

  .sbis *,
  .sbis *::before,
  .sbis *::after {
    animation:
      none !important;

    transition-duration:
      .01ms !important;
  }


  .sbis.is-enhanced
  [data-reveal] {
    opacity: 1;

    transform: none;
  }

}