/* Korloy: add this page's custom section styles here. Shared catalogue styles load first. */


/*korloy hero start here*/

/* ==========================================================
   SINDYBAD® / KORLOY OMAN
   PREMIUM DARK 46 / 54 LAYOUT

   Prefix: sbk2
========================================================== */


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


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

.sbk2 {
  --sbk2-bg: #080511;
  --sbk2-bg2: #11081e;

  --sbk2-text: #f7f5ff;
  --sbk2-muted: #a49eaf;

  --sbk2-purple: #9b4dff;
  --sbk2-purple2: #7137d6;

  --sbk2-orange: #f09a2b;

  --sbk2-line:
    rgba(255,255,255,.075);

  position: relative;
  isolation: isolate;

  width: 100%;
  max-width: none;

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

  margin: 0;
  padding: 0;

  overflow: clip;

  color:
    var(--sbk2-text);

  background:
    linear-gradient(
      135deg,
      #07040e,
      #0a0511 48%,
      #100719
    );

  font-family: inherit;
}


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

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

  inset: 0;

  overflow: hidden;

  pointer-events: none;
}


.sbk2__aurora {
  position: absolute;

  border-radius: 50%;

  filter:
    blur(90px);
}


.sbk2__aurora--purple {
  top: -17vw;
  left: -14vw;

  width: 42vw;
  height: 42vw;

  background:
    rgba(155,77,255,.16);
}


.sbk2__aurora--orange {
  right: -14vw;
  bottom: -17vw;

  width: 34vw;
  height: 34vw;

  background:
    rgba(240,154,43,.09);
}


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

.sbk2__grid {
  position: absolute;

  inset: -8%;

  opacity: .10;

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

  background-size:
    84px
    84px;

  transform:
    rotate(-3deg)
    scale(1.05);

  -webkit-mask-image:
    radial-gradient(
      circle at 55% 46%,
      #000,
      transparent 74%
    );

  mask-image:
    radial-gradient(
      circle at 55% 46%,
      #000,
      transparent 74%
    );
}


/* ==========================================================
   BEAMS
========================================================== */

.sbk2__beam {
  position: absolute;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(155,77,255,.31),
      rgba(240,154,43,.22),
      transparent
    );
}


.sbk2__beam--one {
  top: 61%;
  left: 1%;

  width: 71vw;

  transform:
    rotate(-4deg);
}


.sbk2__beam--two {
  top: 29%;
  right: -4%;

  width: 48vw;

  opacity: .42;

  transform:
    rotate(17deg);
}


/* ==========================================================
   ARCS
========================================================== */

.sbk2__arc {
  position: absolute;

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

  border-radius: 50%;
}


.sbk2__arc--one {
  top: 3%;
  right: -19vw;

  width: 69vw;
  height: 24vw;

  transform:
    rotate(-18deg);
}


.sbk2__arc--two {
  bottom: 4%;
  left: -18vw;

  width: 61vw;
  height: 20vw;

  opacity: .54;

  transform:
    rotate(16deg);
}


/* ==========================================================
   MAIN LAYOUT
========================================================== */

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

  display: grid;

  grid-template-columns:
    minmax(0,46%)
    minmax(0,54%);

  width: 100%;

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


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

.sbk2__content {
  position: relative;

  display: flex;

  min-width: 0;

  align-items: center;

  padding:
    clamp(82px,9vh,120px)
    clamp(42px,6vw,110px)
    clamp(54px,7vh,82px);
}


.sbk2__content::after {
  position: absolute;

  top: 8%;
  right: 0;
  bottom: 8%;

  width: 1px;

  content: "";

  background:
    linear-gradient(
      transparent,
      rgba(155,77,255,.25),
      rgba(240,154,43,.17),
      transparent
    );
}


.sbk2__content-inner {
  width: 100%;

  max-width: 700px;
}


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

.sbk2__kicker {
  margin:
    0
    0
    14px;

  color:
    #c98cff;

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

  letter-spacing: .17em;

  text-transform: uppercase;
}


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

.sbk2__classification {
  display: flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 20px;
}


