/* ========================================================
   OWNSAAS AI — ULTRA PREMIUM WHITE HERO
======================================================== */
.t1-clr{
    background: linear-gradient(90deg, #711ea4 0%, #9530b7 24%, #bb40bb 48%, #df50aa 72%, #ee6ba9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ownx-hero {
  --ox-purple: #7e23af;
  --ox-violet: #a43bc4;
  --ox-pink: #e452aa;
  --ox-pink-light: #fb7fc1;
  --ox-peach: #ffc49e;

  --ox-dark: #170c21;
  --ox-dark-2: #25132f;
  --ox-copy: #655a6f;

  position: relative;
  overflow: hidden;

  padding: 40px 0 100px;

 background: #fff url(../images/ownx-hero.png) no-repeat center top / cover;
  position: relative;
  overflow: hidden;

  isolation: isolate;
}


.ownx-container {
  position: relative;
  z-index: 5;

  width: 100%;
  max-width: 1280px;
}


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

.ownx-ambient {
  position: absolute;
  inset: 0;

  z-index: -1;

  overflow: hidden;
  pointer-events: none;
}


.ownx-ambient__mesh {
  position: absolute;
  inset: 0;

  opacity: .8;

  background-image:
    linear-gradient(
      rgba(141, 60, 173, .028) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(141, 60, 173, .028) 1px,
      transparent 1px
    );

  background-size: 60px 60px;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      rgba(0,0,0,.45) 55%,
      transparent 86%
    );

  mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      rgba(0,0,0,.45) 55%,
      transparent 86%
    );
}


.ownx-ambient__glow {
  position: absolute;

  border-radius: 50%;

  filter: blur(10px);
}


.ownx-ambient__glow--left {
  width: 620px;
  height: 620px;

  top: -320px;
  left: -280px;

  background:
    radial-gradient(
      circle,
      rgba(182, 78, 224, .17),
      transparent 68%
    );
}


.ownx-ambient__glow--right {
  width: 620px;
  height: 620px;

  top: -250px;
  right: -300px;

  background:
    radial-gradient(
      circle,
      rgba(237, 88, 174, .16),
      transparent 68%
    );
}


.ownx-ambient__glow--center {
  width: 650px;
  height: 400px;

  bottom: -260px;
  left: 50%;

  transform: translateX(-50%);

  background:
    radial-gradient(
      circle,
      rgba(165, 73, 217, .12),
      transparent 70%
    );
}


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

.ownx-brand {
  position: relative;

  display: flex;
  justify-content: center;

  margin-bottom: 15px;
}


.ownx-brand__halo {
  position: absolute;

  width: 360px;
  height: 75px;

  top: 50%;
  left: 50%;

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

  border-radius: 50%;

  background:
    linear-gradient(
      90deg,
      rgba(135, 31, 178, .14),
      rgba(231, 73, 169, .14)
    );

  filter: blur(35px);
}


.ownx-brand__plate {
  position: relative;

  width: 390px;
  max-width: 100%;

  padding: 8px 20px;

  border:
    1px solid
    rgba(148, 64, 181, .09);

  border-radius: 22px;

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

  box-shadow:
    0 15px 45px rgba(70, 20, 88, .06),
    inset 0 1px 0 #fff;

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}


.ownx-brand__logo {
  display: block;

  width: 100%;
  height: 66px;

  object-fit: contain;
}


/* ========================================================
   OFFER
======================================================== */

.ownx-offer {
  width: max-content;

  max-width: 100%;

  margin:
    0
    auto
    19px;

  display: flex;
  align-items: center;

  gap: 11px;

  min-height: 43px;

  padding:
    8px
    18px;

  border:
    1px solid
    rgba(154, 66, 187, .14);

  border-radius: 100px;

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

  box-shadow:
    0 10px 30px rgba(93, 29, 116, .06),
    inset 0 1px 0 #fff;
}


.ownx-offer__signal {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      var(--ox-purple),
      var(--ox-pink)
    );

  box-shadow:
    0 0 0 6px
    rgba(204, 76, 189, .08);
}


.ownx-offer__text,
.ownx-offer strong {
  color: #9633b1;

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

  letter-spacing: 2.5px;
}


.ownx-offer strong {
  color: #d448a7;
}


.ownx-offer__divider {
  width: 1px;
  height: 15px;

  background:
    rgba(109, 55, 127, .18);
}


/* ========================================================
   EYEBROW
======================================================== */

.ownx-eyebrow {
  display: flex;

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

  gap: 15px;

  margin-bottom: 14px;
}


.ownx-eyebrow__text {
  color: #9b36b4;

  font-size: 13px;
  line-height: 1.4;

  font-weight: 900;

  letter-spacing: 2.4px;

  text-align: center;
}


.ownx-eyebrow__line {
  width: 50px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(183, 69, 186, .65),
      transparent
    );
}


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

.ownx-heading-wrap {
  position: relative;

  max-width: 1180px;

  margin: auto;

  text-align: center;
}


.ownx-heading {
  margin: 0;
}


.ownx-heading__line {
display: block;
    color: var(--ox-dark);
    font-size: clamp(48px, 5.6vw, 78px);
    line-height: 1.3;
    font-weight: 950;
    letter-spacing: -4px;
}


.ownx-heading__gradient {
position: relative;
  display: ruby-text;
  /* width: fit-content;
  max-width: 100%; */
  margin: 8px auto 0;
  font-size: clamp( 38px, 5.6vw, 68px );
  line-height: 1;
  font-weight: 950;
  letter-spacing: -4px;
  background: linear-gradient( 90deg, #711ea4 0%, #9530b7 24%, #bb40bb 48%, #df50aa 72%, #ee6ba9 100% );
    background-clip: border-box;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


.ownx-heading__gradient::after {
  content: "";

  position: absolute;

  left: 15%;
  right: 15%;

  bottom: -13px;

  height: 18px;

  border-radius: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(170, 58, 185, .16),
      transparent
    );

  filter: blur(9px);
}


.ownx-heading__sub {
max-width: 950px;
  margin: 0px auto 0;
  color: #25162e;
  font-size: clamp( 26px, 2.65vw, 38px );
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -1.4px;
}


.ownx-heading__money {
  color: #a337b8;

  background:
    linear-gradient(
      90deg,
      #7020a3,
      #ae3cbb,
      #e64fa4
    );

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

  -webkit-text-fill-color: transparent;
}


/* ========================================================
   DISCLAIMER
======================================================== */

.ownx-disclaimer {
  display: flex;

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

  gap: 10px;

  margin-top: 15px;
}


.ownx-disclaimer > span {
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(183, 69, 186, .65), transparent);
}


.ownx-disclaimer small {
  color: #8e8495;

  font-size: 11px;

  font-style: italic;
}
.text-p{
    color: #5e5367;
    font-style: italic;
}

/* ========================================================
   STATEMENT
======================================================== */

.ownx-statement {
  position: relative;

  max-width: 1040px;

  margin:
    31px
    auto
    0;

  display: flex;

  align-items: center;

  gap: 19px;

  overflow: hidden;

  padding:
    15px
    28px;

  border:
    1px solid
    rgba(146, 59, 180, .12);

  border-radius: 21px;

  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.96),
      rgba(251,246,255,.92)
    );

  box-shadow:
    0 20px 60px rgba(67, 20, 85, .07),
    inset 0 1px 0 #fff;

  backdrop-filter: blur(15px);
}


.ownx-statement::before {
  content: "";

  position: absolute;

  left: 0;
  top: 13px;
  bottom: 13px;

  width: 4px;

  border-radius:
    0
    10px
    10px
    0;

  background:
    linear-gradient(
      180deg,
      var(--ox-purple),
      var(--ox-pink)
    );
}
.ownx-statement::after {
    content: "";
    position: absolute;
    right: 0;
    top: 13px;
    bottom: 13px;
    width: 4px;
    border-radius: 0 10px 10px 0;
    background: linear-gradient(180deg, var(--ox-purple), var(--ox-pink));
}

.ownx-statement__shine {
  position: absolute;

  width: 250px;
  height: 100px;

  right: -100px;
  top: -60px;

  border-radius: 50%;

  background:
    rgba(227, 92, 193, .09);

  filter: blur(25px);
}


.ownx-statement__icon {
  position: relative;
  z-index: 2;

  width: 52px;
  height: 52px;

  flex:
    0
    0
    52px;

  display: flex;

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

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      #7b23aa,
      #e652a8
    );

  box-shadow:
    0 13px 30px
    rgba(171, 56, 167, .23);
}


.ownx-statement__icon svg {
  width: 23px;
  height: 23px;

  fill: #fff;
}


.ownx-statement p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #5e5367;
    font-size: 20px;
    line-height: 1.68;
    font-weight: 500;
    font-style: italic;
    text-align: center;
}


/* ========================================================
   REVENUE
======================================================== */

.ownx-revenue {
  max-width: 900px;

  margin:
    27px
    auto
    0;
}


.ownx-revenue__top {
  display: flex;

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

  gap: 9px;

  margin-bottom: 12px;
}


.ownx-revenue__mini {
  color: #aa75b4;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 2px;
}


.ownx-revenue__mini-line {
  width: 18px;
  height: 1px;

  background: #dabee0;
}


.ownx-revenue__flow {
  display: flex;

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

  gap: 10px;
}


.ownx-revenue__card {
  position: relative;

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

  display: flex;

  flex-direction: column;

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

  overflow: hidden;

  padding: 15px;

  border:
    1px solid
    rgba(145, 61, 180, .12);

  border-radius: 20px;

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

  box-shadow:
    0 15px 36px rgba(66, 19, 86, .06),
    inset 0 1px 0 #fff;
}


.ownx-revenue__card::after {
  content: "";

  position: absolute;

  width: 90px;
  height: 90px;

  top: -48px;
  right: -45px;

  border-radius: 50%;

  background:
    rgba(189, 79, 202, .05);
}


.ownx-revenue__number {
  position: absolute;

  top: 10px;
  right: 12px;

  color: rgba(115, 55, 135, .18);

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 1px;
}


.ownx-revenue__label {
  margin-bottom: 7px;

  color: #95879e;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 1.7px;
}


.ownx-revenue__card strong {
  color: #26162f;

  font-size: 31px;

  line-height: 1;

  font-weight: 950;
}


.ownx-revenue__operator {
  width: 50px;

  display: flex;

  align-items: center;

  justify-content: center;
}


.ownx-revenue__operator span {
  width: 9px;
  height: 1px;

  background: #dacdde;
}


.ownx-revenue__operator b {
  margin: 0 5px;

  color: #aa97b1;

  font-size: 23px;

  font-weight: 400;
}


.ownx-revenue__card--result {
  border: 0;

  background:
    linear-gradient(
      135deg,
      #7420a6 0%,
      #a638bc 47%,
      #e652a7 100%
    );

  box-shadow:
    0 19px 45px rgba(168, 51, 166, .24);
}


.ownx-revenue__result-glow {
  position: absolute;

  width: 110px;
  height: 110px;

  top: -70px;
  left: -20px;

  border-radius: 50%;

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

  filter: blur(10px);
}


.ownx-revenue__card--result
.ownx-revenue__label {
  color:
    rgba(255,255,255,.74);
}


.ownx-revenue__card--result
.ownx-revenue__number {
  color:
    rgba(255,255,255,.30);
}


.ownx-revenue__card--result strong {
  color: #fff;
}


/* ========================================================
   OWNERSHIP
======================================================== */

.ownx-ownership {
max-width: 970px;
    margin: 30px auto 0;
    text-align: center;
}


.ownx-ownership__tag {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 12px;

  color: #9e39b4;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 2.5px;
}


.ownx-ownership__tag span {
  width: 22px;
  height: 1px;

  background: #d4adda;
}


.ownx-ownership h2 {
  margin: 0;

  color: var(--ox-dark-2);

font-size: clamp(30px, 3.6vw, 30px);
  line-height: 1.08;

  font-weight: 950;

  letter-spacing: -1.8px;
}


.ownx-ownership h2 span {
  background:
    linear-gradient(
      90deg,
      #7620a9,
      #b53ebd,
      #e550a6
    );

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

  -webkit-text-fill-color: transparent;
}


.ownx-ownership p {
    max-width: 860px;
    margin: 20px auto 0;
    color: var(--ox-copy);
    font-size: 18px;
    line-height: 1.72;
}


/* ========================================================
   PRODUCT STAGE
======================================================== */

.ownx-product-stage {
  position: relative;

  max-width: 1160px;

  margin:
    37px
    auto
    0;
}


.ownx-product-stage__shadow {
  position: absolute;

  left: 7%;
  right: 7%;

  bottom: -35px;

  height: 100px;

  border-radius: 50%;

  background:
    linear-gradient(
      90deg,
      rgba(122, 32, 163, .17),
      rgba(225, 77, 164, .16)
    );

  filter: blur(38px);
}


.ownx-product-stage__frame {
  position: relative;

  overflow: hidden;

  border:
    1px solid
    rgba(139, 55, 178, .14);

  border-radius: 28px;

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

  box-shadow:
    0 35px 90px rgba(51, 10, 70, .12),
    0 10px 30px rgba(63, 20, 82, .05),
    inset 0 1px 0 #fff;
}


/* ========================================================
   WINDOW TOP
======================================================== */

.ownx-window-top {
  display: grid;

  grid-template-columns:
    1fr
    minmax(270px, 430px)
    1fr;

  align-items: center;

  min-height: 64px;

  padding:
    0
    20px;

  border-bottom:
    1px solid
    #f0e6f2;

  background:
    linear-gradient(
      180deg,
      #fff,
      #fdfbfe
    );
}


.ownx-window-top__dots {
  display: flex;

  gap: 7px;
}


.ownx-window-top__dots span {
  width: 9px;
  height: 9px;

  border-radius: 50%;
}


.ownx-window-top__dots span:nth-child(1) {
  background: #e75aa6;
}


.ownx-window-top__dots span:nth-child(2) {
  background: #bf4bc7;
}


.ownx-window-top__dots span:nth-child(3) {
  background: #8030b3;
}


.ownx-window-top__url {
  min-height: 37px;

  display: flex;

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

  gap: 7px;

  padding:
    5px
    14px;

  border:
    1px solid
    #eee3f0;

  border-radius: 10px;

  background: #faf7fc;

  color: #82728b;

  font-size: 14px;

  font-weight: 700;
}


.ownx-window-top__lock svg {
  display: block;

  width: 12px;
  height: 12px;

  fill: #a947b7;
}


.ownx-window-top__status {
  justify-self: end;

  display: flex;

  align-items: center;

  gap: 6px;

  padding:
    7px
    11px;

  border:
    1px solid
    rgba(158, 67, 182, .12);

  border-radius: 100px;

  color: #9b3cb1;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 1.2px;
}


.ownx-window-top__status span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      var(--ox-purple),
      var(--ox-pink)
    );
}


/* ========================================================
   PRODUCT AREA
======================================================== */

.ownx-product {
  position: relative;

  min-height: 430px;

  display: flex;

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

  overflow: hidden;

  padding:
    45px
    40px;

  background:
    radial-gradient(
      circle at 50% 28%,
      rgba(219, 137, 236, .20),
      transparent 27%
    ),
    linear-gradient(
      180deg,
      #fffefe,
      #fbf6ff
    );
}


.ownx-product__grid {
  position: absolute;

  inset: 0;

  background-image:
    radial-gradient(
      rgba(139, 56, 178, .105) 1px,
      transparent 1px
    );

  background-size: 21px 21px;

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

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


.ownx-product__spot {
  position: absolute;

  width: 520px;
  height: 250px;

  top: 70px;
  left: 50%;

  transform: translateX(-50%);

  border-radius: 50%;

  background:
    rgba(197, 90, 217, .09);

  filter: blur(45px);
}


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

.ownx-product__side {
  position: absolute;

  z-index: 4;

  display: flex;

  flex-direction: column;

  gap: 13px;
}


.ownx-product__side--left {
  left: 28px;

  top: 50%;

  transform: translateY(-50%);
}


.ownx-product__side--right {
  right: 28px;

  top: 50%;

  transform: translateY(-50%);
}


.ownx-mini-card {
  min-width: 175px;

  display: flex;

  align-items: center;

  gap: 10px;

  padding:
    12px
    14px;

  border:
    1px solid
    rgba(145, 59, 179, .12);

  border-radius: 15px;

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

  box-shadow:
    0 15px 34px rgba(77, 21, 99, .07);

  backdrop-filter: blur(15px);
}


.ownx-mini-card__icon {
  width: 29px;
  height: 29px;

  flex:
    0
    0
    29px;

  display: flex;

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

  border-radius: 9px;

  background:
    linear-gradient(
      135deg,
      #8127ae,
      #e550a6
    );

  color: #fff;

  font-size: 11px;

  font-weight: 900;
}


.ownx-mini-card span {
  display: block;

  margin-bottom: 1px;

  color: #a198a6;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .8px;
}


.ownx-mini-card strong {
  display: block;

  color: #34223d;

  font-size: 11px;

  font-weight: 900;
}


/* ========================================================
   CENTER DEMO
======================================================== */

.ownx-demo {
  position: relative;

  z-index: 5;
}


.ownx-demo__halo {
  position: absolute;

  width: 250px;
  height: 160px;

  left: 50%;
  top: 50%;

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

  border-radius: 50%;

  background:
    linear-gradient(
      90deg,
      rgba(130, 32, 177, .13),
      rgba(233, 80, 168, .13)
    );

  filter: blur(35px);
}


.ownx-demo__card {
  position: relative;

  width: 355px;
  max-width: 100%;

  min-height: 190px;

  display: flex;

  flex-direction: column;

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

  padding:
    25px
    30px;

  border:
    1px solid
    rgba(147, 62, 181, .14);

  border-radius: 25px;

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

  box-shadow:
    0 30px 70px rgba(77, 20, 100, .13),
    inset 0 1px 0 #fff;

  backdrop-filter: blur(20px);
}


.ownx-demo__topline {
  position: absolute;

  top: 14px;

  color: #b27cba;

  font-size: 8px;

  font-weight: 900;

  letter-spacing: 1.8px;
}


.ownx-demo__play {
  width: 61px;
  height: 61px;

  margin-bottom: 17px;

  display: flex;

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

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      #7c22ac,
      #e952a6
    );

  box-shadow:
    0 15px 35px rgba(174, 55, 167, .27),
    0 0 0 10px rgba(207, 81, 190, .07);
}


.ownx-demo__play svg {
  width: 24px;
  height: 24px;

  fill: #fff;
}


.ownx-demo__card strong {
  color: #2c1936;

  font-size: 14px;

  line-height: 1.35;

  font-weight: 900;

  text-align: center;
}


.ownx-demo__card > span {
  margin-top: 4px;

  color: #a63eb7;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 1.2px;
}


/* ========================================================
   PRODUCT BOTTOM
======================================================== */

.ownx-product__bottom-status {
  position: absolute;

  z-index: 6;

  right: 22px;
  bottom: 20px;

  display: flex;

  align-items: center;

  gap: 6px;

  padding:
    8px
    12px;

  border:
    1px solid
    rgba(149, 61, 179, .12);

  border-radius: 100px;

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

  color: #9c3bb2;

  font-size: 8px;

  font-weight: 900;

  letter-spacing: 1.3px;
}


.ownx-product__bottom-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      var(--ox-purple),
      var(--ox-pink)
    );
}


/* ========================================================
   FINAL TAG
======================================================== */

.ownx-final-tag {
  display: flex;

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

  gap: 9px;

  margin-top: 29px;
}


.ownx-final-tag__line {
  width: 42px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(184, 67, 183, .7),
      transparent
    );
}


.ownx-final-tag__star {
  color: #bb48bb;

  font-size: 9px;
}


.ownx-final-tag strong {
  color: #2b1b34;

  font-size: 13px;

  font-weight: 900;

  letter-spacing: 1.6px;
}


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

@media (hover:hover) {

  .ownx-revenue__card,
  .ownx-mini-card,
  .ownx-demo__card {
    transition:
      transform .4s ease,
      box-shadow .4s ease;
  }


  .ownx-revenue__card:hover {
    transform: translateY(-5px);

    box-shadow:
      0 23px 48px
      rgba(70, 20, 90, .10);
  }


  .ownx-revenue__card--result:hover {
    box-shadow:
      0 25px 55px
      rgba(168, 51, 166, .29);
  }


  .ownx-mini-card:hover {
    transform:
      translateY(-3px)
      scale(1.02);
  }


  .ownx-demo__card:hover {
    transform:
      translateY(-5px)
      scale(1.015);

    box-shadow:
      0 38px 80px
      rgba(77, 20, 100, .17);
  }

}


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

@media (max-width: 991.98px) {

  .ownx-hero {
    padding:
      30px
      0
      75px;
  }


  .ownx-heading__line,
  .ownx-heading__gradient {
    font-size:
      clamp(
        42px,
        6.5vw,
        63px
      );

    letter-spacing: -2.7px;
  }


  .ownx-heading__sub {
    font-size:
      clamp(
        24px,
        3.2vw,
        34px
      );
  }


  .ownx-product {
    min-height: 380px;
  }


  .ownx-mini-card {
    min-width: 150px;
  }


  .ownx-product__side--left {
    left: 18px;
  }


  .ownx-product__side--right {
    right: 18px;
  }

}


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

@media (max-width: 767.98px) {

  .ownx-hero {
    padding:
      22px
      0
      55px;
  }


  .ownx-container {
    padding-left: 16px;
    padding-right: 16px;
  }


  /* Brand */
  .ownx-brand__plate {
    width: 285px;

    padding:
      5px
      12px;

    border-radius: 17px;
  }


  .ownx-brand__logo {
    height: 50px;
  }


  /* Offer */
  .ownx-offer {
    min-height: 38px;

    padding:
      7px
      14px;

    margin-bottom: 15px;
  }


  .ownx-offer__text,
  .ownx-offer strong {
    font-size: 9px;

    letter-spacing: 1.8px;
  }


  /* Eyebrow */
  .ownx-eyebrow {
    gap: 7px;

    margin-bottom: 11px;
  }


  .ownx-eyebrow__line {
    width: 14px;
  }


  .ownx-eyebrow__text {
    font-size: 9px;

    line-height: 1.45;

    letter-spacing: 1.2px;
  }


  /* Main heading */
  .ownx-heading__line,
  .ownx-heading__gradient {
    font-size:
      clamp(
        32px,
        9.6vw,
        43px
      );

    line-height: 1.03;

    letter-spacing: -1.7px;
  }


  .ownx-heading__gradient {
    margin-top: 5px;
  }


  .ownx-heading__sub {
    margin-top: 18px;

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

    line-height: 1.17;

    letter-spacing: -.8px;
  }


  .ownx-disclaimer {
    gap: 6px;

    margin-top: 12px;
  }


  .ownx-disclaimer > span {
    width: 12px;
  }


  .ownx-disclaimer small {
    max-width: 270px;

    font-size: 8px;

    text-align: center;
  }


  /* Statement */
  .ownx-statement {
    align-items: flex-start;

    gap: 12px;

    margin-top: 22px;

    padding:
      17px
      15px;

    border-radius: 16px;
  }


  .ownx-statement__icon {
    width: 40px;
    height: 40px;

    flex-basis: 40px;

    border-radius: 12px;
  }


  .ownx-statement__icon svg {
    width: 18px;
    height: 18px;
  }


  .ownx-statement p {
    font-size: 13px;

    line-height: 1.62;
  }


  /* Revenue */
  .ownx-revenue {
    margin-top: 21px;
  }


  .ownx-revenue__flow {
    /* display: grid; */
display: flex;
  align-items: stretch;
  justify-content: center;
    grid-template-columns:
      1fr
      32px
      1fr;

    gap: 8px;
  }


  .ownx-revenue__card {
width: 150px;
    min-height: 100%;

    padding:
      10px
      8px;

    border-radius: 14px;
  }


  .ownx-revenue__card strong {
    font-size: 24px;
  }


  .ownx-revenue__label {
    font-size: 7px;

    letter-spacing: 1px;
  }


  .ownx-revenue__operator {
    width: 32px;
  }


  .ownx-revenue__operator span {
    display: none;
  }


  .ownx-revenue__operator b {
    margin: 0;

    font-size: 19px;
  }


  .ownx-revenue__card--result {
    grid-column: 1 / -1;

    min-height: 82px;
  }


  .ownx-revenue__operator:nth-of-type(2) {
    display: none;
  }


  /* Ownership */
  .ownx-ownership {
    margin-top: 43px;
  }


  .ownx-ownership__tag {
    font-size: 8px;

    letter-spacing: 1.4px;
  }


  .ownx-ownership h2 {
    font-size: 28px;

    line-height: 1.12;
  }


  .ownx-ownership h2 span {
    display: block;
  }


  .ownx-ownership p {
    font-size: 13px;

    line-height: 1.65;
  }


  /* Product */
  .ownx-product-stage {
    margin-top: 24px;
  }


  .ownx-product-stage__frame {
    border-radius: 19px;
  }


  .ownx-window-top {
    grid-template-columns:
      52px
      1fr;

    gap: 8px;

    min-height: 49px;

    padding:
      0
      11px;
  }


  .ownx-window-top__status {
    display: none;
  }


  .ownx-window-top__dots {
    gap: 4px;
  }


  .ownx-window-top__dots span {
    width: 7px;
    height: 7px;
  }


  .ownx-window-top__url {
    min-height: 29px;

    padding:
      4px
      8px;

    font-size: 8px;
  }


  .ownx-product {
    min-height: 250px;

    padding:
      22px
      14px;
  }


  .ownx-product__side {
    display: none;
  }


  .ownx-demo {
    width: 100%;
  }


  .ownx-demo__card {
    width: 100%;

    max-width: 330px;

    min-height: 155px;

    margin: auto;

    padding:
      25px
      14px
      17px;

    border-radius: 17px;
  }


  .ownx-demo__play {
    width: 46px;
    height: 46px;

    margin-bottom: 13px;
  }


  .ownx-demo__play svg {
    width: 19px;
    height: 19px;
  }


  .ownx-demo__card strong {
    font-size: 10px;
  }


  .ownx-demo__card > span {
    font-size: 7px;

    letter-spacing: .7px;
  }


  .ownx-product__bottom-status {
    right: 9px;
    bottom: 9px;

    padding:
      6px
      8px;

    font-size: 6px;
  }


  /* Footer */
  .ownx-final-tag {
    gap: 6px;

    margin-top: 21px;
  }


  .ownx-final-tag__line {
    width: 14px;
  }


  .ownx-final-tag strong {
    font-size: 9px;

    letter-spacing: .75px;
  }

}


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

@media (max-width: 430px) {

  .ownx-eyebrow__line {
    display: none;
  }


  .ownx-heading__line,
  .ownx-heading__gradient {
    font-size: 22px;
  }


  .ownx-heading__sub {
    font-size: 20px;
  }


  .ownx-statement__icon {
    display: none;
  }


  .ownx-ownership h2 {
    font-size: 25px;
  }


  .ownx-final-tag__line,
  .ownx-final-tag__star {
    display: none;
  }
  .timers-box {
  margin-top: -40px;
  height: 60px;
}

}

/* =========================================
   AI SUBSCRIPTION SECTION
========================================= */

.aitrap-section {
  --aitrap-orange: #ff884f;
  --aitrap-coral: #ff5b73;
  --aitrap-pink: #f14bb0;
  --aitrap-purple: #9f4dff;
  --aitrap-bg: #050407;
  --aitrap-card: #0c0911;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding: 105px 0 110px;

  /* background:
    radial-gradient(
      circle at 50% -5%,
      rgba(255, 113, 56, .18),
      transparent 31%
    ),
    radial-gradient(
      circle at 95% 52%,
      rgba(153, 58, 255, .10),
      transparent 24%
    ),
    radial-gradient(
      circle at 0 80%,
      rgba(255, 70, 127, .07),
      transparent 25%
    ),
    #030305; */

        background: #F9F5FC9E url(../images/aitrap-section.png) no-repeat center top / cover;
   
    position: relative;
    overflow: hidden;
}


/* Background */

.aitrap-bg {
  position: absolute;
  inset: 0;

  overflow: hidden;

  pointer-events: none;
  z-index: -1;
}

.aitrap-grid {
  position: absolute;
  inset: 0;

  opacity: .8;

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

  background-size: 48px 48px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.7),
      transparent 88%
    );
}

.aitrap-glow {
  position: absolute;

  border-radius: 50%;

  filter: blur(120px);
}

.aitrap-glow-1 {
  width: 520px;
  height: 520px;

  top: -320px;
  left: 12%;

  background: rgba(255, 127, 53, .22);
}

.aitrap-glow-2 {
  width: 500px;
  height: 500px;

  right: -300px;
  top: 35%;

  background: rgba(178, 57, 255, .13);
}


/* =========================================
   Heading
========================================= */

.aitrap-eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  padding: 9px 16px;

  margin-bottom: 22px;

  border-radius: 100px;

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

  background:
    rgba(255, 108, 64, .06);

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

  font-size: 11px;
  line-height: 1;

  font-weight: 800;

  letter-spacing: 1.9px;
}

.aitrap-eyebrow-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #ff7959;

  box-shadow:
    0 0 0 5px rgba(255, 111, 87, .09),
    0 0 18px rgba(255, 94, 103, .65);
}


.aitrap-heading {
  max-width: 1080px;

  margin: 0 auto;

  color: #fff;

  font-size: clamp(30px, 4.3vw, 46px);
  line-height: 1.04;

  font-weight: 900;

  letter-spacing: -3.2px;

  text-transform: uppercase;
}

.aitrap-heading span {
  /* display: block; */

  margin-top: 5px;

  background:
    linear-gradient(
      90deg,
      #ff9c54 0%,
      #ff5f74 48%,
      #da4be9 100%
    );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.aitrap-intro {
 margin: 22px auto 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.65;
  font-weight: 500;
}


/* =========================================
   Tools Grid - Reference Style Cards
========================================= */

.aitrap-tools-row {
  margin-top: 65px;
}

.aitrap-tool-card {
  position: relative;
  height: 100%;
  transform: none;
  transition: transform .35s ease;
}

.aitrap-tool-info {
  position: relative;
  width: 100%;
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 45px 14px 14px;
  overflow: hidden;
  border-radius: 22px;

  background:
    radial-gradient(
      circle at 8% 50%,
      rgba(230, 62, 130, .06),
      transparent 30%
    ),
    linear-gradient(
      120deg,
      #100a16 0%,
      #0d0913 50%,
      #09070e 100%
    );

  border: 1px solid rgba(132, 61, 161, .48);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 16px 35px rgba(0,0,0,.30);

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

/* top-right decorative rings */
.aitrap-tool-info::before {
  content: "";
  position: absolute;
  width: 142px;
  height: 142px;
  top: -91px;
  right: -56px;
  border-radius: 50%;
  border: 1px solid rgba(160, 74, 188, .11);
  pointer-events: none;
}

.aitrap-tool-info::after {
  content: "";
  position: absolute;
  width: 96px;
  height: 96px;
  top: -60px;
  right: -29px;
  border-radius: 50%;
  border: 1px solid rgba(168, 75, 198, .09);
  box-shadow: none;
  pointer-events: none;
}

/* image icon */
.aitrap-tool-icon {
position: relative;
  z-index: 3;
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient( 145deg, #ff805e, #ee548d 45%, #bb4cd8 );
  border: 1px solid rgba(255, 82, 124, 0.49);
  box-shadow: 0 10px 28px rgba(217, 61, 151, 0.48), inset 0 1px 1px rgba(255,255,255,.26);
  transition: transform .35s ease, box-shadow .35s ease;
}

.aitrap-tool-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 15px;
}

.aitrap-tool-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.12);
  pointer-events: none;
}

/* card text */
.aitrap-tool-copy {
  position: relative;
  z-index: 4;
  min-width: 0;
  flex: 1;
}

.aitrap-tool-copy small {
  display: block;
  margin: 0 0 6px;
  color: #aa91ae;
  font-size: 8px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.aitrap-tool-copy h4 {
  margin: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.45px;
}

.aitrap-tool-card:nth-child(4) .aitrap-tool-copy h4,
.aitrap-tool-card:nth-child(8) .aitrap-tool-copy h4 {
  font-size: 16px;
}

/* pink status dot */
.aitrap-tool-dot {
  position: absolute;
  right: 17px;
  bottom: 19px;
  z-index: 5;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff527c;

  box-shadow:
    0 0 0 6px rgba(255, 75, 119, .075),
    0 0 14px rgba(255, 76, 122, .72);
}

/* hover */
.aitrap-tool-card:hover {
  transform: translateY(-4px);
}

.aitrap-tool-card:hover .aitrap-tool-info {
  border-color: rgba(181, 76, 209, .65);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 22px 45px rgba(0,0,0,.34),
    0 0 35px rgba(170, 54, 202, .055);
}

.aitrap-tool-card:hover .aitrap-tool-icon {
  transform: translateY(-2px) scale(1.025);

  box-shadow:
    0 14px 32px rgba(217, 61, 151, .23),
    inset 0 1px 1px rgba(255,255,255,.26);
}


/* =========================================
   Subscription loop
========================================= */

.aitrap-loop-panel {
  margin-top: 80px;

  display: grid;

  grid-template-columns:
    1fr auto 1fr auto 1fr;

  align-items: center;

  gap: 15px;

  padding: 17px;

  border-radius: 27px;

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

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 25px 70px rgba(0,0,0,.24);

  backdrop-filter: blur(14px);
}

.aitrap-loop-item {
  min-height: 96px;

  display: flex;
  align-items: center;

  gap: 15px;

  padding: 17px;

  border-radius: 19px;

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

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.012)
    );
}

.aitrap-loop-index {
  width: 45px;
  height: 45px;

  flex: 0 0 45px;

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

  border-radius: 13px;

  color: #ff8767;

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

  letter-spacing: 1px;

  background:
    rgba(255, 103, 81, .08);

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

.aitrap-loop-item small {
  display: block;

  margin-bottom: 5px;

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

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

  letter-spacing: 1.2px;
}

.aitrap-loop-item h5 {
  margin: 0;

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

  font-size: 16px;
  line-height: 1.35;

  font-weight: 700;
}

.aitrap-loop-arrow {
  width: 31px;
  height: 31px;

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

  border-radius: 50%;

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

  font-size: 11px;

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

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


/* =========================================
   Alert
========================================= */

.aitrap-alert {
  position: relative;

  /* min-height: 220px;

  margin-top: 32px;


text-align: center;
  gap: 25px;

  padding: 38px 48px;

  overflow: hidden; */
padding: 10px 0px;
  overflow: hidden;
  border-radius: 29px;

  /* border:
    1px solid rgba(255, 96, 108, .18);

  background:
    radial-gradient(
      circle at 25% 50%,
      rgba(255, 96, 65, .15),
      transparent 38%
    ),
    linear-gradient(
      115deg,
      rgba(255, 104, 59, .07),
      rgba(255, 64, 126, .06) 50%,
      rgba(167, 62, 255, .08)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 28px 75px rgba(0,0,0,.25); */
}

.aitrap-alert::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      115deg,
      transparent 20%,
      rgba(255,255,255,.032) 50%,
      transparent 80%
    );

  transform: translateX(-100%);

  animation:
    aitrap-shine 7s linear infinite;
}

@keyframes aitrap-shine {
  0%, 68% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.aitrap-alert-icon {
  position: relative;

  z-index: 3;

  width: 82px;
  height: 82px;

  flex: 0 0 82px;

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

  border-radius: 24px;

  color: #fff;

  font-size: 30px;

  background:
    linear-gradient(
      145deg,
      #ff9652,
      #fb4d78 55%,
      #b947ef
    );

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

  box-shadow:
    0 17px 40px rgba(255, 61, 114, .20),
    inset 0 1px 1px rgba(255,255,255,.30);
}

.aitrap-alert-copy {
  position: relative;

  z-index: 3;
}

.aitrap-alert-copy > span {
  display: block;

  margin-bottom: 9px;

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

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 1.7px;
}

.aitrap-alert-copy h3 {
  /* max-width: 790px; */

  margin: 0;

  color: #fff;

  font-size: clamp(29px, 3vw, 48px);
  line-height: 1.08;

  font-weight: 900;

  letter-spacing: -1.8px;
}

.aitrap-alert-copy strong {
  font-weight: 900;

  background:
    linear-gradient(
      90deg,
      #ff9c53,
      #ff5876,
      #dd49e8
    );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.aitrap-alert-decoration {
  position: absolute;

  right: 36px;
  top: 50%;

  transform: translateY(-50%);

  width: 145px;
  height: 145px;
}

.aitrap-alert-decoration span {
  position: absolute;

  inset: 0;

  border-radius: 50%;

  border:
    1px solid rgba(214, 72, 255, .09);
}

.aitrap-alert-decoration span:nth-child(2) {
  inset: 24px;
}

.aitrap-alert-decoration span:nth-child(3) {
  inset: 48px;

  border-color:
    rgba(255, 93, 123, .10);
}


/* =========================================
   Final story
========================================= */

.aitrap-story {
  display: grid;

  grid-template-columns:
    .92fr 1.08fr;

  margin-top: 34px;

  overflow: hidden;

  border-radius: 30px;

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

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.012)
    );

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


/* image */

.aitrap-story-image {
  position: relative;

  min-height: 510px;

  overflow: hidden;

  background: #0c0b0f;
}

.aitrap-story-image > img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

.aitrap-story-shade {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      transparent 45%,
      rgba(5,4,8,.80)
    ),
    linear-gradient(
      to top,
      rgba(5,4,8,.70),
      transparent 55%
    );
}


/* Floating cards */

.aitrap-floating-card {
  position: absolute;

  display: flex;
  align-items: center;

  gap: 9px;

  padding: 11px 14px;

  border-radius: 14px;

  color: #fff;

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

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

  background:
    rgba(15, 10, 20, .73);

  backdrop-filter: blur(14px);

  box-shadow:
    0 14px 40px rgba(0,0,0,.35);
}

.aitrap-floating-card i {
  width: 28px;
  height: 28px;

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

  border-radius: 9px;

  background:
    linear-gradient(
      145deg,
      #ff8155,
      #de4ca3
    );
}

.aitrap-floating-card-1 {
  left: 25px;
  bottom: 75px;
}

.aitrap-floating-card-2 {
  left: 75px;
  bottom: 22px;
}


/* copy */

.aitrap-story-content {
  padding: 48px 50px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.aitrap-story-top {
  margin-bottom: 14px;
}

.aitrap-story-top span {
  color: rgba(255,255,255,.34);

  font-size: 9px;
  line-height: 1;

  font-weight: 900;

  letter-spacing: 1.8px;
}

.aitrap-story-row {
  display: grid;

  grid-template-columns:
    44px 1fr;

  align-items: center;

  gap: 15px;

  padding: 18px 0;

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

.aitrap-story-num {
  width: 42px;
  height: 42px;

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

  border-radius: 12px;

  color: #ff8368;

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

  letter-spacing: 1px;

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

  background:
    rgba(255, 103, 77, .07);
}

.aitrap-story-row p {
  margin: 0;

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

  font-size: 18px;
  line-height: 1.45;

  font-weight: 600;
}

.aitrap-story-row strong {
  color: #fff;

  font-weight: 800;
}

.aitrap-story-row-final {
  border-bottom: 0;
}

.aitrap-story-row-final p {
  color: #fff;

  font-size: 22px;
}

.aitrap-story-row-final strong {
  background:
    linear-gradient(
      90deg,
      #ff9b58,
      #ff5a78
    );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* =========================================
   Hover
========================================= */

.aitrap-tool-card:hover
.aitrap-tool-info {
  border-color:
    rgba(255, 86, 132, .17);

  box-shadow:
    0 24px 55px rgba(0,0,0,.32),
    0 0 35px rgba(183, 50, 255, .04);
}

.aitrap-tool-card:hover
.aitrap-tool-icon {
  transform: scale(1.06) rotate(-2deg);
}

.aitrap-tool-icon {
  transition:
    transform .35s ease;
}


/* =========================================
   Responsive
========================================= */

@media (max-width: 1199px) {

  .aitrap-heading {
    letter-spacing: -2.5px;
  }

  .aitrap-story-content {
    padding:
      40px 35px;
  }

}


@media (max-width: 991px) {

  .aitrap-section {
    padding:
      80px 0;
  }

  .aitrap-tools-row {
    margin-top: 55px;
  }

  .aitrap-loop-panel {
    grid-template-columns: 1fr;

    gap: 10px;
  }

  .aitrap-loop-arrow {
    display: none;
  }

  .aitrap-alert-decoration {
    opacity: .4;
  }

  .aitrap-story {
    grid-template-columns: 1fr;
  }

  .aitrap-story-image {
    min-height: 430px;
  }

  .aitrap-story-shade {
    background:
      linear-gradient(
        to top,
        rgba(5,4,8,.80),
        transparent 60%
      );
  }

}


@media (max-width: 767px) {

  .aitrap-section {
    padding:
      62px 0 70px;
  }

  .aitrap-heading {
    font-size: 35px;

    letter-spacing: -1.6px;
  }

  .aitrap-intro {
    font-size: 15px;
  }

  .aitrap-tools-row {
    margin-top: 45px;
  }

  .aitrap-tool-media {
    width:
      calc(100% - 16px);

    margin-bottom: -13px;

    border-radius: 15px;
  }

  .aitrap-tool-info {
    min-height: 89px;

    padding:
      25px 33px 11px 10px;

    gap: 9px;

    border-radius: 16px;
  }

  .aitrap-tool-icon {
    width: 39px;
    height: 39px;

    flex-basis: 39px;

    border-radius: 12px;

    font-size: 14px;
  }

  .aitrap-tool-copy small {
    font-size: 6px;

    letter-spacing: .8px;
  }

  .aitrap-tool-copy h4 {
    font-size: 13px;
  }

  .aitrap-tool-dot {
    right: 12px;
    bottom: 18px;
  }

  .aitrap-loop-panel {
    margin-top: 55px;

    padding: 11px;

    border-radius: 20px;
  }

  .aitrap-loop-item {
    min-height: 78px;

    padding: 13px;

    border-radius: 15px;
  }

  .aitrap-alert {
    min-height: auto;

    padding: 28px 22px;

    gap: 17px;

    align-items: flex-start;

    border-radius: 21px;
  }

  .aitrap-alert-icon {
    width: 62px;
    height: 62px;

    flex-basis: 62px;

    border-radius: 18px;

    font-size: 22px;
  }

  .aitrap-alert-copy h3 {
    font-size: 29px;
  }

  .aitrap-alert-decoration {
    display: none;
  }

  .aitrap-story {
    border-radius: 21px;
  }

  .aitrap-story-image {
    min-height: 315px;
  }

  .aitrap-floating-card {
    padding: 8px 10px;

    font-size: 9px;
  }

  .aitrap-floating-card-1 {
    left: 15px;
    bottom: 60px;
  }

  .aitrap-floating-card-2 {
    left: 45px;
    bottom: 15px;
  }

  .aitrap-story-content {
    padding:
      28px 20px;
  }

  .aitrap-story-row {
    grid-template-columns:
      38px 1fr;

    gap: 11px;

    padding: 15px 0;
  }

  .aitrap-story-num {
    width: 37px;
    height: 37px;

    border-radius: 10px;
  }

  .aitrap-story-row p {
    font-size: 15px;
  }

  .aitrap-story-row-final p {
    font-size: 18px;
  }

}


@media (max-width: 430px) {

  .aitrap-heading {
    font-size: 30px;
  }

  .aitrap-eyebrow {
    font-size: 9px;

    letter-spacing: 1.2px;
  }

  .aitrap-tool-media {
    aspect-ratio:
      1.08 / 1;
  }

  .aitrap-tool-copy h4 {
    font-size: 12px;
  }

}
/* =========================================
   FINAL TOOL CARD RESPONSIVE OVERRIDES
   Keep this block at the end of the stylesheet.
========================================= */

@media (max-width: 1199px) {
  .aitrap-tool-info {
    min-height: 105px;
    gap: 13px;
    padding: 12px 39px 12px 12px;
    border-radius: 19px;
  }

  .aitrap-tool-icon {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border-radius: 14px;
  }

  .aitrap-tool-icon img {
    border-radius: 13px;
  }

  .aitrap-tool-copy h4 {
    font-size: 16px;
  }

  .aitrap-tool-card:nth-child(4) .aitrap-tool-copy h4,
  .aitrap-tool-card:nth-child(8) .aitrap-tool-copy h4 {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .aitrap-tools-row {
    margin-top: 45px;
  }

  .aitrap-tool-info {
    min-height: 87px;
    gap: 9px;
    padding: 9px 29px 9px 9px;
    border-radius: 16px;
  }

  .aitrap-tool-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 12px;
    font-size: inherit;
  }

  .aitrap-tool-icon img {
    border-radius: 11px;
  }

  .aitrap-tool-copy small {
    margin-bottom: 4px;
    font-size: 6px;
    letter-spacing: .8px;
  }

  .aitrap-tool-copy h4 {
    font-size: 13px;
    letter-spacing: -.2px;
  }

  .aitrap-tool-card:nth-child(4) .aitrap-tool-copy h4,
  .aitrap-tool-card:nth-child(8) .aitrap-tool-copy h4 {
    font-size: 11.5px;
  }

  .aitrap-tool-dot {
    right: 11px;
    bottom: 14px;
    width: 5px;
    height: 5px;

    box-shadow:
      0 0 0 4px rgba(255,75,119,.07),
      0 0 9px rgba(255,76,122,.65);
  }

  .aitrap-tool-info::before {
    width: 100px;
    height: 100px;
    top: -65px;
    right: -40px;
  }

  .aitrap-tool-info::after {
    width: 69px;
    height: 69px;
    top: -45px;
    right: -23px;
  }
}

@media (max-width: 430px) {
  .aitrap-tool-info {
    min-height: 78px;
    padding: 8px 24px 8px 8px;
    gap: 8px;
  }

  .aitrap-tool-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
  }

  .aitrap-tool-copy small {
    font-size: 5.5px;
    letter-spacing: .6px;
  }

  .aitrap-tool-copy h4 {
    font-size: 11px;
  }

  .aitrap-tool-card:nth-child(4) .aitrap-tool-copy h4,
  .aitrap-tool-card:nth-child(8) .aitrap-tool-copy h4 {
    font-size: 9.5px;
  }
}
.dai-calc-wrap {
  position: relative;
  padding: 55px 35px;
  overflow: hidden;
  /* border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 30px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(91, 104, 255, 0.18),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #111827 0%,
      #090e18 55%,
      #070b12 100%
    );

  box-shadow:
    0 35px 80px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255,255,255,.05); */
}


/* subtle grid */
.dai-calc-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

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

  background-size: 42px 42px;
}


.dai-calc-wrap > * {
  position: relative;
  z-index: 2;
}


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

.dai-calc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 13px;

  color: #8997ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}


.dai-calc-kicker span {
  width: 30px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #7f8dff
    );
}


.dai-calc-kicker span:last-child {
  background:
    linear-gradient(
      90deg,
      #7f8dff,
      transparent
    );
}


.dai-calc-heading {
  margin: 0;

  color: #ffffff;

  font-size: clamp(34px, 4vw, 54px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -2px;
}


.dai-calc-heading span {
  background:
    linear-gradient(
      90deg,
      #7788ff,
      #b29cff
    );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


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

.dai-calc-card {
  position: relative;
  height: 100%;
  overflow: hidden;

  padding: 7px;

  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.09);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.07),
      rgba(255,255,255,.018)
    );

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

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


.dai-calc-card:hover {
  transform: translateY(-5px);

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


.dai-calc-card-out:hover {
  border-color:
    rgba(255, 92, 112, .28);
}


.dai-calc-card-in:hover {
  border-color:
    rgba(62, 225, 169, .28);
}


/* top glow line */

.dai-calc-card::before {
  content: "";
  position: absolute;

  top: 0;
  left: 18%;
  right: 18%;

  height: 1px;
}


.dai-calc-card-out::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      #ff6073,
      transparent
    );
}


.dai-calc-card-in::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      #40e0aa,
      transparent
    );
}


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

.dai-calc-card-head {
  min-height: 95px;

  display: flex;
  align-items: center;
  gap: 15px;

  padding: 20px 19px;
}


.dai-calc-icon {
  width: 50px;
  height: 50px;

  flex: 0 0 50px;

  display: grid;
  place-items: center;

  border-radius: 15px;

  font-size: 18px;
}


.dai-calc-icon-red {
  color: #ff7484;

  background:
    rgba(255, 74, 100, .08);

  border:
    1px solid rgba(255, 91, 112, .18);
}


.dai-calc-icon-green {
  color: #46e1ad;

  background:
    rgba(48, 213, 157, .08);

  border:
    1px solid rgba(55, 223, 166, .18);
}


.dai-calc-label {
  display: block;

  margin-bottom: 5px;

  color: #69758b;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.6px;
}


.dai-calc-card-head h3 {
  margin: 0;

  color: #f3f6fc;

  font-size: 19px;
  line-height: 1.2;
  font-weight: 800;
}


/* =========================
   TABLE
========================= */

.dai-calc-body {
  overflow: hidden;

  border-radius: 18px;

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

  background: #0a101a;
}


.dai-calc-row {
  display: grid;

  grid-template-columns:
    1.55fr .75fr .95fr;
}


.dai-calc-row-head {
  background:
    linear-gradient(
      90deg,
      #131d2e,
      #111927
    );
}


.dai-calc-row-head > div {
  padding: 14px 13px;

  color: #8e99ad;

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

  text-align: center;
}


.dai-calc-row-head > div:first-child {
  text-align: left;
}


.dai-calc-row-head > div:not(:last-child),
.dai-calc-row-data > div:not(:last-child) {
  border-right:
    1px solid rgba(255,255,255,.06);
}


.dai-calc-row-data > div {
  min-height: 105px;

  padding: 18px 13px;

  display: flex;
  align-items: center;
  justify-content: center;
}


.dai-calc-row-data > div:first-child {
  justify-content: flex-start;
}


/* =========================
   PLAN
========================= */

.dai-plan {
  display: flex;
  align-items: center;
  gap: 11px;
}


.dai-plan-number {
  width: 41px;
  height: 41px;

  flex: 0 0 41px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  color: #ff7484;

  background:
    rgba(255, 90, 108, .08);

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

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


.dai-plan-number-green {
  color: #43e0ac;

  background:
    rgba(55, 220, 164, .08);

  border-color:
    rgba(55, 220, 164, .15);
}


.dai-plan strong {
  display: block;

  color: #eef2f8;

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


.dai-plan small {
  display: block;

  margin-top: 3px;

  color: #747f92;

  font-size: 11px;
}


/* =========================
   VALUES
========================= */

.dai-value-cell > strong {
  color: #ffffff;

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


.dai-year-value {
  text-align: center;
}


.dai-year-value strong {
  display: block;

  font-size: 23px;
  line-height: 1;
  font-weight: 900;
}


.dai-year-value span {
  display: block;

  margin-top: 7px;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}


.dai-red-text {
  color: #ff6c7c;
}


.dai-green-text {
  color: #42dfa9;
}


/* mobile label */

.dai-mobile-title {
  display: none;
}


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

.dai-calc-bottom {
  margin-top: 38px;

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

  gap: 18px;

  padding: 24px 30px;

  border-radius: 20px;

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

  background:
    linear-gradient(
      135deg,
      rgba(105, 117, 255, .10),
      rgba(255,255,255,.025)
    );

  text-align: center;
}


.dai-calc-bottom-icon {
  width: 48px;
  height: 48px;

  flex: 0 0 48px;

  display: grid;
  place-items: center;

  border-radius: 14px;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #6273ff,
      #8b65ff
    );

  box-shadow:
    0 10px 30px
    rgba(97, 112, 255, .24);
}


.dai-calc-bottom h3 {
  margin: 0;

  color: #ffffff;

  font-size: 20px;
  line-height: 1.4;
  font-weight: 900;
}


.dai-calc-bottom h3 span {
  color: #48dfad;
}


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

@media (max-width: 767px) {

  .dai-calc-wrap {
    padding: 45px 15px;

    border-radius: 22px;
  }


  .dai-calc-heading {
    font-size: 38px;

    letter-spacing: -1.5px;
  }


  .dai-calc-card-head {
    min-height: unset;

    padding: 17px 13px;
  }


  .dai-calc-card-head h3 {
    font-size: 16px;
  }


  .dai-calc-icon {
    width: 44px;
    height: 44px;

    flex-basis: 44px;

    border-radius: 13px;
  }


  .dai-calc-row-head {
    display: none;
  }


  .dai-calc-row-data {
    display: block;

    padding: 5px 14px;
  }


  .dai-calc-row-data > div {
    min-height: unset;

    padding: 15px 0;

    display: flex;

    justify-content:
      space-between !important;

    border-right:
      0 !important;

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


  .dai-calc-row-data > div:last-child {
    border-bottom: 0;
  }


  .dai-calc-row-data > div:first-child {
    display: block;
  }


  .dai-mobile-title {
    display: block;

    margin-bottom: 10px;

    color: #69758a;

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

    letter-spacing: 1px;
    text-transform: uppercase;
  }


  .dai-value-cell .dai-mobile-title {
    margin: 0;
  }


  .dai-year-value {
    text-align: right;
  }


  .dai-calc-bottom {
    padding: 20px 15px;

    flex-direction: column;

    gap: 12px;
  }


  .dai-calc-bottom h3 {
    font-size: 17px;
  }

}


/* =========================================================
   OWNSAAS AI - ULTRA PREMIUM MODEL FLIP
========================================================= */

.osaas-flip-premium {
  --osaas-dark: #101c35;
  --osaas-text: #3f4b63;

  --osaas-purple: #9d46d3;
  --osaas-purple-dark: #7131be;

  --osaas-pink: #e35aaa;
  --osaas-pink-light: #f178be;

  position: relative;
  overflow: hidden;

  padding: 90px 0 105px;

  background:
    radial-gradient(
      circle at 6% 15%,
      rgba(186, 85, 220, 0.1),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 82%,
      rgba(232, 91, 172, 0.09),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fdfbff 48%,
      #ffffff 100%
    );

  font-family: inter, Helvetica, sans-serif;

  font-size: 18px;
}


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

.osaas-fp-bg,
.osaas-fp-grid {
  position: absolute;
  inset: 0;

  pointer-events: none;
}

.osaas-fp-grid {
  opacity: 0.55;

  background-image:
    linear-gradient(
      rgba(130, 71, 188, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(130, 71, 188, 0.035) 1px,
      transparent 1px
    );

  background-size: 55px 55px;

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

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


.osaas-fp-orb {
  position: absolute;

  border-radius: 50%;

  filter: blur(90px);
}


.osaas-fp-orb-1 {
  width: 420px;
  height: 420px;

  top: 2%;
  left: -230px;

  background:
    rgba(172, 72, 211, 0.13);
}


.osaas-fp-orb-2 {
  width: 500px;
  height: 500px;

  right: -250px;
  bottom: -120px;

  background:
    rgba(230, 82, 170, 0.11);
}


/* =========================================================
   LOGO AREA
========================================================= */

.osaas-fp-brand {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 18px;

  margin-bottom: 48px;
}


.osaas-fp-brand-line {
  width: 95px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(159, 70, 207, 0.45)
    );
}


.osaas-fp-brand-line:last-child {
  transform: rotate(180deg);
}


.osaas-fp-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 56px;

  padding: 8px 22px;

  border: 1px solid rgba(139, 67, 194, 0.14);

  border-radius: 100px;

  background:
    rgba(255, 255, 255, 0.92);

  box-shadow:
    0 15px 40px rgba(55, 23, 83, 0.07),
    inset 0 1px 0 #fff;
}


.osaas-fp-logo {
  width: auto;
  max-width: 185px;
  max-height: 43px;

  object-fit: contain;
}


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

.osaas-fp-content {
  position: relative;

  padding-right: 25px;
}


/* Kicker */

.osaas-fp-kicker {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  margin-bottom: 19px;

  padding: 6px 15px 6px 7px;

  border: 1px solid rgba(163, 72, 206, 0.17);

  border-radius: 100px;

  background: #fff;

  box-shadow:
    0 10px 28px rgba(90, 32, 132, 0.07);

  color: #9340bf;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
}


.osaas-fp-kicker-icon {
  width: 31px;
  height: 31px;

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

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      var(--osaas-purple),
      var(--osaas-pink)
    );

  color: #fff;

  font-size: 12px;

  box-shadow:
    0 7px 17px rgba(174, 65, 192, 0.25);
}


/* Heading */

.osaas-fp-heading {
margin: 0 0 30px;
  color: var(--osaas-dark);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -2.2px;
}


.osaas-fp-heading span {
  /* display: block; */

  margin-top: 5px;

  color: transparent;

  background:
    linear-gradient(
      92deg,
      #9140cb,
      #ba55d4 48%,
      #e359a7
    );

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


/* Paragraph */

.osaas-fp-copy,
.osaas-fp-description {
  color: var(--osaas-text);

  font-size: 18px;
  line-height: 1.65;
}


.osaas-fp-copy {
  margin-bottom: 13px;
}


/* =========================================================
   OLD QUESTION
========================================================= */

.osaas-fp-old-box {
  display: flex;
  align-items: center;

  gap: 15px;

  padding: 17px 20px;

  border: 1px solid #e5e8ed;

  border-radius: 17px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f6f7f9
    );

  box-shadow:
    0 12px 28px rgba(32, 45, 62, 0.055);
}


.osaas-fp-old-icon {
  flex: 0 0 47px;

  width: 47px;
  height: 47px;

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

  border-radius: 13px;

  background:
    linear-gradient(
      145deg,
      #fff,
      #edf0f3
    );

  color: #737d8e;

  font-size: 18px;

  border: 1px solid #e0e4e9;
}


.osaas-fp-small-label {
  display: block;

  margin-bottom: 3px;

  color: #9a55bc;

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

  letter-spacing: 1.5px;
}


.osaas-fp-old-box .osaas-fp-small-label {
  color: #939aa7;
}


.osaas-fp-old-text {
  color: #344057;

  font-size: 18px;
  font-weight: 700;
  font-style: italic;

  line-height: 1.4;
}


/* =========================================================
   SWITCH
========================================================= */

.osaas-fp-switch {
  width: 200px;

  display: flex;
  align-items: center;

  margin: 15px 0;
}


.osaas-fp-switch span {
  flex: 1;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(169, 72, 204, 0.28)
    );
}


.osaas-fp-switch span:last-child {
  transform: rotate(180deg);
}


.osaas-fp-switch-icon {
  flex: 0 0 36px;

  width: 36px;
  height: 36px;

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

  margin: 0 10px;

  border: 1px solid rgba(161, 71, 202, 0.17);

  border-radius: 50%;

  background: #fff;

  color: #a648c8;

  font-size: 12px;

  box-shadow:
    0 7px 20px rgba(90, 36, 130, 0.08);
}


/* =========================================================
   MAIN QUESTION
========================================================= */

.osaas-fp-main-question {
  position: relative;

  overflow: hidden;

  display: flex;
  align-items: center;

  gap: 15px;

  padding: 21px;

  border: 1px solid rgba(178, 74, 211, 0.22);

  border-radius: 19px;

  background:
    linear-gradient(
      125deg,
      #fff 0%,
      #fbf5ff 55%,
      #fff5fa 100%
    );

  box-shadow:
    0 18px 45px rgba(149, 50, 185, 0.11);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}


.osaas-fp-main-question:hover {
  transform: translateY(-4px);

  box-shadow:
    0 25px 55px rgba(149, 50, 185, 0.16);
}


.osaas-fp-main-glow {
  position: absolute;

  width: 180px;
  height: 180px;

  right: -70px;
  top: -80px;

  border-radius: 50%;

  background:
    rgba(229, 87, 170, 0.15);

  filter: blur(25px);
}


.osaas-fp-main-icon {
  position: relative;
  z-index: 2;

  flex: 0 0 57px;

  width: 57px;
  height: 57px;

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

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      #9a45d0,
      #cf55c4,
      #ed62a2
    );

  color: #fff;

  font-size: 21px;

  box-shadow:
    0 12px 28px rgba(182, 58, 186, 0.26);
}


.osaas-fp-main-question-copy {
  position: relative;
  z-index: 2;
}


.osaas-fp-main-text {
  color: var(--osaas-dark);

  font-size: clamp(19px, 2vw, 26px);
  font-weight: 900;

  line-height: 1.3;

  letter-spacing: -0.5px;
}


/* Description */

.osaas-fp-description {
  margin-top: 23px;
}


.osaas-fp-description-bold {
  margin-top: 7px;

  color: var(--osaas-dark);

  font-weight: 800;
}


/* =========================================================
   RESULT BOX
========================================================= */

.osaas-fp-result {
  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;

  gap: 17px;

  margin-top: 24px;

  padding: 21px;

  border-radius: 20px;

  background:
    radial-gradient(
      circle at 0% 50%,
      rgba(194, 83, 223, 0.18),
      transparent 37%
    ),
    linear-gradient(
      125deg,
      #11192e,
      #20203b 60%,
      #281b39
    );

  box-shadow:
    0 20px 50px rgba(28, 19, 45, 0.18);
}


.osaas-fp-result::after {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  right: -70px;
  top: -100px;

  border-radius: 50%;

  background:
    rgba(231, 87, 174, 0.19);

  filter: blur(40px);
}


.osaas-fp-result-icon {
  position: relative;
  z-index: 2;

  flex: 0 0 53px;

  width: 53px;
  height: 53px;

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

  border-radius: 15px;

  background:
    linear-gradient(
      135deg,
      var(--osaas-purple),
      var(--osaas-pink)
    );

  color: #fff;

  font-size: 21px;

  box-shadow:
    0 10px 26px rgba(204, 69, 190, 0.25);
}


.osaas-fp-result-copy {
  position: relative;
  z-index: 2;
}


.osaas-fp-result-copy > span {
  display: block;

  margin-bottom: 4px;

  color: #dd9ce9;

  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
}


.osaas-fp-result h3 {
  margin: 0;

  color: #fff;

  font-size: 21px;
  font-weight: 900;
  line-height: 1.3;
}


.osaas-fp-result h3 strong {
  color: transparent;

  background:
    linear-gradient(
      90deg,
      #ca6ae5,
      #fa75bd
    );

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


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

.osaas-fp-visual {
  position: relative;

  max-width: 660px;

  min-height: 650px;

  margin-left: auto;

  display: flex;
  align-items: center;
  justify-content: center;
}


/* Ring behind image */

.osaas-fp-visual-ring {
  position: absolute;

  width: 570px;
  height: 570px;

  border-radius: 50%;

  border: 1px solid rgba(177, 72, 210, 0.12);

  background:
    radial-gradient(
      circle,
      rgba(196, 85, 219, 0.11),
      rgba(255,255,255,0) 68%
    );

  box-shadow:
    inset 0 0 80px rgba(182, 76, 215, 0.05);
}


.osaas-fp-visual-ring::before,
.osaas-fp-visual-ring::after {
  content: "";

  position: absolute;

  inset: 50% auto auto 50%;

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

  border-radius: 50%;

  border: 1px dashed rgba(169, 74, 207, 0.15);
}


.osaas-fp-visual-ring::before {
  width: 460px;
  height: 460px;
}


.osaas-fp-visual-ring::after {
  width: 350px;
  height: 350px;
}


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

.osaas-fp-image-card {
  position: relative;
  z-index: 4;

  width: 82%;

  padding: 9px;

  border: 1px solid rgba(160, 75, 205, 0.22);

  border-radius: 28px;

  background:
    rgba(255, 255, 255, 0.84);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 40px 90px rgba(69, 30, 99, 0.17),
    0 10px 30px rgba(92, 38, 129, 0.08),
    inset 0 1px 0 #fff;

  transform:
    perspective(1200px)
    rotateY(-5deg)
    rotateX(2deg);
}


.osaas-fp-image-topbar {
  min-height: 49px;

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

  padding: 0 9px 0 12px;
}


.osaas-fp-window-dots {
  display: flex;

  gap: 5px;
}


.osaas-fp-window-dots span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #ddd;
}


.osaas-fp-window-dots span:nth-child(1) {
  background: #d966b0;
}


.osaas-fp-window-dots span:nth-child(2) {
  background: #b45bd3;
}


.osaas-fp-window-dots span:nth-child(3) {
  background: #8e4acb;
}


.osaas-fp-image-pill {
  display: flex;
  align-items: center;

  gap: 6px;

  padding: 7px 10px;

  border: 1px solid rgba(164, 70, 205, 0.13);

  border-radius: 50px;

  background: #faf5fd;

  color: #8c40bd;

  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
}


.osaas-fp-image-area {
  position: relative;

  overflow: hidden;

  height: 475px;

  border-radius: 21px;

  background:
    linear-gradient(
      135deg,
      #f7f1fb,
      #fff
    );
}


.osaas-fp-main-image {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


.osaas-fp-image-overlay {
  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      to top,
      rgba(40, 14, 58, 0.1),
      transparent 35%
    );
}


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

.osaas-fp-float,
.osaas-fp-revenue {
  position: absolute;
  z-index: 10;

  display: flex;
  align-items: center;

  gap: 10px;

  border: 1px solid rgba(142, 69, 194, 0.16);

  background:
    rgba(255, 255, 255, 0.93);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 18px 45px rgba(67, 29, 95, 0.13),
    inset 0 1px 0 #fff;
}


.osaas-fp-float {
  padding: 11px 14px;

  border-radius: 15px;
}


.osaas-fp-float-1 {
  top: 13%;
  left: -1%;
}


.osaas-fp-float-2 {
  right: -2%;
  top: 38%;
}


.osaas-fp-float-icon {
  flex: 0 0 38px;

  width: 38px;
  height: 38px;

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

  border-radius: 11px;

  background: #f0f1f4;

  color: #687486;

  font-size: 14px;
}


.osaas-fp-float-icon-purple {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      #9c46d1,
      #e15aab
    );
}


.osaas-fp-float small,
.osaas-fp-revenue small {
  display: block;

  margin-bottom: 2px;

  color: #969dab;

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

  letter-spacing: 1px;
}


.osaas-fp-float strong,
.osaas-fp-revenue strong {
  display: block;

  color: #172239;

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


/* Revenue */

.osaas-fp-revenue {
  left: 50%;
  bottom: 3%;

  transform: translateX(-50%);

  min-width: 190px;

  padding: 13px 16px;

  border-radius: 16px;
}


.osaas-fp-revenue-icon {
  flex: 0 0 40px;

  width: 40px;
  height: 40px;

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

  border-radius: 12px;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      #8f40cb,
      #df58ad
    );
}


/* Stars */

.osaas-fp-star {
  position: absolute;
  z-index: 7;

  color: #c15bd8;

  text-shadow:
    0 0 20px rgba(193, 91, 216, 0.3);
}


.osaas-fp-star-1 {
  right: 2%;
  top: 15%;

  font-size: 30px;
}


.osaas-fp-star-2 {
  left: 4%;
  bottom: 19%;

  font-size: 18px;
}


/* Bottom shadow */

.osaas-fp-shadow {
  position: absolute;

  width: 65%;
  height: 35px;

  bottom: 2%;

  border-radius: 50%;

  background:
    rgba(72, 31, 99, 0.12);

  filter: blur(20px);
}


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

@media (max-width: 991px) {

  .osaas-flip-premium {
    padding: 70px 0 80px;
  }


  .osaas-fp-brand {
    margin-bottom: 38px;
  }


  .osaas-fp-content {
    padding-right: 0;
  }


  .osaas-fp-heading {
    font-size: 38px;

    letter-spacing: -1.3px;
  }


  .osaas-fp-main-text {
    font-size: 20px;
  }


  .osaas-fp-visual {
    min-height: 520px;
  }


  .osaas-fp-visual-ring {
    width: 450px;
    height: 450px;
  }


  .osaas-fp-visual-ring::before {
    width: 370px;
    height: 370px;
  }


  .osaas-fp-visual-ring::after {
    width: 290px;
    height: 290px;
  }


  .osaas-fp-image-card {
    width: 88%;
  }


  .osaas-fp-image-area {
    height: 390px;
  }

}


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

@media (max-width: 767px) {

  .osaas-flip-premium {
    padding: 55px 0 65px;

    font-size: 18px;
  }


  .osaas-fp-brand {
    margin-bottom: 30px;
  }


  .osaas-fp-brand-line {
    width: 38px;
  }


  .osaas-fp-logo-wrap {
    min-height: 48px;

    padding: 7px 16px;
  }


  .osaas-fp-logo {
    max-width: 145px;
  }


  .osaas-fp-heading {
    font-size: 34px;

    line-height: 1.08;

    margin-bottom: 25px;
  }


  .osaas-fp-copy,
  .osaas-fp-description {
    font-size: 18px;
  }


  .osaas-fp-main-question {
    padding: 18px 16px;
  }


  .osaas-fp-main-icon {
    flex: 0 0 49px;

    width: 49px;
    height: 49px;

    font-size: 18px;
  }


  .osaas-fp-main-text {
    font-size: 19px;
  }


  .osaas-fp-result {
    padding: 19px 16px;
  }


  .osaas-fp-result h3 {
    font-size: 19px;
  }


  .osaas-fp-visual {
    min-height: 560px;

    margin-top: 45px;
  }


  .osaas-fp-image-card {
    width: 88%;

    transform: none;
  }


  .osaas-fp-image-area {
    height: 410px;
  }


  .osaas-fp-float-1 {
    left: 0;
  }


  .osaas-fp-float-2 {
    right: 0;
  }

}


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

@media (max-width: 480px) {

  .osaas-fp-heading {
    font-size: 30px;
  }


  .osaas-fp-old-box,
  .osaas-fp-main-question {
    align-items: flex-start;
  }


  .osaas-fp-old-text {
    font-size: 16px;
  }


  .osaas-fp-main-text {
    font-size: 18px;
  }


  .osaas-fp-result-icon {
    display: none;
  }


  .osaas-fp-visual {
    min-height: 480px;
  }


  .osaas-fp-visual-ring {
    width: 360px;
    height: 360px;
  }


  .osaas-fp-visual-ring::before {
    width: 290px;
    height: 290px;
  }


  .osaas-fp-visual-ring::after {
    width: 220px;
    height: 220px;
  }


  .osaas-fp-image-card {
    width: 92%;
  }


  .osaas-fp-image-area {
    height: 335px;
  }


  .osaas-fp-float {
    transform: scale(0.88);
  }


  .osaas-fp-float-1 {
    left: -12px;
  }


  .osaas-fp-float-2 {
    right: -12px;
  }


  .osaas-fp-revenue {
    bottom: 0;

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

}

/* =========================================================
   OWNSAAS AI - TWO TYPES / AI GOLD RUSH
========================================================= */

.os-goldrush-section {
  --os-bg: #080a12;
  --os-bg-2: #0d101c;
  --os-card: #10131f;
  --os-card-2: #151827;

  --os-white: #ffffff;
  --os-text: #cbd0dc;
  --os-muted: #83899b;

  --os-purple: #a94bd9;
  --os-purple-2: #7f3bd0;
  --os-pink: #e45cab;
  --os-pink-2: #f178be;

  position: relative;
  overflow: hidden;

  padding: 90px 0 105px;

background: url(../images/os-goldrush-section.png) center top no-repeat;
  
    background-size: auto;
  background-size: cover;

  color: var(--os-white);

  font-size: 18px;
}


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

.os-goldrush-bg,
.os-goldrush-grid,
.os-goldrush-noise {
  position: absolute;
  inset: 0;

  pointer-events: none;
}


.os-goldrush-grid {
  opacity: 0.22;

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

  background-size: 60px 60px;

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

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


.os-goldrush-noise {
  opacity: 0.13;

  background-image:
    radial-gradient(
      rgba(255,255,255,0.14) 0.7px,
      transparent 0.7px
    );

  background-size: 16px 16px;
}


.os-goldrush-orb {
  position: absolute;

  border-radius: 50%;

  filter: blur(100px);
}


.os-goldrush-orb-1 {
  width: 450px;
  height: 450px;

  left: -230px;
  top: 18%;

  background:
    rgba(161, 67, 210, 0.18);
}


.os-goldrush-orb-2 {
  width: 520px;
  height: 520px;

  right: -260px;
  bottom: -100px;

  background:
    rgba(229, 82, 169, 0.14);
}


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

.os-goldrush-brand {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 20px;

  margin-bottom: 35px;
}


.os-goldrush-brand-line {
  width: 95px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(195, 93, 224, 0.55)
    );
}


.os-goldrush-brand-line:last-child {
  transform: rotate(180deg);
}


.os-goldrush-logo-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 58px;

  padding: 8px 22px;

  border: 1px solid rgba(201, 103, 229, 0.19);

  border-radius: 100px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.09),
      rgba(255,255,255,0.035)
    );

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 15px 50px rgba(0,0,0,0.25),
    0 0 40px rgba(176, 73, 212, 0.08);
}


.os-goldrush-logo {
  display: block;

  width: auto;
  max-width: 190px;
  max-height: 43px;

  object-fit: contain;
}


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

.os-goldrush-kicker {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  margin-bottom: 17px;

  color: #d784ee;

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

  letter-spacing: 2px;
}


.os-goldrush-kicker-dot {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      var(--os-purple),
      var(--os-pink)
    );

  box-shadow:
    0 0 12px rgba(220, 93, 196, 0.8);
}


.os-goldrush-heading {
  max-width: 1000px;

  margin: 0 auto;

  color: #fff;

  font-size: clamp(35px, 4vw, 58px);
  font-weight: 900;

  line-height: 1.08;

  letter-spacing: -2px;
}


.os-goldrush-heading span {
  display: block;

  color: transparent;

  background:
    linear-gradient(
      90deg,
      #b958e1 0%,
      #d060ce 45%,
      #ef70b4 100%
    );

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


.os-goldrush-heading-line {
  max-width: 300px;

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

  gap: 13px;

  margin: 25px auto 0;
}


.os-goldrush-heading-line span {
  flex: 1;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(199, 89, 223, 0.48)
    );
}


.os-goldrush-heading-line span:last-child {
  transform: rotate(180deg);
}


.os-goldrush-heading-line b {
  color: #cd64df;

  font-size: 12px;

  text-shadow:
    0 0 18px rgba(208, 90, 221, 0.65);
}


/* =========================================================
   ROW
========================================================= */

.os-goldrush-row {
  margin-top: 55px;
}


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

.os-goldrush-card {
  position: relative;
  isolation: isolate;

  height: 100%;

  overflow: hidden;

  padding: 13px;

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

  border-radius: 30px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.07),
      rgba(255,255,255,0.025)
    );

  box-shadow:
    0 35px 80px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.07);

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


.os-goldrush-card:hover {
  transform: translateY(-7px);
}


.os-goldrush-customer:hover {
  border-color:
    rgba(152, 159, 178, 0.23);

  box-shadow:
    0 40px 90px rgba(0,0,0,0.4);
}


.os-goldrush-owner {
  border-color:
    rgba(193, 84, 220, 0.24);

  background:
    linear-gradient(
      145deg,
      rgba(171, 68, 209, 0.09),
      rgba(255,255,255,0.035) 45%,
      rgba(225, 82, 168, 0.07)
    );

  box-shadow:
    0 40px 95px rgba(0,0,0,0.4),
    0 0 50px rgba(166, 62, 207, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.08);
}


.os-goldrush-owner:hover {
  border-color:
    rgba(209, 96, 226, 0.42);

  box-shadow:
    0 45px 110px rgba(0,0,0,0.44),
    0 0 75px rgba(177, 67, 210, 0.13);
}


/* =========================================================
   OWNER BADGE
========================================================= */

.os-goldrush-owner-badge {
  position: absolute;
  z-index: 8;

  top: 22px;
  right: 23px;

  display: inline-flex;
  align-items: center;

  gap: 6px;

  padding: 7px 10px;

  border: 1px solid rgba(228, 110, 222, 0.23);

  border-radius: 50px;

  background:
    rgba(30, 18, 39, 0.83);

  backdrop-filter: blur(12px);

  color: #e891f0;

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

  letter-spacing: 1.1px;

  box-shadow:
    0 8px 25px rgba(0,0,0,0.25);
}


.os-goldrush-owner-badge span {
  color: #ec74bd;

  font-size: 11px;
}


.os-goldrush-owner-glow {
  position: absolute;
  z-index: -1;

  width: 300px;
  height: 300px;

  right: -120px;
  top: -130px;

  border-radius: 50%;

  background:
    rgba(217, 85, 191, 0.13);

  filter: blur(70px);
}


/* =========================================================
   CARD HEADER
========================================================= */

.os-goldrush-card-head {
  position: relative;

  min-height: 145px;

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

  gap: 20px;

  padding: 27px 25px 23px;
}


.os-goldrush-number {
  display: block;

  margin-bottom: 8px;

  color: rgba(255,255,255,0.16);

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

  letter-spacing: 2px;
}


.os-goldrush-type {
  margin-bottom: 4px;

  color: #b85ade;

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

  letter-spacing: 1.8px;
}


.os-goldrush-card h3 {
  margin: 0;

  color: #fff;

  font-size: clamp(28px, 3vw, 40px);
  font-weight: 900;

  line-height: 1.1;

  letter-spacing: -1.2px;
}


.os-goldrush-status {
  flex-shrink: 0;

  display: inline-flex;
  align-items: center;

  gap: 7px;

  padding: 8px 11px;

  border-radius: 50px;

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

  letter-spacing: 1.2px;
}


.os-goldrush-status span {
  width: 6px;
  height: 6px;

  border-radius: 50%;
}


.os-goldrush-status-customer {
  color: #b9bec9;

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

  background:
    rgba(255,255,255,0.045);
}


.os-goldrush-status-customer span {
  background: #81899b;

  box-shadow:
    0 0 8px rgba(150, 158, 178, 0.45);
}


.os-goldrush-status-owner {
  color: #ea92eb;

  border:
    1px solid rgba(201, 95, 223, 0.19);

  background:
    rgba(179, 74, 209, 0.09);
}


.os-goldrush-status-owner span {
  background:
    linear-gradient(
      135deg,
      var(--os-purple),
      var(--os-pink)
    );

  box-shadow:
    0 0 10px rgba(222, 82, 181, 0.65);
}


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

.os-goldrush-image-wrap {
  position: relative;

  overflow: hidden;

  height: 320px;

  border-radius: 22px;

  background: #171a25;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05);
}


.os-goldrush-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.7s ease;
}


.os-goldrush-card:hover .os-goldrush-image {
  transform: scale(1.035);
}


.os-goldrush-image-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(8,10,17,0.92) 0%,
      rgba(8,10,17,0.20) 47%,
      rgba(8,10,17,0.04) 100%
    );
}


.os-goldrush-owner-overlay {
  background:
    linear-gradient(
      to top,
      rgba(15,8,21,0.93) 0%,
      rgba(102,35,119,0.12) 50%,
      rgba(8,10,17,0.03) 100%
    );
}


/* Image Bottom Label */

.os-goldrush-image-label {
  position: absolute;

  left: 18px;
  bottom: 18px;

  display: flex;
  align-items: center;

  gap: 11px;

  padding: 10px 13px;

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

  border-radius: 14px;

  background:
    rgba(13, 15, 25, 0.74);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

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


.os-goldrush-label-icon {
  flex: 0 0 37px;

  width: 37px;
  height: 37px;

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

  border-radius: 10px;

  background:
    rgba(255,255,255,0.07);

  color: #b6bac5;

  font-size: 16px;
}


.os-goldrush-owner-label
.os-goldrush-label-icon {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      var(--os-purple),
      var(--os-pink)
    );

  box-shadow:
    0 8px 20px rgba(185, 70, 201, 0.25);
}


.os-goldrush-image-label small {
  display: block;

  margin-bottom: 1px;

  color: #888e9d;

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

  letter-spacing: 1.1px;
}


.os-goldrush-image-label strong {
  display: block;

  color: #fff;

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


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

.os-goldrush-content {
  position: relative;

  padding: 28px 24px 24px;
}


.os-goldrush-content::before {
  content: "";

  position: absolute;

  left: 44px;
  top: 43px;
  bottom: 44px;

  width: 1px;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.09),
      rgba(255,255,255,0.025)
    );
}


.os-goldrush-owner
.os-goldrush-content::before {
  background:
    linear-gradient(
      to bottom,
      rgba(190, 76, 220, 0.35),
      rgba(228, 88, 172, 0.05)
    );
}


.os-goldrush-step {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;

  gap: 15px;

  min-height: 53px;

  padding: 6px 0;
}


.os-goldrush-step-num {
  flex: 0 0 41px;

  width: 41px;
  height: 41px;

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

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

  border-radius: 12px;

  background:
    #121520;

  color: #7d8493;

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

  letter-spacing: 0.5px;

  box-shadow:
    0 7px 18px rgba(0,0,0,0.2);
}


.os-goldrush-owner
.os-goldrush-step-num {
  border-color:
    rgba(184, 77, 213, 0.17);

  background:
    linear-gradient(
      145deg,
      rgba(171, 65, 207, 0.14),
      rgba(229, 82, 168, 0.06)
    );

  color: #d983e7;
}


.os-goldrush-step p {
  margin: 0;

  color: #d0d3dc;

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

  line-height: 1.5;
}


.os-goldrush-step-final p {
  color: #fff;

  font-weight: 700;
}


/* =========================================================
   BOTTOM BOX
========================================================= */

.os-goldrush-card-bottom {
  display: flex;
  align-items: center;

  gap: 13px;

  margin: 0 13px 13px;

  padding: 17px 18px;

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

  border-radius: 17px;

  background:
    rgba(255,255,255,0.035);
}


.os-goldrush-owner-bottom {
  border-color:
    rgba(198, 89, 219, 0.18);

  background:
    linear-gradient(
      120deg,
      rgba(165, 63, 204, 0.14),
      rgba(226, 81, 167, 0.08)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04);
}


.os-goldrush-bottom-icon {
  flex: 0 0 44px;

  width: 44px;
  height: 44px;

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

  border-radius: 12px;

  background:
    rgba(255,255,255,0.06);

  color: #9299a8;

  font-size: 19px;
}


.os-goldrush-owner-bottom
.os-goldrush-bottom-icon {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      var(--os-purple),
      var(--os-pink)
    );

  box-shadow:
    0 9px 25px rgba(190, 65, 192, 0.24);
}


.os-goldrush-bottom-copy small {
  display: block;

  margin-bottom: 3px;

  color: #777e8d;

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

  letter-spacing: 1.2px;
}


.os-goldrush-owner-bottom
.os-goldrush-bottom-copy small {
  color: #d47de0;
}


.os-goldrush-bottom-copy strong {
  display: block;

  color: #e4e6ec;

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

  line-height: 1.35;
}


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

@media (max-width: 991px) {

  .os-goldrush-section {
    padding: 70px 0 80px;
  }


  .os-goldrush-row {
    margin-top: 45px;
  }


  .os-goldrush-card-head {
    padding:
      23px
      18px
      20px;
  }


  .os-goldrush-card h3 {
    font-size: 28px;
  }


  .os-goldrush-image-wrap {
    height: 275px;
  }


  .os-goldrush-status {
    display: none;
  }


  .os-goldrush-content {
    padding:
      24px
      17px
      20px;
  }


  .os-goldrush-content::before {
    left: 37px;
  }


  .os-goldrush-step {
    gap: 12px;
  }


  .os-goldrush-step-num {
    flex: 0 0 40px;

    width: 40px;
    height: 40px;
  }

}


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

@media (max-width: 767px) {

  .os-goldrush-section {
    padding: 55px 0 65px;

    font-size: 18px;
  }


  .os-goldrush-brand {
    margin-bottom: 27px;
  }


  .os-goldrush-brand-line {
    width: 38px;
  }


  .os-goldrush-logo-box {
    min-height: 50px;

    padding: 7px 16px;
  }


  .os-goldrush-logo {
    max-width: 145px;
  }


  .os-goldrush-heading {
    font-size: 34px;

    letter-spacing: -1.2px;
  }


  .os-goldrush-row {
    margin-top: 38px;
  }


  .os-goldrush-card {
    border-radius: 24px;
  }


  .os-goldrush-card-head {
    min-height: 125px;
  }


  .os-goldrush-image-wrap {
    height: 320px;

    border-radius: 18px;
  }


  .os-goldrush-step p {
    font-size: 18px;
  }


  .os-goldrush-owner-badge {
    top: 18px;
    right: 18px;
  }

}


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

@media (max-width: 480px) {

  .os-goldrush-heading {
    font-size: 30px;
  }


  .os-goldrush-card {
    padding: 9px;
  }


  .os-goldrush-card-head {
    padding:
      21px
      15px
      18px;
  }


  .os-goldrush-card h3 {
    font-size: 26px;
  }


  .os-goldrush-image-wrap {
    height: 270px;
  }


  .os-goldrush-image-label {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }


  .os-goldrush-content {
    padding:
      22px
      12px
      18px;
  }


  .os-goldrush-content::before {
    left: 32px;
  }


  .os-goldrush-step-num {
    flex: 0 0 40px;
  }


  .os-goldrush-card-bottom {
    margin:
      0
      8px
      8px;

    padding:
      15px
      13px;
  }

}

/* =========================================================
   OWN SAAS - VEHICLE SECTION
   Premium White Theme
========================================================= */

.osaas-vehicle-section {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    font-size: 18px;
    color: #18273d;
background: #0a0307 url(../images/osaas-vehicle-section.png) center top no-repeat;
  background-size: auto;
  background-size: cover;
}


/* background grid */

.osaas-vehicle-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(33, 51, 82, 0.028) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(33, 51, 82, 0.028) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,.85),
        transparent 95%
    );

    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,.85),
        transparent 95%
    );
}


/* background glow */

.osaas-vehicle-section::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: 50%;
    top: -270px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: rgba(109, 76, 255, .08);

    filter: blur(20px);

    pointer-events: none;
}


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

.osaas-vehicle-shell {
    position: relative;
    z-index: 2;

    padding: 60px;

    overflow: hidden;

    border: 1px solid rgba(35, 55, 95, 0.10);

    border-radius: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(248,250,255,.95)
        );

    box-shadow:
        0 35px 90px rgba(26, 42, 74, 0.10),
        0 10px 30px rgba(26, 42, 74, 0.045),
        inset 0 1px 0 rgba(255,255,255,1);
}


.osaas-vehicle-shell::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -170px;
    top: -170px;

    border-radius: 50%;

    background: rgba(84, 88, 255, .07);

    filter: blur(5px);

    pointer-events: none;
}


.osaas-vehicle-shell::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -150px;
    bottom: -150px;

    border-radius: 50%;

    background: rgba(214, 67, 183, .055);

    pointer-events: none;
}


/* =========================================================
   CENTER HEADING AREA
========================================================= */

.osaas-vehicle-title-area {
    position: relative;
    z-index: 5;

    width: 100%;
    max-width: 1150px;

    margin: 0 auto 60px;

    padding: 0 20px;

    text-align: center;
}


/* top / bottom decorative line */

.osaas-title-top-line,
.osaas-title-bottom-line {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    width: 100%;
    max-width: 360px;

    margin-left: auto;
    margin-right: auto;
}


.osaas-title-top-line {
    margin-bottom: 27px;
}


.osaas-title-bottom-line {
    margin-top: 29px;
}


.osaas-title-top-line span,
.osaas-title-bottom-line span {
    display: block;

    width: 135px;
    height: 1px;
}


.osaas-title-top-line span:first-child,
.osaas-title-bottom-line span:first-child {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(102, 70, 230, .72) 100%
    );
}


.osaas-title-top-line span:last-child,
.osaas-title-bottom-line span:last-child {
    background: linear-gradient(
        90deg,
        rgba(102, 70, 230, .72) 0%,
        transparent 100%
    );
}


.osaas-title-top-line i,
.osaas-title-bottom-line i {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #8c48f3;

    font-size: 14px;
    font-style: normal;

    line-height: 1;

    text-shadow:
        0 0 14px rgba(140, 72, 243, .35);
}


/* heading first line */

.osaas-vehicle-main-heading {
    margin: 0;

    color: #132641;

    font-size: clamp(26px, 4.4vw, 38px);
    font-weight: 900;

    line-height: 1.06;

    letter-spacing: -2px;

    text-transform: uppercase;
}


/* heading second line */

.osaas-vehicle-main-heading-highlight {
    margin: 10px 0 0;

  font-size: clamp(32px, 4.1vw, 46px);
    font-weight: 900;

    line-height: 1.06;

    letter-spacing: -2px;

    text-transform: uppercase;

    background: linear-gradient(
        90deg,
        #315cff 0%,
        #714ff3 42%,
        #c34cc5 72%,
        #e4549e 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* =========================================================
   MAIN ROW
========================================================= */

.osaas-vehicle-main-row {
    position: relative;
    z-index: 3;
}


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

.osaas-vehicle-content {
    position: relative;

    padding: 15px 5px;
}


/* intro */

.osaas-vehicle-intro {
    margin: 0 0 18px;

    color: #4a586c;

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

    line-height: 1.7;
}


/* =========================================================
   TECHNOLOGY GAP HIGHLIGHT
========================================================= */

.osaas-vehicle-highlight {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 14px;

    margin-bottom: 26px;

    padding: 21px 22px;

    overflow: hidden;

    border: 1px solid rgba(66, 85, 220, 0.13);

    border-radius: 18px;

    background:
        linear-gradient(
            120deg,
            rgba(62, 91, 255, 0.085),
            rgba(132, 69, 242, 0.040)
        );

    box-shadow:
        0 14px 35px rgba(30, 47, 82, .05),
        inset 0 1px 0 rgba(255,255,255,.8);

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


.osaas-vehicle-highlight:hover {
    transform: translateY(-3px);

    border-color: rgba(81, 77, 226, .22);

    box-shadow:
        0 18px 40px rgba(31, 47, 83, .08);
}


.osaas-vehicle-highlight::before {
    content: "";

    position: absolute;

    left: 0;
    top: 13px;
    bottom: 13px;

    width: 4px;

    border-radius: 0 10px 10px 0;

    background: linear-gradient(
        180deg,
        #315eff,
        #9b4ff2
    );
}


.osaas-highlight-icon {
    width: 40px;
    height: 40px;

    min-width: 40px;

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

    border-radius: 12px;

    background: linear-gradient(
        135deg,
        #315eff,
        #9651f3
    );

    color: #ffffff;

    font-size: 17px;

    box-shadow:
        0 10px 25px rgba(71, 74, 227, .25);
}


.osaas-vehicle-highlight strong {
    display: block;

    color: #172c49;

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

    line-height: 1.55;

    letter-spacing: -.15px;
}


/* =========================================================
   POINTS
========================================================= */

.osaas-vehicle-points {
    display: flex;
    flex-direction: column;

    gap: 9px;
}


.osaas-vehicle-point {
    position: relative;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 11px 13px;

    border: 1px solid transparent;

    border-radius: 14px;

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


.osaas-vehicle-point:hover {
    /* transform: translateX(6px);

    border-color: rgba(36, 65, 117, .07);

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

    box-shadow:
        0 10px 27px rgba(31, 48, 80, .065); */
}


.osaas-point-check {
    width: 29px;
    height: 29px;

    min-width: 29px;

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

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            #edf2ff,
            #f4efff
        );

    color: #3c5ef4;

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

    box-shadow:
        inset 0 0 0 1px rgba(65, 87, 226, .05);
}


.osaas-vehicle-point p {
    margin: 0;

    color: #3f4c5f;

    font-size: 18px;

    line-height: 1.58;
}


/* =========================================================
   FINAL MESSAGE
========================================================= */

.osaas-vehicle-final {
    margin-top: 30px;
}


.osaas-final-line {
    width: 100%;
    height: 1px;

    margin-bottom: 26px;

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(57, 77, 118, .20) 15%,
        rgba(57, 77, 118, .20) 85%,
        transparent 100%
    );
}


.osaas-vehicle-final h3 {
    margin: 0;

    color: #152a46;

    font-size: clamp(25px, 2.2vw, 34px);
    font-weight: 900;

    line-height: 1.3;

    letter-spacing: -.5px;
}


.osaas-vehicle-final h3 span {
    display: inline-block;

    margin-left: 3px;

    padding: 5px 12px;

    border-radius: 9px;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #315df5,
        #9250f0
    );

    box-shadow:
        0 9px 22px rgba(78, 74, 222, .22);
}


.osaas-vehicle-final p {
    margin: 17px 0 0;

    color: #4d596b;

    font-size: 18px;

    line-height: 1.65;
}


/* =========================================================
   RIGHT IMAGE SIDE
========================================================= */

.osaas-vehicle-visual {
    position: relative;

    min-height: 560px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* visual glows */

.osaas-visual-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(10px);

    pointer-events: none;
}


.osaas-glow-one {
    width: 340px;
    height: 340px;

    right: 1%;
    top: 7%;

    background: rgba(66, 91, 255, .13);
}


.osaas-glow-two {
    width: 280px;
    height: 280px;

    left: 5%;
    bottom: 6%;

    background: rgba(190, 70, 214, .10);
}


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

.osaas-vehicle-image-card {
    position: relative;
    z-index: 3;

    width: 93%;
    max-width: 580px;

    padding: 13px;

    overflow: hidden;

    border: 1px solid rgba(34, 59, 101, .12);

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(241,245,255,.96)
        );

    box-shadow:
        0 38px 80px rgba(21, 40, 76, .17),
        0 12px 28px rgba(21, 40, 76, .07),
        inset 0 1px 0 rgba(255,255,255,1);

    transform:
        perspective(1200px)
        rotateY(-3deg)
        rotateX(1deg);

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


.osaas-vehicle-image-card:hover {
    transform:
        perspective(1200px)
        rotateY(0deg)
        rotateX(0deg)
        translateY(-8px);

    box-shadow:
        0 48px 100px rgba(21, 40, 76, .20),
        0 12px 28px rgba(21, 40, 76, .08);
}


/* =========================================================
   IMAGE TOP DOTS
========================================================= */

.osaas-image-dots {
    display: flex;
    align-items: center;

    gap: 6px;

    padding: 3px 5px 12px;
}


.osaas-image-dots span {
    width: 8px;
    height: 8px;

    display: block;

    border-radius: 50%;

    background: #d8deea;
}


.osaas-image-dots span:nth-child(2) {
    background: #bec8da;
}


.osaas-image-dots span:nth-child(3) {
    background: linear-gradient(
        135deg,
        #315fff,
        #8f50ef
    );
}


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

.osaas-image-inner {
    position: relative;

    width: 100%;
    min-height: 440px;

    overflow: hidden;

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

    border-radius: 20px;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(83, 101, 255, .09),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #f2f5ff,
            #ffffff
        );
}


.osaas-image-inner img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 440px;

    object-fit: cover;

    border-radius: 20px;
}


/* image shine */

.osaas-image-shine {
    position: absolute;

    inset: 0;

    overflow: hidden;

    border-radius: 30px;

    pointer-events: none;
}


.osaas-image-shine::before {
    content: "";

    position: absolute;

    top: -30%;
    left: -60%;

    width: 150px;
    height: 160%;

    transform: rotate(19deg);

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.43),
        transparent
    );

    transition: left .75s ease;
}


.osaas-vehicle-image-card:hover
.osaas-image-shine::before {
    left: 125%;
}


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

.osaas-floating-card {
    position: absolute;
    z-index: 5;

    display: flex;
    align-items: center;

    border: 1px solid rgba(41, 61, 99, .10);

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

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    box-shadow:
        0 18px 42px rgba(25, 44, 79, .13);
}


/* floating left */

.osaas-floating-one {
    left: -2px;
    top: 17%;

    gap: 10px;

    padding: 11px 15px;

    border-radius: 16px;

    animation: osaasFloatOne 4.5s ease-in-out infinite;
}


.osaas-floating-icon {
    width: 29px;
    height: 29px;

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

    border-radius: 8px;

    background: linear-gradient(
        135deg,
        #315fff,
        #9450ef
    );

    color: #fff;

    font-size: 13px;

    box-shadow:
        0 7px 17px rgba(71, 75, 220, .22);
}


.osaas-floating-line {
    display: block;

    width: 56px;
    height: 6px;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        #dae3f4,
        #e8eaf9
    );
}


/* floating right */

.osaas-floating-two {
    right: -2px;
    bottom: 16%;

    padding: 14px 17px;

    border-radius: 16px;

    animation: osaasFloatTwo 5s ease-in-out infinite;
}


/* bars */

.osaas-mini-bars {
    height: 38px;

    display: flex;
    align-items: flex-end;

    gap: 5px;
}


.osaas-mini-bars span {
    display: block;

    width: 6px;

    border-radius: 7px 7px 2px 2px;

    background: linear-gradient(
        to top,
        #315fff,
        #9a50ef
    );
}


.osaas-mini-bars span:nth-child(1) {
    height: 14px;
}


.osaas-mini-bars span:nth-child(2) {
    height: 22px;
}


.osaas-mini-bars span:nth-child(3) {
    height: 30px;
}


.osaas-mini-bars span:nth-child(4) {
    height: 38px;
}


/* =========================================================
   FLOATING ANIMATION
========================================================= */

@keyframes osaasFloatOne {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


@keyframes osaasFloatTwo {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }

}


/* =========================================================
   LAPTOP RESPONSIVE
========================================================= */

@media (max-width: 1199px) {

    .osaas-vehicle-shell {
        padding: 48px;
    }

    .osaas-vehicle-main-heading {
        font-size: 49px;
    }

    .osaas-vehicle-main-heading-highlight {
        font-size: 46px;
    }

    .osaas-vehicle-visual {
        min-height: 510px;
    }

    .osaas-image-inner,
    .osaas-image-inner img {
        min-height: 395px;
    }

}


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

@media (max-width: 991px) {

    .osaas-vehicle-section {
        padding: 75px 0;
    }


    .osaas-vehicle-shell {
        padding: 40px 28px;

        border-radius: 28px;
    }


    .osaas-vehicle-title-area {
        margin-bottom: 42px;
    }


    .osaas-vehicle-main-heading {
        font-size: 39px;

        letter-spacing: -1.2px;
    }


    .osaas-vehicle-main-heading-highlight {
        font-size: 37px;

        letter-spacing: -1.2px;
    }


    .osaas-vehicle-visual {
        min-height: 470px;
    }


    .osaas-image-inner,
    .osaas-image-inner img {
        min-height: 360px;
    }


    .osaas-floating-one {
        left: -5px;
    }


    .osaas-floating-two {
        right: -5px;
    }

}


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

@media (max-width: 767px) {

    .osaas-vehicle-section {
        padding: 55px 0;

        font-size: 18px;
    }


    .osaas-vehicle-shell {
        padding: 32px 18px;

        border-radius: 24px;
    }


    /* title */

    .osaas-vehicle-title-area {
        margin-bottom: 32px;

        padding: 0;
    }


    .osaas-title-top-line {
        margin-bottom: 20px;
    }


    .osaas-title-bottom-line {
        margin-top: 20px;
    }


    .osaas-title-top-line,
    .osaas-title-bottom-line {
        max-width: 260px;

        gap: 10px;
    }


    .osaas-title-top-line span,
    .osaas-title-bottom-line span {
        width: 90px;
    }


    .osaas-vehicle-main-heading {
        font-size: 31px;

        line-height: 1.12;

        letter-spacing: -.8px;
    }


    .osaas-vehicle-main-heading-highlight {
        margin-top: 8px;

        font-size: 28px;

        line-height: 1.12;

        letter-spacing: -.8px;
    }


    /* content */

    .osaas-vehicle-content {
        padding: 0;
    }


    .osaas-vehicle-intro {
        font-size: 18px;
    }


    .osaas-vehicle-highlight {
        padding: 18px 16px;
    }


    .osaas-vehicle-highlight strong {
        font-size: 18px;
    }


    .osaas-vehicle-point {
        padding-left: 5px;
        padding-right: 5px;
    }


    .osaas-vehicle-point p {
        font-size: 18px;
    }


    .osaas-vehicle-point:hover {
        transform: none;
    }


    .osaas-vehicle-final h3 {
        font-size: 26px;
    }


    .osaas-vehicle-final p {
        font-size: 18px;
    }


    /* image */

    .osaas-vehicle-visual {
        min-height: auto;

        padding: 45px 0 15px;
    }


    .osaas-vehicle-image-card {
        width: 100%;

        transform: none;

        border-radius: 24px;
    }


    .osaas-vehicle-image-card:hover {
        transform: translateY(-4px);
    }


    .osaas-image-inner {
        min-height: 330px;

        border-radius: 16px;
    }


    .osaas-image-inner img {
        min-height: 330px;

        border-radius: 16px;
    }


    .osaas-floating-one {
        left: -5px;
        top: 23px;
    }


    .osaas-floating-two {
        right: -5px;
        bottom: -4px;
    }

}


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

@media (max-width: 480px) {

    .osaas-vehicle-section {
        padding: 45px 0;
    }


    .osaas-vehicle-shell {
        padding: 28px 15px;

        border-radius: 21px;
    }


    .osaas-vehicle-main-heading {
        font-size: 27px;
    }


    .osaas-vehicle-main-heading-highlight {
        font-size: 25px;
    }


    .osaas-title-top-line span,
    .osaas-title-bottom-line span {
        width: 65px;
    }


    .osaas-vehicle-highlight {
        gap: 11px;

        padding: 16px 13px;
    }


    .osaas-highlight-icon {
        width: 35px;
        height: 35px;

        min-width: 35px;
    }


    .osaas-vehicle-final h3 {
        font-size: 24px;
    }


    .osaas-vehicle-final h3 span {
        margin-top: 5px;
    }


    .osaas-image-inner,
    .osaas-image-inner img {
        min-height: 280px;
    }


    .osaas-floating-line {
        width: 40px;
    }

}


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

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

    .osaas-floating-one,
    .osaas-floating-two {
        animation: none;
    }


    .osaas-vehicle-image-card,
    .osaas-vehicle-point,
    .osaas-vehicle-highlight,
    .osaas-image-shine::before {
        transition: none;
    }

}

/* =========================================================
   OWNSAAS AI - BUILD THE BUSINESS SECTION
   ULTRA PREMIUM DARK THEME
========================================================= */

.osaas-build-section {
    position: relative;
    overflow: hidden;



    font-family: inter, Helvetica, sans-serif;
    font-size: 18px;

    color: #ffffff;

padding: 70px 0 83px;
  background: url(../images/os-goldrush-section.png) center top no-repeat;
    background-size: auto;
    background-color: #070309;
}


/* =========================================================
   PREMIUM BACKGROUND GRID
========================================================= */

.osaas-build-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(198, 86, 210, .045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(198, 86, 210, .045) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.9),
            transparent 100%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.9),
            transparent 100%
        );
}


.osaas-build-section::after {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    left: 50%;
    top: -480px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: rgba(190, 76, 208, .11);

    filter: blur(30px);

    pointer-events: none;
}


/* =========================================================
   TOP HEADING AREA
========================================================= */

.osaas-build-head {
    position: relative;
    z-index: 5;

    max-width: 1180px;

    margin: 0 auto 60px;

    text-align: center;
}


.osaas-build-head-line {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    max-width: 360px;

    margin: 0 auto 27px;
}


.osaas-build-head-line span {
    display: block;

    width: 140px;
    height: 1px;
}


.osaas-build-head-line span:first-child {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(194, 82, 207, .8)
    );
}


.osaas-build-head-line span:last-child {
    background: linear-gradient(
        90deg,
        rgba(194, 82, 207, .8),
        transparent
    );
}


.osaas-build-head-line i {
    color: #C05AD0;

    font-size: 14px;
    font-style: normal;

    filter: drop-shadow(
        0 0 10px rgba(207, 80, 193, .8)
    );
}


/* MAIN HEADING */

.osaas-build-head h2 {
margin: 0;
  color: #ffffff;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -2px;
  text-transform: uppercase;
}



/* BLUE HEADING */

.osaas-build-head h3 {
margin: 12px 0 0;
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -1.5px;
  text-transform: uppercase;
  background: linear-gradient( 90deg, #A94FD9 0%, #C454CA 45%, #DF59AD 100% );
    background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* =========================================================
   MAIN PANEL
========================================================= */

.osaas-build-panel {
    position: relative;
    z-index: 3;

    padding: 58px;

    overflow: hidden;

    border: 1px solid rgba(201, 88, 211, .16);

    border-radius: 34px;

    background:
        linear-gradient(
            135deg,
            rgba(29, 10, 36, .96),
            rgba(11, 4, 16, .98)
        );

    box-shadow:
        0 45px 100px rgba(0, 0, 0, .42),
        0 12px 35px rgba(0, 0, 0, .20),
        inset 0 1px 0 rgba(255,255,255,.045);
}


/* LIGHT BORDER GLOW */

.osaas-build-panel::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: -210px;
    top: -210px;

    border-radius: 50%;

    background: rgba(187, 75, 210, .09);

    filter: blur(5px);

    pointer-events: none;
}


.osaas-build-panel::after {
    content: "";

    position: absolute;

    width: 340px;
    height: 340px;

    left: -190px;
    bottom: -190px;

    border-radius: 50%;

    background: rgba(219, 75, 168, .06);

    pointer-events: none;
}


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

.osaas-build-content {
    position: relative;
    z-index: 3;

    padding: 10px 0;
}


/* MEET BADGE */

.osaas-meet-badge {
    width: max-content;

    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 22px;

    padding: 8px 14px;

    border: 1px solid rgba(198, 83, 206, .20);

    border-radius: 50px;

    color: #D6C3D9;

    background: rgba(164, 59, 181, .08);

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

    letter-spacing: 1px;

    text-transform: uppercase;
}


.osaas-meet-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #D45AC2;

    box-shadow:
        0 0 0 5px rgba(207, 85, 195, .09),
        0 0 15px rgba(207, 85, 195, .7);
}


/* =========================================================
   BRAND AREA
========================================================= */

.osaas-brand-block {
    margin-bottom: 28px;
}


.osaas-brand-kicker {
    margin-bottom: 10px;

    color: #C257CD;

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

    letter-spacing: 2.4px;

    text-transform: uppercase;
}


.osaas-brand-title {
    margin: 0;

    color: #ffffff;

    font-size: clamp(42px, 4vw, 62px);
    font-weight: 900;

    line-height: 1;

    letter-spacing: -2px;

    text-transform: uppercase;
}


.osaas-brand-title span {
    background: linear-gradient(
        135deg,
        #A94FD9,
        #DE59B0
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


.osaas-brand-tagline {
    margin-top: 13px;

    color: #CF59C7;

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

    letter-spacing: 3px;

    line-height: 1.6;

    text-transform: uppercase;
}


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

.osaas-build-copy {
    margin-bottom: 23px;
}


.osaas-build-copy p {
    margin: 0 0 13px;

    color: #CDBFD0;

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

    line-height: 1.7;
}


.osaas-build-copy p:last-child {
    margin-bottom: 0;
}


.osaas-build-copy strong {
    color: #ffffff;

    font-weight: 800;
}


/* =========================================================
   PLATFORM HIGHLIGHT
========================================================= */

.osaas-platform-highlight {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 15px;

    margin: 28px 0 24px;

    padding: 19px 20px;

    overflow: hidden;

    border: 1px solid rgba(200, 82, 205, .19);

    border-radius: 18px;

    background:
        linear-gradient(
            120deg,
            rgba(165, 65, 190, .16),
            rgba(218, 75, 169, .08)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 15px 35px rgba(0,0,0,.15);

    transition:
        transform .3s ease,
        border-color .3s ease;
}


.osaas-platform-highlight:hover {
    transform: translateY(-3px);

    border-color: rgba(219, 86, 193, .34);
}


.osaas-platform-highlight::before {
    content: "";

    position: absolute;

    left: 0;
    top: 13px;
    bottom: 13px;

    width: 3px;

    border-radius: 0 10px 10px 0;

    background: linear-gradient(
        to bottom,
        #A94FD9,
        #DF59AD
    );
}


.osaas-platform-icon {
    width: 42px;
    height: 42px;

    min-width: 42px;

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

    border-radius: 12px;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #A24AD6,
        #DC58B1
    );

    box-shadow:
        0 8px 24px rgba(190, 69, 194, .25);
}


.osaas-platform-highlight span {
    display: block;

    margin-bottom: 4px;

    color: #D05BC5;

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

    letter-spacing: 1.7px;

    text-transform: uppercase;
}


.osaas-platform-highlight h3 {
    margin: 0;

    color: #ffffff;

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

    line-height: 1.5;
}


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

.osaas-build-list {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.osaas-build-item {
    display: flex;
    align-items: center;

    gap: 13px;

    padding: 5px 12px;

    border: 1px solid transparent;

    border-radius: 13px;

    transition: all .28s ease;
}


.osaas-build-item:hover {
    /* transform: translateX(5px);

    border-color: rgba(193, 80, 199, .10);

    background: rgba(255,255,255,.025); */
}


.osaas-build-check {
    width: 29px;
    height: 29px;

    min-width: 29px;

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

    border: 1px solid rgba(200, 87, 205, .17);

    border-radius: 9px;

    color: #DB65CA;

    background:
        linear-gradient(
            145deg,
            rgba(153, 59, 181, .20),
            rgba(209, 73, 174, .09)
        );

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


.osaas-build-item p {
    margin: 0;

    color: #D2C6D5;

    font-size: 18px;

    line-height: 1.55;
}


/* FINAL LIST ITEM */

.osaas-build-item-final {
    margin-top: 5px;

    border-color: rgba(203, 83, 207, .13);

    background: rgba(216, 76, 171, .06);
}


.osaas-build-item-final p {
    color: #ffffff;

    font-weight: 700;
}


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

.osaas-build-visual {
    position: relative;

    min-height: 580px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* GLOWS */

.osaas-build-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(20px);
}


.osaas-build-glow-1 {
    width: 370px;
    height: 370px;

    top: 8%;
    right: 0;

    background: rgba(175, 69, 211, .24);
}


.osaas-build-glow-2 {
    width: 280px;
    height: 280px;

    left: 6%;
    bottom: 8%;

    background: rgba(221, 77, 174, .15);
}


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

.osaas-build-image-shell {
    position: relative;
    z-index: 3;

    width: 92%;
    max-width: 580px;

    padding: 12px;

    overflow: hidden;

    border: 1px solid rgba(201, 87, 211, .22);

    border-radius: 29px;

    background:
        linear-gradient(
            145deg,
            rgba(31, 13, 40, .94),
            rgba(11, 5, 17, .96)
        );

    box-shadow:
        0 45px 90px rgba(0,0,0,.48),
        0 0 70px rgba(190, 65, 200, .10),
        inset 0 1px 0 rgba(255,255,255,.06);

    transform:
        perspective(1200px)
        rotateY(-3deg)
        rotateX(1deg);

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


.osaas-build-image-shell:hover {
    transform:
        perspective(1200px)
        rotateY(0deg)
        rotateX(0deg)
        translateY(-7px);

    box-shadow:
        0 55px 110px rgba(0,0,0,.52),
        0 0 90px rgba(209, 77, 196, .14);
}


/* BROWSER BAR */

.osaas-build-browser {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 2px 4px 11px;
}


.osaas-browser-dots {
    display: flex;

    gap: 5px;
}


.osaas-browser-dots span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #3A203F;
}


.osaas-browser-dots span:nth-child(2) {
    background: #552C5C;
}


.osaas-browser-dots span:nth-child(3) {
    background: #D458BD;
}


.osaas-browser-bar {
    width: 90px;
    height: 5px;

    border-radius: 20px;

    background: rgba(206, 108, 209, .13);
}


/* IMAGE */

.osaas-build-image {
    position: relative;

    width: 100%;
    min-height: 450px;

    overflow: hidden;

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

    border-radius: 20px;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(190, 76, 211, .18),
            transparent 35%
        ),
        #0D0611;
}


.osaas-build-image img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 450px;

    object-fit: cover;

    border-radius: 20px;
}


/* IMAGE SHINE */

.osaas-build-image-shine {
    position: absolute;

    inset: 0;

    overflow: hidden;

    border-radius: 29px;

    pointer-events: none;
}


.osaas-build-image-shine::before {
    content: "";

    position: absolute;

    top: -40%;
    left: -70%;

    width: 140px;
    height: 180%;

    transform: rotate(18deg);

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.11),
        transparent
    );

    transition: left .85s ease;
}


.osaas-build-image-shell:hover
.osaas-build-image-shine::before {
    left: 130%;
}


/* =========================================================
   FLOATING UI CARDS
========================================================= */

.osaas-build-float {
    position: absolute;
    z-index: 5;

    border: 1px solid rgba(202, 87, 210, .18);

    background: rgba(22, 9, 29, .83);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    box-shadow:
        0 20px 40px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.05);
}


/* TOP */

.osaas-build-float-top {
    left: -5px;
    top: 17%;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 11px 15px;

    border-radius: 15px;

    animation:
        osaasBuildFloatTop 4.5s ease-in-out infinite;
}


.osaas-float-icon {
    width: 30px;
    height: 30px;

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

    border-radius: 9px;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #A34BD5,
        #DD58B1
    );

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


.osaas-float-copy {
    display: flex;
    flex-direction: column;

    gap: 6px;
}


.osaas-float-copy span {
    display: block;

    height: 5px;

    border-radius: 20px;

    background: #4A2851;
}


.osaas-float-copy span:first-child {
    width: 65px;
}


.osaas-float-copy span:last-child {
    width: 45px;

    background: #321B38;
}


/* BOTTOM CHART */

.osaas-build-float-bottom {
    right: -5px;
    bottom: 15%;

    padding: 15px 17px;

    border-radius: 15px;

    animation:
        osaasBuildFloatBottom 5s ease-in-out infinite;
}


.osaas-float-chart {
    height: 40px;

    display: flex;
    align-items: flex-end;

    gap: 5px;
}


.osaas-float-chart span {
    width: 6px;

    border-radius: 5px 5px 2px 2px;

    background: linear-gradient(
        to top,
        #963FC8,
        #DF59AD
    );
}


.osaas-float-chart span:nth-child(1) {
    height: 13px;
}

.osaas-float-chart span:nth-child(2) {
    height: 21px;
}

.osaas-float-chart span:nth-child(3) {
    height: 18px;
}

.osaas-float-chart span:nth-child(4) {
    height: 31px;
}

.osaas-float-chart span:nth-child(5) {
    height: 40px;
}


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

.osaas-build-orbit {
    position: absolute;
    z-index: 1;

    width: 470px;
    height: 470px;

    border: 1px solid rgba(202, 86, 212, .09);

    border-radius: 50%;
}


.osaas-build-orbit::before {
    content: "";

    position: absolute;

    inset: 45px;

    border: 1px solid rgba(217, 83, 190, .055);

    border-radius: 50%;
}


.osaas-build-orbit span {
    position: absolute;

    width: 8px;
    height: 8px;

    right: 54px;
    top: 80px;

    border-radius: 50%;

    background: #D557BD;

    box-shadow:
        0 0 15px rgba(213, 87, 189, .8);
}


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

@keyframes osaasBuildFloatTop {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


@keyframes osaasBuildFloatBottom {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}


/* =========================================================
   1200PX
========================================================= */

@media (max-width: 1199px) {

    .osaas-build-panel {
        padding: 46px;
    }


    .osaas-build-head h2 {
        font-size: 48px;
    }


    .osaas-build-head h3 {
        font-size: 40px;
    }


    .osaas-brand-title {
        font-size: 50px;
    }


    .osaas-build-visual {
        min-height: 520px;
    }


    .osaas-build-image,
    .osaas-build-image img {
        min-height: 390px;
    }


    .osaas-build-orbit {
        width: 410px;
        height: 410px;
    }

}


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

@media (max-width: 991px) {

    .osaas-build-section {
        padding: 75px 0;
    }


    .osaas-build-head {
        margin-bottom: 42px;
    }


    .osaas-build-head h2 {
        font-size: 38px;

        letter-spacing: -1px;
    }


    .osaas-build-head h3 {
        font-size: 32px;

        letter-spacing: -.7px;
    }


    .osaas-build-panel {
        padding: 35px 25px;

        border-radius: 27px;
    }


    .osaas-brand-title {
        font-size: 43px;
    }


    .osaas-brand-tagline {
        font-size: 12px;

        letter-spacing: 2px;
    }


    .osaas-build-visual {
        min-height: 470px;
    }


    .osaas-build-image,
    .osaas-build-image img {
        min-height: 350px;
    }


    .osaas-build-orbit {
        width: 340px;
        height: 340px;
    }

}


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

@media (max-width: 767px) {

    .osaas-build-section {
        padding: 55px 0;

        font-size: 18px;
    }


    .osaas-build-head {
        margin-bottom: 32px;
    }


    .osaas-build-head-line {
        max-width: 260px;

        margin-bottom: 20px;
    }


    .osaas-build-head-line span {
        width: 90px;
    }


    .osaas-build-head h2 {
        font-size: 30px;

        line-height: 1.13;

        letter-spacing: -.7px;
    }


    .osaas-build-head h3 {
        margin-top: 10px;

        font-size: 27px;

        line-height: 1.15;
    }


    .osaas-build-panel {
        padding: 30px 18px;

        border-radius: 23px;
    }


    .osaas-build-content {
        padding: 0;
    }


    .osaas-brand-title {
        font-size: 42px;
    }


    .osaas-brand-tagline {
        letter-spacing: 1.5px;

        line-height: 1.7;
    }


    .osaas-build-copy p,
    .osaas-build-item p,
    .osaas-platform-highlight h3 {
        font-size: 18px;
    }


    .osaas-build-item:hover {
        transform: none;
    }


    .osaas-build-visual {
        min-height: auto;

        padding: 50px 0 15px;
    }


    .osaas-build-image-shell {
        width: 100%;

        transform: none;

        border-radius: 23px;
    }


    .osaas-build-image-shell:hover {
        transform: translateY(-4px);
    }


    .osaas-build-image,
    .osaas-build-image img {
        min-height: 330px;

        border-radius: 16px;
    }


    .osaas-build-float-top {
        top: 25px;
        left: -4px;
    }


    .osaas-build-float-bottom {
        right: -4px;
        bottom: -5px;
    }


    .osaas-build-orbit {
        width: 300px;
        height: 300px;
    }

}


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

@media (max-width: 480px) {

    .osaas-build-section {
        padding: 45px 0;
    }


    .osaas-build-head h2 {
        font-size: 27px;
    }


    .osaas-build-head h3 {
        font-size: 24px;
    }


    .osaas-build-panel {
        padding: 27px 15px;
    }


    .osaas-brand-title {
        font-size: 37px;
    }


    .osaas-brand-tagline {
        font-size: 11px;
    }


    .osaas-platform-highlight {
        gap: 11px;

        padding: 16px 13px;
    }


    .osaas-platform-icon {
        width: 36px;
        height: 36px;

        min-width: 36px;
    }


    .osaas-build-item {
        padding-left: 4px;
        padding-right: 4px;
    }


    .osaas-build-image,
    .osaas-build-image img {
        min-height: 275px;
    }


    .osaas-build-orbit {
        width: 250px;
        height: 250px;
    }

}


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

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

    .osaas-build-float-top,
    .osaas-build-float-bottom {
        animation: none;
    }


    .osaas-build-image-shell,
    .osaas-build-item,
    .osaas-platform-highlight,
    .osaas-build-image-shine::before {
        transition: none;
    }

}
/* =========================================================
   OWNSAAS FOUNDATION SECTION
   PREMIUM WHITE + PURPLE/PINK LOGO THEME
========================================================= */

.osaas-foundation-section {
    position: relative;
    overflow: hidden;

    padding: 100px 0;

    font-family:  Inter, Helvetica, sans-serif;
    font-size: 18px;

    color: #252235;

    background:
        radial-gradient(
            circle at 7% 15%,
            rgba(172, 76, 216, 0.09),
            transparent 27%
        ),
        radial-gradient(
            circle at 94% 75%,
            rgba(222, 83, 172, 0.08),
            transparent 29%
        ),
        #ffffff;
}


/* GRID BACKGROUND */

.osaas-foundation-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(128, 75, 150, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(128, 75, 150, 0.025) 1px,
            transparent 1px
        );

    background-size: 52px 52px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .8),
            transparent 95%
        );

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .8),
            transparent 95%
        );
}


/* TOP GLOW */

.osaas-foundation-section::after {
    content: "";

    position: absolute;

    width: 600px;
    height: 300px;

    left: 50%;
    top: -200px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: rgba(190, 78, 207, .09);

    filter: blur(40px);

    pointer-events: none;
}


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

.osaas-foundation-head {
    position: relative;
    z-index: 3;

    max-width: 1100px;

    margin: 0 auto 48px;

    text-align: center;
}


/* DECORATIVE LINE */

.osaas-foundation-line {
    max-width: 350px;

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

    gap: 13px;

    margin: 0 auto 25px;
}


.osaas-foundation-line span {
    display: block;

    width: 130px;
    height: 1px;
}


.osaas-foundation-line span:first-child {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(190, 81, 207, .60)
    );
}


.osaas-foundation-line span:last-child {
    background: linear-gradient(
        90deg,
        rgba(190, 81, 207, .60),
        transparent
    );
}


.osaas-foundation-line i {
    color: #c651c9;

    font-size: 14px;
    font-style: normal;

    filter:
        drop-shadow(
            0 0 9px rgba(198, 81, 201, .35)
        );
}


/* MAIN HEADING */

.osaas-foundation-head h2 {
    margin: 0;

    color: #1e1830;

    font-size: clamp(32px, 4vw, 52px);
    font-weight: 900;

    line-height: 1.1;

    letter-spacing: -1.7px;

    text-transform: uppercase;
}


/* SECOND HEADING */

.osaas-foundation-head h3 {
    margin: 11px 0 0;

    font-size: clamp(25px, 3vw, 38px);
    font-weight: 900;

    line-height: 1.2;

    letter-spacing: -1px;

    text-transform: uppercase;

    background: linear-gradient(
        90deg,
        #a64fd9 0%,
        #c653cb 48%,
        #df59ad 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


.osaas-foundation-head p {
    margin: 20px 0 0;

    color: #6c6474;

    font-size: 18px;

    line-height: 1.7;
}


/* =========================================================
   BEFORE AFTER WRAPPER
========================================================= */

.osaas-difference-wrap {
    position: relative;
    z-index: 4;

    max-width: 1100px;

    margin: 0 auto 65px;
}


/* COMMON CARD */

.osaas-difference-card {
    position: relative;

    height: 100%;
    min-height: 190px;

    overflow: hidden;

    padding: 27px 28px;

    border-radius: 22px;

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


.osaas-difference-card:hover {
    transform: translateY(-5px);
}


/* TOP */

.osaas-diff-top {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 17px;
}


.osaas-diff-icon {
    width: 34px;
    height: 34px;

    min-width: 34px;

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

    border-radius: 10px;

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


.osaas-diff-label {
    font-size: 15px;
    font-weight: 900;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.osaas-difference-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    font-size: 18px;

    line-height: 1.65;
}


/* =========================================================
   BEFORE CARD
========================================================= */

.osaas-before-card {
    border: 1px solid #e9e4eb;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #faf8fb
        );

    box-shadow:
        0 20px 45px rgba(51, 34, 64, .06);
}


.osaas-before-card .osaas-diff-icon {
    color: #8c7e91;

    background: #f1edf2;
}


.osaas-before-card .osaas-diff-label {
    color: #605565;
}


.osaas-before-card p {
    color: #5e5663;
}


/* DECORATION */

.osaas-card-decoration {
    position: absolute;

    right: 24px;
    bottom: 18px;

    display: flex;
    align-items: flex-end;

    gap: 5px;

    opacity: .28;
}


.osaas-card-decoration span {
    display: block;

    width: 6px;

    border-radius: 8px;

    background: #b49db9;
}


.osaas-card-decoration span:nth-child(1) {
    height: 14px;
}


.osaas-card-decoration span:nth-child(2) {
    height: 24px;
}


.osaas-card-decoration span:nth-child(3) {
    height: 34px;
}


/* =========================================================
   AFTER CARD
========================================================= */

.osaas-after-card {
    border: 1px solid rgba(198, 80, 202, .16);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(225, 86, 170, .11),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #211327,
            #120c17
        );

    box-shadow:
        0 25px 55px rgba(81, 38, 90, .18);
}


.osaas-after-card .osaas-diff-icon {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #a64ddb,
        #de59ad
    );

    box-shadow:
        0 8px 20px rgba(192, 72, 196, .25);
}


.osaas-after-card .osaas-diff-label {
    color: #ffffff;
}


.osaas-after-card p {
    max-width: 500px;

    color: #eee5ef;
}


.osaas-after-glow {
    position: absolute;

    width: 180px;
    height: 180px;

    right: -70px;
    bottom: -90px;

    border-radius: 50%;

    background: rgba(214, 78, 183, .15);

    filter: blur(10px);
}


/* =========================================================
   MAIN FOUNDATION PANEL
========================================================= */

.osaas-foundation-panel {
    position: relative;
    z-index: 3;

    padding: 55px;

    overflow: hidden;

    /* border: 1px solid rgba(138, 87, 153, .12);

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(252,248,253,.97)
        );

    box-shadow:
        0 35px 90px rgba(64, 37, 75, .08),
        0 10px 30px rgba(64, 37, 75, .04),
        inset 0 1px 0 #ffffff; */
}


/* PANEL GLOW */

/* .osaas-foundation-panel::before {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    right: -200px;
    top: -200px;

    border-radius: 50%;

    background: rgba(187, 75, 207, .07);

    pointer-events: none;
}


.osaas-foundation-panel::after {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    left: -190px;
    bottom: -180px;

    border-radius: 50%;

    background: rgba(223, 83, 173, .055);

    pointer-events: none;
} */


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

.osaas-foundation-copy {
    position: relative;
    z-index: 2;
}


/* KICKER */

.osaas-copy-kicker {
    width: max-content;

    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 17px;

    color: #b44fcf;

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

    letter-spacing: 2px;

    text-transform: uppercase;
       margin-left: auto;
    margin-right: auto;
}


.osaas-copy-kicker span {
    width: 9px;
    height: 9px;

    display: block;

    border-radius: 3px;

    background: linear-gradient(
        135deg,
        #a24bd9,
        #dd58ae
    );

    transform: rotate(45deg);
}


/* HEADING */

.osaas-foundation-copy > h2 {
    margin: 0 0 23px;

    color: #21192c;

    font-size: clamp(29px, 3vw, 42px);
    font-weight: 900;

    line-height: 1.15;
 text-align: center;
    letter-spacing: -1.2px;
}


.osaas-foundation-copy > h2 span {
    display: block;

    background: linear-gradient(
        90deg,
        #a64ed8,
        #d457b7
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
     text-align: center;
}


/* COPY */

.osaas-foundation-copy > p {
    margin: 0 0 12px;

    color: #5d5562;

    font-size: 18px;

    line-height: 1.7;
}


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

.osaas-foundation-list {
    display: flex;
    flex-direction: column;

    gap: 7px;

    margin-top: 23px;
}


.osaas-foundation-item {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 8px 10px;

    border-radius: 12px;

    transition:
        background .25s ease,
        transform .25s ease;
}


.osaas-foundation-item:hover {
    transform: translateX(5px);

    background: rgba(181, 79, 204, .045);
}


.osaas-foundation-item > span {
    width: 28px;
    height: 28px;

    min-width: 28px;

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

    border: 1px solid rgba(190, 81, 205, .15);

    border-radius: 8px;

    color: #bd51ca;

    background:
        linear-gradient(
            145deg,
            #faf1fc,
            #fff4fa
        );

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


.osaas-foundation-item p {
    margin: 0;

    color: #4d4652;

    font-size: 18px;

    line-height: 1.5;
}


/* =========================================================
   RIGHT STACK VISUAL
========================================================= */

.osaas-foundation-stack {
    position: relative;

    min-height: 520px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* GLOWS */

.osaas-stack-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(18px);
}


.osaas-stack-glow-one {
    width: 300px;
    height: 300px;

    right: 5%;
    top: 7%;

    background: rgba(169, 72, 216, .12);
}


.osaas-stack-glow-two {
    width: 250px;
    height: 250px;

    left: 8%;
    bottom: 8%;

    background: rgba(223, 83, 174, .10);
}


/* STACK CARD */

.osaas-stack-card {
    position: relative;
    z-index: 2;

    width: 92%;
    max-width: 500px;

    padding: 25px;

    border: 1px solid rgba(177, 91, 193, .16);

    border-radius: 27px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(250,244,251,.98)
        );

    box-shadow:
        0 30px 65px rgba(71, 39, 80, .12),
        inset 0 1px 0 #ffffff;

    transform:
        perspective(1000px)
        rotateY(-3deg)
        rotateX(1deg);

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


.osaas-stack-card:hover {
    transform:
        perspective(1000px)
        rotateY(0deg)
        rotateX(0deg)
        translateY(-5px);

    box-shadow:
        0 40px 80px rgba(71, 39, 80, .15);
}


/* CARD TOP */

.osaas-stack-card-top {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 25px;
}


.osaas-stack-logo {
    width: 45px;
    height: 45px;

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

    border-radius: 13px;

    background: linear-gradient(
        135deg,
        #a64dda,
        #df59ad
    );

    box-shadow:
        0 10px 25px rgba(185, 69, 194, .20);
}


.osaas-stack-logo span {
    color: #ffffff;

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


.osaas-stack-lines {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


.osaas-stack-lines span {
    display: block;

    height: 6px;

    border-radius: 20px;

    background: #ede2ef;
}


.osaas-stack-lines span:first-child {
    width: 100px;
}


.osaas-stack-lines span:last-child {
    width: 67px;
}


/* STACK GRID */

.osaas-stack-grid {
    display: grid;

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

    gap: 11px;
}


.osaas-stack-item {
    display: flex;
    align-items: center;

    gap: 10px;

    min-height: 58px;

    padding: 12px;

    border: 1px solid rgba(145, 95, 154, .10);

    border-radius: 13px;

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


.osaas-stack-check {
    width: 27px;
    height: 27px;

    min-width: 27px;

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

    border-radius: 8px;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #a54bd7,
        #dc58ae
    );

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


.osaas-stack-item p {
    margin: 0;

    color: #493f4d;

    font-size: 18px;

    line-height: 1.4;
}


/* FOOTER */

.osaas-stack-footer {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-top: 17px;

    padding: 14px 15px;

    border-radius: 13px;

    background:
        linear-gradient(
            90deg,
            rgba(172, 72, 211, .08),
            rgba(220, 83, 173, .06)
        );
}


.osaas-stack-footer > span {
    color: #c052c7;

    font-size: 16px;
}


.osaas-stack-footer p {
    margin: 0;

    color: #433946;

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


/* =========================================================
   FINAL FOUNDATION BOX
========================================================= */

.osaas-final-foundation {
    position: relative;
    z-index: 3;

    /* display: flex;
    align-items: flex-start;

    gap: 18px; */

    margin-top: 55px;

    padding: 30px 32px;

    overflow: hidden;

    border: 1px solid rgba(190, 80, 201, .16);

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(224, 85, 173, .08),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            rgba(175, 74, 212, .07),
            rgba(255,255,255,.92)
        );
}


.osaas-final-foundation::before {
    content: "";

    position: absolute;

    left: 0;
    top: 14px;
    bottom: 14px;

    width: 4px;

    border-radius: 0 10px 10px 0;

    background: linear-gradient(
        to bottom,
        #a44bd8,
        #df59ad
    );
}


/* ICON */

.osaas-final-icon {
    width: 48px;
    height: 48px;

    min-width: 48px;

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

    border-radius: 14px;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #a34bd8,
        #de59ad
    );

    box-shadow:
        0 10px 25px rgba(190, 72, 192, .22);
}


/* FINAL COPY */

.osaas-final-content h3 {
    margin: 0 0 13px;

    color: #24192b;

    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 900;

    line-height: 1.25;
}


.osaas-final-content h3 span {
    background: linear-gradient(
        90deg,
        #a64ed8,
        #da57b1
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


.osaas-final-content p {
    margin: 0 0 7px;

    color: #5a505e;

    font-size: 18px;

    line-height: 1.65;
}


.osaas-final-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199px) {

    .osaas-foundation-panel {
        padding: 45px;
    }


    .osaas-foundation-stack {
        min-height: 480px;
    }

}


@media (max-width: 991px) {

    .osaas-foundation-section {
        padding: 75px 0;
    }


    .osaas-foundation-panel {
        padding: 35px 25px;

        border-radius: 27px;
    }


    .osaas-foundation-head {
        margin-bottom: 40px;
    }


    .osaas-foundation-head h2 {
        font-size: 38px;
    }


    .osaas-foundation-head h3 {
        font-size: 29px;
    }


    .osaas-foundation-stack {
        min-height: 440px;
    }


    .osaas-stack-card {
        width: 100%;
    }

}


@media (max-width: 767px) {

    .osaas-foundation-section {
        padding: 55px 0;

        font-size: 18px;
    }


    .osaas-foundation-head {
        margin-bottom: 30px;
    }


    .osaas-foundation-line {
        max-width: 260px;

        margin-bottom: 20px;
    }


    .osaas-foundation-line span {
        width: 90px;
    }


    .osaas-foundation-head h2 {
        font-size: 30px;

        letter-spacing: -.8px;
    }


    .osaas-foundation-head h3 {
        font-size: 25px;

        letter-spacing: -.5px;
    }


    .osaas-difference-wrap {
        margin-bottom: 40px;
    }


    .osaas-difference-card {
        min-height: auto;

        padding: 23px 20px;
    }


    .osaas-foundation-panel {
        padding: 30px 18px;

        border-radius: 23px;
    }


    .osaas-foundation-copy > h2 {
        font-size: 29px;
    }


    .osaas-foundation-item:hover {
        transform: none;
    }


    .osaas-foundation-stack {
        min-height: auto;

        padding-top: 40px;
    }


    .osaas-stack-card {
        transform: none;
    }


    .osaas-stack-card:hover {
        transform: translateY(-4px);
    }


    .osaas-final-foundation {
        margin-top: 40px;

        padding: 24px 20px;
    }

}


@media (max-width: 480px) {

    .osaas-foundation-section {
        padding: 45px 0;
    }


    .osaas-foundation-head h2 {
        font-size: 27px;
    }


    .osaas-foundation-head h3 {
        font-size: 23px;
    }


    .osaas-foundation-panel {
        padding: 26px 14px;
    }


    .osaas-foundation-copy > h2 {
        font-size: 26px;
    }


    .osaas-stack-grid {
        grid-template-columns: 1fr;
    }


    .osaas-final-foundation {
        flex-direction: column;

        gap: 15px;
    }


    .osaas-final-content h3 {
        font-size: 25px;
    }

}

/* =========================================================
   OWNSAAS — IMAGINE THIS SECTION
   DARK PREMIUM PURPLE / PINK LOGO THEME
========================================================= */

.osaas-imagine-section {
    position: relative;
    overflow: hidden;

    padding: 95px 0;

    font-family:  Inter, Helvetica, sans-serif;
    font-size: 18px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(171, 68, 213, 0.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 75%,
            rgba(222, 76, 171, 0.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 115%,
            rgba(139, 51, 173, 0.13),
            transparent 36%
        ),
        #07030b;
}


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

.osaas-imagine-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(201, 93, 213, 0.038) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(201, 93, 213, 0.038) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.9),
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.9),
            transparent 100%
        );
}


/* TOP GLOW */

.osaas-imagine-section::after {
    content: "";

    position: absolute;

    width: 700px;
    height: 430px;

    left: 50%;
    top: -360px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: rgba(190, 69, 205, .15);

    filter: blur(40px);

    pointer-events: none;
}


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

.osaas-imagine-heading {
    position: relative;
    z-index: 4;

    max-width: 1050px;

    margin: 0 auto 52px;

    text-align: center;
}


/* TOP LINE */

.osaas-imagine-heading-line {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    max-width: 350px;

    margin: 0 auto 22px;
}


.osaas-imagine-heading-line span {
    width: 130px;
    height: 1px;

    display: block;
}


.osaas-imagine-heading-line span:first-child {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(203, 81, 205, .75)
    );
}


.osaas-imagine-heading-line span:last-child {
    background: linear-gradient(
        90deg,
        rgba(203, 81, 205, .75),
        transparent
    );
}


.osaas-imagine-heading-line i {
    color: #dc59b5;

    font-size: 14px;
    font-style: normal;

    filter:
        drop-shadow(
            0 0 10px rgba(220, 89, 181, .70)
        );
}


/* KICKER */

.osaas-imagine-kicker {
    width: max-content;

    margin: 0 auto 15px;

    padding: 7px 14px;

    border: 1px solid rgba(201, 82, 207, .20);

    border-radius: 50px;

    color: #d368cb;

    background: rgba(188, 64, 195, .07);

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

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* HEADING */

.osaas-imagine-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(38px, 4.5vw, 62px);
    font-weight: 900;

    line-height: 1.05;

    letter-spacing: -2px;

    text-transform: uppercase;
}


.osaas-imagine-heading h2 span {
    background: linear-gradient(
        90deg,
        #a64bd9,
        #c950ca 50%,
        #e25aa9
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


.osaas-imagine-heading > p {
    margin: 17px 0 0;

    color: #bfb2c3;

    font-size: 18px;

    line-height: 1.7;
}


/* =========================================================
   MAIN PANEL
========================================================= */

.osaas-imagine-panel {
    position: relative;
    z-index: 3;

    padding: 58px 0;

    /* overflow: hidden; */

    /* border: 1px solid rgba(201, 86, 209, .18); */
/* 
    border-radius: 34px;

    background:
        linear-gradient(
            140deg,
            rgba(27, 11, 35, .97),
            rgba(9, 5, 14, .99)
        );

    box-shadow:
        0 45px 110px rgba(0,0,0,.45),
        0 15px 40px rgba(0,0,0,.25),
        0 0 90px rgba(187, 66, 196, .055),
        inset 0 1px 0 rgba(255,255,255,.045); */
}


.osaas-imagine-panel::before {
    content: "";

    position: absolute;

    width: 440px;
    height: 440px;

    right: -240px;
    top: -220px;

    border-radius: 50%;

    background: rgba(198, 72, 208, .11);

    pointer-events: none;
}


.osaas-imagine-panel::after {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    left: -170px;
    bottom: -180px;

    border-radius: 50%;

    background: rgba(220, 74, 168, .08);

    pointer-events: none;
}


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

.osaas-imagine-content {
    position: relative;
    z-index: 4;
}


/* INTRO */

.osaas-imagine-intro {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 24px;
}


.osaas-imagine-intro-icon {
    width: 34px;
    height: 34px;

    min-width: 34px;

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

    border-radius: 10px;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #a34ad7,
        #df59ad
    );

    box-shadow:
        0 8px 22px rgba(192, 67, 194, .25);

    font-size: 13px;
}


.osaas-imagine-intro p {
    margin: 0;

    color: #ffffff;

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

    line-height: 1.6;
}


/* =========================================================
   FLOW
========================================================= */

.osaas-imagine-flow {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 11px;
}


.osaas-imagine-flow::before {
    content: "";

    position: absolute;

    left: 20px;
    top: 36px;
    bottom: 36px;

    width: 1px;

    background: linear-gradient(
        to bottom,
        rgba(186, 72, 211, .45),
        rgba(224, 83, 173, .05)
    );
}


/* ITEM */

.osaas-imagine-item {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 15px;

    padding: 13px 15px;

    border: 1px solid transparent;

    border-radius: 15px;

    transition:
        border-color .25s ease,
        background .25s ease,
        transform .25s ease;
}


.osaas-imagine-item:hover {
    /* transform: translateX(5px);

    border-color: rgba(202, 80, 209, .15);

    background: rgba(255,255,255,.025); */
}


/* NUMBER */

.osaas-imagine-number {
    position: relative;
    z-index: 2;

    width: 41px;
    height: 41px;

    min-width: 41px;

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

    border: 1px solid rgba(203, 87, 211, .22);

    border-radius: 12px;

    color: #d966c8;

    background:
        linear-gradient(
            145deg,
            rgba(164, 60, 187, .20),
            rgba(213, 71, 168, .08)
        );

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


/* ITEM COPY */

.osaas-imagine-item-copy {
    flex: 1;
}


.osaas-imagine-label {
    display: block;

    margin-bottom: 4px;

    color: #d263c9;

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

    letter-spacing: 1.6px;

    text-transform: uppercase;
}


.osaas-imagine-item-copy p {
    margin: 0;

    color: #c9bdcd;

    font-size: 18px;

    line-height: 1.6;
}


.osaas-imagine-item-copy strong {
    color: #ffffff;

    font-weight: 800;
}


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

.osaas-imagine-transition {
    margin-top: 23px;
}


.osaas-imagine-transition > p {
    margin: 0 0 10px;

    color: #c6b9ca;

    font-size: 18px;

    line-height: 1.6;
}


/* =========================================================
   QUOTE BOX
========================================================= */

.osaas-imagine-quote {
    position: relative;

    padding: 17px 20px 17px 48px;

    border-radius: 15px;

    font-size: 18px;

    line-height: 1.55;
}


.osaas-quote-mark {
    position: absolute;

    left: 18px;
    top: 8px;

    font-family: Georgia, serif;

    font-size: 38px;
    line-height: 1;

    opacity: .9;
}


/* OLD */

.osaas-imagine-quote-old {
    border: 1px solid rgba(179, 167, 184, .11);

    color: #aaa0ad;

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


.osaas-imagine-quote-old .osaas-quote-mark {
    color: #807584;
}


/* NEW */

.osaas-imagine-quote-new {
    overflow: hidden;

    border: 1px solid rgba(202, 82, 208, .22);

    color: #ffffff;

    background:
        linear-gradient(
            120deg,
            rgba(160, 59, 185, .18),
            rgba(218, 74, 171, .08)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04);
}


.osaas-imagine-quote-new::before {
    content: "";

    position: absolute;

    left: 0;
    top: 12px;
    bottom: 12px;

    width: 3px;

    border-radius: 0 8px 8px 0;

    background: linear-gradient(
        to bottom,
        #a44bd7,
        #df59ad
    );
}


.osaas-imagine-quote-new .osaas-quote-mark {
    color: #d45bc3;
}


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

.osaas-imagine-final {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 24px;

    padding-top: 21px;

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


.osaas-imagine-final-icon {
    color: #d45bc3;

    font-size: 15px;
}


.osaas-imagine-final p {
    margin: 0;

    color: #ffffff;

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

    line-height: 1.6;
}


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

.osaas-imagine-visual {
    position: relative;

    min-height: 600px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* GLOWS */

.osaas-imagine-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(22px);
}


.osaas-imagine-glow-1 {
    width: 350px;
    height: 350px;

    right: 0;
    top: 8%;

    background: rgba(174, 65, 210, .24);
}


.osaas-imagine-glow-2 {
    width: 270px;
    height: 270px;

    left: 7%;
    bottom: 7%;

    background: rgba(224, 75, 171, .17);
}


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

.osaas-imagine-image-card {
    position: relative;
    z-index: 4;

    width: 92%;
    max-width: 570px;

    padding: 12px;

    overflow: hidden;

    border: 1px solid rgba(205, 88, 211, .24);

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(32, 13, 41, .96),
            rgba(12, 6, 18, .98)
        );

    box-shadow:
        0 45px 90px rgba(0,0,0,.48),
        0 0 80px rgba(190, 66, 199, .13),
        inset 0 1px 0 rgba(255,255,255,.05);

    transform:
        perspective(1200px)
        rotateY(-3deg)
        rotateX(1deg);

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


.osaas-imagine-image-card:hover {
    transform:
        perspective(1200px)
        rotateY(0deg)
        rotateX(0deg)
        translateY(-6px);

    box-shadow:
        0 55px 110px rgba(0,0,0,.52),
        0 0 100px rgba(206, 74, 197, .17);
}


/* IMAGE TOP */

.osaas-imagine-image-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 3px 5px 12px;
}


/* DOTS */

.osaas-imagine-dots {
    display: flex;

    gap: 5px;
}


.osaas-imagine-dots span {
    width: 7px;
    height: 7px;

    display: block;

    border-radius: 50%;

    background: #38203d;
}


.osaas-imagine-dots span:nth-child(2) {
    background: #5b2b61;
}


.osaas-imagine-dots span:nth-child(3) {
    background: #d258bd;
}


/* PILL */

.osaas-imagine-image-pill {
    padding: 5px 10px;

    border: 1px solid rgba(205, 82, 208, .17);

    border-radius: 30px;

    color: #ca5dcc;

    background: rgba(177, 61, 188, .08);

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

    letter-spacing: 1.4px;
}


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

.osaas-imagine-image-wrap {
    position: relative;

    min-height: 480px;

    overflow: hidden;

    border-radius: 21px;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(189, 75, 207, .18),
            transparent 35%
        ),
        #0c0611;
}


.osaas-imagine-image-wrap img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 480px;

    object-fit: cover;

    border-radius: 21px;
}


.osaas-imagine-image-overlay {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 60%,
            rgba(13, 5, 18, .18) 100%
        );
}


/* =========================================================
   FLOATING UI
========================================================= */

.osaas-imagine-float {
    position: absolute;
    z-index: 6;

    border: 1px solid rgba(201, 86, 210, .21);

    background: rgba(25, 10, 31, .86);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.05);
}


/* LEFT FLOAT */

.osaas-imagine-float-one {
    left: -3px;
    top: 20%;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 11px 14px;

    border-radius: 15px;

    animation:
        osaasImagineFloatOne 4.5s ease-in-out infinite;
}


.osaas-imagine-float-check {
    width: 30px;
    height: 30px;

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

    border-radius: 9px;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #a24ad5,
        #df59ad
    );

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


.osaas-imagine-float-one > div {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


.osaas-imagine-float-one > div span {
    height: 5px;

    display: block;

    border-radius: 20px;

    background: #54275d;
}


.osaas-imagine-float-one > div span:first-child {
    width: 60px;
}


.osaas-imagine-float-one > div span:last-child {
    width: 41px;

    background: #371a3e;
}


/* RIGHT FLOAT */

.osaas-imagine-float-two {
    right: -2px;
    bottom: 17%;

    padding: 14px 16px;

    border-radius: 15px;

    animation:
        osaasImagineFloatTwo 5s ease-in-out infinite;
}


/* BARS */

.osaas-imagine-bars {
    height: 39px;

    display: flex;
    align-items: flex-end;

    gap: 5px;
}


.osaas-imagine-bars span {
    width: 6px;

    display: block;

    border-radius: 6px 6px 2px 2px;

    background: linear-gradient(
        to top,
        #9f45ce,
        #df59ad
    );
}


.osaas-imagine-bars span:nth-child(1) {
    height: 13px;
}


.osaas-imagine-bars span:nth-child(2) {
    height: 22px;
}


.osaas-imagine-bars span:nth-child(3) {
    height: 30px;
}


.osaas-imagine-bars span:nth-child(4) {
    height: 39px;
}


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

.osaas-imagine-orbit {
    position: absolute;
    z-index: 1;

    width: 480px;
    height: 480px;

    border: 1px solid rgba(200, 85, 210, .09);

    border-radius: 50%;
}


.osaas-imagine-orbit::before {
    content: "";

    position: absolute;

    inset: 50px;

    border: 1px solid rgba(224, 82, 177, .055);

    border-radius: 50%;
}


.osaas-imagine-orbit span {
    position: absolute;

    width: 8px;
    height: 8px;

    top: 85px;
    right: 53px;

    border-radius: 50%;

    background: #d85bc0;

    box-shadow:
        0 0 16px rgba(216, 91, 192, .8);
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes osaasImagineFloatOne {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


@keyframes osaasImagineFloatTwo {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }

}


/* =========================================================
   1199PX
========================================================= */

@media (max-width: 1199px) {

    .osaas-imagine-panel {
        padding: 45px;
    }


    .osaas-imagine-visual {
        min-height: 540px;
    }


    .osaas-imagine-image-wrap,
    .osaas-imagine-image-wrap img {
        min-height: 410px;
    }


    .osaas-imagine-orbit {
        width: 410px;
        height: 410px;
    }

}


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

@media (max-width: 991px) {

    .osaas-imagine-section {
        padding: 75px 0;
    }


    .osaas-imagine-heading {
        margin-bottom: 40px;
    }


    .osaas-imagine-heading h2 {
        font-size: 42px;
    }


    .osaas-imagine-panel {
        padding: 34px 25px;

        border-radius: 27px;
    }


    .osaas-imagine-item {
        padding-left: 5px;
        padding-right: 5px;
    }


    .osaas-imagine-visual {
        min-height: 480px;
    }


    .osaas-imagine-image-wrap,
    .osaas-imagine-image-wrap img {
        min-height: 355px;
    }


    .osaas-imagine-orbit {
        width: 340px;
        height: 340px;
    }

}


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

@media (max-width: 767px) {

    .osaas-imagine-section {
        padding: 55px 0;

        font-size: 18px;
    }


    .osaas-imagine-heading {
        margin-bottom: 32px;
    }


    .osaas-imagine-heading-line {
        max-width: 260px;

        margin-bottom: 18px;
    }


    .osaas-imagine-heading-line span {
        width: 90px;
    }


    .osaas-imagine-heading h2 {
        font-size: 31px;

        letter-spacing: -.8px;
    }


    .osaas-imagine-heading > p {
        font-size: 18px;
    }


    .osaas-imagine-panel {
        padding: 29px 18px;

        border-radius: 23px;
    }


    .osaas-imagine-item-copy p,
    .osaas-imagine-transition > p,
    .osaas-imagine-quote,
    .osaas-imagine-final p {
        font-size: 18px;
    }


    .osaas-imagine-item:hover {
        transform: none;
    }


    /* image automatically comes below content */
    .osaas-imagine-visual {
        min-height: auto;

        padding: 50px 0 15px;
    }


    .osaas-imagine-image-card {
        width: 100%;

        transform: none;

        border-radius: 24px;
    }


    .osaas-imagine-image-card:hover {
        transform: translateY(-4px);
    }


    .osaas-imagine-image-wrap,
    .osaas-imagine-image-wrap img {
        min-height: 340px;

        border-radius: 17px;
    }


    .osaas-imagine-float-one {
        top: 25px;
        left: -4px;
    }


    .osaas-imagine-float-two {
        right: -4px;
        bottom: -4px;
    }


    .osaas-imagine-orbit {
        width: 300px;
        height: 300px;
    }

}


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

@media (max-width: 480px) {

    .osaas-imagine-section {
        padding: 45px 0;
    }


    .osaas-imagine-heading h2 {
        font-size: 28px;
    }


    .osaas-imagine-kicker {
        font-size: 10px;

        letter-spacing: 1.5px;
    }


    .osaas-imagine-panel {
        padding: 26px 14px;
    }


    .osaas-imagine-number {
        width: 36px;
        height: 36px;

        min-width: 36px;
    }


    .osaas-imagine-flow::before {
        left: 17px;
    }


    .osaas-imagine-quote {
        padding:
            16px 14px
            16px 42px;
    }


    .osaas-imagine-image-wrap,
    .osaas-imagine-image-wrap img {
        min-height: 285px;
    }


    .osaas-imagine-orbit {
        width: 250px;
        height: 250px;
    }

}


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

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

    .osaas-imagine-float-one,
    .osaas-imagine-float-two {
        animation: none;
    }


    .osaas-imagine-item,
    .osaas-imagine-image-card {
        transition: none;
    }

}

/* =========================================================
   ALWAYS-ON CREATIVE DEPARTMENT
   ULTRA PREMIUM WHITE THEME
   OWNSAAS PURPLE / MAGENTA / PINK
========================================================= */

.aonref26-section {
    position: relative;
    overflow: hidden;

    padding: 100px 0;

    font-family:  Inter, Helvetica, sans-serif;
    font-size: 18px;

    color: #241b2a;

    background:
        radial-gradient(
            circle at 5% 15%,
            rgba(168, 74, 216, 0.09),
            transparent 25%
        ),
        radial-gradient(
            circle at 95% 75%,
            rgba(224, 82, 171, 0.08),
            transparent 28%
        ),
        #ffffff;
}


/* =========================================================
   PREMIUM GRID BACKGROUND
========================================================= */

.aonref26-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(151, 82, 173, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(151, 82, 173, 0.025) 1px,
            transparent 1px
        );

    background-size: 52px 52px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.9),
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.9),
            transparent 100%
        );
}


/* TOP GLOW */

.aonref26-section::after {
    content: "";

    position: absolute;

    width: 600px;
    height: 320px;

    left: 50%;
    top: -230px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: rgba(191, 77, 207, .09);

    filter: blur(40px);

    pointer-events: none;
}


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

.aonref26-head {
    position: relative;
    z-index: 5;

    max-width: 1050px;

    margin: 0 auto 60px;
}


/* DECORATIVE LINE */

.aonref26-head-line {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    max-width: 360px;

    margin: 0 auto 22px;
}


.aonref26-head-line span {
    display: block;

    width: 135px;
    height: 1px;
}


.aonref26-head-line span:first-child {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(190, 77, 208, .65)
    );
}


.aonref26-head-line span:last-child {
    background: linear-gradient(
        90deg,
        rgba(190, 77, 208, .65),
        transparent
    );
}


.aonref26-head-line i {
    color: #cf55c6;

    font-size: 14px;
    font-style: normal;

    filter:
        drop-shadow(
            0 0 9px rgba(207, 85, 198, .40)
        );
}


/* KICKER */

.aonref26-kicker {
    width: max-content;

    margin: 0 auto 15px;

    padding: 7px 14px;

    border: 1px solid rgba(193, 80, 203, .18);

    border-radius: 100px;

    color: #bf51cb;

    background:
        linear-gradient(
            90deg,
            rgba(168, 72, 211, .06),
            rgba(220, 82, 174, .06)
        );

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

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* TITLE */

.aonref26-title {
    margin: 0;

    color: #21182a;

    font-size: clamp(37px, 4.3vw, 60px);
    font-weight: 900;

    line-height: 1.08;

    letter-spacing: -2px;
}


.aonref26-title .drai-flow-heading > span {
    display: inline-block;

    background:
        linear-gradient(
            90deg,
            #a34bd9 0%,
            #c950c8 48%,
            #df59ad 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* =========================================================
   FEATURE STACK
========================================================= */

.aonref26-stack {
    position: relative;
    z-index: 4;

    max-width: 1120px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    gap: 25px;
}


/* =========================================================
   FEATURE BLOCK
========================================================= */

.aonref26-feature {
    position: relative;

    padding: 35px 42px;

    overflow: hidden;

    border: 1px solid rgba(161, 101, 173, .12);

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.99),
            rgba(251,247,252,.98)
        );

    box-shadow:
        0 24px 65px rgba(68, 40, 77, .07),
        0 6px 18px rgba(68, 40, 77, .035),
        inset 0 1px 0 #ffffff;

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


/* LEFT PREMIUM ACCENT */

.aonref26-feature::before {
    content: "";

    position: absolute;

    left: 0;
    top: 24px;
    bottom: 24px;

    width: 5px;

    border-radius: 0 10px 10px 0;

    background:
        linear-gradient(
            to bottom,
            #a54bd9,
            #c953c8 50%,
            #e05aac
        );
}


.aonref26-feature::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    right: -130px;
    top: -130px;

    border-radius: 50%;

    background:
        rgba(203, 77, 199, .045);

    pointer-events: none;
}


.aonref26-feature:hover {
    transform: translateY(-5px);

    border-color: rgba(190, 78, 203, .23);

    box-shadow:
        0 34px 80px rgba(68, 40, 77, .10),
        0 9px 25px rgba(68, 40, 77, .045);
}


/* ALT CARD */

.aonref26-feature-alt {
    background:
        linear-gradient(
            135deg,
            rgba(250,245,252,.99),
            #ffffff
        );
}


/* =========================================================
   LARGE CARD NUMBER
========================================================= */

.aonref26-feature-number {
    position: absolute;

    right: 24px;
    top: 13px;

    color: rgba(164, 75, 190, .07);

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

    line-height: 1;

    letter-spacing: -6px;

    pointer-events: none;
}


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

.aonref26-feature-media {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height: 225px;

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

    overflow: hidden;

    border: 1px solid rgba(189, 82, 202, .12);

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(194, 82, 213, .10),
            transparent 48%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #fcf8fd
        );

    box-shadow:
        inset 0 1px 0 #ffffff,
        0 17px 42px rgba(78, 41, 89, .06);

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


.aonref26-feature:hover
.aonref26-feature-media {
    transform: translateY(-3px);

    box-shadow:
        inset 0 1px 0 #ffffff,
        0 22px 50px rgba(78, 41, 89, .09);
}


/* IMAGE GLOW */

.aonref26-media-glow {
    position: absolute;

    width: 160px;
    height: 160px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(194, 74, 214, .16),
            rgba(223, 84, 173, .07) 45%,
            transparent 70%
        );

    filter: blur(5px);
}


/* IMAGE */

.aonref26-feature-media img {
    position: relative;
    z-index: 2;

    display: block;

    width: auto;
    max-width: 90%;
    max-height: 205px;

    object-fit: contain;

    transition:
        transform .4s ease;
}


.aonref26-feature:hover
.aonref26-feature-media img {
    transform:
        translateY(-4px)
        scale(1.035);
}


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

.aonref26-feature-content {
    position: relative;
    z-index: 3;

    padding: 5px 0;
}


/* SMALL LABEL */

.aonref26-feature-label {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 11px;

    color: #c252c9;

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

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


.aonref26-feature-label > span {
    width: 8px;
    height: 8px;

    display: block;

    border-radius: 3px;

    background:
        linear-gradient(
            135deg,
            #a44ad7,
            #df59ad
        );

    transform: rotate(45deg);
}


/* FEATURE TITLE */

.aonref26-feature-content h3 {
    margin: 0 0 13px;

    color: #21182a;

    font-size: clamp(25px, 2.5vw, 34px);
    font-weight: 900;

    line-height: 1.22;

    letter-spacing: -.8px;
}


/* DESCRIPTION */

.aonref26-feature-content > p {
    max-width: 680px;

    margin: 0;

    color: #625968;

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

    line-height: 1.72;
}


/* =========================================================
   BOTTOM BENEFIT
========================================================= */

.aonref26-feature-bottom {
    width: max-content;
    max-width: 100%;

    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 20px;

    padding: 10px 14px;

    border: 1px solid rgba(187, 80, 201, .11);

    border-radius: 12px;

    color: #403648;

    background:
        linear-gradient(
            90deg,
            rgba(170, 73, 210, .055),
            rgba(220, 82, 172, .04)
        );

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


/* CHECK */

.aonref26-check {
    width: 26px;
    height: 26px;

    min-width: 26px;

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

    border-radius: 8px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #a44bd8,
            #df59ad
        );

    box-shadow:
        0 7px 17px rgba(188, 72, 194, .20);

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


/* =========================================================
   PREMIUM CONNECTOR BETWEEN CARDS
========================================================= */

.aonref26-feature:not(:last-child)::before {
    box-shadow:
        0 0 15px rgba(196, 79, 201, .15);
}


/* =========================================================
   1199
========================================================= */

@media (max-width: 1199px) {

    .aonref26-section {
        padding: 80px 0;
    }


    .aonref26-feature {
        padding: 30px 32px;
    }


    .aonref26-feature-media {
        min-height: 210px;
    }


    .aonref26-feature-media img {
        max-height: 185px;
    }

}


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

@media (max-width: 991px) {

    .aonref26-title {
        font-size: 42px;

        letter-spacing: -1.2px;
    }


    .aonref26-head {
        margin-bottom: 45px;
    }


    .aonref26-feature {
        padding: 28px 25px;
    }


    .aonref26-feature-content h3 {
        font-size: 27px;
    }


    .aonref26-feature-content > p {
        font-size: 18px;
    }


    .aonref26-feature-number {
        font-size: 65px;
    }

}


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

@media (max-width: 767px) {

    .aonref26-section {
        padding: 55px 0;

        font-size: 18px;
    }


    .aonref26-head {
        margin-bottom: 35px;
    }


    .aonref26-head-line {
        max-width: 260px;

        margin-bottom: 18px;
    }


    .aonref26-head-line span {
        width: 90px;
    }


    .aonref26-title {
        font-size: 31px;

        line-height: 1.13;

        letter-spacing: -.8px;
    }


    .aonref26-stack {
        gap: 18px;
    }


    .aonref26-feature {
        padding: 23px 18px;

        border-radius: 20px;
    }


    .aonref26-feature::before {
        top: 20px;
        bottom: 20px;
    }


    .aonref26-feature-number {
        top: 10px;
        right: 15px;

        font-size: 55px;
    }


    .aonref26-feature-media {
        max-width: 360px;
        min-height: 240px;

        margin: 0 auto;
    }


    .aonref26-feature-media img {
        max-height: 215px;
    }


    .aonref26-feature-content {
        text-align: left;
    }


    .aonref26-feature-content h3 {
        font-size: 26px;
    }


    .aonref26-feature-content > p {
        font-size: 18px;
    }


    .aonref26-feature-bottom {
        width: 100%;
    }


    .aonref26-feature:hover {
        transform: none;
    }

}


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

@media (max-width: 480px) {

    .aonref26-section {
        padding: 45px 0;
    }


    .aonref26-title {
        font-size: 27px;
    }


    .aonref26-kicker {
        font-size: 9px;

        letter-spacing: 1.5px;
    }


    .aonref26-feature {
        padding: 20px 15px;
    }


    .aonref26-feature-media {
        min-height: 210px;
    }


    .aonref26-feature-media img {
        max-height: 185px;
    }


    .aonref26-feature-content h3 {
        font-size: 24px;
    }


    .aonref26-feature-bottom {
        align-items: flex-start;

        font-size: 14px;
    }

}


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

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

    .aonref26-feature,
    .aonref26-feature-media,
    .aonref26-feature-media img {
        transition: none;
    }

}
.aonref26-subtitle {
    margin: 18px 0 0;
    color: #241b2a;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.4;
    text-transform: uppercase;
}

/* =========================================================
   OWNSAAS - SELL THE SOLUTION SECTION
   DARK PREMIUM PURPLE / MAGENTA / PINK THEME
========================================================= */

.osaas-solution-section {
    position: relative;
    overflow: hidden;

    padding: 100px 0;

    font-family:  Inter, Helvetica, sans-serif;
    font-size: 18px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 10% 12%,
            rgba(167, 72, 210, 0.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 78%,
            rgba(223, 83, 170, 0.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 110%,
            rgba(114, 36, 144, 0.14),
            transparent 34%
        ),
        #08040c;
}


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

.osaas-solution-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(203, 90, 214, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(203, 90, 214, 0.035) 1px,
            transparent 1px
        );

    background-size: 52px 52px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .9),
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .9),
            transparent 100%
        );
}


/* MAIN TOP GLOW */

.osaas-solution-section::after {
    content: "";

    position: absolute;

    width: 700px;
    height: 360px;

    left: 50%;
    top: -280px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: rgba(186, 74, 206, .15);

    filter: blur(45px);

    pointer-events: none;
}


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

.osaas-solution-head {
    position: relative;
    z-index: 4;

    max-width: 1080px;

    margin: 0 auto 52px;

    text-align: center;
}


/* HEADING DECORATIVE BAR */

.osaas-solution-headline-bar {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    max-width: 350px;

    margin: 0 auto 22px;
}


.osaas-solution-headline-bar span {
    display: block;

    width: 130px;
    height: 1px;
}


.osaas-solution-headline-bar span:first-child {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201, 82, 207, .75)
        );
}


.osaas-solution-headline-bar span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(201, 82, 207, .75),
            transparent
        );
}


.osaas-solution-headline-bar i {
    color: #d75abe;

    font-size: 14px;
    font-style: normal;

    filter:
        drop-shadow(
            0 0 10px rgba(215, 90, 190, .65)
        );
}


/* KICKER */

.osaas-solution-kicker {
    width: max-content;

    margin: 0 auto 15px;

    padding: 7px 14px;

    border: 1px solid rgba(197, 84, 207, .18);

    border-radius: 50px;

    color: #cf62cb;

    background: rgba(181, 66, 189, .08);

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

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* MAIN TITLE */

.osaas-solution-title {
    margin: 0;

    color: #ffffff;

    font-size: clamp(37px, 4.4vw, 60px);
    font-weight: 900;

    line-height: 1.08;

    letter-spacing: -2px;

    text-transform: uppercase;
}


.osaas-solution-title span {
    background:
        linear-gradient(
            90deg,
            #a54bd8 0%,
            #c953c8 50%,
            #df59ad 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* SUBTITLE */

.osaas-solution-subtitle {
    margin: 12px 0 0;

    color: #ffffff;

    font-size: clamp(25px, 3vw, 38px);
    font-weight: 900;

    line-height: 1.2;

    letter-spacing: -1px;

    text-transform: uppercase;
}


.osaas-solution-head-copy {
    margin: 18px 0 0;

    color: #c9bdcc;

    font-size: 18px;

    line-height: 1.7;
}


/* =========================================================
   MAIN PANEL
========================================================= */

.osaas-solution-panel {
    position: relative;
    z-index: 3;

    padding: 58px;

    overflow: hidden;

    border: 1px solid rgba(198, 83, 208, .18);

    border-radius: 34px;

    background:
        linear-gradient(
            140deg,
            rgba(27, 11, 35, .97),
            rgba(10, 5, 16, .99)
        );

    box-shadow:
        0 45px 110px rgba(0, 0, 0, .45),
        0 15px 40px rgba(0, 0, 0, .25),
        0 0 90px rgba(188, 69, 197, .06),
        inset 0 1px 0 rgba(255, 255, 255, .045);
}


.osaas-solution-panel::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -230px;
    top: -220px;

    border-radius: 50%;

    background: rgba(194, 72, 208, .11);

    pointer-events: none;
}


.osaas-solution-panel::after {
    content: "";

    position: absolute;

    width: 340px;
    height: 340px;

    left: -170px;
    bottom: -180px;

    border-radius: 50%;

    background: rgba(224, 78, 173, .08);

    pointer-events: none;
}


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

.osaas-solution-content {
    position: relative;
    z-index: 4;
}


.osaas-solution-block + .osaas-solution-block {
    margin-top: 24px;
}


/* SMALL LABEL */

.osaas-solution-label {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 10px;

    color: #d061ca;

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

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


.osaas-solution-label span {
    width: 8px;
    height: 8px;

    display: block;

    border-radius: 3px;

    transform: rotate(45deg);

    background:
        linear-gradient(
            135deg,
            #a44bd7,
            #df59ad
        );
}


.osaas-solution-paragraph {
    margin: 0;

    color: #ffffff;

    font-size: 18px;

    line-height: 1.7;
}


/* =========================================================
   QUOTE
========================================================= */

.osaas-solution-quote-box {
    position: relative;

    margin-top: 12px;

    padding: 18px 20px 18px 48px;

    border-radius: 15px;

    font-size: 18px;

    line-height: 1.55;
}


.osaas-solution-quote-mark {
    position: absolute;

    left: 18px;
    top: 8px;

    font-family: Georgia, serif;

    font-size: 38px;

    line-height: 1;

    opacity: .9;
}


.osaas-solution-quote-box--muted {
    border: 1px solid rgba(255, 255, 255, .08);

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

    color: #b6aabb;
}


.osaas-solution-quote-box--muted
.osaas-solution-quote-mark {
    color: #85788a;
}


/* =========================================================
   NEED LIST
========================================================= */

.osaas-solution-need-list {
    display: flex;
    flex-direction: column;

    gap: 9px;

    margin-top: 14px;
}


.osaas-solution-need-item {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 10px 12px;

    border: 1px solid transparent;

    border-radius: 13px;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.osaas-solution-need-item:hover {
    /* transform: translateX(5px);

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

    border-color: rgba(200, 83, 209, .14); */
}


.osaas-solution-check {
    width: 28px;
    height: 28px;

    min-width: 28px;

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

    border-radius: 8px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #a44bd7,
            #df59ad
        );

    box-shadow:
        0 8px 18px rgba(189, 72, 194, .22);

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


.osaas-solution-need-item p {
    margin: 0;

    color: #d0c3d2;

    font-size: 18px;

    line-height: 1.55;
}


/* =========================================================
   RIGHT IMAGE VISUAL
========================================================= */

.osaas-solution-visual {
    position: relative;

    min-height: 590px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.osaas-solution-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(22px);
}


.osaas-solution-glow-one {
    width: 350px;
    height: 350px;

    right: 2%;
    top: 8%;

    background: rgba(174, 64, 209, .25);
}


.osaas-solution-glow-two {
    width: 270px;
    height: 270px;

    left: 7%;
    bottom: 7%;

    background: rgba(224, 75, 171, .17);
}


/* IMAGE CARD */

.osaas-solution-image-card {
    position: relative;
    z-index: 4;

    width: 92%;
    max-width: 570px;

    padding: 12px;

    overflow: hidden;

    border: 1px solid rgba(204, 88, 211, .23);

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(32, 13, 41, .96),
            rgba(12, 6, 18, .98)
        );

    box-shadow:
        0 45px 90px rgba(0, 0, 0, .48),
        0 0 80px rgba(190, 66, 199, .13),
        inset 0 1px 0 rgba(255, 255, 255, .05);

    transform:
        perspective(1200px)
        rotateY(-3deg)
        rotateX(1deg);

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


.osaas-solution-image-card:hover {
    transform:
        perspective(1200px)
        rotateY(0deg)
        rotateX(0deg)
        translateY(-6px);

    box-shadow:
        0 55px 110px rgba(0, 0, 0, .52),
        0 0 100px rgba(206, 74, 197, .17);
}


/* IMAGE HEADER */

.osaas-solution-image-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 3px 5px 12px;
}


.osaas-solution-browser-dots {
    display: flex;

    gap: 5px;
}


.osaas-solution-browser-dots span {
    width: 7px;
    height: 7px;

    display: block;

    border-radius: 50%;

    background: #38203d;
}


.osaas-solution-browser-dots span:nth-child(2) {
    background: #5b2b61;
}


.osaas-solution-browser-dots span:nth-child(3) {
    background: #d258bd;
}


.osaas-solution-pill {
    padding: 5px 10px;

    border: 1px solid rgba(205, 82, 208, .17);

    border-radius: 30px;

    color: #ca5dcc;

    background: rgba(177, 61, 188, .08);

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

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


/* IMAGE */

.osaas-solution-image-wrap {
    position: relative;

    min-height: 470px;

    overflow: hidden;

    border-radius: 21px;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(189, 75, 207, .18),
            transparent 35%
        ),
        #0c0611;
}


.osaas-solution-image-wrap img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 470px;

    object-fit: cover;

    border-radius: 21px;
}


/* SHINE */

.osaas-solution-shine {
    position: absolute;

    inset: 0;

    overflow: hidden;

    border-radius: 30px;

    pointer-events: none;
}


.osaas-solution-shine::before {
    content: "";

    position: absolute;

    top: -40%;
    left: -70%;

    width: 140px;
    height: 180%;

    transform: rotate(18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .12),
            transparent
        );

    transition:
        left .85s ease;
}


.osaas-solution-image-card:hover
.osaas-solution-shine::before {
    left: 130%;
}


/* =========================================================
   FLOATING UI
========================================================= */

.osaas-solution-float {
    position: absolute;
    z-index: 6;

    border: 1px solid rgba(201, 86, 210, .21);

    background: rgba(25, 10, 31, .86);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .05);
}


.osaas-solution-float-one {
    left: -3px;
    top: 20%;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 11px 14px;

    border-radius: 15px;

    animation:
        osaasSolutionFloatOne
        4.5s
        ease-in-out
        infinite;
}


.osaas-solution-float-icon {
    width: 30px;
    height: 30px;

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

    border-radius: 9px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #a24ad5,
            #df59ad
        );

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


.osaas-solution-float-lines {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


.osaas-solution-float-lines span {
    display: block;

    height: 5px;

    border-radius: 20px;

    background: #54275d;
}


.osaas-solution-float-lines span:first-child {
    width: 60px;
}


.osaas-solution-float-lines span:last-child {
    width: 41px;

    background: #371a3e;
}


/* CHART */

.osaas-solution-float-two {
    right: -2px;
    bottom: 17%;

    padding: 14px 16px;

    border-radius: 15px;

    animation:
        osaasSolutionFloatTwo
        5s
        ease-in-out
        infinite;
}


.osaas-solution-bars {
    height: 39px;

    display: flex;
    align-items: flex-end;

    gap: 5px;
}


.osaas-solution-bars span {
    width: 6px;

    display: block;

    border-radius: 6px 6px 2px 2px;

    background:
        linear-gradient(
            to top,
            #9f45ce,
            #df59ad
        );
}


.osaas-solution-bars span:nth-child(1) {
    height: 13px;
}


.osaas-solution-bars span:nth-child(2) {
    height: 22px;
}


.osaas-solution-bars span:nth-child(3) {
    height: 30px;
}


.osaas-solution-bars span:nth-child(4) {
    height: 39px;
}


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

.osaas-solution-orbit {
    position: absolute;
    z-index: 1;

    width: 470px;
    height: 470px;

    border: 1px solid rgba(200, 85, 210, .09);

    border-radius: 50%;
}


.osaas-solution-orbit::before {
    content: "";

    position: absolute;

    inset: 50px;

    border: 1px solid rgba(224, 82, 177, .055);

    border-radius: 50%;
}


.osaas-solution-orbit span {
    position: absolute;

    width: 8px;
    height: 8px;

    top: 85px;
    right: 53px;

    border-radius: 50%;

    background: #d85bc0;

    box-shadow:
        0 0 16px rgba(216, 91, 192, .8);
}


/* =========================================================
   MECHANISM / MARKET BLOCK
   SAME SECTION
========================================================= */

.osaas-mechanism-block {
    position: relative;
    z-index: 5;

    margin-top: 55px;

    padding-top: 45px;

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


/* =========================================================
   MECHANISM CARDS COLUMN
========================================================= */

.osaas-mechanism-cards {
    display: flex;
    flex-direction: column;

    gap: 16px;

    height: 100%;
}


/* CARD */

.osaas-mechanism-card {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 16px;

    padding: 21px 22px;

    overflow: hidden;

    border: 1px solid rgba(211, 85, 207, .24);

    border-radius: 18px;

    background:
        linear-gradient(
            120deg,
            rgba(144, 40, 145, .22),
            rgba(69, 19, 76, .18)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 18px 40px rgba(0, 0, 0, .17);

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


.osaas-mechanism-card:hover {
    transform: translateY(-3px);

    border-color: rgba(225, 92, 198, .40);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .045),
        0 23px 48px rgba(0, 0, 0, .23);
}


/* LEFT ACCENT */

.osaas-mechanism-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 12px;
    bottom: 12px;

    width: 4px;

    border-radius: 0 10px 10px 0;

    background:
        linear-gradient(
            to bottom,
            #ac48d3,
            #e45ab1
        );
}


/* SECOND CARD */

.osaas-mechanism-card-alt {
    background:
        linear-gradient(
            120deg,
            rgba(93, 26, 102, .19),
            rgba(47, 14, 54, .19)
        );
}


/* ICON */

.osaas-mechanism-icon {
    width: 40px;
    height: 40px;

    min-width: 40px;

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

    border-radius: 11px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #ad49d4,
            #df58ae
        );

    box-shadow:
        0 8px 22px rgba(193, 67, 188, .26);

    font-size: 15px;
}


/* CARD TEXT */

.osaas-mechanism-card-content {
    flex: 1;
}


.osaas-mechanism-card-content h3 {
    margin: 0 0 7px;

    color: #ffffff;

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

    line-height: 1.45;
}


.osaas-mechanism-card-content p {
    margin: 0;

    color: #cdbfd0;

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

    line-height: 1.55;
}


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

.osaas-mechanism-copy {
    position: relative;

    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 25px 28px;

    overflow: hidden;

    border: 1px solid rgba(202, 83, 207, .12);

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .035),
            rgba(196, 68, 193, .04)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .025);
}


/* LEFT COPY ACCENT */

.osaas-mechanism-copy::before {
    content: "";

    position: absolute;

    left: 0;
    top: 20px;
    bottom: 20px;

    width: 3px;

    border-radius: 0 10px 10px 0;

    background:
        linear-gradient(
            to bottom,
            #ab49d4,
            #df59ad
        );
}


/* COPY GLOW */

.osaas-mechanism-copy::after {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    right: -80px;
    bottom: -100px;

    border-radius: 50%;

    background: rgba(204, 72, 189, .08);

    filter: blur(5px);

    pointer-events: none;
}


.osaas-mechanism-copy p {
 position: relative;
  z-index: 2;
  margin: 0 0 17px;
  color: #cdbfd0;
  font-size: 18px;
  line-height: 1.4;
}


.osaas-mechanism-copy p:last-child {
    margin-bottom: 0;
}


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

@keyframes osaasSolutionFloatOne {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


@keyframes osaasSolutionFloatTwo {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }

}


/* =========================================================
   1199PX
========================================================= */

@media (max-width: 1199px) {

    .osaas-solution-panel {
        padding: 45px;
    }


    .osaas-solution-visual {
        min-height: 530px;
    }


    .osaas-solution-image-wrap,
    .osaas-solution-image-wrap img {
        min-height: 405px;
    }


    .osaas-solution-orbit {
        width: 400px;
        height: 400px;
    }

}


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

@media (max-width: 991px) {

    .osaas-solution-section {
        padding: 75px 0;
    }


    .osaas-solution-head {
        margin-bottom: 40px;
    }


    .osaas-solution-title {
        font-size: 42px;
    }


    .osaas-solution-panel {
        padding: 35px 25px;

        border-radius: 27px;
    }


    .osaas-solution-visual {
        min-height: 470px;
    }


    .osaas-solution-image-wrap,
    .osaas-solution-image-wrap img {
        min-height: 350px;
    }


    .osaas-solution-orbit {
        width: 340px;
        height: 340px;
    }


    .osaas-mechanism-block {
        margin-top: 40px;

        padding-top: 35px;
    }


    .osaas-mechanism-copy {
        padding: 23px 22px;
    }

}


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

@media (max-width: 767px) {

    .osaas-solution-section {
        padding: 55px 0;

        font-size: 18px;
    }


    .osaas-solution-head {
        margin-bottom: 32px;
    }


    .osaas-solution-headline-bar {
        max-width: 260px;

        margin-bottom: 18px;
    }


    .osaas-solution-headline-bar span {
        width: 90px;
    }


    .osaas-solution-title {
        font-size: 31px;

        letter-spacing: -.8px;
    }


    .osaas-solution-subtitle {
        font-size: 24px;
    }


    .osaas-solution-head-copy {
        font-size: 18px;
    }


    .osaas-solution-panel {
        padding: 29px 18px;

        border-radius: 23px;
    }


    .osaas-solution-paragraph,
    .osaas-solution-quote-box,
    .osaas-solution-need-item p {
        font-size: 18px;
    }


    .osaas-solution-need-item:hover {
        transform: none;
    }


    /* RIGHT IMAGE */

    .osaas-solution-visual {
        min-height: auto;

        padding: 50px 0 15px;
    }


    .osaas-solution-image-card {
        width: 100%;

        transform: none;

        border-radius: 24px;
    }


    .osaas-solution-image-card:hover {
        transform: translateY(-4px);
    }


    .osaas-solution-image-wrap,
    .osaas-solution-image-wrap img {
        min-height: 340px;

        border-radius: 17px;
    }


    .osaas-solution-float-one {
        top: 25px;
        left: -4px;
    }


    .osaas-solution-float-two {
        right: -4px;
        bottom: -4px;
    }


    .osaas-solution-orbit {
        width: 300px;
        height: 300px;
    }


    /* MECHANISM */

    .osaas-mechanism-block {
        margin-top: 35px;

        padding-top: 30px;
    }


    .osaas-mechanism-card {
        padding: 17px 16px;

        gap: 12px;

        border-radius: 15px;
    }


    .osaas-mechanism-card:hover {
        transform: none;
    }


    .osaas-mechanism-icon {
        width: 36px;
        height: 36px;

        min-width: 36px;
    }


    .osaas-mechanism-copy {
        padding: 21px 18px;

        border-radius: 15px;
    }


    .osaas-mechanism-card-content h3,
    .osaas-mechanism-card-content p,
    .osaas-mechanism-copy p {
        font-size: 18px;
    }

}


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

@media (max-width: 480px) {

    .osaas-solution-section {
        padding: 45px 0;
    }


    .osaas-solution-title {
        font-size: 28px;
    }


    .osaas-solution-subtitle {
        font-size: 22px;
    }


    .osaas-solution-kicker {
        font-size: 10px;

        letter-spacing: 1.5px;
    }


    .osaas-solution-panel {
        padding: 26px 14px;
    }


    .osaas-solution-quote-box {
        padding:
            16px 14px
            16px 42px;
    }


    .osaas-solution-image-wrap,
    .osaas-solution-image-wrap img {
        min-height: 285px;
    }


    .osaas-solution-orbit {
        width: 250px;
        height: 250px;
    }


    .osaas-mechanism-card {
        padding: 16px 14px;
    }


    .osaas-mechanism-copy {
        padding: 19px 15px;
    }

}


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

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

    .osaas-solution-float-one,
    .osaas-solution-float-two {
        animation: none;
    }


    .osaas-solution-image-card,
    .osaas-solution-need-item,
    .osaas-mechanism-card {
        transition: none;
    }

}

/* =========================================================
   OWNSAAS AI CAPABILITIES SECTION
   ULTRA PREMIUM WHITE THEME
========================================================= */

.osaas-capabilities-section {
    position: relative;
    overflow: hidden;

    padding: 100px 0;

    font-family:  Inter, Helvetica, sans-serif;
    font-size: 18px;

    color: #241b2b;

background: #070B14 url(../images/osaas-capabilities-section.png) no-repeat center top / cover;
}


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

.osaas-capabilities-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(144, 84, 163, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(144, 84, 163, .025) 1px,
            transparent 1px
        );

    background-size: 52px 52px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.8),
            transparent 95%
        );

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.8),
            transparent 95%
        );
}


/* TOP GLOW */

.osaas-capabilities-section::after {
    content: "";

    position: absolute;

    width: 620px;
    height: 300px;

    left: 50%;
    top: -220px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: rgba(188, 73, 207, .09);

    filter: blur(40px);

    pointer-events: none;
}


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

.osaas-capabilities-head {
    position: relative;
    z-index: 4;

    max-width: 1050px;

    margin: 0 auto 55px;
}


/* DECORATIVE LINE */

.osaas-capabilities-head-line {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    max-width: 350px;

    margin: 0 auto 23px;
}


.osaas-capabilities-head-line span {
    display: block;

    width: 130px;
    height: 1px;
}


.osaas-capabilities-head-line span:first-child {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(193, 79, 205, .66)
        );
}


.osaas-capabilities-head-line span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(193, 79, 205, .66),
            transparent
        );
}


.osaas-capabilities-head-line i {
    color: #cf55c5;

    font-size: 14px;
    font-style: normal;

    filter:
        drop-shadow(
            0 0 9px rgba(207, 85, 197, .42)
        );
}


/* KICKER */

.osaas-capabilities-kicker {
    width: max-content;

    margin: 0 auto 14px;

    padding: 7px 14px;

    border: 1px solid rgba(193, 80, 203, .17);

    border-radius: 50px;

    color: #bd50ca;

    background:
        linear-gradient(
            90deg,
            rgba(166, 72, 211, .055),
            rgba(221, 83, 174, .055)
        );

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

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* MAIN HEADING */

.osaas-capabilities-head h2 {
    margin: 0;

    color: #21182a;

    font-size: clamp(35px, 4vw, 54px);
    font-weight: 900;

    line-height: 1.1;

    letter-spacing: -1.7px;

    text-transform: uppercase;
}


.osaas-capabilities-head h2 span {
    display: block;

    margin-top: 7px;

    background:
        linear-gradient(
            90deg,
            #a54bd8,
            #c953c8 50%,
            #df59ad
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* DESCRIPTION */

.osaas-capabilities-head > p {
    max-width: 870px;

    margin: 20px auto 0;

    color: #615768;

    font-size: 18px;

    line-height: 1.7;
}


/* =========================================================
   CONFIRM BADGE
========================================================= */

.osaas-confirm-badge {
    width: max-content;
    max-width: 100%;

    display: flex;
    align-items: center;

    gap: 10px;

    margin: 20px auto 0;

    padding: 10px 14px;

    border: 1px solid rgba(210, 148, 35, .25);

    border-radius: 12px;

    color: #755017;

    background:
        linear-gradient(
            90deg,
            #fff9e9,
            #fffcef
        );

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

    text-align: left;
}


.osaas-confirm-icon {
    width: 27px;
    height: 27px;

    min-width: 27px;

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

    border-radius: 8px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #d99d26,
            #efb83b
        );

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


/* =========================================================
   MAIN PANEL
========================================================= */

.osaas-capabilities-panel {
    position: relative;
    z-index: 3;

    max-width: 1120px;

    margin: 0 auto;

    padding: 36px;

    overflow: hidden;

    border: 1px solid rgba(153, 98, 167, .12);

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.99),
            rgba(251,247,252,.97)
        );

    box-shadow:
        0 35px 90px rgba(67, 38, 78, .08),
        0 10px 30px rgba(67, 38, 78, .04),
        inset 0 1px 0 #ffffff;
}


.osaas-capabilities-panel::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -190px;
    top: -190px;

    border-radius: 50%;

    background: rgba(185, 75, 204, .07);

    pointer-events: none;
}


.osaas-capabilities-panel::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: -150px;
    bottom: -170px;

    border-radius: 50%;

    background: rgba(224, 82, 173, .055);

    pointer-events: none;
}


/* =========================================================
   CAPABILITY CARD
========================================================= */

.osaas-capability-card {
    position: relative;
    z-index: 2;

    height: 100%;

    min-height: 145px;

    display: flex;
    align-items: center;

    gap: 17px;

    padding: 22px 22px;

    overflow: hidden;

    border: 1px solid rgba(161, 106, 174, .11);

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #fbf7fc
        );

    box-shadow:
        0 15px 40px rgba(67, 38, 78, .055),
        inset 0 1px 0 #ffffff;

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


.osaas-capability-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 15px;
    bottom: 15px;

    width: 4px;

    border-radius: 0 8px 8px 0;

    background:
        linear-gradient(
            to bottom,
            #a44bd8,
            #df59ad
        );
}


.osaas-capability-card::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -70px;
    top: -70px;

    border-radius: 50%;

    background: rgba(194, 78, 204, .045);

    pointer-events: none;
}


.osaas-capability-card:hover {
    transform: translateY(-5px);

    border-color: rgba(190, 81, 204, .22);

    box-shadow:
        0 24px 55px rgba(67, 38, 78, .095),
        inset 0 1px 0 #ffffff;
}


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

.osaas-capability-icon {
    position: relative;
    z-index: 2;

    width: 54px;
    height: 54px;

    min-width: 54px;

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

    border-radius: 15px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #a44bd8 0%,
            #c953c8 50%,
            #df59ad 100%
        );

    box-shadow:
        0 11px 25px rgba(185, 70, 193, .22);

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

    line-height: 1;
}


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

.osaas-capability-content {
    position: relative;
    z-index: 2;

    flex: 1;
}


.osaas-capability-number {
    margin-bottom: 3px;

    color: #c7b9ca;

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

    letter-spacing: 1.6px;
}


.osaas-capability-content h3 {
    margin: 0 0 5px;

    color: #a84dd5;

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

    line-height: 1.3;

    text-transform: uppercase;
}


.osaas-capability-content p {
    margin: 0;

    color: #5e5464;

    font-size: 18px;

    line-height: 1.55;
}


/* =========================================================
   MORE BOX
========================================================= */

.osaas-capabilities-more {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 26px;

    padding: 19px 21px;

    overflow: hidden;

    border: 1px solid rgba(190, 80, 201, .14);

    border-radius: 17px;

    background:
        linear-gradient(
            90deg,
            rgba(167, 73, 211, .065),
            rgba(222, 83, 174, .045)
        );
}


.osaas-capabilities-more::before {
    content: "";

    position: absolute;

    left: 0;
    top: 12px;
    bottom: 12px;

    width: 4px;

    border-radius: 0 8px 8px 0;

    background:
        linear-gradient(
            to bottom,
            #a44bd8,
            #df59ad
        );
}


/* ICON */

.osaas-more-icon {
    width: 42px;
    height: 42px;

    min-width: 42px;

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

    border-radius: 12px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #a44bd8,
            #df59ad
        );

    box-shadow:
        0 9px 22px rgba(188, 70, 193, .20);

    font-size: 15px;
}


.osaas-capabilities-more > div:last-child > span {
    display: block;

    margin-bottom: 2px;

    color: #bd51c8;

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

    letter-spacing: 1.6px;

    text-transform: uppercase;
}


.osaas-capabilities-more h3 {
    margin: 0;

    color: #241a2b;

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

    line-height: 1.4;
}


/* =========================================================
   1199 PX
========================================================= */

@media (max-width: 1199px) {

    .osaas-capabilities-section {
        padding: 80px 0;
    }


    .osaas-capabilities-panel {
        padding: 30px;
    }

}


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

@media (max-width: 991px) {

    .osaas-capabilities-section {
        padding: 70px 0;
    }


    .osaas-capabilities-head {
        margin-bottom: 42px;
    }


    .osaas-capabilities-head h2 {
        font-size: 40px;
    }


    .osaas-capabilities-panel {
        padding: 25px;

        border-radius: 25px;
    }


    .osaas-capability-card {
        min-height: 150px;

        padding: 20px 18px;
    }

}


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

@media (max-width: 767px) {

    .osaas-capabilities-section {
        padding: 55px 0;

        font-size: 18px;
    }


    .osaas-capabilities-head {
        margin-bottom: 32px;
    }


    .osaas-capabilities-head-line {
        max-width: 260px;

        margin-bottom: 18px;
    }


    .osaas-capabilities-head-line span {
        width: 90px;
    }


    .osaas-capabilities-head h2 {
        font-size: 31px;

        letter-spacing: -.8px;
    }


    .osaas-capabilities-head > p {
        font-size: 18px;
    }


    .osaas-confirm-badge {
        width: 100%;

        align-items: flex-start;

        font-size: 14px;
    }


    .osaas-capabilities-panel {
        padding: 20px 16px;

        border-radius: 22px;
    }


    .osaas-capability-card {
        min-height: auto;

        padding: 19px 16px;

        border-radius: 15px;
    }


    .osaas-capability-card:hover {
        transform: none;
    }


    .osaas-capability-icon {
        width: 48px;
        height: 48px;

        min-width: 48px;

        border-radius: 13px;
    }


    .osaas-capability-content h3 {
        font-size: 19px;
    }


    .osaas-capability-content p {
        font-size: 18px;
    }


    .osaas-capabilities-more {
        padding: 17px 16px;
    }

}


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

@media (max-width: 480px) {

    .osaas-capabilities-section {
        padding: 45px 0;
    }


    .osaas-capabilities-head h2 {
        font-size: 27px;
    }


    .osaas-capabilities-kicker {
        font-size: 9px;

        letter-spacing: 1.4px;
    }


    .osaas-capability-card {
        align-items: flex-start;

        gap: 13px;
    }


    .osaas-capability-icon {
        width: 44px;
        height: 44px;

        min-width: 44px;

        font-size: 17px;
    }


    .osaas-capability-content h3 {
        font-size: 18px;
    }

}


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

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

    .osaas-capability-card {
        transition: none;
    }

}
/* =========================================================
   OWNSAAS OFFER DRIVE SECTION
   ULTRA PREMIUM WHITE THEME
========================================================= */

.osaas-offerdrive-section {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    font-family:  Inter, Helvetica, sans-serif;
    font-size: 18px;
    color: #231a2b;
background: radial-gradient(circle at 6% 16%, rgba(168, 74, 216, 0.09), #f8edfa 28%), radial-gradient(circle at 94% 80%, rgba(224, 82, 173, 0.08), transparent 30%), linear-gradient(180deg, #fff 0%, #fcf8fd 100%);
}


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

.osaas-offerdrive-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(150, 86, 169, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150, 86, 169, .03) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 96%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 96%);
}


/* TOP GLOW */

.osaas-offerdrive-section::after {
    content: "";
    position: absolute;
    width: 650px;
    height: 320px;
    left: 50%;
    top: -230px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(191, 76, 208, .10);
    filter: blur(42px);
    pointer-events: none;
}


/* =========================================================
   HEAD
========================================================= */

.osaas-offerdrive-head {
    position: relative;
    z-index: 5;
    max-width: 1100px;
    margin: 0 auto 42px;
}

.osaas-offerdrive-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    max-width: 360px;
    margin: 0 auto 24px;
}

.osaas-offerdrive-line span {
    display: block;
    width: 135px;
    height: 1px;
}

.osaas-offerdrive-line span:first-child {
    background: linear-gradient(90deg, transparent, rgba(193, 79, 206, .68));
}

.osaas-offerdrive-line span:last-child {
    background: linear-gradient(90deg, rgba(193, 79, 206, .68), transparent);
}

.osaas-offerdrive-line i {
    color: #cf55c6;
    font-size: 14px;
    font-style: normal;
    filter: drop-shadow(0 0 9px rgba(207, 85, 197, .42));
}

.osaas-offerdrive-title {
    margin: 0;
    color: #21182a;
 font-size: clamp(34px, 4.3vw, 46px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -1.9px;
    text-transform: uppercase;
}

.osaas-offerdrive-title span {
    background: linear-gradient(90deg, #a44bd9 0%, #c953c8 50%, #df59ad 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.osaas-offerdrive-subtitle {
    margin: 12px 0 0;
    font-size: clamp(27px, 3.1vw, 42px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -1px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #a44bd9 0%, #c953c8 48%, #df59ad 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* =========================================================
   INTRO
========================================================= */

.osaas-offerdrive-intro {
    position: relative;
    z-index: 4;
    max-width: 920px;
    margin: 0 auto 44px;
    padding: 30px 34px;
    text-align: center;
    overflow: hidden;
    border: 1px solid rgba(164, 100, 178, .12);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(251,247,252,.97));
    box-shadow:
        0 22px 60px rgba(67, 38, 78, .07),
        inset 0 1px 0 #ffffff;
}

.osaas-offerdrive-intro::before {
    content: "";
    position: absolute;
    left: 20%;
    right: 20%;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #a54bd8, #df59ad, transparent);
}

.osaas-offerdrive-intro p {
    margin: 0 0 10px;
    color: #5f5565;
    font-size: 18px;
    line-height: 1.72;
}

.osaas-offerdrive-intro p:last-child {
    margin-bottom: 0;
}

.osaas-offerdrive-intro strong {
    color: #261b2d;
    font-weight: 800;
}


/* =========================================================
   PLATFORM LABEL
========================================================= */

.osaas-offerdrive-platform-head {
    position: relative;
    z-index: 4;
    margin-bottom: 32px;
}

.osaas-offerdrive-platform-pill {
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 11px 18px;
    border: 1px solid rgba(191, 80, 203, .16);
    border-radius: 999px;
    color: #b74fca;
    background: linear-gradient(90deg, rgba(166, 72, 211, .06), rgba(222, 83, 174, .06));
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}


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

.osaas-offerdrive-grid {
    position: relative;
    z-index: 4;
    max-width: 1200px;
    margin: 0 auto;
}


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

.osaas-offerdrive-card {
    position: relative;
    height: 100%;
    min-height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 24px 24px;
    overflow: hidden;
    border: 1px solid rgba(181, 91, 201, .20);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 18%, rgba(186, 80, 213, .055), transparent 32%),
        linear-gradient(145deg, #ffffff 0%, #fdf9fe 100%);
    box-shadow:
        0 25px 65px rgba(70, 38, 82, .075),
        0 8px 20px rgba(70, 38, 82, .035),
        inset 0 1px 0 #ffffff;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.osaas-offerdrive-card:hover {
    transform: translateY(-7px);
    border-color: rgba(196, 81, 207, .38);
    box-shadow:
        0 35px 80px rgba(70, 38, 82, .12),
        0 10px 28px rgba(70, 38, 82, .055),
        inset 0 1px 0 #ffffff;
}

.osaas-offerdrive-card::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    left: 50%;
    top: -145px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(190, 78, 211, .10), transparent 68%);
    pointer-events: none;
}


/* NUMBER */

.osaas-offerdrive-card-number {
    position: absolute;
    z-index: 4;
    right: 18px;
    top: 15px;
    color: rgba(177, 72, 194, .075);
    font-size: 46px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -3px;
    pointer-events: none;
}


/* IMAGE AREA */

.osaas-offerdrive-card-image {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 255px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    overflow: hidden;
}

.osaas-offerdrive-card-glow {
    position: absolute;
    width: 190px;
    height: 190px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle,
        rgba(193, 77, 221, .20) 0%,
        rgba(221, 82, 179, .10) 42%,
        transparent 72%);
    filter: blur(7px);
    transition: transform .4s ease, opacity .4s ease;
}

.osaas-offerdrive-card-image img {
    position: relative;
    z-index: 2;
    display: block;
    width: auto;
    max-width: 90%;
    max-height: 230px;
    object-fit: contain;
    filter: drop-shadow(0 18px 25px rgba(113, 52, 133, .14));
    transition: transform .4s ease;
}

.osaas-offerdrive-card:hover .osaas-offerdrive-card-image img {
    transform: translateY(-5px) scale(1.045);
}

.osaas-offerdrive-card:hover .osaas-offerdrive-card-glow {
    transform: translate(-50%, -50%) scale(1.10);
}


/* DIVIDER */

.osaas-offerdrive-card-divider {
    width: 58px;
    height: 3px;
    margin: 2px auto 22px;
    border-radius: 30px;
    background: linear-gradient(90deg, #ae4ed8, #df59ad);
}

.osaas-offerdrive-card-divider-left {
    margin-left: 0;
    margin-right: 0;
}


/* TITLE */

.osaas-offerdrive-card h4 {
    position: relative;
    z-index: 3;
    max-width: 305px;
    margin: 0 auto;
    color: #24192c;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: -.35px;
    text-align: center;
}


/* DOTS */

.osaas-offerdrive-card-dots {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 34px;
}

.osaas-offerdrive-card-dots span {
    width: 7px;
    height: 7px;
    display: block;
    border-radius: 50%;
    background: #c99bea;
}

.osaas-offerdrive-card-dots span:nth-child(2) {
    background: #a970e1;
}

.osaas-offerdrive-card-dots span:nth-child(3) {
    background: #d896d2;
}

.osaas-offerdrive-card-dots-left {
    justify-content: flex-start;
}


/* =========================================================
   WIDE FINAL CARD
========================================================= */

.osaas-offerdrive-card-wide {
    min-height: auto;
    padding: 26px 26px;
}

.osaas-offerdrive-card-image-wide {
    height: 250px;
    margin-bottom: 0;
}

.osaas-offerdrive-card-image-wide img {
    max-height: 225px;
}

.osaas-offerdrive-card-wide-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
}

.osaas-offerdrive-card-wide h4 {
    max-width: 420px;
    margin: 0;
    text-align: left;
    font-size: 28px;
    line-height: 1.25;
}


/* =========================================================
   BRIDGE
========================================================= */

.osaas-offerdrive-bridge {
    position: relative;
    z-index: 4;
    margin: 34px auto 22px;
    text-align: center;
}

.osaas-offerdrive-bridge p {
    margin: 0;
    color: #574d5d;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
}


/* =========================================================
   MANIFESTO PANEL
========================================================= */

.osaas-offerdrive-manifesto {
    position: relative;
    z-index: 4;
    max-width: 1180px;
    margin: 0 auto;
    padding: 56px 34px;
    overflow: hidden;
    border: 1px solid rgba(154, 90, 180, .14);
    border-radius: 28px;
    background:
        radial-gradient(circle at 20% 20%, rgba(168, 72, 211, .18), transparent 30%),
        radial-gradient(circle at 80% 80%, rgba(222, 82, 173, .12), transparent 30%),
        linear-gradient(135deg, #130718 0%, #09040d 100%);
    box-shadow:
        0 35px 90px rgba(18, 6, 25, .35),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.osaas-offerdrive-manifesto::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(203, 90, 214, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(203, 90, 214, 0.03) 1px, transparent 1px);
    background-size: 52px 52px;
}

.osaas-offerdrive-manifesto-road {
    position: absolute;
    left: 50%;
    bottom: -60px;
    width: 620px;
    height: 220px;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 1px solid rgba(213, 95, 200, .10);
    border-bottom: none;
    pointer-events: none;
}

.osaas-offerdrive-manifesto-road::before,
.osaas-offerdrive-manifesto-road::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 1px solid rgba(213, 95, 200, .08);
    border-bottom: none;
}

.osaas-offerdrive-manifesto-road::before {
    width: 470px;
    height: 170px;
    bottom: 18px;
}

.osaas-offerdrive-manifesto-road::after {
    width: 320px;
    height: 120px;
    bottom: 36px;
}

.osaas-offerdrive-manifesto-content {
    position: relative;
    z-index: 2;
}

.osaas-offerdrive-manifesto-kicker {
    width: max-content;
    max-width: 100%;
    margin: 0 auto 16px;
    padding: 8px 15px;
    border: 1px solid rgba(197, 84, 207, .16);
    border-radius: 50px;
    color: #cb63cc;
    background: rgba(181, 66, 189, .08);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.osaas-offerdrive-manifesto h3 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(30px, 3.6vw, 50px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -1.5px;
    text-transform: uppercase;
}

.osaas-offerdrive-manifesto h4 {
    margin: 12px 0 0;
    font-size: clamp(24px, 2.8vw, 38px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #a44bd9 0%, #c953c8 50%, #df59ad 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* =========================================================
   1199
========================================================= */

@media (max-width: 1199px) {
    .osaas-offerdrive-section {
        padding: 85px 0;
    }

    .osaas-offerdrive-card {
        min-height: 460px;
    }

    .osaas-offerdrive-card-image {
        height: 235px;
    }

    .osaas-offerdrive-card-image img {
        max-height: 210px;
    }
}


/* =========================================================
   991
========================================================= */

@media (max-width: 991px) {
    .osaas-offerdrive-section {
        padding: 75px 0;
    }

    .osaas-offerdrive-head {
        margin-bottom: 34px;
    }

    .osaas-offerdrive-title {
        font-size: 42px;
    }

    .osaas-offerdrive-subtitle {
        font-size: 31px;
    }

    .osaas-offerdrive-intro {
        padding: 24px 24px;
        margin-bottom: 36px;
    }

    .osaas-offerdrive-card {
        min-height: 445px;
        padding: 24px 20px 22px;
    }

    .osaas-offerdrive-card h4 {
        font-size: 20px;
    }

    .osaas-offerdrive-card-wide h4 {
        font-size: 24px;
    }

    .osaas-offerdrive-manifesto {
        padding: 46px 24px;
    }
}


/* =========================================================
   767
========================================================= */

@media (max-width: 767px) {
    .osaas-offerdrive-section {
        padding: 56px 0;
        font-size: 18px;
    }

    .osaas-offerdrive-line {
        max-width: 260px;
        margin-bottom: 18px;
    }

    .osaas-offerdrive-line span {
        width: 90px;
    }

    .osaas-offerdrive-title {
        font-size: 31px;
        letter-spacing: -.8px;
    }

    .osaas-offerdrive-subtitle {
        font-size: 24px;
        letter-spacing: -.5px;
    }

    .osaas-offerdrive-intro {
        padding: 21px 18px;
        border-radius: 18px;
    }

    .osaas-offerdrive-intro p {
        font-size: 18px;
    }

    .osaas-offerdrive-platform-pill {
        font-size: 10px;
        letter-spacing: 1.6px;
        padding: 10px 14px;
    }

    .osaas-offerdrive-card {
        min-height: 420px;
        max-width: 430px;
        margin-left: auto;
        margin-right: auto;
        padding: 22px 18px 20px;
        border-radius: 21px;
    }

    .osaas-offerdrive-card:hover {
        transform: none;
    }

    .osaas-offerdrive-card-image {
        height: 220px;
    }

    .osaas-offerdrive-card-image img {
        max-height: 195px;
    }

    .osaas-offerdrive-card h4 {
        font-size: 18px;
    }

    .osaas-offerdrive-card-wide {
        padding: 22px 18px;
    }

    .osaas-offerdrive-card-wide h4 {
        text-align: center;
        font-size: 22px;
        margin: 0 auto;
    }

    .osaas-offerdrive-card-divider-left,
    .osaas-offerdrive-card-dots-left {
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }

    .osaas-offerdrive-card-image-wide {
        margin-bottom: 12px;
    }

    .osaas-offerdrive-bridge {
        margin: 28px auto 18px;
    }

    .osaas-offerdrive-manifesto {
        padding: 38px 18px;
        border-radius: 22px;
    }

    .osaas-offerdrive-manifesto-kicker {
        font-size: 9px;
        letter-spacing: 1.6px;
    }

    .osaas-offerdrive-manifesto h3 {
        font-size: 28px;
    }

    .osaas-offerdrive-manifesto h4 {
        font-size: 22px;
    }

    .osaas-offerdrive-manifesto-road {
        width: 420px;
        height: 160px;
    }

    .osaas-offerdrive-manifesto-road::before {
        width: 320px;
        height: 120px;
    }

    .osaas-offerdrive-manifesto-road::after {
        width: 220px;
        height: 80px;
    }
}


/* =========================================================
   480
========================================================= */

@media (max-width: 480px) {
    .osaas-offerdrive-section {
        padding: 45px 0;
    }

    .osaas-offerdrive-title {
        font-size: 27px;
    }

    .osaas-offerdrive-subtitle {
        font-size: 21px;
    }

    .osaas-offerdrive-card {
        min-height: 395px;
    }

    .osaas-offerdrive-card-image {
        height: 200px;
    }

    .osaas-offerdrive-card-image img {
        max-height: 175px;
    }

    .osaas-offerdrive-card-number {
        font-size: 38px;
    }

    .osaas-offerdrive-card-dots {
        padding-top: 28px;
    }

    .osaas-offerdrive-manifesto h3 {
        font-size: 24px;
    }

    .osaas-offerdrive-manifesto h4 {
        font-size: 18px;
    }
}


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

@media (prefers-reduced-motion: reduce) {
    .osaas-offerdrive-card,
    .osaas-offerdrive-card-image img,
    .osaas-offerdrive-card-glow {
        transition: none;
    }
}

/* =========================================================
   OWNSAAS CUSTOMER EXPERIENCE - PREMIUM DARK SECTION
========================================================= */

.osaas-control-section {
  --osaas-bg: #060914;
  --osaas-bg-2: #090d1a;
  --osaas-card: rgba(14, 19, 36, 0.82);
  --osaas-card-2: rgba(18, 24, 44, 0.92);
  --osaas-border: rgba(255, 255, 255, 0.09);
  --osaas-text: #ffffff;
  --osaas-muted: #aeb8cc;
  --osaas-purple: #ae58df;
  --osaas-pink: #df58ad;
  --osaas-blue: #7788ff;

  position: relative;
  overflow: hidden;
  padding: 100px 0;
background: url(../images/osaas-control-section.png) no-repeat center top;
    background-size: auto;
   
    background-size: cover;
  color: var(--osaas-text);
  font-size: 18px;
}


/* Subtle grid */

.osaas-control-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 18%,
    #000 82%,
    transparent
  );
}


/* Glow */

.osaas-control-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.osaas-control-glow--one {
  width: 420px;
  height: 420px;
  top: -160px;
  left: -150px;
  background: rgba(165, 75, 225, 0.16);
}

.osaas-control-glow--two {
  width: 500px;
  height: 500px;
  right: -220px;
  bottom: -160px;
  background: rgba(229, 76, 171, 0.12);
}


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

.osaas-control-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 42px;
}

.osaas-control-logo-box {
  position: relative;
  width: min(330px, 85%);
  padding: 14px 24px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.97),
      rgba(245,241,251,.92)
    );
  box-shadow:
    0 18px 60px rgba(0,0,0,.38),
    0 0 45px rgba(179, 82, 221, .08);
}

.osaas-control-logo-box::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    110deg,
    rgba(191, 94, 228, .7),
    rgba(255,255,255,.15),
    rgba(229, 87, 177, .6)
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.osaas-control-logo {
  width: 100%;
  max-height: 78px;
  object-fit: contain;
  display: block;
}


/* =========================================================
   INTRO
========================================================= */

.osaas-control-intro {
  max-width: 970px;
  margin: auto;
}

.osaas-control-eyebrow {
  width: max-content;
  max-width: 100%;
  margin: 0 auto 22px;
  padding: 10px 17px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 100px;

  color: #e9c9ff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.6px;

  border: 1px solid rgba(187, 92, 231, .25);
  background: rgba(183, 82, 224, .07);
}

.osaas-control-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #be68ec, #ec5bad);
  box-shadow: 0 0 15px rgba(225, 89, 185, .8);
}

.osaas-control-intro h2 {
  max-width: 980px;
  margin: 0 auto 25px;

  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.06;
  font-weight: 850;
  letter-spacing: -1.8px;
  color: #ffffff;
}

.osaas-control-intro h2 span {
  background: linear-gradient(
    90deg,
    #d17af3 0%,
    #e768be 55%,
    #c976ee 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.osaas-control-intro p {
  margin: 7px auto;
  max-width: 900px;
  color: var(--osaas-muted);
  font-size: 18px;
  line-height: 1.75;
}


/* =========================================================
   MAIN PANEL
========================================================= */

.osaas-control-panel {
  position: relative;
  max-width: 1160px;
  margin: 65px auto 0;
  padding: 34px;

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

  background:
    linear-gradient(
      145deg,
      rgba(18, 23, 43, .95),
      rgba(8, 12, 24, .96)
    );

  box-shadow:
    0 35px 100px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.osaas-control-panel::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    #b35de2,
    #e15ab1,
    transparent
  );
  opacity: .8;
}


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

.osaas-control-panel-top {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
  gap: 18px;
  max-width: 900px;
  margin: 0 auto 38px;
}

.osaas-control-panel-icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;

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

  border-radius: 14px;
  font-size: 21px;

  color: #fff;
  border: 1px solid rgba(210, 109, 237, .3);

  background:
    linear-gradient(
      145deg,
      rgba(183, 82, 225, .23),
      rgba(227, 85, 176, .1)
    );

  box-shadow: 0 10px 35px rgba(181, 84, 222, .13);
}

.osaas-control-panel-copy {
  max-width: 760px;
}

.osaas-control-small-copy {
  color: #b6bfd1;
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 9px;
}

.osaas-control-panel-copy h4 {
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #d990f2;
}

.osaas-control-panel-copy h3 {
  margin: 0;
  font-size: clamp(30px, 3.7vw, 50px);
  line-height: 1.08;
  font-weight: 850;
  letter-spacing: -1.4px;
}

.osaas-control-panel-copy h3 span {
  color: #fff;
  position: relative;
  white-space: nowrap;
}

.osaas-control-panel-copy h3 span::after {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: -7px;
  height: 4px;
  border-radius: 100px;
  background: linear-gradient(
    90deg,
    #a951de,
    #e85bae
  );
}

.osaas-control-description {
  margin: 23px 0 0;
  color: #aab4c9;
  font-size: 18px;
}


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

.osaas-control-feature-grid {
  position: relative;
}

.osaas-control-feature {
  position: relative;
  height: 100%;
  min-height: 145px;

  display: flex;
  align-items: flex-start;
  gap: 17px;

  padding: 24px 22px;

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

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.047),
      rgba(255,255,255,.018)
    );

  overflow: hidden;

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

.osaas-control-feature::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  top: -100px;
  right: -70px;
  border-radius: 50%;

  background: rgba(195, 80, 226, .1);
  filter: blur(20px);

  transition: .35s ease;
}

.osaas-control-feature:hover {
  transform: translateY(-6px);

  border-color: rgba(201, 100, 235, .27);

  background:
    linear-gradient(
      145deg,
      rgba(190, 85, 227, .095),
      rgba(255,255,255,.026)
    );

  box-shadow:
    0 20px 45px rgba(0,0,0,.25),
    0 0 35px rgba(171, 75, 219, .07);
}

.osaas-control-feature:hover::before {
  background: rgba(224, 83, 181, .16);
}


/* Icon */

.osaas-control-feature-icon {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;

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

  border-radius: 14px;

  font-size: 18px;
  color: #eebdff;

  border: 1px solid rgba(200, 98, 235, .2);

  background:
    linear-gradient(
      145deg,
      rgba(184, 79, 225, .16),
      rgba(229, 83, 177, .07)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 10px 30px rgba(0,0,0,.12);
}


/* Content */

.osaas-control-feature-content {
  flex: 1;
  min-width: 0;
}

.osaas-control-feature-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.osaas-control-feature-top h5 {
  margin: 3px 0 10px;

  font-size: 17px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: .4px;

  color: #ffffff;
}

.osaas-control-feature-top span {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.27);
  letter-spacing: 1px;
}

.osaas-control-feature p {
  margin: 0;
  color: #a8b1c3;
  font-size: 16px;
  line-height: 1.55;
}


/* =========================================================
   BOTTOM STRIP
========================================================= */

.osaas-control-bottom {
  margin-top: 35px;

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

  gap: 18px;
}

.osaas-control-bottom-line {
  height: 1px;
  flex: 1;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.12)
  );
}

.osaas-control-bottom-line:last-child {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.12),
    transparent
  );
}

.osaas-control-bottom-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;

  text-align: center;

  color: #b9c2d4;

  font-size: 12px;
  font-weight: 750;
  letter-spacing: 1px;
}

.osaas-control-bottom-badge i {
  color: #c56fe5;
  font-size: 10px;
}

.osaas-control-bottom-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;

  background: #dd60b9;
  box-shadow: 0 0 12px #dd60b9;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

  .osaas-control-section {
    padding: 80px 0;
  }

  .osaas-control-panel {
    padding: 28px 22px;
    border-radius: 26px;
  }

  .osaas-control-intro h2 {
    letter-spacing: -1px;
  }

}


@media (max-width: 767.98px) {

  .osaas-control-section {
    padding: 65px 0;
    font-size: 18px;
  }

  .osaas-control-logo-wrap {
    margin-bottom: 30px;
  }

  .osaas-control-logo-box {
    width: 260px;
  }

  .osaas-control-intro h2 {
    font-size: 35px;
  }

  .osaas-control-intro p,
  .osaas-control-small-copy,
  .osaas-control-description {
    font-size: 18px;
  }

  .osaas-control-panel {
    margin-top: 45px;
    padding: 24px 16px;
  }

  .osaas-control-panel-top {
    display: block;
  }

  .osaas-control-panel-icon {
    margin: 0 auto 18px;
  }

  .osaas-control-panel-copy h3 {
    font-size: 32px;
  }

  .osaas-control-feature {
    min-height: auto;
    padding: 21px 18px;
  }

  .osaas-control-bottom-line {
    display: none;
  }

  .osaas-control-bottom {
    margin-top: 28px;
  }

}


@media (max-width: 480px) {

  .osaas-control-section {
    padding: 55px 0;
  }

  .osaas-control-intro h2 {
    font-size: 31px;
  }

  .osaas-control-panel-copy h3 {
    font-size: 29px;
  }

  .osaas-control-feature {
    gap: 13px;
  }

  .osaas-control-feature-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

}

/* =========================================================
   OWNSAAS - PLATFORM PROOF / WALKTHROUGH
   ULTRA PREMIUM WHITE THEME
========================================================= */

.osaas-proof-section {
  --op-bg: #ffffff;
  --op-bg-soft: #f8f9ff;
  --op-card: #ffffff;
  --op-purple: #af54dd;
  --op-pink: #df5bb2;
  --op-blue: #786cff;
  --op-dark: #101a35;
  --op-text: #17223d;
  --op-muted: #667085;
  --op-border: #e8e9f2;

  position: relative;
  overflow: hidden;
padding: 10px 0 50px 0;
  /* background:
    radial-gradient(circle at 8% 12%, rgba(177, 82, 221, .08), transparent 28%),
    radial-gradient(circle at 92% 40%, rgba(224, 91, 177, .07), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fafaff 50%, #ffffff 100%); */
  color: var(--op-text);
  font-size: 18px;

  background: #fff url(../images/osaas-proof-section.png) no-repeat center top / cover;
}


/* subtle premium grid */

/* .osaas-proof-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image:
    linear-gradient(rgba(24, 35, 66, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 35, 66, .035) 1px, transparent 1px);

  background-size: 55px 55px;
  opacity: .45;

  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 15%,
    #000 85%,
    transparent
  );
} */


/* =========================================================
   DECORATIVE ORBS
========================================================= */

.osaas-proof-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.osaas-proof-orb-1 {
  width: 430px;
  height: 430px;
  top: 200px;
  left: -250px;
  background: rgba(182, 81, 224, .12);
}

.osaas-proof-orb-2 {
  width: 470px;
  height: 470px;
  right: -280px;
  bottom: 280px;
  background: rgba(229, 88, 179, .10);
}


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

.osaas-proof-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 22px;
  padding: 10px 18px;

  border-radius: 100px;

  background:
    linear-gradient(
      90deg,
      rgba(174, 82, 221, .08),
      rgba(226, 91, 178, .08)
    );

  border: 1px solid rgba(177, 83, 219, .16);

  color: #9346bd;

  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.4px;
}

.osaas-proof-kicker span {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: linear-gradient(135deg, #ad55df, #e25db4);

  box-shadow:
    0 0 0 5px rgba(181, 82, 222, .08),
    0 0 15px rgba(181, 82, 222, .25);
}


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

.osaas-proof-heading {
  max-width: 1000px;

  margin: 0 auto;

  font-size: clamp(34px, 5vw, 46px);
  line-height: 1.04;

  font-weight: 900;
  letter-spacing: -2.3px;

  color: var(--op-dark);
}

.osaas-proof-heading span {
  display: block;

  background:
    linear-gradient(
      90deg,
      #a64bd7 0%,
      #df5ab2 50%,
      #9e52d5 100%
    );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* heading divider */

.osaas-proof-heading-line {
  max-width: 540px;

  display: flex;
  align-items: center;
  gap: 17px;

  margin: 31px auto 0;
}

.osaas-proof-heading-line span {
  flex: 1;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(173, 84, 220, .35)
  );
}

.osaas-proof-heading-line span:last-child {
  background: linear-gradient(
    90deg,
    rgba(173, 84, 220, .35),
    transparent
  );
}

.osaas-proof-heading-line i {
  width: 38px;
  height: 38px;

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

  border-radius: 50%;

  background: #ffffff;

  border: 1px solid #e6d9ef;

  color: #a655ce;

  font-size: 12px;

  box-shadow:
    0 8px 25px rgba(75, 47, 100, .08);
}


/* =========================================================
   VIDEO WRAPPER
========================================================= */

.osaas-proof-video-wrap {
  position: relative;

  max-width: 1150px;

  margin: 10px auto 0px;

  overflow: hidden;

  border-radius: 26px;

  background: #ffffff;

  border: 1px solid #e6e8ef;

  box-shadow:
    0 35px 80px rgba(24, 31, 54, .12),
    0 5px 20px rgba(24, 31, 54, .04);
}


/* premium top accent */

.osaas-proof-video-wrap::before {
  content: "";

  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;

  height: 3px;

  z-index: 5;

  background:
    linear-gradient(
      90deg,
      transparent,
      #ad55df,
      #df5bb2,
      transparent
    );
}


/* =========================================================
   VIDEO TOP BAR
========================================================= */

.osaas-proof-video-topbar {
  min-height: 66px;

  padding: 14px 18px;

  display: flex;
  align-items: center;
  gap: 20px;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f8f8fc
    );

  border-bottom: 1px solid #eaebf1;
}


/* browser dots */

.osaas-proof-window-dots {
  display: flex;
  gap: 7px;
}

.osaas-proof-window-dots span {
  width: 10px;
  height: 10px;

  border-radius: 50%;
}

.osaas-proof-window-dots span:nth-child(1) {
  background: #ff7079;
}

.osaas-proof-window-dots span:nth-child(2) {
  background: #ffc55e;
}

.osaas-proof-window-dots span:nth-child(3) {
  background: #50ce8a;
}


/* browser URL bar */

.osaas-proof-browser-bar {
  flex: 1;

  max-width: 530px;

  margin: auto;
  padding: 9px 15px;

  border-radius: 9px;

  background: #f2f3f7;

  border: 1px solid #e7e8ee;

  text-align: center;

  color: #8b93a5;

  font-size: 12px;
}

.osaas-proof-browser-bar i {
  margin-right: 7px;

  color: #8d95a5;

  font-size: 10px;
}


/* LIVE */

.osaas-proof-live {
  display: flex;
  align-items: center;
  gap: 7px;

  color: #667085;

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

  letter-spacing: 1px;
}

.osaas-proof-live span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #40c882;

  box-shadow: 0 0 10px rgba(64, 200, 130, .45);
}


/* =========================================================
   VIDEO
========================================================= */

.osaas-proof-video {
  position: relative;

  /* aspect-ratio: 16 / 9; */

  overflow: hidden;

  background: #f1f3f7;
}

.osaas-proof-video video,
.osaas-proof-video img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;
}


/* caption */

.osaas-proof-video-caption {
  padding: 22px 25px;

  display: flex;
  align-items: center;
  gap: 15px;

  background:
    linear-gradient(
      90deg,
      rgba(174, 82, 221, .035),
      #ffffff,
      rgba(225, 90, 178, .035)
    );

  border-top: 1px solid #ececf2;
}

.osaas-proof-video-icon {
  flex: 0 0 48px;

  width: 48px;
  height: 48px;

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

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      rgba(174, 82, 221, .10),
      rgba(225, 90, 178, .08)
    );

  border: 1px solid rgba(177, 83, 219, .14);

  color: #aa53d4;
}

.osaas-proof-video-caption span {
  display: block;

  margin-bottom: 4px;

  color: #8b93a5;

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

  letter-spacing: 1.4px;
}

.osaas-proof-video-caption h4 {
  margin: 0;

  color: #17213b;

  font-size: 18px;
  line-height: 1.4;

  font-weight: 800;
}


/* =========================================================
   SHOWCASE CARD
========================================================= */

.osaas-proof-showcase {
  position: relative;

  max-width: 1200px;

  margin: 0 auto 52px;
  padding: 40px;

  border-radius: 30px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fbfbff
    );

  border: 1px solid #ececf3;

  box-shadow:
    0 24px 70px rgba(30, 38, 68, .08),
    0 5px 16px rgba(30, 38, 68, .025);

  overflow: hidden;
}


.osaas-proof-showcase::before {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      rgba(175, 80, 220, .035),
      transparent 35%,
      transparent 70%,
      rgba(227, 89, 177, .025)
    );
}


.osaas-proof-showcase::after {
  content: "";

  position: absolute;

  width: 170px;
  height: 170px;

  right: -85px;
  bottom: -85px;

  border-radius: 50%;

  background: rgba(174, 82, 221, .08);

  filter: blur(35px);

  pointer-events: none;
}

.osaas-proof-showcase-reverse::after {
  right: auto;
  left: -85px;

  background: rgba(225, 90, 178, .07);
}


/* =========================================================
   SCREENSHOT FRAME
========================================================= */

.osaas-proof-screen {
  position: relative;

  padding: 7px;

  border-radius: 22px;
/* 
  background:
    linear-gradient(
      145deg,
      rgba(174, 82, 221, .35),
      rgba(255, 255, 255, .95),
      rgba(225, 91, 178, .28)
    );

  box-shadow:
    0 25px 50px rgba(35, 37, 63, .12); */
}


.osaas-proof-screen-inner {
  position: relative;

  min-height: 330px;

  overflow: hidden;

  border-radius: 16px;

  background: #ffffff;

  border: 1px solid #e7e8ef;
}


.osaas-proof-screen-inner img {
  width: 100%;
  height: 100%;

  min-height: 330px;

  object-fit: cover;

  display: block;

  transition: transform .55s ease;
}


.osaas-proof-screen:hover img {
  transform: scale(1.025);
}


/* screenshot label */

.osaas-proof-screen-label {
  position: absolute;

  top: -17px;
  left: 24px;

  z-index: 4;

  display: inline-flex;
  align-items: center;
  gap: 9px;

  padding: 8px 14px 8px 8px;

  border-radius: 100px;

  background: #ffffff;

  border: 1px solid #e5e6ed;

  box-shadow:
    0 10px 28px rgba(34, 40, 68, .11);

  color: #5f687c;

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

  letter-spacing: 1px;
}

.osaas-proof-screen-label span {
  width: 29px;
  height: 29px;

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

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      #aa50dc,
      #df5bb2
    );

  color: #ffffff;
}


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

.osaas-proof-copy {
  position: relative;

  z-index: 2;
}


.osaas-proof-number {
  position: absolute;

  top: -55px;
  right: 0;

  color: rgba(21, 31, 57, .035);

  font-size: 120px;
  line-height: 1;

  font-weight: 900;

  pointer-events: none;
}


.osaas-proof-small-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 17px;

  color: #9c4dc4;

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

  letter-spacing: 1.2px;
}


.osaas-proof-small-title i {
  width: 31px;
  height: 31px;

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

  border-radius: 9px;

  background:
    linear-gradient(
      135deg,
      rgba(173, 82, 220, .10),
      rgba(225, 91, 178, .07)
    );

  border: 1px solid rgba(174, 82, 221, .15);

  color: #a753ce;
}


.osaas-proof-copy h3 {
  position: relative;

  margin: 0 0 20px;

  color: var(--op-dark);

  font-size: clamp(30px, 3.3vw, 47px);
  line-height: 1.06;

  font-weight: 900;
  letter-spacing: -1.5px;
}


.osaas-proof-copy h3 span {
  display: block;

  margin-top: 4px;

  background:
    linear-gradient(
      90deg,
      #a950d7,
      #de59b1
    );

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

  color: transparent;
}


.osaas-proof-copy p {
  max-width: 470px;

  margin: 0;

  color: #657085;

  font-size: 18px;
  line-height: 1.75;
}


.osaas-proof-copy p strong {
  color: #17213a;

  font-weight: 800;
}


/* =========================================================
   FEATURE PILLS
========================================================= */

.osaas-proof-feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  margin-top: 25px;
}


.osaas-proof-feature-pills span {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 9px 13px;

  border-radius: 10px;

  background: #ffffff;

  border: 1px solid #e8e8ef;

  color: #545e73;

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

  box-shadow:
    0 6px 18px rgba(30, 35, 60, .045);
}


.osaas-proof-feature-pills i {
  color: #ac56d4;

  font-size: 10px;
}


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

.osaas-proof-mini-card,
.osaas-proof-growth {
  max-width: 430px;

  margin-top: 26px;
  padding: 16px;

  display: flex;
  align-items: center;
  gap: 15px;

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      rgba(174, 82, 221, .055),
      rgba(225, 90, 178, .025),
      #ffffff
    );

  border: 1px solid #e8e5ee;

  box-shadow:
    0 9px 25px rgba(42, 35, 66, .05);
}


.osaas-proof-mini-card > div:first-child,
.osaas-proof-growth > div:nth-child(2) {
  flex: 1;
}


.osaas-proof-mini-card small,
.osaas-proof-growth small {
  display: block;

  margin-bottom: 4px;

  color: #8e96a8;

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

  letter-spacing: 1px;
}


.osaas-proof-mini-card strong,
.osaas-proof-growth strong {
  color: #17213b;

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


.osaas-proof-mini-icon,
.osaas-proof-growth-icon {
  width: 45px;
  height: 45px;

  flex: 0 0 45px;

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

  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      rgba(173, 81, 220, .11),
      rgba(224, 90, 178, .07)
    );

  border: 1px solid rgba(175, 81, 220, .14);

  color: #a750cf;
}


/* =========================================================
   GROWTH CHART
========================================================= */

.osaas-proof-growth {
  max-width: 470px;
}


.osaas-proof-growth-bars {
  height: 40px;

  display: flex;
  align-items: flex-end;
  gap: 4px;
}


.osaas-proof-growth-bars span {
  display: block;

  width: 5px;

  border-radius: 6px 6px 2px 2px;

  background:
    linear-gradient(
      to top,
      #a64ed7,
      #df5bb2
    );
}


.osaas-proof-growth-bars span:nth-child(1) {
  height: 13px;
}

.osaas-proof-growth-bars span:nth-child(2) {
  height: 21px;
}

.osaas-proof-growth-bars span:nth-child(3) {
  height: 29px;
}

.osaas-proof-growth-bars span:nth-child(4) {
  height: 39px;
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.osaas-proof-bottom {
  max-width: 800px;

  margin: 68px auto 0;
  padding: 20px 25px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;

  border-radius: 18px;

  background:
    linear-gradient(
      100deg,
      rgba(173, 82, 220, .06),
      #ffffff,
      rgba(224, 90, 178, .045)
    );

  border: 1px solid #e8e2ee;

  box-shadow:
    0 15px 45px rgba(36, 31, 60, .06);
}


.osaas-proof-bottom-icon {
  width: 48px;
  height: 48px;

  flex: 0 0 48px;

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

  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      rgba(173, 82, 220, .11),
      rgba(224, 90, 178, .08)
    );

  border: 1px solid rgba(176, 84, 220, .15);

  color: #a953cf;
}


.osaas-proof-bottom span {
  display: block;

  margin-bottom: 3px;

  color: #9856b0;

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

  letter-spacing: 1.3px;
}


.osaas-proof-bottom strong {
  color: #18223b;

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


/* =========================================================
   HOVER EFFECTS
========================================================= */

.osaas-proof-showcase,
.osaas-proof-video-wrap {
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}


.osaas-proof-showcase:hover {
  /* transform: translateY(-6px); */

  border-color: rgba(176, 83, 220, .18);

  box-shadow:
    0 32px 80px rgba(36, 34, 65, .11);
}


.osaas-proof-video-wrap:hover {
  /* transform: translateY(-4px); */

  box-shadow:
    0 42px 95px rgba(28, 32, 55, .15);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

  .osaas-proof-section {
    padding: 85px 0;
  }

  .osaas-proof-showcase {
    padding: 28px;
  }

  .osaas-proof-video-wrap {
    margin-bottom: 75px;
  }

  .osaas-proof-copy {
    padding: 15px 5px 5px;
  }

  .osaas-proof-number {
    top: -10px;

    font-size: 90px;
  }

}


@media (max-width: 767.98px) {

  .osaas-proof-section {
    padding: 65px 0;

    font-size: 18px;
  }

  .osaas-proof-heading {
    font-size: 37px;

    letter-spacing: -1.2px;
  }

  .osaas-proof-video-wrap {
    margin-top: 45px;

    border-radius: 18px;
  }

  .osaas-proof-video-topbar {
    min-height: 52px;

    padding: 10px 12px;
  }

  .osaas-proof-browser-bar {
    display: none;
  }

  .osaas-proof-live {
    margin-left: auto;
  }

  .osaas-proof-video-caption {
    padding: 17px;
  }

  .osaas-proof-video-caption h4 {
    font-size: 15px;
  }

  .osaas-proof-showcase {
    padding: 20px 15px;

    border-radius: 22px;
  }

  .osaas-proof-screen-inner,
  .osaas-proof-screen-inner img {
    min-height: 240px;
  }

  .osaas-proof-copy h3 {
    font-size: 32px;
  }

  .osaas-proof-copy p {
    font-size: 18px;
  }

  .osaas-proof-bottom {
    align-items: flex-start;

    padding: 17px;
  }

}


@media (max-width: 480px) {

  .osaas-proof-heading {
    font-size: 32px;
  }

  .osaas-proof-kicker {
    font-size: 10px;
  }

  .osaas-proof-screen-inner,
  .osaas-proof-screen-inner img {
    min-height: 205px;
  }

  .osaas-proof-video-caption {
    align-items: flex-start;
  }

  .osaas-proof-video-icon {
    width: 42px;
    height: 42px;

    flex-basis: 42px;
  }

}


/* =========================================================
   OWNSAAS - SIMPLE MODEL
   REFERENCE STYLE
========================================================= */

.own-simple-flow,
.own-simple-flow * {
  box-sizing: border-box;
}

.own-simple-flow {
  position: relative;
  overflow: hidden;

  padding: 95px 0 120px;

 background: #fff url(../images/own-simple-flow.png) no-repeat center top / cover;

  color: #fff;

  font-size: 18px;
}


/* very subtle grid */

.own-simple-flow::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: .08;

  background-image:
    linear-gradient(
      rgba(145, 75, 235, .18) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(145, 75, 235, .18) 1px,
      transparent 1px
    );

  background-size: 60px 60px;
}


/* =========================================================
   HEADER
========================================================= */

.own-simple-flow__header {
  position: relative;

  z-index: 2;

  margin-bottom: 75px;
}


.own-simple-flow__main-title {
  max-width: 950px;

  margin: 0 auto 26px;

  color: #ffffff;

  font-size: clamp(38px, 4.3vw, 58px);

  font-weight: 850;

  line-height: 1.08;

  letter-spacing: -1.8px;
}


.own-simple-flow__main-title span {
  color: #b344ff;
}


.own-simple-flow__intro {
  max-width: 860px;

  margin: auto;
}


.own-simple-flow__intro p {
  margin: 0 0 8px;

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

  font-size: 18px;

  line-height: 1.65;
}


.own-simple-flow__business-title {
  max-width: 930px;

  margin: 32px auto 15px;

  color: #fff;

  font-size: clamp(28px, 3vw, 40px);

  font-weight: 800;

  line-height: 1.14;
}


.own-simple-flow__business-title span {
  color: #c352ff;
}


.own-simple-flow__interesting {
  margin: 0;

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

  font-size: 18px;
}


.own-simple-flow__model-title {
  width: max-content;

  margin: 33px auto 0;

  padding: 9px 21px;

  border: 1px solid #5421bf;

  background: rgba(83, 25, 170, .13);

  color: #fff;

  font-size: 14px;

  font-weight: 800;

  letter-spacing: 1.4px;
}


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

.own-simple-flow__stage {
  position: relative;

  width: 100%;

  min-height: 390px;

margin: 60px auto;

  max-width: 1080px;
}


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

.own-simple-flow__text-panel {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  width: 53%;

  min-height: 335px;

  padding: 48px 70px 62px 42px;

  overflow: hidden;

  border: 1px solid #de59b1;

  background:
    radial-gradient(
      circle at 5% 95%,
      rgba(103, 32, 196, .15),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      #05040e 0%,
      #02020a 100%
    );
}


/* premium top corner */

.own-simple-flow__text-panel::before {
  content: "";

  position: absolute;

  top: -1px;
  left: -1px;

  width: 54px;
  height: 1px;

  background: #b34cff;
}


.own-simple-flow__text-panel::after {
  content: "";

  position: absolute;

  top: -1px;
  left: -1px;

  width: 1px;
  height: 54px;

  background: #b34cff;
}


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

.own-simple-flow__content {
  position: relative;

  z-index: 3;

  max-width: 420px;
}


/* =========================================================
   STEP LABEL
========================================================= */

.own-simple-flow__step-top {
  margin-bottom: 20px;
}


.own-simple-flow__step-top span {
  display: inline-flex;

  align-items: center;

  padding: 7px 19px;

  border-radius: 3px;

  background: #ffffff;

  color: #a131ed;

  font-size: 13px;

  font-weight: 800;

  line-height: 1;

  text-transform: uppercase;
}


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

.own-simple-flow__step-title {
  margin: 0 0 20px;

  color: #ffffff;

  font-size: clamp(27px, 2.4vw, 34px);

  font-weight: 800;

  line-height: 1.15;

  letter-spacing: -.8px;
}


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

.own-simple-flow__step-copy {
  max-width: 390px;

  margin: 0;

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

  font-size: 18px;

  font-weight: 400;

  line-height: 1.55;
}


/* =========================================================
   BIG NUMBER
========================================================= */

.own-simple-flow__big-num {
  position: absolute;

right: 80px;
  bottom: 20px;
color: #de59b1;

  font-size: 72px;

  font-weight: 900;

  line-height: .8;

  letter-spacing: -5px;

  pointer-events: none;
}


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

.own-simple-flow__media-panel {
position: absolute;
  z-index: 5;
top: -20px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52%;
  min-height: 300px;

  padding: 14px;

  overflow: hidden;

  border: 1px solid #de59b1;

  border-radius: 9px;

  background:
    radial-gradient(
      circle at center,
      rgba(82, 38, 151, .12),
      transparent 50%
    ),
    #05040d;

  box-shadow:
    0 25px 65px rgba(0,0,0,.5),
    0 0 35px rgba(88,32,212,.07);

  transition:
    transform .35s ease,
    border-color .35s ease;
}


/* corner line */

.own-simple-flow__media-panel::before {
  content: "";

  position: absolute;

  top: -1px;
  left: -1px;

  width: 50px;
  height: 1px;

  background: #c04eff;
}


.own-simple-flow__media-panel::after {
  content: "";

  position: absolute;

  top: -1px;
  left: -1px;

  width: 1px;
  height: 50px;

  background: #c04eff;
}


/* image */

.own-simple-flow__image {
  display: block;

  width: 100%;
  height: 100%;

  min-height: 270px;

  object-fit: cover;

  border-radius: 5px;

  transition: transform .4s ease;
}


.own-simple-flow__stage:hover
.own-simple-flow__media-panel {
  transform: translateY(-5px);

  border-color: #de59b1;
}


.own-simple-flow__stage:hover
.own-simple-flow__image {
  /* transform: scale(1.015); */
}


/* =========================================================
   REVERSE
========================================================= */

.own-simple-flow__stage--reverse
.own-simple-flow__text-panel {
  margin-left: auto;

  padding:
    48px 42px
    62px 70px;
}


.own-simple-flow__stage--reverse
.own-simple-flow__media-panel {
  right: auto;
  left: 0;
}


/* =========================================================
   CONNECTOR LIKE REFERENCE
========================================================= */

.own-simple-flow__connector {
  position: relative;

  z-index: 1;

  width: 270px;
  height: 56px;

  margin-top: -48px;
  margin-bottom: 4px;
}


.own-simple-flow__connector span {
  position: absolute;

  display: block;

  width: 100%;
  height: 100%;
}


/* right connector */

.own-simple-flow__connector--right {
  margin-left: calc(50% - 25px);
}


.own-simple-flow__connector--right span {
  border-right: 1px dashed rgba(108, 48, 223, .72);

  border-bottom: 1px dashed rgba(108, 48, 223, .72);

  border-radius: 0 0 8px 0;
}


/* left connector */

.own-simple-flow__connector--left {
  margin-left: calc(50% - 245px);
}


.own-simple-flow__connector--left span {
  border-left: 1px dashed rgba(108, 48, 223, .72);

  border-bottom: 1px dashed rgba(108, 48, 223, .72);

  border-radius: 0 0 0 8px;
}


/* small glow point */

.own-simple-flow__connector::after {
  content: "";

  position: absolute;

  bottom: -3px;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #7130e8;

  box-shadow:
    0 0 12px rgba(113,48,232,.75);
}


.own-simple-flow__connector--right::after {
  right: -2px;
}


.own-simple-flow__connector--left::after {
  left: -2px;
}


/* =========================================================
   DESKTOP OVERLAP
========================================================= */

@media (min-width: 1200px) {

  .own-simple-flow__stage {
   max-width: 1260px;
  }

  .own-simple-flow__media-panel {
right: 0;
  }

  .own-simple-flow__stage--reverse
  .own-simple-flow__media-panel {
   left: 0;
    right: auto;
  }

}


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

@media (max-width: 991.98px) {

  .own-simple-flow {
    padding: 75px 0 85px;
  }

  .own-simple-flow__header {
    margin-bottom: 55px;
  }


  .own-simple-flow__stage {
    display: flex;

    flex-direction: column;

    min-height: 0;

    margin-bottom: 50px;
  }


  .own-simple-flow__text-panel,
  .own-simple-flow__stage--reverse
  .own-simple-flow__text-panel {
    width: calc(100% - 45px);

    min-height: auto;

    margin: 0;

    padding: 42px 35px 68px;
  }


  .own-simple-flow__media-panel,
  .own-simple-flow__stage--reverse
  .own-simple-flow__media-panel {
    position: relative;

    top: auto;
    right: auto;
    left: auto;

    width: calc(100% - 45px);

    min-height: 290px;

    margin-top: -24px;
    margin-left: auto;

    padding: 15px;
  }


  .own-simple-flow__stage--reverse
  .own-simple-flow__media-panel {
    margin-left: 0;
    margin-right: auto;
  }


  .own-simple-flow__connector {
    display: none;
  }

}


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

@media (max-width: 767.98px) {

  .own-simple-flow {
    padding: 58px 0 65px;
  }


  .own-simple-flow__header {
    margin-bottom: 45px;
  }


  .own-simple-flow__main-title {
    font-size: 34px;

    line-height: 1.12;

    letter-spacing: -1px;
  }


  .own-simple-flow__business-title {
    font-size: 27px;
  }


  .own-simple-flow__intro p,
  .own-simple-flow__interesting,
  .own-simple-flow__step-copy {
    font-size: 18px;
  }


  .own-simple-flow__text-panel,
  .own-simple-flow__stage--reverse
  .own-simple-flow__text-panel {
    width: calc(100% - 18px);

    padding:
      32px 22px
      63px;
  }


  .own-simple-flow__media-panel,
  .own-simple-flow__stage--reverse
  .own-simple-flow__media-panel {
    width: 100%;

    min-height: 220px;

    margin-top: 18px;

    padding: 10px;
  }


  .own-simple-flow__image {
    min-height: 200px;
  }


  .own-simple-flow__step-title {
    font-size: 27px;
  }


  .own-simple-flow__big-num {
    right: 16px;
    bottom: 15px;

    font-size: 58px;
  }

}


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

@media (max-width: 390px) {

  .own-simple-flow__main-title {
    font-size: 29px;
  }


  .own-simple-flow__business-title {
    font-size: 24px;
  }


  .own-simple-flow__step-title {
    font-size: 24px;
  }


  .own-simple-flow__text-panel,
  .own-simple-flow__stage--reverse
  .own-simple-flow__text-panel {
    padding:
      28px 18px
      58px;
  }

}

/* =========================================================
   OWNSAAS - SUBSCRIPTION MODEL
   ULTRA PREMIUM WHITE THEME
========================================================= */

.osaas-subscription-model,
.osaas-subscription-model * {
  box-sizing: border-box;
}

.osaas-subscription-model {
  --osm-dark: #101935;
  --osm-text: #202a44;
  --osm-muted: #687086;

  --osm-purple: #a84bd5;
  --osm-purple-2: #bd5fe6;
  --osm-pink: #df5ab2;

  --osm-border: #e7e7f0;
  --osm-soft: #f8f7fc;

  position: relative;
  overflow: hidden;

  padding: 105px 0 115px;

  background:
    radial-gradient(
      circle at 7% 13%,
      rgba(171, 74, 215, .08),
      transparent 28%
    ),
    radial-gradient(
      circle at 93% 70%,
      rgba(224, 89, 177, .07),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #faf9fd 48%,
      #ffffff 100%
    );
background: radial-gradient(circle at 6% 16%, rgba(168, 74, 216, 0.09), #f8edfa 28%), radial-gradient(circle at 94% 80%, rgba(224, 82, 173, 0.08), transparent 30%), linear-gradient(180deg, #fff 0%, #fcf8fd 100%);
  color: var(--osm-text);

  font-size: 18px;
}


/* subtle grid */

.osaas-subscription-model::before {
  /* content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: .4;

  background-image:
    linear-gradient(
      rgba(44, 49, 81, .025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(44, 49, 81, .025) 1px,
      transparent 1px
    );

  background-size: 55px 55px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      #000 13%,
      #000 87%,
      transparent
    ); */

    content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(150, 86, 169, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 86, 169, .03) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 96%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 96%);
}


/* =========================================================
   GLOW
========================================================= */

.osaas-subscription-model__orb {
  position: absolute;

  border-radius: 50%;

  filter: blur(100px);

  pointer-events: none;
}


.osaas-subscription-model__orb--1 {
  width: 430px;
  height: 430px;

  top: -180px;
  left: -210px;

  background:
    rgba(176, 76, 218, .12);
}


.osaas-subscription-model__orb--2 {
  width: 450px;
  height: 450px;

  right: -220px;
  bottom: 140px;

  background:
    rgba(225, 89, 179, .10);
}


/* =========================================================
   HEADER
========================================================= */

.osaas-subscription-model__header {
  margin-bottom: 58px;
}


.osaas-subscription-model__title {
max-width: 1000px;
  margin: 0 auto;
  color: var(--osm-dark);
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -2px;
}


.osaas-subscription-model__title span {
  position: relative;

  display: inline-block;

  background:
    linear-gradient(
      90deg,
      #a34ad4 0%,
      #df5ab2 100%
    );

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

  color: transparent;
}


.osaas-subscription-model__title span::after {
  content: "";

  position: absolute;

  left: 4%;
  right: 4%;
  bottom: -7px;

  height: 4px;

  border-radius: 100px;

  background:
    linear-gradient(
      90deg,
      rgba(165, 75, 215, .15),
      #bd5adc,
      #de5bb2,
      rgba(222, 91, 178, .12)
    );
}


.osaas-subscription-model__intro {
  margin: 33px 0 7px;

  color: #343d55;

  font-size: 20px;

  font-weight: 600;
}


.osaas-subscription-model__example-copy {
  margin: 0;

  color: var(--osm-muted);

  font-size: 18px;

  line-height: 1.65;
}


.osaas-subscription-model__example-copy strong {
  color: #a449ce;

  font-weight: 800;
}


/* =========================================================
   PRICING ROW
========================================================= */

.osaas-subscription-model__pricing-row {
  max-width: 1260px;

  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   PRICING CARD
========================================================= */

.osaas-subscription-model__price-card {
  position: relative;

  height: 100%;

  padding: 27px;

  overflow: hidden;

  border: 1px solid var(--osm-border);

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fcfbff 100%
    );

  box-shadow:
    0 18px 55px rgba(35, 31, 60, .07),
    0 3px 10px rgba(35, 31, 60, .025);

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


.osaas-subscription-model__price-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 12%;
  right: 12%;

  height: 3px;

  border-radius: 0 0 10px 10px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #a84cd7,
      #df5bb2,
      transparent
    );
}


.osaas-subscription-model__price-card::after {
  content: "";

  position: absolute;

  top: -90px;
  right: -90px;

  width: 180px;
  height: 180px;

  border-radius: 50%;

  background:
    rgba(174, 79, 216, .06);

  pointer-events: none;
}


.osaas-subscription-model__price-card:hover {
  transform: translateY(-7px);

  border-color:
    rgba(173, 78, 215, .22);

  box-shadow:
    0 28px 65px rgba(42, 34, 70, .11);
}


/* =========================================================
   PRICE TOP
========================================================= */

.osaas-subscription-model__price-top {
  position: relative;

  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom: 23px;

  padding-bottom: 22px;

  border-bottom:
    1px solid #ebebf2;
}


.osaas-subscription-model__price-icon {
  width: 52px;
  height: 52px;

  flex: 0 0 52px;

  display: flex;

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

  border-radius: 15px;

  background:
    linear-gradient(
      135deg,
      rgba(169, 76, 215, .12),
      rgba(225, 90, 177, .08)
    );

  border:
    1px solid rgba(173, 78, 215, .14);

  color: #aa4fd4;

  font-size: 19px;
}


.osaas-subscription-model__price {
  display: flex;

  align-items: baseline;

  gap: 7px;
}


.osaas-subscription-model__price strong {
  color: var(--osm-dark);

  font-size:
    clamp(35px, 4vw, 48px);

  font-weight: 900;

  line-height: 1;

  letter-spacing: -1.5px;
}


.osaas-subscription-model__price span {
  color: #8e95a7;

  font-size: 13px;

  font-weight: 800;

  letter-spacing: .6px;
}


.osaas-subscription-model__card-number {
  margin-left: auto;

  color:
    rgba(29, 39, 68, .07);

  font-size: 39px;

  font-weight: 900;

  line-height: 1;
}


/* =========================================================
   MATH
========================================================= */

.osaas-subscription-model__math {
  display: flex;

  flex-direction: column;

  gap: 10px;
}


.osaas-subscription-model__math-row {
  min-height: 57px;

  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;

  gap: 13px;

  padding: 12px 14px;

  border-radius: 13px;

  background: #f8f8fc;

  border:
    1px solid #eeeeF4;

  transition:
    background .3s ease,
    border-color .3s ease,
    transform .3s ease;
}


.osaas-subscription-model__math-row:hover {
  transform: translateX(3px);

  background:
    linear-gradient(
      90deg,
      rgba(169, 76, 215, .06),
      rgba(225, 90, 177, .035)
    );

  border-color:
    rgba(170, 79, 215, .14);
}


.osaas-subscription-model__math-row span {
  color: #5e677a;

  font-size: 15px;

  font-weight: 600;
}


.osaas-subscription-model__math-row i {
  color: #be64d9;

  font-size: 11px;
}


.osaas-subscription-model__math-row strong {
  text-align: right;

  color: #17213b;

  font-size: 17px;

  font-weight: 850;
}


/* =========================================================
   DISCLAIMER
========================================================= */

.osaas-subscription-model__disclaimer {
  max-width: 920px;

  margin: 45px auto 0;

  padding: 21px 25px;

  display: flex;

  align-items: center;

  gap: 16px;

  border-radius: 18px;

  border:
    1px solid #e6deeb;

  background:
    linear-gradient(
      90deg,
      rgba(170, 77, 215, .055),
      #ffffff,
      rgba(224, 89, 177, .04)
    );

  box-shadow:
    0 12px 35px rgba(37, 31, 60, .045);
}


.osaas-subscription-model__disclaimer-icon {
  width: 47px;
  height: 47px;

  flex: 0 0 47px;

  display: flex;

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

  border-radius: 14px;

  color: #a84fd2;

  background:
    rgba(172, 77, 215, .08);

  border:
    1px solid rgba(173, 79, 215, .12);
}


.osaas-subscription-model__disclaimer p {
  margin: 0;

  color: #5f687b;

  font-size: 18px;

  line-height: 1.6;
}


.osaas-subscription-model__disclaimer strong {
  color: #202942;

  font-weight: 800;
}


/* =========================================================
   FACTORS
========================================================= */

.osaas-subscription-model__factors {
  max-width: 1160px;

  margin: 65px auto 0;

  padding: 38px;

  border-radius: 28px;

  border:
    1px solid #ebe9f0;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #faf9fd
    );

  box-shadow:
    0 24px 65px rgba(34, 31, 57, .07);
}


.osaas-subscription-model__small-label {
  display: inline-block;

  margin-bottom: 10px;

  color: #a34dcc;

  font-size: 12px;

  font-weight: 850;

  letter-spacing: 1.4px;
}


.osaas-subscription-model__factors-heading h3 {
  margin: 0;

  color: var(--osm-dark);

  font-size:
    clamp(27px, 3vw, 38px);

  font-weight: 850;

  line-height: 1.15;

  letter-spacing: -1px;
}


/* factor grid */

.osaas-subscription-model__factor-grid {
  display: grid;

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

  gap: 12px;
}


.osaas-subscription-model__factor {
  min-height: 58px;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px 14px;

  border-radius: 14px;

  background: #f8f8fc;

  border:
    1px solid #ececf2;

  color: #3d465b;

  font-size: 16px;

  font-weight: 700;
}


.osaas-subscription-model__factor span {
  width: 31px;
  height: 31px;

  flex: 0 0 31px;

  display: flex;

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

  border-radius: 10px;

  color: #ffffff;

  font-size: 10px;

  background:
    linear-gradient(
      135deg,
      #a84bd5,
      #df5ab2
    );

  box-shadow:
    0 7px 18px rgba(172, 75, 215, .18);
}


/* =========================================================
   MODEL
========================================================= */

.osaas-subscription-model__model {
max-width: 1160px;
  margin: 70px auto 0;
  padding: 44px 40px;
  border-radius: 30px;
  border: 1px solid #e9e5ee;
  background: linear-gradient( 145deg, rgba(255, 255, 255, 0.42), #fff 42%, rgba(255, 255, 255, 0.6) );
  box-shadow: 0 25px 70px rgba(38, 31, 62, .07);
}


.osaas-subscription-model__model-heading {
  margin: 0 0 37px;

  color: var(--osm-dark);

  font-size:
    clamp(29px, 3vw, 42px);

  font-weight: 900;

  letter-spacing: -1.2px;
}


/* =========================================================
   FLOW
========================================================= */

.osaas-subscription-model__flow {
  display: grid;

  grid-template-columns:
    1fr 120px
    1fr 120px
    1fr;

  align-items: center;

  gap: 13px;
}


.osaas-subscription-model__flow-item {
  min-height: 160px;

  padding: 24px 18px;

  display: flex;

  flex-direction: column;

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

  gap: 17px;

  text-align: center;

  border-radius: 22px;

  background: #ffffff;

  border:
    1px solid #e8e6ed;

  box-shadow:
    0 14px 35px rgba(37, 31, 59, .055);

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


.osaas-subscription-model__flow-item:hover {
  transform: translateY(-5px);

  box-shadow:
    0 22px 45px rgba(39, 30, 65, .09);
}


.osaas-subscription-model__flow-icon {
  width: 62px;
  height: 62px;

  display: flex;

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

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      rgba(169, 76, 215, .13),
      rgba(225, 90, 177, .09)
    );

  border:
    1px solid rgba(174, 78, 216, .15);

  color: #ab50d4;

  font-size: 21px;
}


.osaas-subscription-model__flow-item strong {
  color: #18223b;

  font-size: 17px;

  font-weight: 850;

  letter-spacing: .4px;
}


/* arrow */

.osaas-subscription-model__flow-arrow {
  display: flex;

  align-items: center;
}


.osaas-subscription-model__flow-arrow span {
  flex: 1;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(168, 75, 214, .2),
      #b252d7
    );
}


.osaas-subscription-model__flow-arrow i {
  width: 35px;
  height: 35px;

  display: flex;

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

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      #a84bd5,
      #df5ab2
    );

  color: #ffffff;

  font-size: 11px;

  box-shadow:
    0 8px 22px rgba(170, 75, 214, .22);
}


/* =========================================================
   CLOSING
========================================================= */

.osaas-subscription-model__closing {
  max-width: 860px;

  margin: 38px auto 0;

  padding-top: 30px;

  text-align: center;

  border-top:
    1px solid #e9e7ee;
}


.osaas-subscription-model__closing p {
  margin: 0 0 12px;

  color: #6b7386;

  font-size: 18px;

  line-height: 1.65;
}


.osaas-subscription-model__closing h4 {
  margin: 0;

  background:
    linear-gradient(
      90deg,
      #9542c5,
      #d854ad
    );

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

  color: transparent;

  font-size:
    clamp(22px, 2.5vw, 30px);

  font-weight: 850;

  line-height: 1.3;
}


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

@media (max-width: 991.98px) {

  .osaas-subscription-model {
    padding:
      80px 0 90px;
  }


  .osaas-subscription-model__header {
    margin-bottom: 45px;
  }


  .osaas-subscription-model__factors {
    padding: 30px;
  }


  .osaas-subscription-model__factor-grid {
    margin-top: 5px;
  }


  .osaas-subscription-model__model {
    padding: 35px 26px;
  }


  .osaas-subscription-model__flow {
    grid-template-columns:
      1fr 70px
      1fr 70px
      1fr;
  }

}


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

@media (max-width: 767.98px) {

  .osaas-subscription-model {
    padding:
      62px 0 70px;

    font-size: 18px;
  }


  .osaas-subscription-model__title {
    font-size: 35px;

    letter-spacing: -1.2px;
  }


  .osaas-subscription-model__intro {
    font-size: 19px;
  }


  .osaas-subscription-model__price-card {
    padding: 20px;

    border-radius: 20px;
  }


  .osaas-subscription-model__price strong {
    font-size: 39px;
  }


  .osaas-subscription-model__math-row {
    grid-template-columns:
      1fr auto;

    gap: 7px 10px;
  }


  .osaas-subscription-model__math-row i {
    display: none;
  }


  .osaas-subscription-model__math-row span {
    font-size: 14px;
  }


  .osaas-subscription-model__math-row strong {
    font-size: 15px;
  }


  .osaas-subscription-model__disclaimer {
    align-items: flex-start;

    padding: 18px;
  }


  .osaas-subscription-model__factors {
    padding: 24px 18px;

    border-radius: 22px;
  }


  .osaas-subscription-model__factor-grid {
    grid-template-columns:
      1fr;

    margin-top: 10px;
  }


  .osaas-subscription-model__model {
    padding: 29px 17px;

    border-radius: 23px;
  }


  .osaas-subscription-model__flow {
    display: flex;

    flex-direction: column;

    gap: 12px;
  }


  .osaas-subscription-model__flow-item {
    width: 100%;

    min-height: 130px;
  }


  .osaas-subscription-model__flow-arrow {
    width: 40px;
    height: 48px;

    flex-direction: column;
  }


  .osaas-subscription-model__flow-arrow span {
    width: 1px;
    height: 18px;

    flex: 1;

    background:
      linear-gradient(
        to bottom,
        rgba(168,75,214,.2),
        #b252d7
      );
  }


  .osaas-subscription-model__flow-arrow i {
    transform: rotate(90deg);
  }

}


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

@media (max-width: 390px) {

  .osaas-subscription-model__title {
    font-size: 30px;
  }


  .osaas-subscription-model__price-card {
    padding: 17px;
  }


  .osaas-subscription-model__price-icon {
    width: 45px;
    height: 45px;

    flex-basis: 45px;
  }


  .osaas-subscription-model__price strong {
    font-size: 35px;
  }


  .osaas-subscription-model__card-number {
    display: none;
  }


  .osaas-subscription-model__disclaimer p,
  .osaas-subscription-model__closing p {
    font-size: 17px;
  }

}

/* =========================================================
   OWNSAAS BUSINESS ARCHITECTURE
   ULTRA PREMIUM DARK THEME
========================================================= */

.osaas-arch26-section {
    position: relative;
    overflow: hidden;

    padding: 105px 0;

    font-family: Inter, Arial, Helvetica, sans-serif;
    font-size: 18px;

    color: #ffffff;

background: #fff url(../images/osaas-arch26-section.png) no-repeat center top / cover;
  
}


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

.osaas-arch26-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(198, 82, 211, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(198, 82, 211, .035) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.9),
            transparent
        );

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.9),
            transparent
        );
}


.osaas-arch26-section::after {
    content: "";

    position: absolute;

    width: 720px;
    height: 400px;

    left: 50%;
    top: -320px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: rgba(185, 67, 204, .16);

    filter: blur(50px);

    pointer-events: none;
}


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

.osaas-arch26-head {
    position: relative;
    z-index: 5;

    margin-bottom: 55px;
}


.osaas-arch26-head-line {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    max-width: 360px;

    margin: 0 auto 24px;
}


.osaas-arch26-head-line span {
    width: 135px;
    height: 1px;

    display: block;
}


.osaas-arch26-head-line span:first-child {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(206, 81, 211, .75)
        );
}


.osaas-arch26-head-line span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(206, 81, 211, .75),
            transparent
        );
}


.osaas-arch26-head-line i {
    color: #db59bc;

    font-size: 14px;
    font-style: normal;

    filter:
        drop-shadow(
            0 0 10px rgba(219, 89, 188, .75)
        );
}


/* MAIN */

.osaas-arch26-head h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(37px, 4.4vw, 60px);
    font-weight: 900;

    line-height: 1.07;

    letter-spacing: -2px;

    text-transform: uppercase;
}


/* GRADIENT */

.osaas-arch26-head h3 {
    margin: 12px 0 0;

    font-size: clamp(29px, 3.5vw, 46px);
    font-weight: 900;

    line-height: 1.1;

    letter-spacing: -1px;

    text-transform: uppercase;

    background:
        linear-gradient(
            90deg,
            #a64bd9 0%,
            #cb51c7 48%,
            #e15bac 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


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

.osaas-arch26-shell {
    position: relative;
    z-index: 4;

    padding: 55px;

    overflow: hidden;

    border: 1px solid rgba(203, 84, 210, .16);

    border-radius: 34px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(181, 58, 196, .09),
            transparent 28%
        ),
        linear-gradient(
            140deg,
            rgba(29, 10, 36, .96),
            rgba(10, 4, 14, .98)
        );

    box-shadow:
        0 50px 120px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.04);
}


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

.osaas-arch26-copy {
    position: relative;
    z-index: 4;

    max-width: 470px;
}


.osaas-arch26-copy-line {
    width: 62px;
    height: 4px;

    margin-bottom: 25px;

    border-radius: 30px;

    background:
        linear-gradient(
            90deg,
            #a64bd9,
            #df59ad
        );
}


.osaas-arch26-copy p {
    margin: 0 0 16px;

    color: #cabccc;

    font-size: 18px;

    line-height: 1.72;
}


.osaas-arch26-copy p:nth-child(3) {
    color: #ffffff;

    font-weight: 700;
}


/* EMPHASIS */

.osaas-arch26-emphasis {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-top: 27px;

    padding: 18px 19px;

    border: 1px solid rgba(211, 87, 207, .18);

    border-radius: 16px;

    background:
        linear-gradient(
            110deg,
            rgba(150, 42, 163, .20),
            rgba(73, 19, 81, .14)
        );
}


.osaas-arch26-emphasis > span {
    width: 38px;
    height: 38px;

    min-width: 38px;

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

    border-radius: 11px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #a64bd8,
            #df59ad
        );

    box-shadow:
        0 9px 22px rgba(190, 68, 192, .24);
}


.osaas-arch26-emphasis strong {
    color: #ffffff;

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

    line-height: 1.5;
}


/* =========================================================
   ARCHITECTURE SYSTEM
========================================================= */

.osaas-arch26-system {
    position: relative;

    width: 100%;
    min-height: 570px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   RINGS
========================================================= */

.osaas-arch26-ring {
    position: absolute;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    pointer-events: none;
}


.osaas-arch26-ring-1 {
    width: 470px;
    height: 470px;

    border:
        1px solid
        rgba(203, 82, 209, .10);
}


.osaas-arch26-ring-2 {
    width: 360px;
    height: 360px;

    border:
        1px dashed
        rgba(219, 89, 188, .11);
}


.osaas-arch26-ring-3 {
    width: 250px;
    height: 250px;

    border:
        1px solid
        rgba(203, 82, 209, .08);

    background:
        radial-gradient(
            circle,
            rgba(191, 66, 201, .08),
            transparent 68%
        );
}


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

.osaas-arch26-core {
    position: absolute;
    z-index: 5;

    left: 50%;
    top: 50%;

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

    width: 190px;
    height: 190px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    border:
        1px solid
        rgba(220, 91, 204, .34);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(209, 78, 217, .28),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #26102e,
            #100716
        );

    box-shadow:
        0 0 80px rgba(187, 65, 196, .18),
        inset 0 1px 0 rgba(255,255,255,.08);
}


.osaas-arch26-core-glow {
    position: absolute;

    inset: 18px;

    border-radius: 50%;

    border:
        1px solid
        rgba(213, 93, 196, .13);

    pointer-events: none;
}


.osaas-arch26-core-small {
    position: relative;
    z-index: 2;

    margin-bottom: 5px;

    color: #c594d0;

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

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.osaas-arch26-core strong {
    position: relative;
    z-index: 2;

    max-width: 125px;

    color: #ffffff;

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

    line-height: 1.25;
}


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

.osaas-arch26-node {
    position: absolute;
    z-index: 6;

    min-width: 160px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 13px 15px;

    border:
        1px solid
        rgba(207, 86, 209, .18);

    border-radius: 14px;

    background:
        rgba(29, 11, 35, .88);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 16px 35px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.035);

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


.osaas-arch26-node:hover {
    transform: translateY(-4px);

    border-color:
        rgba(222, 91, 200, .40);

    box-shadow:
        0 20px 42px rgba(0,0,0,.32),
        0 0 30px rgba(195, 69, 199, .08);
}


.osaas-arch26-node-num {
    color: #d261c6;

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

    letter-spacing: 1px;
}


.osaas-arch26-node strong {
    color: #ffffff;

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

    line-height: 1.35;
}


/* =========================================================
   NODE POSITIONS
========================================================= */

.osaas-arch26-node-1 {
    left: 3%;
    top: 11%;
}


.osaas-arch26-node-2 {
    right: 4%;
    top: 12%;
}


.osaas-arch26-node-3 {
    right: -1%;
    top: 42%;
}


.osaas-arch26-node-4 {
    right: 7%;
    bottom: 9%;
}


.osaas-arch26-node-5 {
    left: 8%;
    bottom: 8%;
}


.osaas-arch26-node-6 {
    left: -1%;
    top: 43%;
}


.osaas-arch26-node-7 {
    left: 50%;
    bottom: 0;

    transform:
        translateX(-50%);
}


.osaas-arch26-node-7:hover {
    transform:
        translateX(-50%)
        translateY(-4px);
}


/* =========================================================
   FINAL STATEMENT
========================================================= */

.osaas-arch26-final {
    position: relative;
    z-index: 5;

    display: flex;
    align-items: center;

    gap: 18px;

    margin-top: 45px;
}


.osaas-arch26-final-line {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(210, 84, 207, .28),
            transparent
        );
}


.osaas-arch26-final-copy {
    max-width: 780px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 18px 22px;

    border:
        1px solid
        rgba(212, 87, 206, .18);

    border-radius: 15px;

    background:
        linear-gradient(
            110deg,
            rgba(144, 39, 157, .17),
            rgba(70, 18, 77, .12)
        );

    text-align: left;
}


.osaas-arch26-final-mark {
    width: 36px;
    height: 36px;

    min-width: 36px;

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

    border-radius: 10px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #a54bd8,
            #df59ad
        );
}


.osaas-arch26-final-copy p {
    margin: 0;

    color: #ffffff;

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

    line-height: 1.6;
}


/* =========================================================
   1199PX
========================================================= */

@media (max-width: 1199px) {

    .osaas-arch26-shell {
        padding: 45px;
    }


    .osaas-arch26-system {
        min-height: 530px;
    }


    .osaas-arch26-ring-1 {
        width: 420px;
        height: 420px;
    }


    .osaas-arch26-ring-2 {
        width: 325px;
        height: 325px;
    }

}


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

@media (max-width: 991px) {

    .osaas-arch26-section {
        padding: 75px 0;
    }


    .osaas-arch26-head h2 {
        font-size: 40px;
    }


    .osaas-arch26-head h3 {
        font-size: 31px;
    }


    .osaas-arch26-shell {
        padding: 35px 25px;

        border-radius: 27px;
    }


    .osaas-arch26-copy {
        max-width: none;
    }


    .osaas-arch26-system {
        min-height: 570px;

        margin-top: 20px;
    }


    .osaas-arch26-final {
        margin-top: 35px;
    }

}


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

@media (max-width: 767px) {

    .osaas-arch26-section {
        padding: 55px 0;

        font-size: 18px;
    }


    .osaas-arch26-head {
        margin-bottom: 35px;
    }


    .osaas-arch26-head-line {
        max-width: 260px;

        margin-bottom: 18px;
    }


    .osaas-arch26-head-line span {
        width: 90px;
    }


    .osaas-arch26-head h2 {
        font-size: 30px;

        letter-spacing: -.8px;
    }


    .osaas-arch26-head h3 {
        font-size: 25px;

        letter-spacing: -.5px;
    }


    .osaas-arch26-shell {
        padding: 28px 18px;

        border-radius: 23px;
    }


    .osaas-arch26-copy p,
    .osaas-arch26-emphasis strong,
    .osaas-arch26-final-copy p {
        font-size: 18px;
    }


    /* MOBILE SYSTEM BECOMES STACK */

    .osaas-arch26-system {
        min-height: auto;

        display: grid;

        grid-template-columns: 1fr;

        gap: 11px;

        margin-top: 35px;
    }


    .osaas-arch26-ring {
        display: none;
    }


    .osaas-arch26-core {
        position: relative;

        left: auto;
        top: auto;

        transform: none;

        width: 100%;
        height: auto;

        padding: 22px;

        border-radius: 18px;

        margin-bottom: 8px;
    }


    .osaas-arch26-core-glow {
        inset: 8px;

        border-radius: 13px;
    }


    .osaas-arch26-node {
        position: relative;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        transform: none !important;

        width: 100%;
        min-width: 0;

        padding: 15px 16px;
    }


    .osaas-arch26-node:hover,
    .osaas-arch26-node-7:hover {
        transform: none;
    }


    .osaas-arch26-node strong {
        font-size: 18px;
    }


    .osaas-arch26-final {
        gap: 10px;
    }


    .osaas-arch26-final-line {
        display: none;
    }


    .osaas-arch26-final-copy {
        width: 100%;

        padding: 18px 16px;
    }

}


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

@media (max-width: 480px) {

    .osaas-arch26-section {
        padding: 45px 0;
    }


    .osaas-arch26-head h2 {
        font-size: 27px;
    }


    .osaas-arch26-head h3 {
        font-size: 22px;
    }


    .osaas-arch26-emphasis {
        align-items: flex-start;
    }


    .osaas-arch26-final-copy {
        align-items: flex-start;
    }

}

/* =====================================================
   OWN SAAS - IDENTITY SHIFT / WHITE PREMIUM SECTION
===================================================== */

.osaas-identity-shift {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
background: #fff url(../images/osaas-identity-shift.webp) no-repeat center top / cover;
  color: #fff;
    color: #10213d;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}


/* subtle premium grid */
.osaas-identity-shift::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .38;
    background-image:
        linear-gradient(rgba(17, 43, 79, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 43, 79, .035) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent,
        #000 20%,
        #000 80%,
        transparent
    );
    mask-image: linear-gradient(
        to bottom,
        transparent,
        #000 20%,
        #000 80%,
        transparent
    );
}


/* =========================
   TOP EYEBROW
========================= */

.osaas-identity-eyebrow {
    position: relative;
    z-index: 2;
    width: fit-content;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 1px solid #dfe5ef;
    background: rgba(255, 255, 255, .9);
    box-shadow:
        0 8px 30px rgba(23, 43, 77, .06),
        inset 0 1px 0 #fff;
    border-radius: 100px;

    color: #142641;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-align: center;
}


.osaas-identity-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #dca72e;
    box-shadow: 0 0 0 5px rgba(220, 167, 46, .12);
}


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

.osaas-identity-heading {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 28px auto 50px;
}


.osaas-identity-heading h2 {
    margin: 0;
    color: #0c1d38;
    font-size: clamp(30px, 4vw, 50px);
    line-height: 1.04;
    letter-spacing: -2px;
    font-weight: 900;
}


.osaas-identity-heading p {
    margin: 19px 0 0;
    color: #65728a;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 500;
}


/* =========================
   MAIN PANEL
========================= */

.osaas-identity-panel {
    position: relative;
    z-index: 2;
    overflow: hidden;

    max-width: 1180px;
    margin: 0 auto;
    padding: 55px;

    border: 1px solid #e2e8f2;
    border-radius: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(248, 250, 255, .94)
        );

    box-shadow:
        0 35px 100px rgba(21, 43, 78, .11),
        0 8px 25px rgba(21, 43, 78, .045),
        inset 0 1px 0 #ffffff;
}


.osaas-identity-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    padding: 1px;

    background: linear-gradient(
        135deg,
        rgba(215, 163, 44, .50),
        transparent 27%,
        transparent 70%,
        rgba(59, 98, 179, .25)
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;
}


/* background blur balls */

.osaas-identity-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(5px);
    pointer-events: none;
}


.osaas-identity-glow-one {
    width: 240px;
    height: 240px;
    top: -130px;
    right: -100px;
    background: rgba(49, 92, 180, .07);
}


.osaas-identity-glow-two {
    width: 220px;
    height: 220px;
    bottom: -130px;
    left: -80px;
    background: rgba(218, 166, 43, .08);
}


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

.osaas-shift-row {
    position: relative;
    padding: 5px 0;
}


.osaas-shift-number {
    position: absolute;
left: -40px;
    top: -18px;
    z-index: 4;

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

    width: 50px;
    height: 50px;

    border-radius: 15px;

    background: #10223d;
    color: #ffffff;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;

    box-shadow:
        0 10px 25px rgba(15, 34, 62, .18),
        inset 0 1px 0 rgba(255, 255, 255, .15);
}


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

.osaas-thinking-card {
    position: relative;
    height: 100%;
    min-height: 180px;
    padding: 30px 30px 28px;
    border-radius: 22px;

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


.osaas-thinking-card:hover {
    transform: translateY(-5px);
}


/* OLD CARD */

.osaas-thinking-old {
    border: 1px solid #e3e7ed;
    background:
        linear-gradient(145deg, #ffffff, #f5f7fa);
    box-shadow: 0 15px 35px rgba(28, 45, 69, .05);
}


.osaas-thinking-old:hover {
    border-color: #cbd3df;
    box-shadow: 0 20px 45px rgba(28, 45, 69, .08);
}


/* NEW CARD */

.osaas-thinking-new {
    border: 1px solid rgba(213, 161, 39, .36);

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fffcf2 100%
        );

    box-shadow:
        0 15px 40px rgba(164, 116, 15, .08);
}


.osaas-thinking-new::before {
    content: "";
    position: absolute;
    top: 0;
    left: 26px;
    right: 26px;
    height: 3px;

    border-radius: 0 0 6px 6px;

    background: linear-gradient(
        90deg,
        transparent,
        #dca62c,
        transparent
    );
}


.osaas-thinking-new:hover {
    border-color: rgba(208, 155, 31, .6);
    box-shadow:
        0 22px 50px rgba(164, 116, 15, .13);
}


/* =========================
   CARD LABEL
========================= */

.osaas-thinking-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;

    color: #68758a;

    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
}


.osaas-thinking-new .osaas-thinking-label {
    color: #9b7219;
}


.osaas-label-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius: 8px;

    background: #edf1f6;
    color: #708099;

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


.osaas-thinking-new .osaas-label-icon {
    background: #fff3cc;
    color: #b27e08;
}


/* =========================
   QUOTE
========================= */

.osaas-thinking-quote {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}


.osaas-quote-mark {
    display: block;
    margin-top: -8px;

    color: #bac3d0;

    font-family: Georgia, serif;
    font-size: 48px;
    line-height: 1;
    font-weight: 700;
}


.osaas-thinking-new .osaas-quote-mark {
    color: #d8a630;
}


.osaas-thinking-quote p {
    margin: 0;

    color: #344157;

    font-size: 18px;
    line-height: 1.65;
    font-weight: 600;
    font-style: italic;
}


.osaas-thinking-new .osaas-thinking-quote p {
    color: #152743;
    font-weight: 800;
}


/* =========================
   CONNECTORS
========================= */

.osaas-shift-connector {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    height: 54px;
}


.osaas-shift-connector::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;

    background: linear-gradient(
        to bottom,
        transparent,
        #d6dde8,
        transparent
    );
}


.osaas-shift-connector span {
    position: relative;
    z-index: 2;

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

    width: 32px;
    height: 32px;

    border: 1px solid #e0e6ef;
    border-radius: 50%;

    background: #ffffff;
    color: #ba891b;

    font-size: 17px;
    line-height: 1;

    box-shadow: 0 5px 16px rgba(15, 36, 69, .07);
}


/* =========================
   TRANSFORMATION
========================= */

.osaas-transformation {
    position: relative;
    margin-top: 55px;
    padding: 44px 35px 35px;

    border-radius: 27px;

    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), transparent 30%),
        linear-gradient(
            135deg,
            #0a1930 0%,
            #102744 50%,
            #0b1b33 100%
        );

    box-shadow:
        0 25px 60px rgba(11, 28, 53, .22);
}


.osaas-transformation::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 26px;
    pointer-events: none;

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


.osaas-transformation-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    margin-bottom: 32px;
}


.osaas-transformation-title span {
    width: 55px;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #d6a437
    );
}


.osaas-transformation-title span:last-child {
    background: linear-gradient(
        90deg,
        #d6a437,
        transparent
    );
}


.osaas-transformation-title p {
    margin: 0;

    color: #ffffff;

    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
}


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

.osaas-transform-card {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;

    min-height: 102px;
    height: 100%;

    padding: 20px 16px;

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

    background: rgba(255, 255, 255, .055);
    backdrop-filter: blur(12px);

    text-align: center;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;
}


.osaas-transform-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, .085);
    border-color: rgba(219, 168, 53, .42);
}


.osaas-transform-from {
    color: #d2d9e5;

    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
}


.osaas-transform-arrow {
    color: #e3b64d;

    font-size: 24px;
    line-height: 1;
    font-weight: 700;
}


.osaas-transform-to {
    color: #ffffff;

    font-size: 20px;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: .3px;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 991px) {

    .osaas-identity-shift {
        padding: 80px 0;
    }

    .osaas-identity-panel {
        padding: 42px 30px;
        border-radius: 28px;
    }

    .osaas-shift-number {
        left: -8px;
        top: -18px;
    }

    .osaas-transformation {
        padding: 38px 25px 28px;
    }
}


@media (max-width: 767px) {

    .osaas-identity-shift {
        padding: 65px 0;
        font-size: 18px;
    }

    .osaas-identity-heading {
        margin-bottom: 35px;
    }

    .osaas-identity-heading h2 {
        font-size: 38px;
        letter-spacing: -1.2px;
    }

    .osaas-identity-panel {
        padding: 35px 18px 22px;
        border-radius: 24px;
    }

    .osaas-thinking-card {
        min-height: auto;
        padding: 27px 22px;
        border-radius: 18px;
    }

    .osaas-shift-number {
        position: relative;
        left: auto;
        top: auto;

        width: 44px;
        height: 44px;

        margin: 0 auto 20px;
    }

    .osaas-shift-connector {
        height: 46px;
    }

    .osaas-transformation {
        margin-top: 42px;
        padding: 35px 18px 20px;
        border-radius: 22px;
    }

    .osaas-transformation-title {
        gap: 10px;
    }

    .osaas-transformation-title span {
        width: 25px;
    }
}


@media (max-width: 575px) {

    .osaas-identity-shift {
        padding: 55px 0;
    }

    .osaas-identity-eyebrow {
        padding: 9px 13px;
        font-size: 12px;
        letter-spacing: .6px;
    }

    .osaas-identity-heading h2 {
        font-size: 32px;
        line-height: 1.08;
    }

    .osaas-identity-heading p {
        font-size: 18px;
    }

    .osaas-thinking-quote p {
        font-size: 18px;
    }

    .osaas-transformation-title p {
        font-size: 16px;
        text-align: center;
    }

    .osaas-transform-card {
        min-height: 90px;
    }
}

.osaas-understand-section {
    position: relative;
    padding: 90px 0;
    overflow: hidden;
  background: #fff url(../images/osaas-understand-section.png) no-repeat center top / cover;

    font-size: 18px;
    color: #261f35;
}

.osaas-understand-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.45;
    background-image:
        linear-gradient(rgba(120, 82, 201, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 82, 201, 0.04) 1px, transparent 1px);
    background-size: 44px 44px;
}

.osaas-understand-panel {
    position: relative;
    z-index: 2;
    padding: 55px 55px 30px;
    border: 1px solid rgba(166, 131, 235, 0.22);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 30px 80px rgba(95, 72, 158, 0.10);
    backdrop-filter: blur(8px);
}

.osaas-understand-head {
    max-width: 900px;
    margin: 0 auto 38px;
}

.osaas-understand-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 8px 16px;
    border: 1px solid #e1d8f5;
    border-radius: 100px;
    background: #fff;
    color: #b14fe0;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.6px;
}

.osaas-understand-kicker span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8f53ff, #d95dcb);
}

.osaas-understand-head h2 {
    margin: 0;
    color: #17122a;
  font-size: clamp(34px, 4.2vw, 44px);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -2px;
}

.osaas-understand-head h2 span {
    display: block;
    background: linear-gradient(90deg, #7e49f2 0%, #b752e6 50%, #d65bcb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.osaas-understand-image-wrap {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border-radius: 26px;
    background: linear-gradient(145deg, #171229 0%, #241245 45%, #2f1657 100%);
    box-shadow: 0 30px 55px rgba(58, 34, 117, 0.20);
}

.osaas-understand-image-wrap::after {
    content: "";
    position: absolute;
    inset: auto 12% 12px 12%;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(167, 93, 255, 0.25), transparent 70%);
    filter: blur(8px);
}

.osaas-understand-image {
    position: relative;
    z-index: 2;
    width: 100%;
    border-radius: 18px;
}

.osaas-understand-copy {
    padding: 10px 6px;
}

.osaas-understand-copy p {
    margin: 0 0 18px;
    color: #5e576e;
    font-size: 18px;
    line-height: 1.75;
    font-weight: 400;
}

.osaas-understand-copy p strong {
    color: #241b35;
    font-weight: 800;
}

.osaas-understand-highlight {
    margin: 28px 0 20px;
    padding: 28px 26px;
    border-left: 4px solid #ca57dd;
    border-radius: 20px;
    background: linear-gradient(135deg, #fff 0%, #faf5ff 100%);
    box-shadow: 0 18px 40px rgba(111, 71, 181, 0.08);
}

.osaas-understand-highlight h3 {
    margin: 0;
    color: #17122a;
    font-size: clamp(24px, 2.7vw, 40px);
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -1px;
}

.osaas-understand-highlight h3 span {
    color: #b44edf;
}

.osaas-understand-last {
    margin-bottom: 0 !important;
    color: #4b445c;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 991px) {
    .osaas-understand-section {
        padding: 75px 0;
    }

    .osaas-understand-panel {
        padding: 40px 28px 24px;
    }

    .osaas-understand-copy {
        text-align: center;
    }

    .osaas-understand-highlight {
        text-align: center;
    }
}

@media (max-width: 767px) {
    .osaas-understand-section {
        padding: 60px 0;
        font-size: 18px;
    }

    .osaas-understand-panel {
        padding: 28px 18px 20px;
        border-radius: 22px;
    }

    .osaas-understand-head {
        margin-bottom: 28px;
    }

    .osaas-understand-head h2 {
        font-size: 36px;
        letter-spacing: -1.2px;
    }

    .osaas-understand-image-wrap {
        padding: 12px;
        border-radius: 20px;
    }

    .osaas-understand-highlight {
        padding: 22px 18px;
        border-radius: 16px;
    }

    .osaas-understand-highlight h3 {
        font-size: 28px;
    }
}

/* ==========================================================
   OWNSAAS — LONG TERM PLAY
   UNIQUE PREFIX: ownflow922-
========================================================== */

.ownflow922-section {
    --ownflow922-dark: #11182d;
    --ownflow922-text: #626b7b;
    --ownflow922-purple: #a14ce3;
    --ownflow922-pink: #e958a8;
    --ownflow922-light: #f8f8fc;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 95px 0 120px;
background: #fff url(../images/ownflow922-section.webp) no-repeat center top / cover;


    color: var(--ownflow922-dark);
    font-size: 18px;
}


/* subtle grid */
.ownflow922-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;

    background-image:
        linear-gradient(
            rgba(80, 55, 120, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(80, 55, 120, 0.025) 1px,
            transparent 1px
        );

    background-size: 58px 58px;

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


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

.ownflow922-orb {
    position: absolute;
    z-index: -2;

    border-radius: 50%;

    filter: blur(110px);

    pointer-events: none;
}


.ownflow922-orb-one {
    width: 420px;
    height: 420px;

    top: 130px;
    left: -250px;

    background: rgba(177, 75, 234, 0.11);
}


.ownflow922-orb-two {
    width: 500px;
    height: 500px;

    right: -290px;
    top: 48%;

    background: rgba(239, 77, 161, 0.09);
}


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

.ownflow922-logo-wrap {
    margin-bottom: 70px;
}


.ownflow922-logo-box {
    display: inline-flex;

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

    max-width: 430px;

    padding: 17px 30px;

    border: 1px solid #ece7f1;

    border-radius: 23px;

    background: rgba(255, 255, 255, 0.92);

    box-shadow:
        0 20px 60px rgba(32, 20, 52, 0.08),
        inset 0 1px 0 #ffffff;
}


.ownflow922-logo {
    width: 100%;
    max-width: 360px;
    height: auto;
    display: block;
}


/* ==========================================================
   INTRO
========================================================== */

.ownflow922-intro {
    max-width: 1130px;
    margin: 0 auto;
}


.ownflow922-intro-head {
    max-width: 930px;
    margin: 0 auto 55px;
}


.ownflow922-kicker {
    width: 50px;
    height: 50px;

    margin: 0 auto 20px;

    display: grid;
    place-items: center;

    border: 1px solid #ead8f7;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #fbf6ff,
            #fff3fa
        );

    color: #b54ce2;

    font-size: 20px;

    box-shadow:
        0 13px 35px rgba(163, 66, 222, 0.10);
}


.ownflow922-intro-head h2 {
margin: 0;
  color: #11182d;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: -2.7px;
}


.ownflow922-intro-head h2 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #a84be4 0%,
            #e553ac 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


.ownflow922-intro-head p {
    margin: 24px 0 0;

    color: #697181;

    font-size: 18px;

    line-height: 1.65;
}


/* ==========================================================
   FREEDOM CARD
========================================================== */

.ownflow922-freedom-card {
    position: relative;

    padding: 48px;

    overflow: hidden;

    border: 1px solid #e7e0ee;

    border-radius: 32px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(173, 76, 229, 0.08),
            transparent 33%
        ),
        #ffffff;

    box-shadow:
        0 30px 90px rgba(31, 21, 52, 0.09);
}


.ownflow922-freedom-card::before {
    content: "";

    position: absolute;

    left: 55px;
    right: 55px;
    top: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ad51e4,
            #ea56a8,
            transparent
        );
}


.ownflow922-small-label {
    display: inline-block;

    margin-bottom: 15px;

    color: #b24edc;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2px;
}


.ownflow922-freedom-title h3 {
    max-width: 390px;

    margin: 0;

    color: #121a30;

    font-size: clamp(31px, 4vw, 48px);

    line-height: 1.05;

    font-weight: 900;

    letter-spacing: -1.8px;
}


/* ACTIONS */
.ownflow922-action-grid {
    display: grid;

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

    gap: 12px;
}


.ownflow922-action-item {
    min-height: 82px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 16px 18px;

    border: 1px solid #ebe6ef;

    border-radius: 17px;

    background: #faf9fc;

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


.ownflow922-action-item:hover {
    transform: translateY(-4px);

    border-color: #dbb8eb;

    background: #ffffff;

    box-shadow:
        0 15px 35px rgba(57, 34, 81, 0.08);
}


.ownflow922-action-item span {
    flex: 0 0 37px;

    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #a84de5,
            #e959aa
        );

    color: #ffffff;

    font-size: 11px;

    font-weight: 900;
}


.ownflow922-action-item p {
    margin: 0;

    color: #464e5e;

    font-size: 18px;

    line-height: 1.45;

    font-weight: 600;
}


.ownflow922-action-wide {
    grid-column: 1 / -1;
}


/* ==========================================================
   FOUNDATION STRIP
========================================================== */

.ownflow922-foundation-strip {
    display: flex;

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

    gap: 25px;

    margin: 65px 0 0;
}


.ownflow922-foundation-strip h3 {
    margin: 0;

    color: #172036;

    font-size: clamp(26px, 3vw, 40px);

    line-height: 1.2;

    font-weight: 900;

    letter-spacing: -1px;
}


.ownflow922-foundation-strip h3 span {
    color: #d74eae;
}


.ownflow922-foundation-line {
    width: 90px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ce93e7
        );
}


.ownflow922-foundation-line:last-child {
    background:
        linear-gradient(
            90deg,
            #ce93e7,
            transparent
        );
}


/* ==========================================================
   FOCUS BLOCK
========================================================== */

.ownflow922-focus-block {
    max-width: 1180px;

    margin: 110px auto 0;

    padding: 70px 55px;

    border: 1px solid #ebe5f0;

    border-radius: 38px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(178, 73, 229, 0.075),
            transparent 35%
        ),
        #fbfafd;

    box-shadow:
        0 35px 100px rgba(34, 24, 55, 0.07);
}


.ownflow922-focus-heading {
    max-width: 850px;
    margin: 0 auto 42px;
}


.ownflow922-focus-badge {
    display: inline-flex;

    margin-bottom: 18px;

    padding: 9px 18px;

    border: 1px solid #ead8f4;

    border-radius: 100px;

    background: #ffffff;

    color: #ae4cda;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1.8px;

    box-shadow:
        0 10px 25px rgba(101, 61, 130, 0.05);
}


.ownflow922-focus-heading h2 {
    margin: 0;

    color: #121a2f;

    font-size: clamp(34px, 4vw, 53px);

    line-height: 1.06;

    font-weight: 900;

    letter-spacing: -2px;
}


.ownflow922-focus-heading h2 span {
    color: #d84ead;
}


.ownflow922-focus-heading p {
    margin: 20px 0 0;

    color: #747b88;

    font-size: 18px;

    line-height: 1.65;
}


.ownflow922-start-label {
    margin-bottom: 20px;

    color: #293247;

    font-size: 18px;

    font-weight: 700;
}


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

.ownflow922-one-grid {
    position: relative;
}


.ownflow922-one-card {
    position: relative;

    height: 100%;

    min-height: 175px;

    padding: 27px 15px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

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

    border: 1px solid #e6dfea;

    border-radius: 22px;

    background: #ffffff;

    text-align: center;

    box-shadow:
        0 16px 40px rgba(38, 24, 55, 0.055);

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


.ownflow922-one-card::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    top: -65px;
    right: -55px;

    border-radius: 50%;

    background: rgba(202, 77, 207, 0.10);

    filter: blur(20px);
}


.ownflow922-one-card:hover {
    transform: translateY(-8px);

    border-color: #d3a4e7;

    box-shadow:
        0 28px 55px rgba(78, 42, 102, 0.11);
}


.ownflow922-one-number {
    position: absolute;

    top: 14px;
    left: 15px;

    color: #ad6bc9;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;
}


.ownflow922-one-card h3 {
    margin: 0;

    background:
        linear-gradient(
            90deg,
            #9d45dc,
            #df51ad
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;

    font-size: 34px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -1px;
}


.ownflow922-one-card p {
    margin: 7px 0 0;

    color: #11192c;

    font-size: 18px;

    line-height: 1.2;

    font-weight: 900;
}


/* ==========================================================
   LEARN / IMPROVE / EXPAND
========================================================== */

.ownflow922-growth-mini {
    max-width: 700px;

    margin: 45px auto 0;

    display: flex;

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

    gap: 15px;
}


.ownflow922-growth-mini-item {
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 12px 16px;

    border: 1px solid #e7e0ec;

    border-radius: 100px;

    background: #ffffff;
}


.ownflow922-growth-mini-item span {
    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #f5e9fa;

    color: #ae4ad8;

    font-size: 9px;

    font-weight: 900;
}


.ownflow922-growth-mini-item strong {
    color: #232b3c;

    font-size: 16px;

    font-weight: 800;
}


.ownflow922-growth-arrow {
    color: #c5a0d5;

    font-size: 21px;
}


/* ==========================================================
   LONG-TERM ROADMAP
========================================================== */

.ownflow922-roadmap {
    max-width: 1050px;

    margin: 115px auto 0;
}


.ownflow922-roadmap-head {
    margin-bottom: 60px;
}


.ownflow922-roadmap-label {
    display: inline-block;

    margin-bottom: 15px;

    color: #b04bd9;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 2px;
}


.ownflow922-roadmap-head h2 {
    margin: 0;

    color: #121a2e;

    font-size: clamp(34px, 4vw, 51px);

    font-weight: 900;

    letter-spacing: -1.7px;
}


/* TIMELINE */
.ownflow922-timeline {
    position: relative;

    max-width: 900px;

    margin: auto;
}


.ownflow922-timeline::before {
    content: "";

    position: absolute;

    top: 32px;
    bottom: 32px;
    left: 30px;

    width: 2px;

    background:
        linear-gradient(
            to bottom,
            #b454de,
            #e555ab
        );
}


.ownflow922-step {
    position: relative;

    display: grid;

    grid-template-columns: 62px 1fr;

    gap: 28px;

    margin-bottom: 22px;
}


.ownflow922-step-marker {
    position: relative;

    z-index: 3;

    width: 62px;
    height: 62px;

    display: grid;
    place-items: center;

    border: 7px solid #ffffff;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #a84be2,
            #e855aa
        );

    box-shadow:
        0 10px 30px rgba(172, 72, 210, 0.20);
}


.ownflow922-step-marker span {
    color: #ffffff;

    font-size: 12px;

    font-weight: 900;
}


.ownflow922-step-card {
    position: relative;

    padding: 24px 28px;

    border: 1px solid #e7e1eb;

    border-radius: 21px;

    background: #ffffff;

    box-shadow:
        0 15px 45px rgba(35, 24, 51, 0.055);

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


.ownflow922-step-card:hover {
    transform: translateX(7px);

    border-color: #d8b5e6;

    box-shadow:
        0 22px 50px rgba(49, 28, 66, 0.09);
}


.ownflow922-step-tag {
    display: block;

    margin-bottom: 6px;

    color: #ba51d5;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


.ownflow922-step-card h3 {
    margin: 0;

    color: #20283a;

    font-size: 22px;

    line-height: 1.45;

    font-weight: 800;
}


.ownflow922-step-card-featured {
    border-color: #dbaee8;

    background:
        linear-gradient(
            135deg,
            #fdfaff,
            #fff9fc
        );
}


.ownflow922-step-last {
    margin-bottom: 0;
}


/* ==========================================================
   CLOSING
========================================================== */

.ownflow922-closing {
    max-width: 760px;

    margin: 55px auto 0;

    padding: 30px;

    border: 1px solid #e7dbea;

    border-radius: 23px;

    background:
        linear-gradient(
            135deg,
            #fbf6ff,
            #fff7fb
        );

    box-shadow:
        0 18px 50px rgba(81, 43, 100, 0.07);
}


.ownflow922-closing-icon {
    width: 40px;
    height: 40px;

    margin: 0 auto 12px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #a54ae2,
            #e756aa
        );

    color: #ffffff;

    font-size: 17px;
}


.ownflow922-closing p {
    margin: 0;

    color: #232b3f;

    font-size: 18px;

    line-height: 1.6;

    font-weight: 800;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1199.98px) {

    .ownflow922-section {
        padding: 85px 0 105px;
    }

    .ownflow922-focus-block {
        padding: 60px 35px;
    }

}


@media (max-width: 991.98px) {

    .ownflow922-logo-wrap {
        margin-bottom: 55px;
    }


    .ownflow922-freedom-card {
        padding: 38px 30px;
    }


    .ownflow922-freedom-title {
        text-align: center;
    }


    .ownflow922-freedom-title h3 {
        margin: auto;
    }


    .ownflow922-focus-block {
        margin-top: 85px;
    }


    .ownflow922-roadmap {
        margin-top: 90px;
    }

}


@media (max-width: 767.98px) {

    .ownflow922-section {
        padding: 65px 0 80px;
    }


    .ownflow922-logo-box {
        max-width: 340px;

        padding: 14px 22px;
    }


    .ownflow922-intro-head h2 {
        font-size: 38px;

        letter-spacing: -1.4px;
    }


    .ownflow922-freedom-card {
        padding: 32px 20px;

        border-radius: 25px;
    }


    .ownflow922-action-grid {
        grid-template-columns: 1fr;
    }


    .ownflow922-action-wide {
        grid-column: auto;
    }


    .ownflow922-foundation-strip {
        margin-top: 45px;

        gap: 12px;
    }


    .ownflow922-foundation-line {
        width: 30px;
    }


    .ownflow922-focus-block {
        margin-top: 70px;

        padding: 45px 20px;

        border-radius: 28px;
    }


    .ownflow922-focus-heading h2 {
        font-size: 34px;

        letter-spacing: -1.3px;
    }


    .ownflow922-one-card {
        min-height: 155px;
    }


    .ownflow922-growth-mini {
        flex-wrap: wrap;
    }


    .ownflow922-growth-arrow {
        display: none;
    }


    .ownflow922-roadmap {
        margin-top: 75px;
    }


    .ownflow922-roadmap-head {
        margin-bottom: 40px;
    }


    .ownflow922-timeline::before {
        left: 24px;
    }


    .ownflow922-step {
        grid-template-columns: 50px 1fr;

        gap: 16px;
    }


    .ownflow922-step-marker {
        width: 50px;
        height: 50px;

        border-width: 5px;
    }


    .ownflow922-step-card {
        padding: 20px;
    }


    .ownflow922-step-card h3 {
        font-size: 18px;
    }

}


@media (max-width: 479.98px) {

    .ownflow922-intro-head h2 {
        font-size: 32px;
    }


    .ownflow922-freedom-title h3 {
        font-size: 30px;
    }


    .ownflow922-foundation-strip h3 {
        font-size: 25px;
    }


    .ownflow922-focus-heading h2 {
        font-size: 30px;
    }


    .ownflow922-one-card h3 {
        font-size: 29px;
    }


    .ownflow922-timeline::before {
        display: none;
    }


    .ownflow922-step {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .ownflow922-step-marker {
        margin-left: 7px;
    }

}

/* =========================================================
   OWNSAAS AI - PREMIUM ZIG ZAG Q&A
========================================================= */

.osaas-zq-section {
    position: relative;
    overflow: hidden;

    padding: 110px 0;

    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(174, 61, 222, .17),
            transparent 25%
        ),
        radial-gradient(
            circle at 96% 42%,
            rgba(235, 77, 169, .12),
            transparent 24%
        ),
        radial-gradient(
            circle at 20% 90%,
            rgba(123, 69, 222, .11),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #06040a 0%,
            #0c0711 48%,
            #07040b 100%
        );

    color: #fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 18px;
}


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

.osaas-zq-grid {
    position: absolute;
    inset: 0;

    pointer-events: none;

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

    background-size:
        52px 52px;

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


.osaas-zq-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.osaas-zq-glow-one {
    width: 600px;
    height: 600px;

    left: -450px;
    top: 25%;

    background:
        radial-gradient(
            circle,
            rgba(177, 58, 222, .18),
            transparent 68%
        );
}


.osaas-zq-glow-two {
    width: 620px;
    height: 620px;

    right: -450px;
    bottom: 15%;

    background:
        radial-gradient(
            circle,
            rgba(235, 76, 165, .14),
            transparent 68%
        );
}


/* =========================================================
   HEADER
========================================================= */

.osaas-zq-header {
    position: relative;
    z-index: 2;

    max-width: 950px;

    margin:
        0 auto 100px;
}


.osaas-zq-kicker {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    padding:
        10px 17px;

    border:
        1px solid rgba(216, 77, 191, .20);

    border-radius:
        100px;

    background:
        rgba(211, 69, 188, .07);

    color:
        #dd5cc7;

    font-size:
        12px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        1.5px;
}


.osaas-zq-kicker span {
    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            #9e40df,
            #ed5aa4
        );

    box-shadow:
        0 0 0 5px
        rgba(196, 72, 208, .10);
}


.osaas-zq-header h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(36px, 5vw, 50px);
  line-height: 1.03;
  font-weight: 900;
  letter-spacing: -2.8px;
}


.osaas-zq-header h2 span {
    display: block;

    margin-top: 5px;

    background:
        linear-gradient(
            90deg,
            #9e42df,
            #cb50d0,
            #ee5aa7
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;
}


/* =========================================================
   ZIG ZAG ROW
========================================================= */

.osaas-zq-row {
    position: relative;
    z-index: 2;

    max-width: 1200px;

    margin:
        0 auto 120px;
}


.osaas-zq-row-last {
    margin-bottom:
        90px;
}


/* connector */

.osaas-zq-row:not(.osaas-zq-row-last)::after {
    content: "";

    position: absolute;

    left: 50%;

    bottom: -78px;

    width: 1px;
    height: 38px;

    background:
        linear-gradient(
            to bottom,
            rgba(215, 80, 189, .45),
            transparent
        );
}


/* =========================================================
   QUESTION PANEL
========================================================= */

.osaas-zq-question {
position: relative;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 45px 40px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 31px;
  background: radial-gradient( circle at 100% 0%, rgba(194, 66, 220, .22), transparent 40% ), linear-gradient( 145deg, #160c1e 0%, #0c0811 100% );
  box-shadow: 0 35px 90px rgba(0,0,0,.38);
  transition: transform .4s ease, border-color .4s ease;
}


.osaas-zq-question:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(218, 80, 190, .30);
}


/* PREMIUM BORDER */

.osaas-zq-question::before {
    content: "";

    position: absolute;
    inset: 0;

    padding: 1px;

    border-radius: inherit;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(165, 60, 222, .65),
            transparent 35%,
            transparent 70%,
            rgba(238, 82, 166, .38)
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;
}


/* NUMBER */

.osaas-zq-number {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    width:
        55px;

    height:
        55px;

    margin-bottom:
        24px;

    border-radius:
        17px;

    background:
        linear-gradient(
            135deg,
            #9239db,
            #c64ac7,
            #ef59a3
        );

    color: #fff;

    font-size:
        13px;

    line-height:
        1;

    font-weight:
        900;

    box-shadow:
        0 13px 30px
        rgba(181, 58, 204, .27);
}


/* LABEL */

.osaas-zq-question-label {
    position: relative;
    z-index: 2;

    margin-bottom:
        14px;

    color:
        #d75ac3;

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        1.7px;
}


/* HEADING */

.osaas-zq-question h3 {
    position: relative;
    z-index: 2;

    max-width:
        500px;

    margin: 0;

    color:
        #fff;

    font-size:
        clamp(26px, 3vw, 30px);

    line-height:
        1.1;

    font-weight:
        900;

    letter-spacing:
        -1.5px;
}


/* BIG ? */

.osaas-zq-question-mark {
position: absolute;
  right: -8px;
  bottom: -11px;
  color: rgba(216, 83, 179, 0.21);
  font-size: 250px;
  line-height: 1;
  font-weight: 900;
  pointer-events: none;
}


/* =========================================================
   ANSWER PANEL
========================================================= */

.osaas-zq-answer {
position: relative;
  padding: 40px 30px 30px 30px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 28px;
  background: linear-gradient( 145deg, rgba(255,255,255,.055), rgba(255,255,255,.022) );
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}


/* top line */

.osaas-zq-answer-top {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom:
        23px;

    color:
        #db5bc5;

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        1.6px;
}


.osaas-zq-answer-top span {
    width:
        35px;

    height:
        2px;

    border-radius:
        100px;

    background:
        linear-gradient(
            90deg,
            #9f3fdf,
            #eb59a8
        );
}


/* COPY */

.osaas-zq-answer p {
    margin:
        0 0 16px;

    color:
        #b6aebb;

    font-size:
        18px;

    line-height:
        1.75;

    font-weight:
        400;
}


/* =========================================================
   PILLS
========================================================= */

.osaas-zq-pills {
    display: flex;

    flex-wrap: wrap;

    gap:
        11px;

    margin-top:
        22px;
}


.osaas-zq-pills span {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        12px 16px;

    border:
        1px solid rgba(218, 79, 190, .18);

    border-radius:
        100px;

    background:
        linear-gradient(
            135deg,
            rgba(157, 57, 219, .13),
            rgba(237, 80, 165, .08)
        );

    color:
        #ffffff;

    font-size:
        13px;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        .4px;
}


/* =========================================================
   HIGHLIGHT
========================================================= */

.osaas-zq-highlight {
    margin-top:
        24px;

    padding:
        20px 22px;

    border-left:
        3px solid #d657c0;

    border-radius:
        15px;

    background:
        linear-gradient(
            90deg,
            rgba(168, 62, 218, .13),
            rgba(238, 80, 165, .05)
        );

    color:
        #fff;

    font-size:
        19px;

    line-height:
        1.6;

    font-weight:
        800;
}


/* =========================================================
   AUDIENCE LIST
========================================================= */

.osaas-zq-list {
    display: grid;

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

    gap:
        12px;

    margin-top:
        20px;
}


.osaas-zq-list-item {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    min-height:
        54px;

    padding:
        12px 14px;

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

    border-radius:
        13px;

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

    color:
        #e4dfe7;

    font-size:
        17px;

    line-height:
        1.4;

    font-weight:
        500;
}


.osaas-zq-list-item span {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        25px;

    width:
        25px;

    height:
        25px;

    border-radius:
        8px;

    background:
        linear-gradient(
            135deg,
            #9940dd,
            #ea59a7
        );

    color:
        #fff;

    font-size:
        11px;

    font-weight:
        900;
}


/* NOTE */

.osaas-zq-note {
    margin-top:
        20px;

    padding-top:
        18px;

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

    color:
        #8f8795;

    font-size:
        15px;

    line-height:
        1.6;
}


/* =========================================================
   AI CHANGE LIST
========================================================= */

.osaas-zq-change-list {
    margin:
        22px 0;
}


.osaas-zq-change-list > div {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        12px 0;

    color:
        #ddd6e1;

    font-size:
        18px;

    line-height:
        1.5;

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


.osaas-zq-change-list > div:last-child {
    border-bottom:
        0;
}


.osaas-zq-change-list span {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        35px;

    width:
        35px;

    height:
        35px;

    border-radius:
        11px;

    background:
        rgba(201, 72, 202, .10);

    color:
        #df5cc5;

    font-size:
        10px;

    font-weight:
        900;
}


/* =========================================================
   FINAL
========================================================= */

.osaas-zq-final {
    position: relative;
    z-index: 3;

    overflow: hidden;

   max-width: 1100px;

    margin:
        0 auto;

    padding:
        52px 30px;

    border:
        1px solid rgba(219, 80, 189, .22);

    border-radius:
        30px;

    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(188, 68, 220, .20),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 35px 90px rgba(0,0,0,.32);
}


.osaas-zq-final::before {
    content: "";

    position:
        absolute;

    left:
        25%;

    right:
        25%;

    top:
        0;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d252c1,
            #f15da7,
            transparent
        );
}


.osaas-zq-final-kicker {
    display:
        inline-block;

    margin-bottom:
        15px;

    padding:
        8px 13px;

    border:
        1px solid rgba(216, 79, 189, .18);

    border-radius:
        100px;

    background:
        rgba(211, 70, 187, .07);

    color:
        #dc5bc6;

    font-size:
        10px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        1.5px;
}


.osaas-zq-final h3 {
    max-width:
        850px;

    margin:
        0 auto 18px;

    color:
        #fff;

    font-size:
        clamp(30px, 4vw, 50px);

    line-height:
        1.08;

    font-weight:
        900;

    letter-spacing:
        -1.7px;
}


.osaas-zq-final h3 span {
    color:
        #dc5bc4;
}


.osaas-zq-final p {
max-width: 1040px;
  margin: 0 auto;
  color: #aaa2b0;
  font-size: 18px;
  line-height: 1.75;
}


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

@media (max-width: 991px) {

    .osaas-zq-section {
        padding:
            80px 0;
    }


    .osaas-zq-header {
        margin-bottom:
            70px;
    }


    .osaas-zq-row {
        margin-bottom:
            75px;
    }


    .osaas-zq-row:not(.osaas-zq-row-last)::after {
        display:
            none;
    }


    .osaas-zq-question {
        min-height:
            300px;
    }


    .osaas-zq-answer {
        padding:
            32px 28px;
    }

}


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

@media (max-width: 767px) {

    .osaas-zq-section {
        padding:
            65px 0;

        font-size:
            18px;
    }


    .osaas-zq-header h2 {
        font-size:
            39px;

        letter-spacing:
            -1.7px;
    }


    .osaas-zq-question {
        min-height:
            270px;

        padding:
            32px 25px;

        border-radius:
            24px;
    }


    .osaas-zq-question h3 {
        font-size:
            30px;
    }


    .osaas-zq-question-mark {
        font-size:
            190px;
    }


    .osaas-zq-answer {
        padding:
            27px 21px;

        border-radius:
            22px;
    }


    .osaas-zq-list {
        grid-template-columns:
            1fr;
    }


    .osaas-zq-final {
        padding:
            38px 22px;

        border-radius:
            24px;
    }

}


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

@media (max-width: 575px) {

    .osaas-zq-section {
        padding:
            55px 0;
    }


    .osaas-zq-header h2 {
        font-size:
            34px;
    }


    .osaas-zq-row {
        margin-bottom:
            60px;
    }


    .osaas-zq-question h3 {
        font-size:
            27px;
    }


    .osaas-zq-answer p,
    .osaas-zq-list-item,
    .osaas-zq-change-list > div,
    .osaas-zq-final p {
        font-size:
            18px;

        line-height:
            1.65;
    }


    .osaas-zq-pills {
        flex-direction:
            column;
    }


    .osaas-zq-pills span {
        width:
            100%;
    }


    .osaas-zq-final h3 {
        font-size:
            29px;
    }

}

/* ============================================================
   OWNSAAS TRUTH / FIT SECTION
   UNIQUE CLASS PREFIX: owntruth922-
============================================================ */

.owntruth922-section {
    --owntruth922-dark: #10182b;
    --owntruth922-text: #5f6879;
    --owntruth922-purple: #a847e0;
    --owntruth922-pink: #e958a9;
    --owntruth922-red: #ee5571;
    --owntruth922-green: #19a979;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 95px 0 120px;

    background:
        radial-gradient(
            circle at 7% 16%,
            rgba(180, 72, 226, 0.07),
            transparent 26%
        ),
        radial-gradient(
            circle at 92% 79%,
            rgba(233, 88, 169, 0.065),
            transparent 26%
        ),
        #ffffff;

    color: var(--owntruth922-dark);

    font-size: 18px;
}


/* subtle premium grid */
.owntruth922-section::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -4;

    background-image:
        linear-gradient(
            rgba(91, 65, 125, 0.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(91, 65, 125, 0.022) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

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


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

.owntruth922-glow {
    position: absolute;

    z-index: -3;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;
}


.owntruth922-glow-one {
    width: 440px;
    height: 440px;

    top: 250px;
    left: -250px;

    background: rgba(164, 70, 223, 0.10);
}


.owntruth922-glow-two {
    width: 500px;
    height: 500px;

    bottom: 100px;
    right: -280px;

    background: rgba(232, 81, 164, 0.08);
}


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

.owntruth922-logo-area {
    margin-bottom: 70px;
}


.owntruth922-logo-shell {
    position: relative;

    display: inline-flex;

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

    width: min(440px, 100%);

    padding: 17px 30px;

    border: 1px solid #ebe5ee;

    border-radius: 24px;

    background: rgba(255, 255, 255, 0.95);

    box-shadow:
        0 18px 55px rgba(36, 22, 53, 0.07),
        inset 0 1px 0 #ffffff;
}


.owntruth922-logo-shell::before {
    content: "";

    position: absolute;

    left: 20%;
    right: 20%;
    bottom: -1px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #a54be1,
            #eb58a8,
            transparent
        );
}


.owntruth922-logo {
    display: block;

    width: 100%;

    max-width: 370px;

    height: auto;
}


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

.owntruth922-heading {
    max-width: 920px;

    margin: 0 auto 52px;
}


.owntruth922-heading-mark {
    display: flex;

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

    gap: 13px;

    margin-bottom: 18px;
}


.owntruth922-heading-mark span {
    width: 60px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d59ae8
        );
}


.owntruth922-heading-mark span:last-child {
    background:
        linear-gradient(
            90deg,
            #d59ae8,
            transparent
        );
}


.owntruth922-heading-mark i {
    color: #b348de;

    font-size: 18px;

    font-style: normal;
}


.owntruth922-heading h2 {
    margin: 0;

    color: #11192d;

    font-size: clamp(42px, 6vw, 72px);

    line-height: 0.98;

    font-weight: 900;

    letter-spacing: -3px;
}


.owntruth922-heading h2 span {
    color: #df557d;
}


.owntruth922-heading p {
    margin: 20px 0 0;

    color: #697181;

    font-size: 18px;

    line-height: 1.65;
}


/* ============================================================
   WHAT THIS IS NOT PANEL
============================================================ */

.owntruth922-not-panel {
    position: relative;

max-width: 1240px;

    margin: 0 auto;

    padding: 38px;

    overflow: hidden;

    border: 1px solid #eee4e8;

    border-radius: 32px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(237, 83, 113, 0.05),
            transparent 45%
        ),
        #ffffff;

    box-shadow:
        0 30px 90px rgba(45, 27, 54, 0.075);
}


.owntruth922-not-panel::before {
    content: "";

    position: absolute;

    top: 0;
    left: 15%;
    right: 15%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #e85b78,
            #ec65a7,
            transparent
        );
}


/* negative item */
.owntruth922-not-item {
    position: relative;

  min-height: 100px;
  padding: 15px 55px 15px 22px;

    display: flex;

    align-items: center;

    gap: 17px;

    overflow: hidden;

    border: 1px solid #f0e5e8;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #fffafa,
            #ffffff
        );

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


.owntruth922-not-item:hover {
    transform: translateY(-5px);

    border-color: #efc5cf;

    box-shadow:
        0 18px 45px rgba(124, 44, 66, 0.08);
}


.owntruth922-not-icon {
    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border: 1px solid #f4ccd5;

    border-radius: 13px;

    background: #fff1f4;

    color: #ea5471;

    font-size: 19px;

    font-weight: 900;
}


.owntruth922-not-item p {
    margin: 0;

    color: #5b6170;

    font-size: 18px;

    line-height: 1.5;
}


.owntruth922-not-item strong {
    color: #1b2233;

    font-weight: 800;
}


.owntruth922-not-number {
    position: absolute;

    top: 14px;
    right: 16px;

    color: #e8cdd3;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;
}


/* ============================================================
   SOFTWARE PANEL
============================================================ */

.owntruth922-software-panel {
    position: relative;

    max-width: 1080px;

    margin: 85px auto 0;

    padding: 55px;

    overflow: hidden;

    border: 1px solid #e5ddec;

    border-radius: 34px;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(167, 70, 225, 0.08),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #fcfaff 0%,
            #ffffff 100%
        );

    box-shadow:
        0 30px 90px rgba(50, 29, 68, 0.08);
}


.owntruth922-software-topline {
    position: absolute;

    top: 0;
    left: 15%;
    right: 15%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #a94ce0,
            #e958a9,
            transparent
        );
}


.owntruth922-software-title {
    text-align: left;
}


.owntruth922-software-icon {
    width: 58px;
    height: 58px;

    margin-bottom: 18px;

    display: grid;
    place-items: center;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            #a54be0,
            #e758aa
        );

    box-shadow:
        0 15px 35px rgba(180, 73, 206, 0.20);

    color: #ffffff;

    font-size: 22px;
}


.owntruth922-software-title h2 {
    margin: 0;

    color: #141c31;

    font-size: clamp(38px, 5vw, 60px);

    line-height: 0.98;

    font-weight: 900;

    letter-spacing: -2px;
}


.owntruth922-software-title h2 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #a64bdd,
            #df56ad
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* software content */
.owntruth922-software-content {
    display: flex;

    flex-direction: column;

    gap: 12px;
}


.owntruth922-software-pill {
    position: relative;

    padding: 16px 20px 16px 48px;

    border: 1px solid #e9e3ee;

    border-radius: 16px;

    background: #ffffff;

    color: #20283b;

    font-size: 18px;

    line-height: 1.45;

    font-weight: 800;

    box-shadow:
        0 10px 30px rgba(44, 28, 58, 0.045);
}


.owntruth922-software-pill::before {
    content: "";

    position: absolute;

    left: 20px;
    top: 50%;

    width: 9px;
    height: 9px;

    transform: translateY(-50%);

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #a94ce0,
            #eb58a8
        );

    box-shadow:
        0 0 0 5px rgba(177, 75, 217, 0.08);
}


.owntruth922-software-content > p {
    margin: 12px 0 0;

    color: #687080;

    font-size: 18px;

    line-height: 1.7;
}


/* ============================================================
   BUT THAT'S ALSO THE POINT
============================================================ */

.owntruth922-point-panel {
    position: relative;

    max-width: 950px;

    margin: 90px auto 0;

    padding: 65px 45px;

    overflow: hidden;

    border: 1px solid #e7ddec;

    border-radius: 34px;

    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(169, 71, 224, 0.12),
            transparent 46%
        ),
        #ffffff;

    box-shadow:
        0 35px 100px rgba(45, 27, 61, 0.08);
}


.owntruth922-point-panel::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -130px;
    bottom: -130px;

    border-radius: 50%;

    background: rgba(231, 83, 169, 0.10);

    filter: blur(45px);
}


.owntruth922-point-small {
    display: inline-block;

    margin-bottom: 20px;

    color: #a34bd3;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 2px;
}


.owntruth922-point-panel > p {
    margin: 0 0 11px;

    color: #656d7d;

    font-size: 18px;

    line-height: 1.6;
}


.owntruth922-point-panel h2 {
    max-width: 790px;

    margin: 0 auto;

    color: #131b2e;

    font-size: clamp(32px, 4vw, 50px);

    line-height: 1.08;

    font-weight: 900;

    letter-spacing: -1.8px;
}


.owntruth922-point-panel h2 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #a64ae0,
            #e754ab
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


.owntruth922-point-bottom {
    display: inline-flex;

    margin-top: 26px;

    padding: 11px 20px;

    border: 1px solid #e5d4ee;

    border-radius: 100px;

    background: #fbf6fe;

    color: #3b284b;

    font-size: 18px;

    line-height: 1.4;

    font-weight: 800;
}


/* ============================================================
   FIT AREA
============================================================ */

.owntruth922-fit-area {
    max-width: 1140px;

    margin: 100px auto 0;
}


.owntruth922-fit-card {
    position: relative;

    height: 100%;

    padding: 40px;

    overflow: hidden;

    border-radius: 30px;

    background: #ffffff;

    box-shadow:
        0 25px 75px rgba(41, 26, 54, 0.07);
}


/* positive */
.owntruth922-fit-positive {
    border: 1px solid #dcebe6;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(29, 172, 124, 0.07),
            transparent 34%
        ),
        #ffffff;
}


/* negative */
.owntruth922-fit-negative {
    border: 1px solid #f0dfe4;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(235, 84, 111, 0.07),
            transparent 37%
        ),
        #ffffff;
}


.owntruth922-fit-head {
    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 30px;
}


.owntruth922-fit-symbol {
    flex: 0 0 52px;

    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    font-size: 20px;

    font-weight: 900;
}


.owntruth922-fit-symbol-positive {
    border: 1px solid #bfe7d8;

    background: #eaf9f3;

    color: #16a678;
}


.owntruth922-fit-symbol-negative {
    border: 1px solid #f2cbd4;

    background: #fff0f3;

    color: #ea5572;
}


.owntruth922-fit-head h2 {
    margin: 0;

    color: #151d30;

    font-size: clamp(27px, 3vw, 38px);

    line-height: 1.15;

    font-weight: 900;

    letter-spacing: -1px;
}


/* positive list */
.owntruth922-fit-list {
    display: flex;

    flex-direction: column;

    gap: 12px;
}


.owntruth922-fit-item {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 16px 17px;

    border: 1px solid #e5efeb;

    border-radius: 16px;

    background: rgba(250, 253, 252, 0.85);
}


.owntruth922-fit-check {
    flex: 0 0 36px;

    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #25b786,
            #13976e
        );

    color: #ffffff;

    font-size: 14px;

    font-weight: 900;

    box-shadow:
        0 10px 22px rgba(23, 165, 119, 0.15);
}


.owntruth922-fit-item p {
    margin: 0;

    color: #404959;

    font-size: 18px;

    line-height: 1.55;

    font-weight: 650;
}


/* not for you */
.owntruth922-negative-message {
    position: relative;

    padding: 28px 26px;

    border: 1px solid #f0e2e6;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #fff9fa,
            #ffffff
        );
}


.owntruth922-negative-line {
    width: 48px;
    height: 4px;

    margin-bottom: 20px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #eb5675,
            #ea64a0
        );
}


.owntruth922-negative-message p {
    margin: 0;

    color: #4e5665;

    font-size: 18px;

    line-height: 1.75;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1199.98px) {

    .owntruth922-section {
        padding: 85px 0 105px;
    }

}


@media (max-width: 991.98px) {

    .owntruth922-logo-area {
        margin-bottom: 55px;
    }


    .owntruth922-software-panel {
        padding: 42px 35px;
    }


    .owntruth922-software-title {
        text-align: center;
    }


    .owntruth922-software-icon {
        margin-left: auto;
        margin-right: auto;
    }


    .owntruth922-fit-area {
        margin-top: 75px;
    }

}


@media (max-width: 767.98px) {

    .owntruth922-section {
        padding: 65px 0 80px;
    }


    .owntruth922-logo-shell {
        max-width: 350px;

        padding: 13px 20px;

        border-radius: 20px;
    }


    .owntruth922-heading {
        margin-bottom: 35px;
    }


    .owntruth922-heading h2 {
        font-size: 42px;

        letter-spacing: -1.8px;
    }


    .owntruth922-not-panel {
        padding: 22px;

        border-radius: 25px;
    }


    .owntruth922-not-item {
        min-height: auto;

        padding: 18px 45px 18px 16px;

        align-items: flex-start;
    }


    .owntruth922-not-icon {
        flex: 0 0 38px;

        width: 38px;
        height: 38px;

        border-radius: 11px;
    }


    .owntruth922-software-panel {
        margin-top: 60px;

        padding: 35px 22px;

        border-radius: 27px;
    }


    .owntruth922-software-title h2 {
        font-size: 40px;
    }


    .owntruth922-point-panel {
        margin-top: 65px;

        padding: 45px 22px;

        border-radius: 27px;
    }


    .owntruth922-point-panel h2 {
        font-size: 33px;

        letter-spacing: -1.2px;
    }


    .owntruth922-fit-card {
        padding: 28px 22px;

        border-radius: 25px;
    }


    .owntruth922-fit-head {
        align-items: flex-start;
    }

}


@media (max-width: 479.98px) {

    .owntruth922-heading h2 {
        font-size: 36px;
    }


    .owntruth922-software-title h2 {
        font-size: 35px;
    }


    .owntruth922-point-panel h2 {
        font-size: 29px;
    }


    .owntruth922-fit-head h2 {
        font-size: 27px;
    }


    .owntruth922-fit-item {
        align-items: flex-start;
    }

}


/* ==========================================================
   OWN SAAS — EQUATION SHIFT
   UNIQUE PREFIX: eqshift922-
========================================================== */

.eqshift922-section {
    --eqshift922-bg: #08070d;
    --eqshift922-panel: #100d17;
    --eqshift922-white: #ffffff;
    --eqshift922-muted: #a9a4b3;
    --eqshift922-purple: #b14ff2;
    --eqshift922-pink: #ec58ad;
    --eqshift922-red: #ff6279;
    --eqshift922-green: #38dda3;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 100px 0 120px;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(171, 77, 238, .13),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 52%,
            rgba(232, 78, 174, .10),
            transparent 28%
        ),
        #07060c;

    color: #fff;
    font-size: 18px;
}


/* GRID */
.eqshift922-bg-grid {
    position: absolute;
    inset: 0;
    z-index: -5;

    opacity: .25;

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

    background-size: 60px 60px;

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


/* ORBS */
.eqshift922-glow {
    position: absolute;
    z-index: -4;

    border-radius: 50%;
    filter: blur(120px);

    pointer-events: none;
}

.eqshift922-glow-a {
    width: 500px;
    height: 500px;

    left: -300px;
    top: 350px;

    background: rgba(163, 71, 238, .18);
}

.eqshift922-glow-b {
    width: 500px;
    height: 500px;

    right: -300px;
    bottom: 250px;

    background: rgba(233, 78, 170, .14);
}


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

.eqshift922-logo-wrap {
    margin-bottom: 75px;
}

.eqshift922-logo {
    display: inline-block;

    width: 100%;
    max-width: 380px;

    height: auto;
}


/* ==========================================================
   MAIN STORY
========================================================== */

.eqshift922-story {
    max-width: 1180px;
    margin: 0 auto;

    overflow: hidden;

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

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

    box-shadow:
        0 45px 120px rgba(0,0,0,.42),
        inset 0 1px rgba(255,255,255,.06);
}


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

.eqshift922-buy-side {
    height: 100%;
    padding: 55px 45px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(255, 84, 115, .09),
            transparent 40%
        ),
        rgba(7,6,11,.55);
}


.eqshift922-buy-label,
.eqshift922-own-label {
    display: inline-block;

    margin-bottom: 17px;

    font-size: 11px;
    line-height: 1;

    font-weight: 900;

    letter-spacing: 2px;
}


.eqshift922-buy-label {
    color: #ff7187;
}


.eqshift922-buy-side h2 {
    max-width: 430px;

    margin: 0 0 42px;

    color: #ffffff;

    font-size: clamp(36px, 4.5vw, 40px);

    line-height: 1.02;

    font-weight: 900;

    letter-spacing: -2px;
}


.eqshift922-buy-side h2 span {
    display: block;

    color: #ff657f;
}


/* LEFT RAIL */

.eqshift922-buy-rail {
    position: relative;

    padding-left: 32px;
}


.eqshift922-buy-line {
    position: absolute;

    top: 15px;
    bottom: 15px;
    left: 7px;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            #ff6279,
            rgba(255,98,121,.08)
        );
}


.eqshift922-buy-row {
    position: relative;

    min-height: 53px;

    display: flex;
    align-items: center;

    padding: 9px 0;
}


.eqshift922-buy-dot {
    position: absolute;

    left: -30px;

    width: 11px;
    height: 11px;

    border: 2px solid #ff6a82;

    border-radius: 50%;

    background: #0d0910;

    box-shadow:
        0 0 0 5px rgba(255,98,121,.07);
}


.eqshift922-buy-row p {
    margin: 0;

    color: #bcb6c4;

    font-size: 18px;
    line-height: 1.5;
}


/* PAYMENT LOOP */

.eqshift922-payment-loop {
    margin-top: 34px;

    display: flex;
    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

    color: #706a78;
}


.eqshift922-payment-loop span:nth-child(odd) {
    padding: 8px 11px;

    border: 1px solid rgba(255,96,122,.15);
    border-radius: 8px;

    background: rgba(255,96,122,.055);

    color: #d98695;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;
}


/* ==========================================================
   SWITCH
========================================================== */

.eqshift922-switch {
    height: 100%;
    min-height: 570px;

    display: flex;
    flex-direction: column;

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

    gap: 18px;

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

    border-left: 1px solid rgba(255,255,255,.055);
    border-right: 1px solid rgba(255,255,255,.055);
}


.eqshift922-switch-line {
    width: 1px;
    height: 95px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(209,92,241,.55),
            transparent
        );
}


.eqshift922-switch-or {
    width: 76px;
    height: 76px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(211,89,243,.31);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(186,75,237,.18),
            rgba(186,75,237,.035)
        );

    color: #e268e7;

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

    letter-spacing: 1px;

    box-shadow:
        0 0 40px rgba(190,75,231,.14);
}


.eqshift922-switch-arrow {
    color: #cd5dea;

    font-size: 29px;
}


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

.eqshift922-own-side {
    position: relative;

    height: 100%;

    padding: 55px 45px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(181, 76, 238, .13),
            transparent 42%
        );
}


.eqshift922-own-label {
    color: #d568eb;
}


.eqshift922-own-side h3 {
    max-width: 440px;

    margin: 0 0 34px;

    color: #ffffff;

    font-size: clamp(29px, 3vw, 40px);

    line-height: 1.16;

    font-weight: 900;

    letter-spacing: -1.2px;
}


.eqshift922-own-stack {
    display: flex;
    flex-direction: column;

    gap: 9px;
}


.eqshift922-own-row {
    display: grid;

    grid-template-columns: 44px 1fr;

    align-items: center;

    gap: 14px;

    padding: 13px 15px;

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


.eqshift922-own-row:last-child {
    border-bottom: 0;
}


.eqshift922-own-row > span {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #a84cf0,
            #e755ad
        );

    color: #fff;

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

    box-shadow:
        0 10px 25px rgba(190,75,225,.20);
}


.eqshift922-own-row p {
    margin: 0;

    color: #c4bdca;

    font-size: 18px;
    line-height: 1.5;
}


/* ==========================================================
   DIFFERENCE HEAD
========================================================== */

.eqshift922-difference-head {
    margin: 110px auto 45px;
}


.eqshift922-difference-head > span {
    display: inline-block;

    margin-bottom: 15px;

    color: #d268e7;

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

    letter-spacing: 2px;
}


.eqshift922-difference-head h2 {
    margin: 0;

    color: #fff;

    font-size: clamp(38px, 5vw, 59px);

    line-height: 1;

    font-weight: 900;

    letter-spacing: -2px;
}


.eqshift922-difference-head h2 strong {
    color: #e957b5;

    font-weight: 900;
}


/* ==========================================================
   EQUATION
========================================================== */

.eqshift922-equation {
    max-width: 1100px;

    margin: 0 auto;

    padding: 22px;

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

    border-radius: 30px;

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

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


.eqshift922-equation-row {
    min-height: 155px;

    display: grid;

    grid-template-columns: 210px 1fr;

    align-items: center;

    gap: 30px;

    padding: 30px;

    border-radius: 21px;
}


/* OLD */

.eqshift922-equation-old {
    background:
        linear-gradient(
            90deg,
            rgba(255,88,119,.08),
            rgba(255,88,119,.015)
        );

    border: 1px solid rgba(255,88,119,.13);
}


/* NEW */

.eqshift922-equation-new {
    background:
        linear-gradient(
            90deg,
            rgba(53,220,160,.08),
            rgba(53,220,160,.015)
        );

    border: 1px solid rgba(53,220,160,.14);
}


/* TITLE */

.eqshift922-equation-title {
    display: flex;
    align-items: center;

    gap: 15px;
}


.eqshift922-equation-title > span {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border-radius: 13px;

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


.eqshift922-equation-old
.eqshift922-equation-title > span {
    background: rgba(255,95,121,.10);

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

    color: #ff7087;
}


.eqshift922-equation-new
.eqshift922-equation-title > span {
    background: rgba(57,220,163,.10);

    border: 1px solid rgba(57,220,163,.20);

    color: #47dca9;
}


.eqshift922-equation-title small {
    color: #fff;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 1px;
}


/* EQUATION FLOW */

.eqshift922-equation-flow {
    display: flex;

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

    gap: 13px;
}


.eqshift922-equation-node {
    min-height: 58px;

    padding: 12px 18px;

    display: flex;

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

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

    border-radius: 12px;

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

    color: #ddd8e1;

    font-size: 12px;

    line-height: 1.3;

    font-weight: 900;

    letter-spacing: .4px;

    text-align: center;
}


.eqshift922-equation-arrow {
    font-size: 25px;
}


.eqshift922-equation-old
.eqshift922-equation-arrow {
    color: #ff667f;
}


.eqshift922-equation-new
.eqshift922-equation-arrow {
    color: #3fdba5;
}


/* VS */

.eqshift922-equation-divider {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 12px 30px;
}


.eqshift922-equation-divider span {
    flex: 1;

    height: 1px;

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


.eqshift922-equation-divider strong {
    color: #6e6875;

    font-size: 10px;

    letter-spacing: 2px;
}


.eqshift922-shift-copy {
    margin-top: 26px;

    color: #aaa4b3;

    font-size: 18px;
}


/* ==========================================================
   REMEMBER
========================================================== */

.eqshift922-remember {
    max-width: 1080px;

    margin: 110px auto 0;
/* 
    padding-top: 40px;

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


.eqshift922-remember-title > span {
    display: block;

    margin-bottom: 13px;

    color: #a56ab3;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;
}


.eqshift922-remember-title h2 {
    margin: 0;

    color: #fff;

    font-size: clamp(35px, 4vw, 49px);

    line-height: 1.03;

    font-weight: 900;

    letter-spacing: -1.8px;
}


.eqshift922-remember-title h2 strong {
    display: block;

    color: #df5cce;
}


.eqshift922-remember-copy {
    padding-left: 35px;

    border-left: 1px solid rgba(214,91,226,.25);
}


.eqshift922-remember-copy p {
    margin: 0;

    color: #b7b1be;

    font-size: 18px;

    line-height: 1.75;
}


.eqshift922-remember-copy strong {
    color: #ffffff;

    font-weight: 900;
}


.eqshift922-copy-rule {
    width: 55px;
    height: 2px;

    margin: 22px 0;

    background:
        linear-gradient(
            90deg,
            #ae4ff0,
            #e857af
        );
}


/* ==========================================================
   FINAL
========================================================== */

.eqshift922-final {
    position: relative;

    max-width: 1120px;

    margin: 95px auto 0;

    padding: 46px 48px;

    display: grid;

    grid-template-columns: 65px 1fr 80px;

    align-items: center;

    gap: 28px;

    overflow: hidden;

    border: 1px solid rgba(208,81,242,.22);

    border-radius: 26px;

    background:
        linear-gradient(
            100deg,
            rgba(169,67,234,.13),
            rgba(232,78,174,.07) 55%,
            rgba(255,255,255,.015)
        );

    box-shadow:
        0 35px 90px rgba(0,0,0,.36);
}


.eqshift922-final::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background:
        linear-gradient(
            to bottom,
            #a74df0,
            #eb57ae
        );
}


.eqshift922-final-index {
    color: rgba(255,255,255,.15);

    font-size: 42px;

    font-weight: 900;
}


.eqshift922-final-kicker {
    display: block;

    margin-bottom: 11px;

    color: #ce70de;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;
}


.eqshift922-final h2 {
  max-width: 800px;
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 4vw, 31px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: 0;
}


.eqshift922-final h2 strong {
    color: #ec58b3;

    font-weight: 900;
}


.eqshift922-final-mark {
    width: 68px;
    height: 68px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #a84bed,
            #e856ae
        );

    color: #fff;

    font-size: 29px;

    box-shadow:
        0 17px 42px rgba(187,71,219,.25);
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991.98px) {

    .eqshift922-story {
        border-radius: 30px;
    }


    .eqshift922-buy-side,
    .eqshift922-own-side {
        padding: 45px 35px;
    }


    .eqshift922-switch {
        min-height: auto;

        padding: 24px;

        flex-direction: row;
    }


    .eqshift922-switch-line {
        width: 80px;
        height: 1px;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(210,89,241,.55),
                transparent
            );
    }


    .eqshift922-switch-arrow {
        transform: rotate(90deg);
    }


    .eqshift922-equation-row {
        grid-template-columns: 1fr;

        gap: 22px;
    }


    .eqshift922-equation-flow {
        justify-content: flex-start;
    }


    .eqshift922-remember-copy {
        padding-left: 0;

        padding-top: 25px;

        border-left: 0;

        border-top: 1px solid rgba(214,91,226,.20);
    }

}


@media (max-width: 767.98px) {

    .eqshift922-section {
        padding: 70px 0 85px;
    }


    .eqshift922-logo-wrap {
        margin-bottom: 50px;
    }


    .eqshift922-logo {
        max-width: 310px;
    }


    .eqshift922-buy-side,
    .eqshift922-own-side {
        padding: 35px 22px;
    }


    .eqshift922-buy-side h2 {
        font-size: 38px;
    }


    .eqshift922-own-side h3 {
        font-size: 29px;
    }


    .eqshift922-difference-head {
        margin-top: 75px;
    }


    .eqshift922-equation {
        padding: 14px;
    }


    .eqshift922-equation-row {
        padding: 22px 17px;
    }


    .eqshift922-equation-flow {
        flex-direction: column;

        align-items: stretch;
    }


    .eqshift922-equation-node {
        width: 100%;
    }


    .eqshift922-equation-arrow {
        align-self: center;

        transform: rotate(90deg);
    }


    .eqshift922-remember {
        margin-top: 75px;
    }


    .eqshift922-final {
        margin-top: 70px;

        padding: 34px 22px;

        grid-template-columns: 1fr;

        text-align: center;
    }


    .eqshift922-final-index {
        display: none;
    }


    .eqshift922-final-mark {
        margin: auto;
    }

}


@media (max-width: 480px) {

    .eqshift922-buy-side h2 {
        font-size: 33px;
    }


    .eqshift922-difference-head h2 {
        font-size: 34px;
    }


    .eqshift922-remember-title h2 {
        font-size: 33px;
    }


    .eqshift922-final h2 {
        font-size: 29px;
    }

}


/* =========================================================
   OWNSAAS - PREMIUM BUILD FROM SCRATCH TABLE
========================================================= */

.osaas-scratch-section {
    position: relative;
    overflow: hidden;

    padding: 110px 0;

background: radial-gradient(circle at 7% 8%, #f8e4ff96, #ffffff52 25%), radial-gradient(circle at 93% 72%, #ecbbff96, #f9eaff 26%), linear-gradient( 180deg, #fff 0%, #e7a9ff96 52%, #ecbbff96 100% );

    color: #171528;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 18px;
}


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

.osaas-scratch-grid {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(97, 63, 145, .03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(97, 63, 145, .03) 1px,
            transparent 1px
        );

    background-size:
        50px 50px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 8%,
            black 92%,
            transparent
        );
}


.osaas-scratch-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.osaas-scratch-glow-1 {
    width: 500px;
    height: 500px;

    left: -360px;
    top: 15%;

    background:
        radial-gradient(
            circle,
            rgba(158, 74, 228, .13),
            transparent 68%
        );
}


.osaas-scratch-glow-2 {
    width: 540px;
    height: 540px;

    right: -390px;
    bottom: 7%;

    background:
        radial-gradient(
            circle,
            rgba(228, 84, 180, .11),
            transparent 68%
        );
}


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

.osaas-scratch-head {
    position: relative;
    z-index: 2;

    max-width: 980px;

    margin:
        0 auto 55px;
}


.osaas-scratch-kicker {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 20px;

    padding:
        10px 17px;

    border:
        1px solid #e3d9f2;

    border-radius:
        100px;

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

    color:
        #9b46d8;

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        1.6px;

    box-shadow:
        0 10px 30px
        rgba(91, 54, 138, .05);
}


.osaas-scratch-kicker span {
    color:
        #dc55bc;

    font-size:
        17px;
}


.osaas-scratch-head h2 {
margin: 0;
  color: #11162e;
  font-size: clamp(40px, 5vw, 46px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -3px;
}


.osaas-scratch-head h2 span {
    display: block;

    margin-top: 6px;

    background:
        linear-gradient(
            90deg,
            #8442ef,
            #ba4bdc,
            #e458b1
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;
}


.osaas-scratch-head > p {
    max-width:
        820px;

    margin:
        23px auto 0;

    color:
        #6d6774;

    font-size:
        18px;

    line-height:
        1.75;

    font-weight:
        400;
}


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

.osaas-scratch-table-shell {
    position: relative;
    z-index: 2;

    overflow: hidden;

    max-width:
        1120px;

    margin:
        0 auto;

    border:
        1px solid rgba(125, 82, 190, .15);

    border-radius:
        30px;

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

    box-shadow:
        0 35px 100px
        rgba(75, 48, 108, .10);
}


/* TOP */

.osaas-scratch-table-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        22px 26px;

    border-bottom:
        1px solid #ede7f1;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #fbf7ff
        );
}


.osaas-scratch-table-title {
    display: flex;

    align-items: center;

    gap: 13px;
}


.osaas-scratch-table-dot {
    display: block;

    width:
        11px;

    height:
        11px;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            #8e43ec,
            #e457b2
        );

    box-shadow:
        0 0 0 7px
        rgba(169, 74, 214, .09);
}


.osaas-scratch-table-title small {
    display:
        block;

    margin-bottom:
        4px;

    color:
        #a098a5;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        1.3px;
}


.osaas-scratch-table-title strong {
    color:
        #272031;

    font-size:
        16px;

    font-weight:
        800;
}


.osaas-scratch-skip-badge {
    padding:
        10px 14px;

    border:
        1px solid rgba(169, 75, 214, .17);

    border-radius:
        100px;

    background:
        linear-gradient(
            135deg,
            rgba(142, 66, 227, .07),
            rgba(230, 82, 176, .07)
        );

    color:
        #a145cf;

    font-size:
        10px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        1px;
}


/* =========================================================
   TABLE
========================================================= */

.osaas-scratch-table {
    min-width:
        760px;

    --bs-table-bg:
        transparent;
}


.osaas-scratch-table th {
    padding:
        17px 25px;

    border-bottom:
        1px solid #ece6ef;

    background:
        #f9f7fb;

    color:
        #8d8492;

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        1.1px;

    text-transform:
        uppercase;
}


.osaas-scratch-table th:nth-child(2),
.osaas-scratch-table th:nth-child(3) {
    text-align:
        center;
}


.osaas-scratch-table td {
    padding:
        17px 25px;

    border-color:
        #f0ebf3;

    color:
        #403846;

    font-size:
        18px;

    line-height:
        1.4;

    font-weight:
        600;
}


.osaas-scratch-table td:nth-child(2),
.osaas-scratch-table td:nth-child(3) {
    text-align:
        center;
}


/* ROW HOVER */

.osaas-scratch-table tbody tr {
    transition:
        background .25s ease;
}


.osaas-scratch-table tbody tr:hover {
    background:
        rgba(145, 70, 223, .025);
}


/* NUMBER */

.osaas-scratch-row-number {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        31px;

    height:
        31px;

    margin-right:
        12px;

    border-radius:
        9px;

    background:
        #f5f0fa;

    color:
        #9b48d2;

    font-size:
        9px;

    font-weight:
        900;
}


/* REQUIRED */

.osaas-scratch-status-old {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        90px;

    padding:
        8px 12px;

    border:
        1px solid #e8e2eb;

    border-radius:
        100px;

    background:
        #faf9fb;

    color:
        #918895;

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        800;
}


/* RIGHT HIGHLIGHT COLUMN */

.osaas-scratch-highlight-col {
    background:
        linear-gradient(
            90deg,
            rgba(145, 65, 226, .035),
            rgba(229, 81, 176, .055)
        ) !important;
}


.osaas-scratch-table td.osaas-scratch-highlight-col {
    color:
        #8e3fc9;

    font-weight:
        800;
}


.osaas-scratch-check {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        28px;

    height:
        28px;

    margin-right:
        7px;

    border-radius:
        9px;

    background:
        linear-gradient(
            135deg,
            #8c42e6,
            #df57b7
        );

    color:
        #fff;

    font-size:
        12px;

    font-weight:
        900;

    box-shadow:
        0 8px 20px
        rgba(179, 65, 199, .18);
}


/* =========================================================
   TABLE BOTTOM
========================================================= */

.osaas-scratch-table-bottom {
    display: flex;

    align-items: center;

    gap:
        16px;

    padding:
        23px 26px;

    border-top:
        1px solid #ece6ef;

    background:
        linear-gradient(
            90deg,
            #faf7ff,
            #fff8fc
        );
}


.osaas-scratch-time-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    min-width:
        42px;

    width:
        42px;

    height:
        42px;

    border-radius:
        13px;

    background:
        linear-gradient(
            135deg,
            #8c42e8,
            #df57b7
        );

    color:
        #fff;

    font-size:
        18px;

    box-shadow:
        0 10px 25px
        rgba(176, 65, 196, .20);
}


.osaas-scratch-table-bottom p {
    margin:
        0;

    color:
        #5f5765;

    font-size:
        18px;

    line-height:
        1.65;

    font-weight:
        500;
}


/* =========================================================
   SKIP STATEMENT
========================================================= */

.osaas-scratch-skip {
    position: relative;
    z-index: 2;

    max-width:
        900px;

    margin:
        55px auto;

    text-align:
        center;
}


.osaas-scratch-skip-mini {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #aaa1ad;

    font-size:
        10px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        2px;
}


.osaas-scratch-skip h3 {
    margin:
        0;

    color:
        #15162c;

    font-size:
        clamp(37px, 5vw, 60px);

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        -2.5px;
}


.osaas-scratch-skip h3 span {
    color:
        #b249d6;
}


/* =========================================================
   DECISION PANEL
========================================================= */

.osaas-decision-panel {
    position: relative;
    z-index: 2;

    max-width:
        1120px;

    margin:
        0 auto;

    padding:
        24px;

    border:
        1px solid rgba(127, 83, 192, .14);

    border-radius:
        32px;

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

    box-shadow:
        0 35px 95px
        rgba(77, 48, 110, .09);
}


/* LEFT DARK PANEL */

.osaas-decision-heading {
    position:
        relative;

    overflow:
        hidden;

    min-height:
        350px;

    height:
        100%;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

    padding:
        35px;

    border-radius:
        25px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(200, 69, 220, .33),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #10142c,
            #1a102c 60%,
            #251238
        );

    box-shadow:
        0 25px 60px
        rgba(33, 20, 48, .20);
}


.osaas-decision-heading::after {
    content:
        "?";

    position:
        absolute;

    right:
        -10px;

    bottom:
        -90px;

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

    font-size:
        260px;

    line-height:
        1;

    font-weight:
        900;
}


.osaas-decision-index {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        49px;

    height:
        49px;

    margin-bottom:
        21px;

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

    border-radius:
        14px;

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

    color:
        #ef61bb;

    font-size:
        12px;

    font-weight:
        900;
}


.osaas-decision-heading h3 {
    position:
        relative;

    z-index:
        2;

    margin:
        0;

    color:
        #fff;

    font-size:
        clamp(31px, 4vw, 47px);

    line-height:
        1.06;

    font-weight:
        900;

    letter-spacing:
        -1.7px;
}


.osaas-decision-heading h3 span {
    display:
        block;

    margin-top:
        7px;

    color:
        #df5ac3;
}


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

.osaas-decision-question {
    padding:
        14px;
}


.osaas-decision-question-old,
.osaas-decision-question-new {
    padding:
        27px;

    border-radius:
        21px;
}


.osaas-decision-question-old {
    border:
        1px solid #ece7ef;

    background:
        #fbfafc;
}


.osaas-decision-question-new {
    border:
        1px solid rgba(180, 76, 211, .20);

    background:
        linear-gradient(
            135deg,
            #faf6ff,
            #fff6fb
        );
}


.osaas-decision-question small {
    display:
        block;

    margin-bottom:
        10px;

    color:
        #a29aa6;

    font-size:
        10px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        1.5px;
}


.osaas-decision-question-old p {
    margin:
        0;

    color:
        #625a67;

    font-size:
        18px;

    line-height:
        1.7;
}


.osaas-decision-switch {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        12px 0;
}


.osaas-decision-switch span {
    flex:
        1;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(174, 75, 209, .25)
        );
}


.osaas-decision-switch span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(174, 75, 209, .25),
            transparent
        );
}


.osaas-decision-switch b {
    color:
        #b34bd4;

    font-size:
        20px;
}


.osaas-decision-empty-line {
    width:
        100%;

    height:
        3px;

    margin-top:
        13px;

    border-radius:
        20px;

    background:
        linear-gradient(
            90deg,
            #8c42ea,
            #c94ed0,
            #e95aab
        );
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .osaas-scratch-section {
        padding:
            80px 0;
    }


    .osaas-scratch-table-top {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .osaas-decision-heading {
        min-height:
            300px;
    }

}


@media (max-width: 767px) {

    .osaas-scratch-section {
        padding:
            65px 0;

        font-size:
            18px;
    }


    .osaas-scratch-head {
        margin-bottom:
            40px;
    }


    .osaas-scratch-head h2 {
        font-size:
            37px;

        letter-spacing:
            -1.7px;
    }


    .osaas-scratch-table-shell {
        border-radius:
            23px;
    }


    .osaas-scratch-table-top,
    .osaas-scratch-table-bottom {
        padding:
            19px;
    }


    .osaas-scratch-skip {
        margin:
            45px auto;
    }


    .osaas-decision-panel {
        padding:
            12px;

        border-radius:
            25px;
    }


    .osaas-decision-heading {
        min-height:
            270px;

        padding:
            28px 23px;

        border-radius:
            20px;
    }


    .osaas-decision-question {
        padding:
            5px;
    }

}


@media (max-width: 575px) {

    .osaas-scratch-section {
        padding:
            55px 0;
    }


    .osaas-scratch-head h2 {
        font-size:
            32px;
    }


    .osaas-scratch-head > p,
    .osaas-scratch-table-bottom p,
    .osaas-decision-question-old p {
        font-size:
            18px;

        line-height:
            1.65;
    }


    .osaas-scratch-skip h3 {
        font-size:
            34px;
    }


    .osaas-decision-heading h3 {
        font-size:
            31px;
    }

}

/* ==========================================================
   OWNSAAS - ULTRA PREMIUM NEXT STEPS
   WHITE THEME
========================================================== */

.osaas-nextsteps-section {
    position: relative;
    overflow: hidden;

    padding: 100px 0;

    background:
        radial-gradient(circle at 8% 10%,
            rgba(136, 79, 238, .10),
            transparent 24%),

        radial-gradient(circle at 93% 80%,
            rgba(229, 83, 179, .09),
            transparent 26%),

        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbf9ff 50%,
            #ffffff 100%
        );

    font-family: Arial, Helvetica, sans-serif;

    font-size: 18px;

    color: #111a33;
}


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

.osaas-nextsteps-grid {
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .75;

    background-image:
        linear-gradient(
            rgba(94, 62, 141, .03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(94, 62, 141, .03) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

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


.osaas-nextsteps-orb {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.osaas-nextsteps-orb-1 {
    width: 480px;
    height: 480px;

    left: -340px;
    top: 15%;

    background:
        radial-gradient(
            circle,
            rgba(143, 72, 229, .12),
            transparent 70%
        );
}


.osaas-nextsteps-orb-2 {
    width: 520px;
    height: 520px;

    right: -370px;
    bottom: 5%;

    background:
        radial-gradient(
            circle,
            rgba(226, 80, 178, .11),
            transparent 70%
        );
}


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

.osaas-nextsteps-heading {
    position: relative;
    z-index: 2;

    max-width: 900px;

    margin: 0 auto 55px;
}


.osaas-nextsteps-kicker {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

    padding: 9px 16px;

    border: 1px solid #e2d7f4;

    border-radius: 100px;

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

    color: #8f45db;

    font-size: 11px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: 1.5px;

    box-shadow:
        0 8px 24px rgba(83, 52, 124, .05);
}


.osaas-nextsteps-kicker span {
    color: #de54ba;

    font-size: 16px;
}


.osaas-nextsteps-heading h2 {
margin: 0;
  color: #111a33;
  font-size: clamp(34px, 5vw, 46px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -2.7px;
}


.osaas-nextsteps-heading h2 span {
    background:
        linear-gradient(
            90deg,
            #7146ef,
            #a44ae7,
            #df57bb
        );

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

    -webkit-text-fill-color: transparent;
}


/* ==========================================================
   STEPS FLOW
========================================================== */

.osaas-nextsteps-flow {
    position: relative;
    z-index: 2;

    max-width: 1050px;

    margin: 0 auto 70px;
}


.osaas-nextsteps-flow::before {
    content: "";

    position: absolute;

    top: 44px;
    bottom: 44px;

    left: 36px;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(145, 73, 220, .28) 10%,
            rgba(220, 83, 187, .22) 90%,
            transparent
        );
}


/* STEP */

.osaas-nextsteps-step {
    position: relative;

    display: grid;

    grid-template-columns:
        74px 1fr 56px;

    align-items: center;

    gap: 22px;

    min-height: 112px;

    margin-bottom: 15px;

    padding: 18px 20px;

    border: 1px solid rgba(125, 82, 188, .13);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(251,248,255,.95)
        );

    box-shadow:
        0 18px 50px rgba(78, 50, 107, .055);

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


.osaas-nextsteps-step:hover {
    transform: translateX(7px);

    border-color:
        rgba(166, 72, 212, .27);

    box-shadow:
        0 25px 65px rgba(88, 51, 117, .09);
}


/* NUMBER */

.osaas-nextsteps-step-no {
    position: relative;
    z-index: 2;

    display: flex;

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

    width: 56px;
    height: 56px;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            #7545ed,
            #ad4bdf,
            #e258b5
        );

    color: #fff;

    font-size: 13px;

    line-height: 1;

    font-weight: 900;

    box-shadow:
        0 12px 28px rgba(164, 65, 201, .22);
}


/* COPY */

.osaas-nextsteps-step-label {
    margin-bottom: 5px;

    color: #9b8fa1;

    font-size: 9px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: 1.3px;
}


.osaas-nextsteps-step-content h3 {
    margin: 0 0 6px;

    color: #1d2742;

    font-size: 18px;

    line-height: 1.35;

    font-weight: 900;

    letter-spacing: -.2px;
}


.osaas-nextsteps-step-content p {
    margin: 0;

    color: #655e6a;

    font-size: 18px;

    line-height: 1.55;

    font-weight: 400;
}


.osaas-nextsteps-step-content p strong {
    color: #a745cf;

    font-weight: 900;

    background:
        linear-gradient(
            90deg,
            #f5e8ff,
            #fff1fa
        );

    padding: 2px 6px;

    border-radius: 6px;
}


/* RIGHT ICON */

.osaas-nextsteps-step-icon {
    display: flex;

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

    width: 44px;
    height: 44px;

    border-radius: 14px;

    border: 1px solid #e7dff0;

    background: #ffffff;

    color: #9d46d6;

    font-size: 18px;

    font-weight: 900;

    box-shadow:
        0 8px 20px rgba(72, 44, 99, .05);
}


.osaas-nextsteps-step-icon-final {
    background:
        linear-gradient(
            135deg,
            #7544ef,
            #df57b9
        );

    color: #ffffff;

    border-color: transparent;
}


/* ==========================================================
   BRAND / CTA PANEL
========================================================== */

.osaas-nextsteps-brand {
    position: relative;
    z-index: 2;

    overflow: hidden;

    max-width: 1100px;

    margin: 0 auto;

    padding: 58px 45px 40px;

    border: 1px solid rgba(130, 84, 197, .16);

    border-radius: 34px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(145, 73, 229, .09),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbf7ff 55%,
            #fff8fc 100%
        );

    box-shadow:
        0 35px 100px rgba(81, 50, 117, .10);

    text-align: center;
}


/* PREMIUM BORDER GLOW */

.osaas-nextsteps-brand::before {
    content: "";

    position: absolute;
    inset: 0;

    padding: 1px;

    border-radius: inherit;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(118, 70, 238, .38),
            transparent 28%,
            transparent 72%,
            rgba(227, 85, 179, .32)
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;
}


.osaas-nextsteps-brand-glow {
    position: absolute;

    width: 360px;
    height: 360px;

    left: 50%;
    top: -220px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(170, 75, 221, .14),
            transparent 70%
        );
}


/* TOP LINE */

.osaas-nextsteps-brand-top {
    position: relative;
    z-index: 2;

    display: flex;

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

    gap: 16px;

    margin-bottom: 20px;
}


.osaas-nextsteps-brand-top span {
    width: 50px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #b74ed6
        );
}


.osaas-nextsteps-brand-top span:last-child {
    background:
        linear-gradient(
            90deg,
            #b74ed6,
            transparent
        );
}


.osaas-nextsteps-brand-top p {
    margin: 0;

    color: #6f45e9;

    font-size: 14px;

    line-height: 1.4;

    font-weight: 900;

    letter-spacing: .3px;
}


/* MAIN MESSAGE */

.osaas-nextsteps-brand h3 {
position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto 25px;
  color: #131c35;
  font-size: clamp(23px, 4vw, 30px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -1.5px;
}


.osaas-nextsteps-brand h3 span {
    background:
        linear-gradient(
            90deg,
            #7543ed,
            #a84adf,
            #dd56ba
        );

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

    -webkit-text-fill-color: transparent;
}


/* OWN SAAS WORDMARK */

.osaas-nextsteps-logo-text {
position: relative;
  z-index: 2;
  margin-bottom: 10px;
  color: #141c34;
  font-size: clamp(40px, 7vw, 60px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -4px;
}


.osaas-nextsteps-logo-text span {
    background:
        linear-gradient(
            90deg,
            #7644ee,
            #b04bdd,
            #e158b4
        );

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

    -webkit-text-fill-color: transparent;
}


/* TAGLINE */

.osaas-nextsteps-tagline {
    position: relative;
    z-index: 2;

    margin-bottom: 25px;

    color: #1460ff;

    font-size: 14px;

    line-height: 1.4;

    font-weight: 900;

    letter-spacing: 3px;
}


/* PRICE */

.osaas-nextsteps-price-line {
    position: relative;
    z-index: 2;

    margin-bottom: 25px;

    color: #1b243f;

    font-size: 20px;

    line-height: 1.4;

    font-weight: 900;
}


.osaas-nextsteps-price-line strong {
    color: #a545d1;

    font-size: 28px;

    font-weight: 900;
}


/* ==========================================================
   CTA
========================================================== */

.osaas-nextsteps-cta {
    position: relative;
    z-index: 2;

    overflow: hidden;

    display: flex;

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

    gap: 13px;

    width: 100%;
    max-width: 790px;

    min-height: 68px;

    margin: 0 auto;

    padding: 16px 28px;

    border-radius: 18px;

    background:
        linear-gradient(
            90deg,
            #7445ed 0%,
            #a94bdd 48%,
            #e357b5 100%
        );

    color: #ffffff;

    font-size: 18px;

    line-height: 1.3;

    font-weight: 900;

    text-decoration: none;

    box-shadow:
        0 18px 45px rgba(157, 66, 202, .25);

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


.osaas-nextsteps-cta:hover {
    transform: translateY(-4px);

    color: #ffffff;

    box-shadow:
        0 25px 60px rgba(157, 66, 202, .34);
}


/* CTA SHINE */

.osaas-nextsteps-cta-shine {
    position: absolute;

    top: -80%;
    left: -15%;

    width: 90px;
    height: 220%;

    transform: rotate(18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.28),
            transparent
        );

    transition:
        left .65s ease;
}


.osaas-nextsteps-cta:hover
.osaas-nextsteps-cta-shine {
    left: 110%;
}


.osaas-nextsteps-cta-icon {
    display: flex;

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

    min-width: 31px;
    width: 31px;
    height: 31px;

    border-radius: 10px;

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

    color: #fff;
}


.osaas-nextsteps-cta-arrow {
    margin-left: 5px;

    font-size: 22px;
}


/* SECURE / FINAL LINE */

.osaas-nextsteps-secure {
    position: relative;
    z-index: 2;

    display: flex;

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

    gap: 8px;

    margin-top: 18px;

    color: #8a8290;

    font-size: 13px;

    line-height: 1.4;

    font-weight: 600;
}


.osaas-nextsteps-secure-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #46ce8a;

    box-shadow:
        0 0 0 5px rgba(70,206,138,.11);
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991px) {

    .osaas-nextsteps-section {
        padding: 80px 0;
    }

    .osaas-nextsteps-flow {
        margin-bottom: 55px;
    }

    .osaas-nextsteps-brand {
        padding: 48px 30px 35px;
    }

}


@media (max-width: 767px) {

    .osaas-nextsteps-section {
        padding: 65px 0;

        font-size: 18px;
    }

    .osaas-nextsteps-heading h2 {
        font-size: 38px;

        letter-spacing: -1.5px;
    }

    .osaas-nextsteps-step {
        grid-template-columns: 55px 1fr;

        gap: 14px;

        padding: 16px;

        border-radius: 19px;
    }

    .osaas-nextsteps-step-icon {
        display: none;
    }

    .osaas-nextsteps-flow::before {
        left: 27px;
    }

    .osaas-nextsteps-step-no {
        width: 46px;
        height: 46px;

        border-radius: 14px;
    }

    .osaas-nextsteps-brand {
        padding: 38px 20px 30px;

        border-radius: 26px;
    }

    .osaas-nextsteps-brand-top span {
        width: 25px;
    }

    .osaas-nextsteps-tagline {
        letter-spacing: 2px;
    }

    .osaas-nextsteps-cta {
        min-height: 62px;

        padding: 14px 18px;

        font-size: 16px;
    }

}


@media (max-width: 575px) {

    .osaas-nextsteps-section {
        padding: 55px 0;
    }

    .osaas-nextsteps-heading h2 {
        font-size: 33px;
    }

    .osaas-nextsteps-step-content h3 {
        font-size: 17px;
    }

    .osaas-nextsteps-step-content p {
        font-size: 18px;
    }

    .osaas-nextsteps-brand-top {
        gap: 8px;
    }

    .osaas-nextsteps-brand-top p {
        font-size: 11px;
    }

    .osaas-nextsteps-brand h3 {
        font-size: 29px;
    }

    .osaas-nextsteps-logo-text {
        font-size: 51px;

        letter-spacing: -3px;
    }

    .osaas-nextsteps-tagline {
        font-size: 11px;

        letter-spacing: 1.5px;
    }

    .osaas-nextsteps-price-line {
        font-size: 17px;
    }

    .osaas-nextsteps-price-line strong {
        display: block;

        margin-top: 4px;

        font-size: 25px;
    }

    .osaas-nextsteps-cta {
        gap: 8px;

        font-size: 15px;
    }

    .osaas-nextsteps-cta-arrow {
        display: none;
    }

}

/* ==========================================================
   OWNSAAS FINAL QUESTION
   UNIQUE PREFIX: finalq922-
========================================================== */

.finalq922-section {
    --finalq922-dark: #101a30;
    --finalq922-text: #5e687a;
    --finalq922-purple: #a44bdd;
    --finalq922-pink: #e45aad;
    --finalq922-border: #ebe5f0;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 95px 0 115px;

    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(166, 74, 222, 0.08),
            transparent 26%
        ),
        radial-gradient(
            circle at 93% 70%,
            rgba(229, 88, 172, 0.07),
            transparent 26%
        ),
        #ffffff;

    color: var(--finalq922-dark);

    font-size: 18px;
}


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

.finalq922-grid {
    position: absolute;
    inset: 0;

    z-index: -4;

    opacity: .75;

    background-image:
        linear-gradient(
            rgba(89, 66, 119, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(89, 66, 119, .025) 1px,
            transparent 1px
        );

    background-size: 58px 58px;

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


.finalq922-orb {
    position: absolute;

    z-index: -3;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;
}


.finalq922-orb-one {
    width: 430px;
    height: 430px;

    top: 200px;
    left: -260px;

    background:
        rgba(164, 75, 221, .10);
}


.finalq922-orb-two {
    width: 480px;
    height: 480px;

    right: -290px;
    bottom: 100px;

    background:
        rgba(230, 88, 173, .09);
}


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

.finalq922-logo-area {
    margin-bottom: 65px;
}


.finalq922-logo-shell {
    position: relative;

    display: inline-flex;

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

    width: min(420px, 100%);

    padding: 16px 28px;

    border:
        1px solid #ebe5ef;

    border-radius: 23px;

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

    box-shadow:
        0 22px 65px rgba(43, 29, 60, .08),
        inset 0 1px #ffffff;
}


.finalq922-logo-shell::after {
    content: "";

    position: absolute;

    left: 18%;
    right: 18%;
    bottom: -1px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #a54bdf,
            #e55aac,
            transparent
        );
}


.finalq922-logo {
    display: block;

    width: 100%;
    max-width: 360px;

    height: auto;
}


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

.finalq922-heading {
    max-width: 900px;

    margin: 0 auto 60px;
}


.finalq922-heading-line {
    display: flex;

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

    gap: 14px;

    margin-bottom: 20px;
}


.finalq922-heading-line span {
    width: 70px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ce9be1
        );
}


.finalq922-heading-line span:last-child {
    background:
        linear-gradient(
            90deg,
            #ce9be1,
            transparent
        );
}


.finalq922-heading-line i {
    color: #ab4ddd;

    font-size: 18px;

    font-style: normal;
}


.finalq922-heading h2 {
    margin: 0;

    color: #111b30;

    font-size: clamp(42px, 6vw, 71px);

    line-height: .98;

    font-weight: 900;

    letter-spacing: -3px;
}


.finalq922-heading h2 span {
    background:
        linear-gradient(
            90deg,
            #a74bdf,
            #e458ad
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* ==========================================================
   STORY
========================================================== */

.finalq922-story {
    max-width: 1120px;

    margin: 0 auto;
}


/* LEFT */

.finalq922-story-left {
    position: relative;

    height: 100%;

    min-height: 390px;

    padding: 48px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    justify-content: center;

    border:
        1px solid #e8e1ed;

    border-radius: 31px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(170, 75, 224, .075),
            transparent 37%
        ),
        #ffffff;

    box-shadow:
        0 28px 80px rgba(42, 29, 57, .08);
}


.finalq922-story-index {
    position: absolute;

    right: 25px;
    top: 15px;

    color:
        rgba(23, 29, 48, .035);

    font-size: 125px;

    line-height: 1;

    font-weight: 900;
}


.finalq922-story-left p {
    position: relative;

    max-width: 500px;

    margin: 0;

    color: #606979;

    font-size: 18px;

    line-height: 1.75;
}


.finalq922-story-left strong {
    color: #172036;

    font-weight: 850;
}


/* OR */

.finalq922-or {
    display: flex;

    align-items: center;

    gap: 13px;

    margin: 27px 0;
}


.finalq922-or span {
    width: 45px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #b957dc,
            transparent
        );
}


.finalq922-or strong {
    color: #b44ddc;

    font-size: 19px;

    font-weight: 900;
}


/* ==========================================================
   REALITY CARD
========================================================== */

.finalq922-reality-card {
    position: relative;

    height: 100%;

    min-height: 390px;

    padding: 42px;

    display: flex;
    flex-direction: column;

    justify-content: center;

    gap: 14px;

    overflow: hidden;

    border:
        1px solid #e8e1ed;

    border-radius: 31px;

    background:
        linear-gradient(
            145deg,
            #fbf8fd,
            #ffffff
        );

    box-shadow:
        0 28px 80px rgba(42, 29, 57, .07);
}


.finalq922-reality-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 14%;
    right: 14%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #a74bdf,
            #e558ad,
            transparent
        );
}


.finalq922-card-number {
    position: absolute;

    right: 24px;
    top: 18px;

    color: #dfd3e4;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1px;
}


.finalq922-reality-row {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 17px 18px;

    border:
        1px solid #eee8f1;

    border-radius: 17px;

    background: #ffffff;
}


.finalq922-check {
    flex: 0 0 39px;

    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #a64bdf,
            #e459ad
        );

    color: #ffffff;

    font-size: 14px;

    font-weight: 900;

    box-shadow:
        0 10px 25px rgba(178, 75, 203, .16);
}


.finalq922-reality-row p {
    margin: 0;

    color: #465064;

    font-size: 18px;

    line-height: 1.55;

    font-weight: 650;
}


/* ==========================================================
   NEEDS PANEL
========================================================== */

.finalq922-needs {
    position: relative;

    max-width: 1110px;

    margin: 90px auto 0;

    padding: 60px;

    overflow: hidden;

    border:
        1px solid #e5ddea;

    border-radius: 35px;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(167, 72, 222, .075),
            transparent 36%
        ),
        #fcfafd;

    box-shadow:
        0 35px 100px rgba(40, 26, 55, .08);
}


.finalq922-needs-topline {
    position: absolute;

    top: 0;
    left: 15%;
    right: 15%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #a54bdf,
            #e45aac,
            transparent
        );
}


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

.finalq922-needs-visual {
    position: relative;

    min-height: 300px;

    display: flex;

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


.finalq922-needs-circle {
    position: relative;

    z-index: 4;

    width: 180px;
    height: 180px;

    display: flex;
    flex-direction: column;

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

    border:
        1px solid #d8b6e7;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8effc
        );

    box-shadow:
        0 25px 60px rgba(137, 65, 169, .13);
}


.finalq922-needs-circle-small {
    margin-bottom: 2px;

    color: #8d659f;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2px;
}


.finalq922-needs-circle strong {
    background:
        linear-gradient(
            90deg,
            #a54ade,
            #e157ac
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;

    font-size: 36px;

    font-weight: 900;

    letter-spacing: -1px;
}


.finalq922-needs-ring {
    position: absolute;

    border-radius: 50%;
}


.finalq922-needs-ring-one {
    width: 230px;
    height: 230px;

    border:
        1px dashed
        rgba(164, 75, 219, .25);
}


.finalq922-needs-ring-two {
    width: 285px;
    height: 285px;

    border:
        1px solid
        rgba(229, 88, 172, .08);
}


/* ==========================================================
   NEED LIST
========================================================== */

.finalq922-needs-list {
    display: flex;

    flex-direction: column;

    gap: 11px;
}


.finalq922-need-item {
    position: relative;

    min-height: 76px;

    display: grid;

    grid-template-columns:
        48px 1fr;

    align-items: center;

    gap: 16px;

    padding: 14px 20px;

    border:
        1px solid #e9e3ed;

    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 10px 30px rgba(40, 26, 55, .045);

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


.finalq922-need-item:hover {
    transform: translateX(7px);

    border-color: #d9b6e8;

    box-shadow:
        0 18px 42px rgba(78, 43, 96, .08);
}


.finalq922-need-item > span {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: #f6edf9;

    color: #a64bd7;

    font-size: 10px;

    font-weight: 900;
}


.finalq922-need-item h3 {
    margin: 0;

    color: #172036;

    font-size: 21px;

    line-height: 1.35;

    font-weight: 900;

    letter-spacing: -.4px;
}


/* MAIN FINAL NEED */

.finalq922-need-main {
    border-color: #d8b5e6;

    background:
        linear-gradient(
            90deg,
            #faf3fd,
            #fff7fb
        );
}


.finalq922-need-main > span {
    background:
        linear-gradient(
            135deg,
            #a64bdd,
            #e359ac
        );

    color: #ffffff;

    box-shadow:
        0 10px 26px rgba(179, 74, 201, .17);
}


.finalq922-need-main h3 {
    background:
        linear-gradient(
            90deg,
            #9f45d6,
            #dd50a7
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* ==========================================================
   CLOSING
========================================================== */

.finalq922-closing {
    max-width: 730px;

    margin: 55px auto 0;

    padding: 22px 30px;

    display: flex;

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

    gap: 15px;

    border:
        1px solid #e5daea;

    border-radius: 100px;

    background:
        linear-gradient(
            135deg,
            #fbf6fd,
            #fff8fc
        );

    box-shadow:
        0 18px 50px rgba(60, 35, 74, .07);
}


.finalq922-closing-icon {
    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #a54ade,
            #e459ac
        );

    color: #ffffff;

    font-size: 20px;

    box-shadow:
        0 12px 28px rgba(179, 75, 203, .18);
}


.finalq922-closing p {
    margin: 0;

    color: #20283b;

    font-size: 18px;

    line-height: 1.5;

    font-weight: 850;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991.98px) {

    .finalq922-story-left,
    .finalq922-reality-card {
        min-height: auto;
    }


    .finalq922-needs {
        padding: 48px 35px;
    }


    .finalq922-needs-visual {
        min-height: 270px;
    }

}


@media (max-width: 767.98px) {

    .finalq922-section {
        padding: 65px 0 80px;
    }


    .finalq922-logo-area {
        margin-bottom: 50px;
    }


    .finalq922-logo-shell {
        max-width: 340px;

        padding: 13px 20px;

        border-radius: 19px;
    }


    .finalq922-heading {
        margin-bottom: 40px;
    }


    .finalq922-heading h2 {
        font-size: 40px;

        letter-spacing: -1.7px;
    }


    .finalq922-story-left,
    .finalq922-reality-card {
        padding: 30px 22px;

        border-radius: 24px;
    }


    .finalq922-story-index {
        font-size: 90px;
    }


    .finalq922-needs {
        margin-top: 65px;

        padding: 35px 20px;

        border-radius: 27px;
    }


    .finalq922-needs-visual {
        min-height: 240px;
    }


    .finalq922-needs-circle {
        width: 145px;
        height: 145px;
    }


    .finalq922-needs-ring-one {
        width: 185px;
        height: 185px;
    }


    .finalq922-needs-ring-two {
        width: 220px;
        height: 220px;
    }


    .finalq922-needs-circle strong {
        font-size: 30px;
    }


    .finalq922-need-item {
        grid-template-columns:
            43px 1fr;

        padding: 13px 14px;
    }


    .finalq922-need-item h3 {
        font-size: 18px;
    }


    .finalq922-closing {
        padding: 17px 20px;

        border-radius: 22px;
    }

}


@media (max-width: 479.98px) {

    .finalq922-heading h2 {
        font-size: 34px;
    }


    .finalq922-story-left p,
    .finalq922-reality-row p,
    .finalq922-closing p {
        font-size: 18px;
    }


    .finalq922-reality-row {
        align-items: flex-start;

        padding: 15px;
    }


    .finalq922-closing {
        align-items: flex-start;
    }

}