/* Pixsop premium black-gold About story — BeraSoftware.com */
.bera-software-about-story {
  position: relative;
  overflow: hidden;
  padding-block: clamp(86px, 10vw, 138px);
  border-block: 1px solid rgba(214, 170, 59, .25);
  background:
    radial-gradient(circle at 14% 50%, rgba(193, 126, 25, .15), transparent 31%),
    radial-gradient(circle at 93% 15%, rgba(214, 170, 59, .07), transparent 24%),
    linear-gradient(120deg, #050605, #0b0c09 55%, #111008);
  color: #fff8e8;
}

.bera-software-about-story::before {
  content: "PIXSOP";
  position: absolute;
  top: -40px;
  right: -10px;
  color: rgba(255, 255, 255, .018);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(9rem, 21vw, 24rem);
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: 1;
  pointer-events: none;
}

.bera-software-about-story__glow {
  position: absolute;
  bottom: -150px;
  left: 38%;
  width: 360px;
  height: 260px;
  border-radius: 50%;
  background: rgba(214, 170, 59, .08);
  filter: blur(70px);
  pointer-events: none;
}

.bera-software-about-story__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(58px, 8vw, 112px);
}

.bera-software-about-story__visual {
  position: relative;
  min-height: 600px;
}

.bera-software-about-story__visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -20px;
  right: 28px;
  bottom: 24px;
  left: -20px;
  border: 1px solid rgba(214, 170, 59, .24);
  border-radius: 34px;
}

.bera-software-about-story__image {
  position: absolute;
  z-index: 1;
  inset: 0 0 32px 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(214, 170, 59, .36);
  border-radius: 30px;
  background: #17130d;
  box-shadow: 0 35px 80px rgba(0, 0, 0, .52);
}

.bera-software-about-story__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 58%, rgba(5, 6, 5, .78)),
    linear-gradient(90deg, rgba(214, 170, 59, .07), transparent 40%);
  pointer-events: none;
}

.bera-software-about-story__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 900ms cubic-bezier(.2, .8, .2, 1), filter 500ms ease;
}

.bera-software-about-story__visual:hover .bera-software-about-story__image img {
  filter: saturate(1.06) contrast(1.025);
  transform: scale(1.035);
}