.sbk2__classification > span {
  display: grid;

  width: 29px;
  height: 29px;

  place-items: center;

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

  border-radius: 8px;

  color:
    #c78bff;

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

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


.sbk2__classification > i {
  width: 35px;
  height: 1px;

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


.sbk2__classification > strong {
  color:
    rgba(247,245,255,.39);

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

  line-height: 1.45;

  letter-spacing: .12em;
}


/* ==========================================================
   HEADING
========================================================== */

.sbk2 h1 {
  max-width: 720px;

  margin: 0;

  color:
    var(--sbk2-text);

  font-size:
    clamp(38px,4.15vw,66px);

  font-weight: 800;

  line-height: .96;

  letter-spacing:
    -.055em;

  text-wrap: balance;

  text-shadow:
    0 12px 36px
    rgba(0,0,0,.28);
}


.sbk2 h1 span {
  display: block;

  margin-top: 7px;

  color: transparent;

  background:
    linear-gradient(
      90deg,
      #a758ff,
      #d351c4 57%,
      var(--sbk2-orange)
    );

  -webkit-background-clip: text;
  background-clip: text;

  filter:
    drop-shadow(
      0 0 15px
      rgba(155,77,255,.13)
    );
}


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

.sbk2__lead {
  position: relative;

  max-width: 650px;

  margin:
    26px
    0
    0;

  color:
    rgba(247,245,255,.86);

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

  line-height: 1.72;
}


.sbk2__lead::before {
  position: absolute;

  top: -13px;
  left: 0;

  width: 88px;
  height: 1px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--sbk2-purple),
      var(--sbk2-orange),
      transparent
    );
}


.sbk2__description {
  max-width: 630px;

  margin:
    11px
    0
    0;

  color:
    var(--sbk2-muted);

  font-size:
    clamp(11px,.88vw,13px);

  line-height: 1.72;
}


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

.sbk2__tags {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 22px;
}


.sbk2__tags span {
  padding:
    6px
    9px;

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

  border-radius: 5px;

  color:
    rgba(247,245,255,.63);

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

  font-size: 7px;
}


/* ==========================================================
   BUTTONS
========================================================== */

.sbk2__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 28px;
}


.sbk2-btn {
  display: inline-flex;

  min-width: 195px;
  min-height: 49px;

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

  gap: 14px;

  padding:
    0
    20px;

  border-radius: 999px;

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

  text-decoration: none;

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


.sbk2-btn--primary {
  color:
    #ffffff;

  border:
    1px solid
    rgba(240,154,43,.76);

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


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

  border:
    1px solid
    rgba(240,154,43,.65);

  background:
    linear-gradient(
      135deg,
      var(--sbk2-purple),
      var(--sbk2-purple2)
    );

  box-shadow:
    0 14px 34px
    rgba(113,55,214,.22);
}


@media (hover:hover) {

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

}


/* ==========================================================
   METRICS
========================================================== */

.sbk2__metrics {
  display: grid;

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

  margin-top: 32px;

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

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


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


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


.sbk2__metrics > div + div {
  border-left:
    1px solid
    rgba(255,255,255,.07);
}


.sbk2__metrics span {
  display: block;

  color:
    rgba(247,245,255,.39);

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

  letter-spacing: .12em;
}


.sbk2__metrics strong {
  display: block;

  margin-top: 5px;

  color:
    rgba(247,245,255,.89);

  font-size: 9px;
}


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

.sbk2__visual-wrap {
  min-width: 0;

  padding:
    16px
    16px
    16px
    0;
}


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

.sbk2__visual {
  --sbk2-mx: 50%;
  --sbk2-my: 50%;

  position: relative;

  width: 100%;
  height: 100%;

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

  overflow: hidden;

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

  border-radius:
    28px
    28px
    28px
    80px;

  background:
    radial-gradient(
      circle at 54% 46%,
      rgba(155,77,255,.115),
      transparent 30%
    ),
    radial-gradient(
      circle at 73% 70%,
      rgba(240,154,43,.07),
      transparent 26%
    ),
    linear-gradient(
      145deg,
      #0b0613,
      #12091f
    );

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


/* premium inset grid */

.sbk2__visual::before {
  position: absolute;
  z-index: 1;

  inset: 0;

  content: "";

  opacity: .15;

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

  background-size:
    68px 68px;

  -webkit-mask-image:
    radial-gradient(
      circle at 55% 48%,
      #000,
      transparent 73%
    );

  mask-image:
    radial-gradient(
      circle at 55% 48%,
      #000,
      transparent 73%
    );
}


/* ==========================================================
   POINTER LIGHT
========================================================== */

.sbk2__cursor-light {
  position: absolute;
  z-index: 3;

  inset: 0;

  opacity: 0;

  pointer-events: none;

  background:
    radial-gradient(
      340px circle
      at var(--sbk2-mx) var(--sbk2-my),
      rgba(208,158,255,.15),
      rgba(155,77,255,.06) 34%,
      rgba(240,154,43,.025) 50%,
      transparent 69%
    );

  transition:
    opacity .2s ease;
}


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

  .sbk2__visual:hover
  .sbk2__cursor-light {
    opacity: 1;
  }

}


/* ==========================================================
   TOP INFO
========================================================== */

.sbk2__visual-top {
  position: absolute;
  z-index: 10;

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

  display: flex;

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

  color:
    rgba(247,245,255,.52);

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

  letter-spacing: .13em;
}


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

  align-items: center;

  gap: 8px;
}


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

  border-radius: 50%;

  background:
    var(--sbk2-orange);

  box-shadow:
    0 0 0 5px
    rgba(240,154,43,.08),
    0 0 15px
    rgba(240,154,43,.36);
}


