/* v207 — About mai rotund, mai profund și galaxie continuată în galerie. */
#despre .about-galaxy-backdrop {
  height: calc(100% + clamp(680px, 58vw, 940px));
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.32) 6%, #010204 15%, #000 57%, #020407 72%, rgba(2,4,7,.9) 79%, rgba(2,4,7,.56) 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.28) 6%, #000 16%, #000 75%, rgba(0,0,0,.84) 83%, rgba(0,0,0,.46) 91%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.28) 6%, #000 16%, #000 75%, rgba(0,0,0,.84) 83%, rgba(0,0,0,.46) 91%, transparent 100%);
}

#despre .about-text-only > div,
#despre .about-text-only > div:hover {
  border-color: rgba(255,255,255,.15) !important;
  border-radius: 52px !important;
  box-shadow:
    inset 4px 4px 12px rgba(255,255,255,.055),
    inset -10px -12px 24px rgba(0,0,0,.42),
    0 24px 52px rgba(0,0,0,.46),
    0 0 18px rgba(0,102,204,.035) !important;
}

#despre .about-text-only > div::before {
  background:
    radial-gradient(ellipse 76% 30% at 30% -6%, rgba(255,255,255,.08), transparent 65%),
    linear-gradient(112deg, rgba(255,255,255,.025), transparent 32%, transparent 82%, rgba(80,156,255,.018)) !important;
}

#despre .locations-block .locations-title,
#despre .locations-block .locations-title b {
  color: rgba(255,255,255,.96) !important;
  opacity: 1 !important;
}

#despre .locations-block .locations-title b {
  background: linear-gradient(145deg, #fff 0%, #dbeaff 52%, #a8cbf5 100%);
  color: transparent !important;
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 8px 18px rgba(74,153,255,.36));
}

@media (hover: hover) and (pointer: fine) {
  #despre .about-text-only > div:hover,
  #despre .about-text-only > div.is-scroll-zoomed {
    border-color: rgba(255,255,255,.22) !important;
    box-shadow:
      inset 5px 5px 13px rgba(255,255,255,.065),
      inset -10px -12px 24px rgba(0,0,0,.43),
      0 18px 38px rgba(0,0,0,.52),
      0 0 22px rgba(255,255,255,.075) !important;
  }
}

@media (max-width: 820px) {
  #despre .about-galaxy-backdrop {
    height: calc(100% + 600px);
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.34) 5%, #010204 13%, #000 59%, #020407 74%, rgba(2,4,7,.88) 82%, rgba(2,4,7,.5) 91%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.3) 5%, #000 14%, #000 78%, rgba(0,0,0,.78) 86%, rgba(0,0,0,.42) 93%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.3) 5%, #000 14%, #000 78%, rgba(0,0,0,.78) 86%, rgba(0,0,0,.42) 93%, transparent 100%);
  }

  #despre .about-text-only > div,
  #despre .about-text-only > div:hover,
  #despre .about-text-only > div.is-scroll-zoomed,
  #despre .about-text-only > div.is-mobile-scroll-active {
    border-radius: 46px !important;
    border-color: rgba(255,255,255,.17) !important;
    box-shadow:
      inset 4px 4px 12px rgba(255,255,255,.055),
      inset -9px -11px 22px rgba(0,0,0,.42),
      0 20px 44px rgba(0,0,0,.46),
      0 0 16px rgba(0,102,204,.03) !important;
  }
}

/* v201 — galaxia iese din cardul About și continuă spre hero-ul anterior. */
#despre {
  position: relative;
  overflow: visible;
  isolation: isolate;
}

#despre .about-galaxy-backdrop {
  position: absolute;
  z-index: 0;
  top: clamp(-310px, -24vw, -190px);
  right: 0;
  left: 0;
  height: calc(82% + 260px);
  overflow: hidden;
  background: linear-gradient(180deg, transparent 0%, #010204 20%, #000 54%, #020407 74%, transparent 100%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.28) 10%, #000 24%, #000 70%, rgba(0,0,0,.58) 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.28) 10%, #000 24%, #000 70%, rgba(0,0,0,.58) 84%, transparent 100%);
}

#despre .about-backdrop-sky {
  opacity: 0.92;
  filter: saturate(108%) contrast(106%);
}

#despre > .wrap {
  position: relative;
  z-index: 2;
}