.bera-software-about-story__image figcaption {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 21px;
  left: 22px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #f7e3aa;
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bera-software-about-story__image figcaption span { color: #d6aa3b; font-size: 1rem; }

.bera-software-about-story__experience {
  position: absolute;
  z-index: 3;
  right: -30px;
  bottom: 0;
  width: 174px;
  padding: 19px 21px;
  border: 1px solid #d6aa3b;
  border-radius: 18px;
  background:
    radial-gradient(circle at 80% 5%, rgba(214, 170, 59, .14), transparent 34%),
    #0d0e0b;
  box-shadow: 0 20px 45px rgba(0, 0, 0, .45);
}

.bera-software-about-story__experience strong {
  display: block;
  color: #f3d276;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.8rem;
  line-height: .88;
}

.bera-software-about-story__experience sup { font-size: .48em; }
.bera-software-about-story__experience span {
  display: block;
  margin-top: 10px;
  color: #c5bdab;
  font-size: .67rem;
  line-height: 1.4;
}

.bera-software-about-story__seal {
  position: absolute;
  z-index: 3;
  top: 28px;
  left: -31px;
  width: 88px;
  height: 88px;
  display: grid;
  place-content: center;
  gap: 3px;
  border: 1px solid rgba(214, 170, 59, .68);
  border-radius: 50%;
  background: rgba(7, 8, 6, .87);
  color: #f3d276;
  text-align: center;
  box-shadow: 0 13px 35px rgba(0, 0, 0, .4);
  backdrop-filter: blur(10px);
}

.bera-software-about-story__seal span { line-height: 1; }
.bera-software-about-story__seal svg { width: 21px; height: 21px; }
.bera-software-about-story__seal small { font-size: .46rem; font-weight: 900; letter-spacing: .1em; line-height: 1.25; }

.bera-software-about-story__content { position: relative; z-index: 2; }
.bera-software-about-story__eyebrow {
  margin: 0 0 14px;
  color: #d6aa3b;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .21em;
  text-transform: uppercase;
}

.bera-software-about-story__content h2 {
  max-width: 760px;
  margin: 0;
  color: #fff9e9;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.65rem, 4.7vw, 4.75rem);
  letter-spacing: -.045em;
  line-height: .99;
}

.bera-software-about-story__content h2 em {
  display: block;
  margin-top: 6px;
  color: #f0c65c;
  font-weight: inherit;
}

.bera-software-about-story__lead {
  max-width: 690px;
  margin: 24px 0 0;
  color: #aaa598;
  font-size: .96rem;
  line-height: 1.75;
}

.bera-software-about-story__signature {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 20px;
}

.bera-software-about-story__signature > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(214, 170, 59, .45);
  border-radius: 50%;
  background: rgba(214, 170, 59, .08);
  color: #f3d276;
  font-family: Georgia, serif;
  font-size: .72rem;
  font-weight: 800;
}

.bera-software-about-story__signature p { margin: 0; }
.bera-software-about-story__signature strong,
.bera-software-about-story__signature small { display: block; }
.bera-software-about-story__signature strong { color: #ece6d8; font-size: .76rem; }
.bera-software-about-story__signature small { color: #716f68; font-size: .6rem; }

.bera-software-about-story__process {
  display: grid;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid rgba(214, 170, 59, .19);
  list-style: none;
}

.bera-software-about-story__process li {
  display: grid;
  grid-template-columns: 41px 1fr 38px;
  align-items: center;
  gap: 15px;
  padding: 17px 5px 17px 0;
  border-bottom: 1px solid rgba(214, 170, 59, .16);
  transition: padding-left 200ms ease, background 200ms ease;
}

.bera-software-about-story__process li:hover {
  padding-left: 10px;
  background: linear-gradient(90deg, rgba(214, 170, 59, .055), transparent);
}

.bera-software-about-story__process li > span {
  color: #d6aa3b;
  font-family: Georgia, serif;
  font-size: .78rem;
  font-weight: 800;
}

.bera-software-about-story__process strong,
.bera-software-about-story__process small { display: block; }
.bera-software-about-story__process strong { color: #f2eddf; font-size: .83rem; }
.bera-software-about-story__process small { margin-top: 2px; color: #7d7a72; font-size: .68rem; }
.bera-software-about-story__process i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(214, 170, 59, .24);
  border-radius: 11px;
  color: #d6aa3b;
  font-style: normal;
}
.bera-software-about-story__process svg { width: 18px; height: 18px; }

.bera-software-about-story__cta {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-top: 28px;
  padding: 10px 10px 10px 20px;
  border: 1px solid #d6aa3b;
  border-radius: 999px;
  color: #f8efd9;
  font-size: .76rem;
  font-weight: 850;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.bera-software-about-story__cta span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #d6aa3b;
  color: #11120e;
}

.bera-software-about-story__cta:hover {
  background: #d6aa3b;
  color: #11120e;
  transform: translateY(-2px);
}

@media (max-width: 1000px) {
  .bera-software-about-story__grid { gap: 55px; }
  .bera-software-about-story__visual { min-height: 520px; }
  .bera-software-about-story__experience { right: -18px; }
  .bera-software-about-story__seal { left: -16px; }
}

@media (max-width: 820px) {
  .bera-software-about-story__grid { grid-template-columns: 1fr; gap: 72px; }
  .bera-software-about-story__visual { width: min(100%, 610px); min-height: 590px; margin-inline: auto; }
  .bera-software-about-story__content { width: min(100%, 680px); margin-inline: auto; }
  .bera-software-about-story__experience { right: 14px; }
  .bera-software-about-story__seal { left: 14px; }
}

@media (max-width: 560px) {
  .bera-software-about-story { padding-block: 75px; }
  .bera-software-about-story__grid { gap: 58px; }
  .bera-software-about-story__visual { min-height: 430px; }
  .bera-software-about-story__visual::before { top: -12px; right: 13px; left: -10px; border-radius: 24px; }
  .bera-software-about-story__image { right: 3px; bottom: 25px; border-radius: 22px; }
  .bera-software-about-story__image figcaption { right: 14px; bottom: 14px; left: 14px; font-size: .55rem; }
  .bera-software-about-story__experience { right: 0; width: 144px; padding: 15px 17px; }
  .bera-software-about-story__experience strong { font-size: 2.2rem; }
  .bera-software-about-story__experience span { font-size: .57rem; }
  .bera-software-about-story__seal { top: 16px; left: -4px; width: 70px; height: 70px; }
  .bera-software-about-story__seal svg { width: 17px; height: 17px; }
  .bera-software-about-story__seal small { font-size: .39rem; }
  .bera-software-about-story__content h2 { font-size: clamp(2.45rem, 12vw, 3.6rem); }
  .bera-software-about-story__lead { font-size: .88rem; }
  .bera-software-about-story__process li { grid-template-columns: 30px 1fr 34px; gap: 10px; }
  .bera-software-about-story__process small { line-height: 1.4; }
}

@media (prefers-reduced-motion: reduce) {
  .bera-software-about-story__image img,
  .bera-software-about-story__process li,
  .bera-software-about-story__cta { transition: none !important; }
}