/* ==========================================================
   ORBIT
========================================================== */

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

  top: 50%;
  left: 50%;

  width:
    min(80%,700px);

  aspect-ratio: 1;

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

  border-radius: 50%;

  box-shadow:
    0 0 0 58px
    rgba(155,77,255,.012),
    0 0 0 116px
    rgba(240,154,43,.006),
    0 0 70px
    rgba(155,77,255,.035);

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

  pointer-events: none;
}


.sbk2__orbit::before,
.sbk2__orbit::after {
  position: absolute;

  border-radius: 50%;

  content: "";
}


.sbk2__orbit::before {
  inset: 18%;

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


.sbk2__orbit::after {
  inset: 34%;

  border:
    1px dashed
    rgba(240,154,43,.14);
}


.sbk2__orbit > span,
.sbk2__node {
  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    #b65bff;

  box-shadow:
    0 0 0 5px
    rgba(155,77,255,.10),
    0 0 18px
    rgba(155,77,255,.38);
}


.sbk2__orbit > span:nth-child(1) {
  top: 45%;
  left: 9%;
}


.sbk2__orbit > span:nth-child(2) {
  top: 18%;
  right: 12%;

  background:
    var(--sbk2-orange);

  box-shadow:
    0 0 0 5px
    rgba(240,154,43,.10),
    0 0 18px
    rgba(240,154,43,.34);
}


.sbk2__orbit > span:nth-child(3) {
  right: 4%;
  bottom: 24%;
}


.sbk2__node--a {
  top: -4px;
  left: 49%;
}


.sbk2__node--b {
  top: 51%;
  right: -4px;

  background:
    var(--sbk2-orange);
}


.sbk2__node--c {
  bottom: 16%;
  left: 8%;

  width: 6px;
  height: 6px;
}


/* ==========================================================
   INNER TARGET
========================================================== */

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

  top: 50%;
  left: 50%;

  width:
    min(49%,400px);

  aspect-ratio: 1;

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

  border-radius: 50%;

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

  pointer-events: none;
}


.sbk2__target span {
  position: absolute;

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

  border-radius: 50%;
}


.sbk2__target span:nth-child(1) {
  inset: 17%;
}


.sbk2__target span:nth-child(2) {
  inset: 34%;

  border-style: dashed;

  border-color:
    rgba(240,154,43,.14);
}


.sbk2__target span:nth-child(3) {
  inset: 46%;
}


.sbk2__target i {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--sbk2-orange);

  box-shadow:
    0 0 0 6px
    rgba(240,154,43,.08),
    0 0 20px
    rgba(240,154,43,.34);

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


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

.sbk2__ghost {
  position: absolute;
  z-index: 1;

  top: 46%;
  right: 8%;

  color:
    rgba(247,245,255,.025);

  font-size:
    clamp(145px,14vw,260px);

  font-weight: 900;

  line-height: 1;

  transform:
    translateY(-50%);
}