@media (max-width: 820px) {
  #despre .about-galaxy-backdrop {
    top: -180px;
    height: calc(86% + 180px);
    background: linear-gradient(180deg, transparent 0%, #010204 18%, #000 56%, #020407 78%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.32) 9%, #000 22%, #000 73%, rgba(0,0,0,.54) 87%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.32) 9%, #000 22%, #000 73%, rgba(0,0,0,.54) 87%, transparent 100%);
  }
}

/* v203 — galaxia urcă până aproape de buton, fără să miște cardul. */
.site-main-container > #despre {
  margin-top: -230px !important;
  padding-top: 312px;
}

@media (max-width: 820px) {
  .site-main-container > #despre {
    margin-top: -180px !important;
    padding-top: 244px;
  }
}

/* v204 — stratul de ceață trece peste marginea hero, fără linie. */
.site-main-container > #despre {
  z-index: 3;
  pointer-events: none;
}

.site-main-container > #despre > .wrap {
  pointer-events: auto;
}

/* v205 — ceața ultimei fotografii devine neagră și continuă galaxia. */
.apple-panel:nth-of-type(3)::after {
  inset: 46% 0 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.14) 20%, rgba(0,0,0,.48) 48%, rgba(0,0,0,.82) 74%, #000 100%);
}

.apple-panel:nth-of-type(3) .apple-panel-copy,
.apple-panel:nth-of-type(3) .apple-panel-copy .title,
.apple-panel:nth-of-type(3) .apple-panel-copy .sub {
  color: rgba(255, 255, 255, 0.96);
}

.apple-panel:nth-of-type(3) .apple-panel-copy .sub {
  color: rgba(255, 255, 255, 0.78);
}

/* v198 — About: Liquid Glass profund, fade coborât și volum elastic. */
#despre .about-text-only > div {
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 46px !important;
  background: rgba(248, 250, 253, 0.58) !important;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.92),
    inset -1px -1px 0 rgba(106, 137, 178, 0.13),
    inset 0 -18px 38px rgba(255, 255, 255, 0.2),
    0 30px 72px rgba(35, 58, 89, 0.18),
    0 8px 24px rgba(0, 113, 227, 0.08) !important;
  transition:
    border-color 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    border-radius 0.82s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform-origin: center;
}

#despre .about-constellation {
  height: 87%;
  background: linear-gradient(180deg, #000 0%, #010204 54%, #020407 76%, rgba(245, 247, 250, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, rgba(0, 0, 0, 0.84) 85%, rgba(0, 0, 0, 0.38) 94%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, rgba(0, 0, 0, 0.84) 85%, rgba(0, 0, 0, 0.38) 94%, transparent 100%);
}

#despre .about-text-only > div::before {
  background: linear-gradient(180deg, transparent 0%, transparent 69%, rgba(255, 255, 255, 0.05) 77%, rgba(255, 255, 255, 0.48) 100%) !important;
  opacity: 1;
}

#despre .locations-block {
  margin-top: 20px;
  padding-top: 78px;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.18) 26%, rgba(255, 255, 255, 0.78) 62%, rgba(255, 255, 255, 0.96) 100%);
}

@media (hover: hover) and (pointer: fine) {
  #despre .about-text-only > div:hover {
    border-color: rgba(255, 255, 255, 0.96) !important;
    border-radius: 52px !important;
    box-shadow:
      inset 2px 2px 0 rgba(255, 255, 255, 0.98),
      inset -2px -2px 0 rgba(82, 122, 174, 0.16),
      inset 0 -22px 44px rgba(255, 255, 255, 0.24),
      0 38px 86px rgba(27, 50, 82, 0.23),
      0 12px 32px rgba(0, 113, 227, 0.12) !important;
    transform: translate3d(0, -7px, 0) scale(1.0142) !important;
  }
}

@media (max-width: 820px) {
  #despre .about-text-only > div {
    border-radius: 38px !important;
  }

  #despre .about-constellation {
    height: 89%;
  }

  #despre .locations-block {
    margin-top: 14px;
    padding-top: 68px;
  }

  #despre .about-text-only > div.is-mobile-scroll-active {
    border-color: rgba(255, 255, 255, 0.96) !important;
    border-radius: 43px !important;
    box-shadow:
      inset 2px 2px 0 rgba(255, 255, 255, 0.98),
      inset -2px -2px 0 rgba(82, 122, 174, 0.15),
      inset 0 -18px 38px rgba(255, 255, 255, 0.23),
      0 30px 64px rgba(27, 50, 82, 0.2),
      0 9px 26px rgba(0, 113, 227, 0.1) !important;
    transform: translate3d(0, -4px, 0) scale(1.0142) !important;
  }
}