/* Pixsop image-led category bento — BeraSoftware.com */
.bera-software-category-showcase {
  position: relative;
  overflow: hidden;
  padding-block: clamp(78px, 9vw, 126px);
  background:
    radial-gradient(circle at 5% 9%, rgba(255, 116, 104, .1), transparent 22%),
    radial-gradient(circle at 96% 88%, rgba(44, 198, 187, .1), transparent 22%),
    #fffaf2;
  color: #161813;
}

.bera-software-category-showcase::before {
  content: "";
  position: absolute;
  top: 48px;
  right: -42px;
  width: 120px;
  height: 120px;
  border: 24px solid rgba(255, 198, 58, .16);
  border-radius: 50%;
  pointer-events: none;
}

.bera-software-category-showcase__heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr);
  align-items: end;
  gap: clamp(32px, 8vw, 120px);
  margin-bottom: clamp(34px, 5vw, 58px);
}

.bera-software-category-showcase__eyebrow {
  margin: 0 0 11px;
  color: #a4680b;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.bera-software-category-showcase__heading h2 {
  max-width: 770px;
  margin: 0;
  color: #141611;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.65rem, 5.1vw, 5rem);
  letter-spacing: -.052em;
  line-height: .97;
}

.bera-software-category-showcase__heading h2 em {
  position: relative;
  color: #e46054;
  font-weight: inherit;
}

.bera-software-category-showcase__heading h2 em::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -6px;
  left: 0;
  height: 8px;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M3 8C50 2 114 3 197 7' fill='none' stroke='%23f3bd30' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.bera-software-category-showcase__intro p {
  margin: 0 0 18px;
  color: #696b64;
  font-size: .94rem;
  line-height: 1.65;
}

.bera-software-category-showcase__intro a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #171913;
  font-size: .8rem;
  font-weight: 850;
}

.bera-software-category-showcase__intro a span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #171913;
  color: #fff9ea;
  transition: transform 180ms ease, background 180ms ease;
}

.bera-software-category-showcase__intro a:hover span {
  background: #e46054;
  transform: translateX(4px);
}

.bera-software-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(230px, 1fr)) minmax(255px, 1fr);
  gap: 15px;
}

.bera-software-bento-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(22, 24, 19, .1);
  border-radius: 23px;
  background: #e9dfcf;
  box-shadow: 0 12px 40px rgba(42, 36, 25, .07);
  isolation: isolate;
  transform: translateZ(0);
}

.bera-software-bento-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 30% 0 0;
  background: linear-gradient(180deg, transparent, rgba(12, 13, 11, .34) 50%, rgba(10, 11, 9, .88));
  transition: opacity 250ms ease;
}

.bera-software-bento-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 2px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color 220ms ease;
}

.bera-software-bento-card:hover::after,
.bera-software-bento-card:focus-visible::after { border-color: #f4bd31; }

.bera-software-bento-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.2, .8, .2, 1), filter 300ms ease;
}

.bera-software-bento-card:hover img,
.bera-software-bento-card:focus-visible img {
  filter: saturate(1.06);
  transform: scale(1.045);
}

.bera-software-bento-card--frame { grid-column: 1 / 8; grid-row: 1 / 3; }
.bera-software-bento-card--album { grid-column: 8 / 13; grid-row: 1; }
.bera-software-bento-card--cover { grid-column: 8 / 11; grid-row: 2; }
.bera-software-bento-card--gift { grid-column: 11 / 13; grid-row: 2; }
.bera-software-bento-card--prints { grid-column: 1 / 7; grid-row: 3; }
.bera-software-bento-card--editing { grid-column: 7 / 13; grid-row: 3; }

.bera-software-bento-card--frame img { object-position: center 53%; }
.bera-software-bento-card--album img { object-position: center 57%; }
.bera-software-bento-card--cover img { object-position: center 48%; }
.bera-software-bento-card--gift img { object-position: center 48%; }
.bera-software-bento-card--prints img { object-position: center 45%; }
.bera-software-bento-card--editing img { object-position: center 46%; }

.bera-software-bento-card__number {
  position: absolute;
  z-index: 3;
  top: 15px;
  right: 15px;
  min-width: 35px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  background: rgba(17, 18, 15, .35);
  color: #fffbed;
  font-size: .57rem;
  font-weight: 850;
  letter-spacing: .08em;
  backdrop-filter: blur(8px);
}

.bera-software-bento-card__copy {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 18px;
  left: 18px;
  color: #fffbed;
}