/* ==========================================================
   LOGO STAGE
========================================================== */

.sbk2__logo-stage {
  position: absolute;
  z-index: 6;

  top: 50%;
  left: 50%;

  display: grid;

  width:
    min(78%,760px);

  min-height: 360px;

  place-items: center;

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


.sbk2__logo-glow {
  position: absolute;
  z-index: 1;

  width: 78%;

  aspect-ratio: 1;

  border-radius: 50%;

  opacity: .74;

  background:
    radial-gradient(
      circle,
      rgba(155,77,255,.17),
      rgba(155,77,255,.07) 35%,
      rgba(240,154,43,.035) 50%,
      transparent 72%
    );

  filter:
    blur(22px);
}


.sbk2__logo-ring {
  position: absolute;
  z-index: 2;

  aspect-ratio: 1;

  border-radius: 50%;

  pointer-events: none;
}


.sbk2__logo-ring--one {
  width: 82%;

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

  box-shadow:
    0 0 0 50px
    rgba(155,77,255,.011),
    0 0 55px
    rgba(155,77,255,.03);
}


.sbk2__logo-ring--one::before {
  position: absolute;

  inset: 16%;

  border:
    1px dashed
    rgba(240,154,43,.12);

  border-radius: 50%;

  content: "";
}


.sbk2__logo-ring--two {
  width: 61%;

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


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

.sbk2__logo-core {
  position: relative;
  z-index: 7;

  display: grid;

  width: 92%;
  min-height: 250px;

  place-items: center;

  transform:
    translate3d(
      var(--sbk2-logo-x,0px),
      var(--sbk2-logo-y,0px),
      0
    );

  transition:
    transform .34s ease-out;
}


.sbk2__logo {
  display: block;

  width:
    min(84%,650px);

  max-width: none;
  max-height: 245px;

  height: auto;

  object-fit: contain;

  filter:
    drop-shadow(
      0 28px 55px
      rgba(0,0,0,.35)
    )
    drop-shadow(
      0 0 24px
      rgba(155,77,255,.15)
    );
}


/* ==========================================================
   FALLBACK
========================================================== */

.sbk2__logo-fallback {
  text-align: center;
}


.sbk2__logo-fallback strong {
  display: block;

  color: transparent;

  background:
    linear-gradient(
      90deg,
      #fff,
      #d9c8ff 55%,
      #fff
    );

  -webkit-background-clip: text;
  background-clip: text;

  font-size:
    clamp(64px,6vw,112px);

  font-weight: 900;

  letter-spacing:
    -.05em;
}


.sbk2__logo-fallback small {
  display: block;

  margin-top: 8px;

  color:
    rgba(247,245,255,.40);

  font-size: 7px;

  letter-spacing: .14em;
}


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

.sbk2__vertical {
  position: absolute;
  z-index: 9;

  top: 50%;
  right: 19px;

  color:
    rgba(247,245,255,.22);

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

  letter-spacing: .18em;

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


/* ==========================================================
   INFO PANEL
========================================================== */

.sbk2__panel {
  position: absolute;
  z-index: 11;

  right:
    clamp(23px,3vw,46px);

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

  left:
    clamp(23px,3vw,46px);

  max-width: 650px;

  padding:
    18px
    21px;

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

  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      rgba(10,6,18,.93),
      rgba(25,12,39,.82)
    );

  box-shadow:
    0 24px 64px
    rgba(0,0,0,.28);
}


.sbk2__panel-head {
  display: flex;

  align-items: center;

  gap: 9px;
}


.sbk2__panel-head span {
  color:
    #bd7dff;

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

  letter-spacing: .12em;
}


.sbk2__panel-head i {
  width: 35px;
  height: 1px;

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


.sbk2__panel-head small {
  color:
    rgba(247,245,255,.37);

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


.sbk2__panel > strong {
  display: block;

  margin-top: 9px;

  color:
    var(--sbk2-text);

  font-size:
    clamp(19px,1.5vw,25px);

  font-weight: 800;

  line-height: 1.06;
}


.sbk2__panel p {
  margin:
    8px
    0
    0;

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

  font-size: 9px;

  line-height: 1.6;
}


.sbk2__panel-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 11px;
}


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

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

  border-radius: 4px;

  color:
    rgba(247,245,255,.50);

  font-size: 6px;
}


/* ==========================================================
   TECHNICAL STRIP
========================================================== */

.sbk2__technical {
  position: absolute;
  z-index: 11;

  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,.075);

  border-radius: 9px;

  background:
    rgba(8,5,17,.66);
}


.sbk2__technical div {
  padding:
    9px
    12px;
}


.sbk2__technical div + div {
  border-left:
    1px solid
    rgba(255,255,255,.06);
}


.sbk2__technical span {
  color:
    var(--sbk2-orange);

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


.sbk2__technical strong {
  display: block;

  margin-top: 3px;

  color:
    rgba(247,245,255,.69);

  font-size: 7px;
}


/* ==========================================================
   BOTTOM RAIL
========================================================== */

.sbk2__rail {
  position: relative;
  z-index: 3;

  display: grid;

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

  min-height: 92px;

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

  background:
    #080511;
}


.sbk2__rail a {
  display: grid;

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

  align-items: center;

  gap: 9px;

  padding:
    0
    clamp(20px,3vw,44px);

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

  color: inherit;

  text-decoration: none;

  transition:
    background .2s ease;
}


.sbk2__rail a:last-child {
  border-right: 0;
}


.sbk2__rail > a > span {
  color:
    var(--sbk2-orange);

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


.sbk2__rail small {
  display: block;

  color:
    rgba(247,245,255,.32);

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

  letter-spacing: .10em;
}


.sbk2__rail strong {
  display: block;

  margin-top: 4px;

  color:
    rgba(247,245,255,.73);

  font-size: 8px;
}


.sbk2__rail i {
  color:
    #bd7dff;

  font-size: 10px;

  font-style: normal;
}


@media (hover:hover) {

  .sbk2__rail a:hover {
    background:
      rgba(155,77,255,.035);
  }

}


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

@media (max-width:1050px) {

  .sbk2__main {
    grid-template-columns: 1fr;

    min-height: auto;
  }


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

    padding:
      92px
      30px
      54px;
  }


  .sbk2__content::after {
    display: none;
  }


  .sbk2__visual-wrap {
    padding:
      0
      28px
      28px;
  }


  .sbk2__visual {
    height: 690px;

    min-height: 690px;
  }


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


  .sbk2__rail a {
    min-height: 74px;

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

}


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

@media (max-width:650px) {

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

    padding:
      70px
      17px
      39px;
  }


  .sbk2 h1 {
    font-size:
      clamp(35px,10.2vw,45px);
  }


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


  .sbk2__lead {
    font-size: 13px;
  }


  .sbk2__description {
    font-size: 12px;
  }


  .sbk2__actions {
    flex-direction: column;
  }


  .sbk2-btn {
    width: 100%;
  }


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


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


  .sbk2__metrics > div + div {
    border-top:
      1px solid
      rgba(255,255,255,.06);

    border-left: 0;
  }


  .sbk2__visual-wrap {
    padding:
      0
      14px
      14px;
  }


  .sbk2__visual {
    height: 580px;

    min-height: 580px;

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


  .sbk2__orbit {
    width: 94%;
  }


  .sbk2__logo-stage {
    width: 92%;

    min-height: 275px;

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


  .sbk2__logo-core {
    width: 96%;

    min-height: 170px;
  }


  .sbk2__logo {
    width: 84%;

    max-height: 165px;
  }


  .sbk2__vertical {
    display: none;
  }


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

    padding: 15px;
  }


  .sbk2__panel > strong {
    font-size: 18px;
  }


  .sbk2__technical {
    right: 14px;
    bottom: 14px;
    left: 14px;

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


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


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


  .sbk2__rail a {
    min-height: 64px;

    border-right: 0;
  }

}


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

@media (max-width:430px) {

  .sbk2__content {
    padding:
      64px
      15px
      35px;
  }


  .sbk2__visual {
    height: 530px;

    min-height: 530px;
  }


  .sbk2__logo-stage {
    transform:
      translate(-50%,-65%);
  }


  .sbk2__panel {
    bottom: 101px;
  }


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


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

}


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

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

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

    transition-duration:
      .01ms !important;
  }

}

/*korloy hero end here*/