/* YUBASync family worlds — generated editorial art + product-specific atmosphere. */
.fam-hero {
  isolation: isolate;
  background: #080f1a;
}

.fam-hero > .fam-wrap {
  z-index: 2;
}

.fam-hero-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

.fam-hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;
  opacity: .68;
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.025);
  animation: famWorldIn 1.2s cubic-bezier(.2,.8,.2,1) both;
}

.fam-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #080f1a 0%, rgba(8,15,26,.98) 25%, rgba(8,15,26,.58) 55%, rgba(8,15,26,.22) 77%, rgba(8,15,26,.72) 100%),
    linear-gradient(0deg, #080f1a 0%, transparent 24%, rgba(8,15,26,.18) 78%, #080f1a 100%);
}

.fam-kitchen .fam-hero-art::before,
.fam-os .fam-hero-art::before,
.fam-trust .fam-hero-art::before,
.fam-link .fam-hero-art::before {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

/* Kitchen: a hot service window, cut like a ticket at the lower edge. */
.fam-kitchen .fam-hero-art {
  clip-path: polygon(0 0, 100% 0, 100% 94%, 82% 98%, 64% 94%, 46% 99%, 26% 95%, 0 100%);
}
.fam-kitchen .fam-hero-art::before {
  inset: 0;
  background: repeating-linear-gradient(112deg, transparent 0 13%, rgb(243 135 43 / .09) 13.1% 13.25%, transparent 13.4% 26%);
  mix-blend-mode: screen;
}
.fam-kitchen .kx-gauge-card {
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  background: linear-gradient(160deg, rgba(16,29,44,.9), rgba(8,15,26,.72));
}

/* OS: one uninterrupted lime route crossing the whole operation. */
.fam-os .fam-hero-art::before {
  left: 44%; right: 5%; top: 20%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--lime) 25% 75%, transparent);
  box-shadow: 0 0 22px rgb(141 199 60 / .6);
  transform: rotate(-8deg);
}
.fam-os .os-spine {
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  background: linear-gradient(180deg, rgba(15,31,43,.9), rgba(8,18,28,.78));
  border-color: rgb(141 199 60 / .22);
}

/* Trust: a restrained dossier field with an amber review seam. */
.fam-trust .fam-hero-art img { opacity: .62; object-position: 72% center; }
.fam-trust .fam-hero-art::before {
  right: 7%; top: 13%; bottom: 15%; width: 1px;
  background: linear-gradient(transparent, rgb(241 176 77 / .9), transparent);
  box-shadow: 0 0 24px rgb(241 176 77 / .32);
}
.fam-trust .tr-sello {
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  background: linear-gradient(180deg, rgba(15,33,56,.95), rgba(8,17,29,.9));
}

/* Link: a technical violet grid that resolves into the live terminal. */
.fam-link .fam-hero-art img { opacity: .66; object-position: 72% center; }
.fam-link .fam-hero-art::before {
  inset: 0 0 0 46%;
  background-image:
    linear-gradient(rgb(137 105 255 / .1) 1px, transparent 1px),
    linear-gradient(90deg, rgb(137 105 255 / .1) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(circle at 65% 50%, #000, transparent 67%);
  -webkit-mask-image: radial-gradient(circle at 65% 50%, #000, transparent 67%);
}
.fam-link .lk-term {
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  background: linear-gradient(180deg, rgba(19,25,45,.95), rgba(8,15,26,.88));
  border-color: rgb(137 105 255 / .24);
}

@keyframes famWorldIn {
  from { opacity: 0; transform: scale(1.085); }
}

@media (max-width: 1019px) {
  .fam-hero-art img { object-position: 68% center; opacity: .5; }
  .fam-hero-art::after {
    background:
      linear-gradient(180deg, #080f1a 0%, rgba(8,15,26,.88) 35%, rgba(8,15,26,.5) 61%, #080f1a 100%),
      linear-gradient(90deg, #080f1a 0%, transparent 35%, rgba(8,15,26,.35) 100%);
  }
}

@media (max-width: 620px) {
  .fam-hero-art img { opacity: .42; object-position: 72% center; }
  .fam-hero-art::after {
    background: linear-gradient(180deg, #080f1a 0%, rgba(8,15,26,.9) 42%, rgba(8,15,26,.58) 68%, #080f1a 100%);
  }
  .fam-kitchen .fam-hero-art { clip-path: none; }
  .fam-os .fam-hero-art::before,
  .fam-trust .fam-hero-art::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fam-hero-art img { animation: none; transform: none; }
}