.bera-software-bento-card__copy small {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, .7);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bera-software-bento-card__copy h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2.25vw, 2.2rem);
  letter-spacing: -.025em;
  line-height: 1.05;
}

.bera-software-bento-card__copy > span {
  display: inline-flex;
  margin-top: 9px;
  color: #ffe174;
  font-size: .68rem;
  font-weight: 850;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.bera-software-bento-card:hover .bera-software-bento-card__copy > span,
.bera-software-bento-card:focus-visible .bera-software-bento-card__copy > span {
  opacity: 1;
  transform: none;
}

.bera-software-bento-card--gift .bera-software-bento-card__copy { right: 12px; bottom: 13px; left: 12px; }
.bera-software-bento-card--gift .bera-software-bento-card__copy h3 { font-size: clamp(1rem, 1.5vw, 1.4rem); }
.bera-software-bento-card--gift .bera-software-bento-card__copy small { display: none; }

.bera-software-category-showcase__promise {
  min-height: 76px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 15px;
  margin-top: 17px;
  padding: 15px 20px;
  border: 1px solid rgba(22, 24, 19, .1);
  border-radius: 18px;
  background: rgba(255, 255, 255, .75);
  box-shadow: 0 10px 35px rgba(42, 36, 25, .05);
}

.bera-software-category-showcase__promise > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, #ff786d, #ffd05a 50%, #38c7bc);
  color: #171812;
  font-size: 1.15rem;
}

.bera-software-category-showcase__promise p {
  margin: 0;
  color: #77786f;
  font-size: .77rem;
}

.bera-software-category-showcase__promise strong {
  color: #1b1d17;
  font-size: .86rem;
}

.bera-software-category-showcase__promise > a {
  padding: 10px 16px;
  border-radius: 999px;
  background: #171913;
  color: #fff9ea;
  font-size: .7rem;
  font-weight: 850;
  transition: background 180ms ease, transform 180ms ease;
}

.bera-software-category-showcase__promise > a:hover {
  background: #e46054;
  transform: translateY(-2px);
}

@media (max-width: 940px) {
  .bera-software-bento-grid {
    grid-template-rows: repeat(2, minmax(210px, 1fr)) minmax(230px, 1fr);
  }
  .bera-software-bento-card--frame { grid-column: 1 / 7; }
  .bera-software-bento-card--album { grid-column: 7 / 13; }
  .bera-software-bento-card--cover { grid-column: 7 / 10; }
  .bera-software-bento-card--gift { grid-column: 10 / 13; }
}

@media (max-width: 720px) {
  .bera-software-category-showcase { padding-block: 70px; }
  .bera-software-category-showcase__heading { grid-template-columns: 1fr; gap: 22px; }
  .bera-software-category-showcase__intro { max-width: 520px; }
  .bera-software-bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 370px 280px 245px 255px;
    gap: 11px;
  }
  .bera-software-bento-card--frame { grid-column: 1 / 3; grid-row: 1; }
  .bera-software-bento-card--album { grid-column: 1 / 3; grid-row: 2; }
  .bera-software-bento-card--cover { grid-column: 1; grid-row: 3; }
  .bera-software-bento-card--gift { grid-column: 2; grid-row: 3; }
  .bera-software-bento-card--prints { grid-column: 1; grid-row: 4; }
  .bera-software-bento-card--editing { grid-column: 2; grid-row: 4; }
  .bera-software-bento-card { border-radius: 18px; }
  .bera-software-bento-card__copy { right: 13px; bottom: 13px; left: 13px; }
  .bera-software-bento-card__copy h3 { font-size: 1.18rem; }
  .bera-software-bento-card__copy > span { opacity: 1; transform: none; }
  .bera-software-category-showcase__promise { grid-template-columns: 40px 1fr; }
  .bera-software-category-showcase__promise > a { grid-column: 1 / 3; text-align: center; }
}

@media (max-width: 460px) {
  .bera-software-category-showcase__heading h2 { font-size: clamp(2.35rem, 12vw, 3.3rem); }
  .bera-software-bento-grid { grid-template-rows: 310px 235px 210px 220px; }
  .bera-software-bento-card__number { top: 10px; right: 10px; }
  .bera-software-bento-card__copy small { display: none; }
  .bera-software-bento-card__copy h3 { font-size: 1rem; }
  .bera-software-bento-card__copy > span { margin-top: 6px; font-size: .59rem; }
  .bera-software-category-showcase__promise { padding: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .bera-software-bento-card img,
  .bera-software-bento-card__copy > span { transition: none !important; }
}