/* Floating Workflow Signal Cards
   A ULS-specific visual layer inspired by the lively, layered-card rhythm the
   user referenced. These are decorative and never block the dashboard links. */
.mockup-stage { isolation: isolate; }
.workflow-float-card {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  color: #f7fcff;
  border: 1px solid rgba(196, 243, 255, .48);
  background: linear-gradient(145deg, rgba(9, 37, 105, .94), rgba(9, 121, 180, .78));
  box-shadow: 0 18px 38px rgba(1, 12, 59, .38), inset 0 1px rgba(255, 255, 255, .16);
  border-radius: 17px;
  overflow: hidden;
}
.workflow-float-card::after {
  content: "";
  position: absolute;
  width: 120%;
  height: 52%;
  top: -36%;
  left: -14%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .2) 50%, transparent 78%);
  transform: rotate(-9deg) translateX(-110%);
  animation: workflow-card-sheen 7.5s ease-in-out infinite;
}
.workflow-request {
  top: 8%;
  left: -6%;
  width: 178px;
  padding: 13px 14px 12px;
  animation: workflow-card-drift-one 5.6s ease-in-out infinite;
}
.workflow-float-kicker,
.workflow-pulse > span,
.workflow-status span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #b9f6ff;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .115em;
}
.workflow-live-dot,
.workflow-pulse small i {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #65f4ba;
  box-shadow: 0 0 0 4px rgba(101, 244, 186, .12), 0 0 13px rgba(101, 244, 186, .82);
  animation: workflow-live-pulse 2.2s ease-in-out infinite;
}
.workflow-request strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 8px;
  font-size: .82rem;
  line-height: 1.25;
}
.workflow-request small,
.workflow-pulse small {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 4px;
  color: #d2f4fb;
  font-size: .61rem;
  line-height: 1.35;
}
.workflow-progress {
  position: relative;
  z-index: 1;
  height: 4px;
  margin-top: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(232, 251, 255, .2);
}
.workflow-progress i {
  display: block;
  width: 70%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #68f1c3, #9aeaff);
  animation: workflow-progress-shift 3.6s ease-in-out infinite;
}
.workflow-status {
  right: -7%;
  bottom: 7%;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 172px;
  padding: 11px 12px;
  background: linear-gradient(145deg, rgba(4, 65, 112, .94), rgba(8, 153, 169, .79));
  animation: workflow-card-drift-two 6.4s ease-in-out .4s infinite;
}
.workflow-status-icon {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  place-items: center;
  border-radius: 9px;
  background: rgba(116, 255, 196, .17);
  color: #91ffcb;
  font-weight: 900;
  font-size: .84rem;
}
.workflow-status strong {
  display: block;
  margin-top: 2px;
  color: #fff;
  font-size: .72rem;
  line-height: 1.3;
}
.workflow-pulse {
  top: 53%;
  right: -9%;
  width: 142px;
  padding: 11px 12px;
  border-color: rgba(205, 240, 255, .38);
  background: linear-gradient(145deg, rgba(20, 46, 112, .93), rgba(54, 92, 183, .82));
  animation: workflow-card-drift-three 7s ease-in-out .8s infinite;
}
.workflow-pulse strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 3px;
  font-size: 1.28rem;
  letter-spacing: -.04em;
  line-height: 1.12;
}
.workflow-pulse small {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  white-space: nowrap;
}
.workflow-pulse small i { width: 5px; height: 5px; flex-basis: 5px; box-shadow: 0 0 8px rgba(101, 244, 186, .82); }

@keyframes workflow-card-drift-one {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(3deg); }
  50% { transform: translate3d(-8px, -12px, 0) rotate(1deg); }
}
@keyframes workflow-card-drift-two {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg); }
  50% { transform: translate3d(8px, -10px, 0) rotate(-2deg); }
}
@keyframes workflow-card-drift-three {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(2deg); }
  50% { transform: translate3d(-5px, -8px, 0) rotate(0deg); }
}
@keyframes workflow-card-sheen {
  0%, 30% { transform: rotate(-9deg) translateX(-110%); }
  55%, 100% { transform: rotate(-9deg) translateX(110%); }
}
@keyframes workflow-live-pulse {
  50% { transform: scale(1.3); opacity: .58; }
}
@keyframes workflow-progress-shift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(26%); }
}

@media (max-width: 1100px) {
  .workflow-request { left: -2%; }
  .workflow-status { right: -3%; }
}
@media (max-width: 768px) {
  .workflow-float-card { position: relative; right: auto; bottom: auto; left: auto; }
  .workflow-request { width: min(88%, 300px); margin: 12px auto 0; }
  .workflow-status { width: min(56%, 205px); margin: 10px auto 0 20px; }
  .workflow-pulse { width: min(58%, 210px); margin: 10px 18px 0 auto; }
  .workflow-float-card::after { animation-duration: 9s; }
}

/* Desktop hero gallery: a clean center stage with real ULS system cards orbiting it.
   This follows the visual structure of the supplied reference without borrowing
   its artwork, copy, or brand treatment. */
.uls-orbit-gallery { display: none; }
@media (min-width: 769px) {
  .hero-section {
    min-height: 720px;
    padding: 146px 0 84px;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 48%, rgba(54, 191, 255, .16), transparent 31%),
      radial-gradient(circle at 2% 14%, rgba(102, 119, 255, .1), transparent 25%),
      linear-gradient(120deg, #f8fbff 0%, #e8f6ff 52%, #f7fcff 100%) !important;
  }
  .hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(18, 99, 172, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(18, 99, 172, .055) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at center, #000 12%, transparent 74%);
  }
  .hero-section .container.hero-grid {
    position: relative;
    z-index: 1;
    display: block;
    min-height: 490px;
  }
  .hero-section .hero-content {
    position: relative;
    z-index: 3;
    width: min(800px, 67vw);
    margin: 18px auto 0;
    text-align: center;
  }
  .hero-section .hero-title { font-size: clamp(3rem, 4.25vw, 4.72rem); line-height: 1.13; }
  .hero-section .hero-title { color: #10265a; text-shadow: none; }
  .hero-section .hero-title .text-cyan { color: #0586bc; }
  .hero-section .hero-title .no-break { white-space: normal; }
  .hero-section .hero-title br { display: none; }
  .hero-section .hero-description { max-width: 640px; margin-inline: auto; color: #50627c; }
  .hero-section .brand-tagline { border-color: rgba(13, 122, 180, .22); background: rgba(255, 255, 255, .72); color: #155b80; }
  .hero-section .brand-tagline svg { stroke: #0586bc; }
  .hero-section .hero-microcopy { color: #52667b; }
  .hero-section .brand-tagline,
  .hero-section .hero-cta-group,
  .hero-section .hero-trust-bar { justify-content: center; }
  .hero-section .hero-microcopy { text-align: center; }
  .hero-section .hero-microcopy,
  .hero-section .hero-trust-bar { display: none; }
  .hero-section .hero-cta-group .btn-primary { background: #10265a; color: #fff; box-shadow: 0 13px 26px rgba(16, 38, 90, .2); }
  .hero-section .hero-cta-group .btn-primary:hover { background: #183a81; color: #fff; }
  .hero-section .hero-cta-group .btn-secondary { border-color: rgba(16, 38, 90, .22); background: rgba(255, 255, 255, .76); color: #10265a; }
  .hero-section .hero-cta-group .btn-secondary:hover { border-color: rgba(5, 134, 188, .52); background: #fff; }
  .hero-section .hero-trust-bar .trust-item { color: #36506a; }
  .hero-section .hero-trust-bar .trust-item svg { stroke: #0586bc; }
  .hero-section .hero-visual {
    position: absolute;
    z-index: 1;
    inset: -78px -80px 0;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none;
  }
  .hero-section .mockup-stage { display: none; }
  .hero-section .uls-orbit-gallery { display: block; position: absolute; inset: 0; }
  .uls-orbit-card {
    position: absolute;
    z-index: 1;
    width: 218px;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(235, 252, 255, .68);
    border-radius: 18px;
    background: rgba(245, 252, 255, .96);
    box-shadow: 0 26px 56px rgba(0, 10, 55, .38), 0 4px 14px rgba(0, 20, 62, .2);
    color: #0b2463;
    transform-origin: center;
  }
  .uls-orbit-card::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(116deg, rgba(255, 255, 255, .24), transparent 37%, rgba(10, 97, 202, .08));
  }
  .uls-orbit-card img { display: block; width: 100%; height: 132px; object-fit: cover; object-position: top; }
  .orbit-card-manufacturing img { object-position: left top; }
  .uls-orbit-card figcaption { position: relative; z-index: 3; display: grid; gap: 2px; padding: 10px 12px 11px; }
  .uls-orbit-card figcaption span { color: #1680c8; font-size: .54rem; font-weight: 900; letter-spacing: .105em; }
  .uls-orbit-card figcaption strong { overflow: hidden; color: #10265a; font-size: .78rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
  .orbit-card-repair { top: 12%; left: 7%; transform: rotate(-9deg); animation: uls-orbit-one 8s ease-in-out infinite; }
  .orbit-card-manufacturing { top: 2%; right: 7%; width: 205px; transform: rotate(8deg); animation: uls-orbit-two 9.5s ease-in-out .7s infinite; }
  .orbit-card-storeflow { right: 4%; bottom: 8%; width: 244px; transform: rotate(6deg); animation: uls-orbit-three 8.7s ease-in-out .2s infinite; }
  .orbit-card-ot { bottom: 10%; left: 6%; width: 230px; transform: rotate(-5deg); animation: uls-orbit-four 10.2s ease-in-out 1s infinite; }
  @keyframes uls-orbit-one { 0%,100% { transform: translate3d(0,0,0) rotate(-9deg); } 50% { transform: translate3d(13px,-15px,0) rotate(-6deg); } }
  @keyframes uls-orbit-two { 0%,100% { transform: translate3d(0,0,0) rotate(8deg); } 50% { transform: translate3d(-13px,13px,0) rotate(5deg); } }
  @keyframes uls-orbit-three { 0%,100% { transform: translate3d(0,0,0) rotate(6deg); } 50% { transform: translate3d(-14px,-16px,0) rotate(3deg); } }
  @keyframes uls-orbit-four { 0%,100% { transform: translate3d(0,0,0) rotate(-5deg); } 50% { transform: translate3d(14px,12px,0) rotate(-2deg); } }
}
@media (min-width: 769px) and (max-width: 1080px) {
  .hero-section .hero-content { width: min(650px, 66vw); }
  .uls-orbit-card { transform: scale(.8) !important; }
  .orbit-card-repair { left: -2%; }
  .orbit-card-manufacturing { right: -1%; }
  .orbit-card-storeflow { right: -4%; }
  .orbit-card-ot { left: -3%; }
}
/* The mobile scene uses the same ULS project cards as desktop, scaled into a
   tidy 2-by-2 orbit so the visual story does not disappear on a phone. */
@media (max-width: 768px) {
  .hero-section {
    min-height: 0 !important;
    padding: 94px 0 34px !important;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 55%, rgba(54, 191, 255, .18), transparent 33%),
      linear-gradient(120deg, #f8fbff 0%, #e8f6ff 52%, #f7fcff 100%) !important;
  }
  .hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(18, 99, 172, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(18, 99, 172, .05) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at center, #000 12%, transparent 76%);
  }
  .hero-section .container.hero-grid { position: relative; z-index: 1; display: block; }
  .hero-section .hero-content { position: relative; z-index: 3; width: 100%; margin: 0 auto; text-align: center; }
  .hero-section .hero-title { max-width: 360px; margin-inline: auto; color: #10265a; font-size: clamp(2rem, 9vw, 2.55rem) !important; line-height: 1.18 !important; text-shadow: none; }
  .hero-section .hero-title .text-cyan { color: #0586bc; }
  .hero-section .hero-title .no-break { white-space: normal !important; }
  .hero-section .hero-title br { display: none; }
  .hero-section .hero-description { max-width: 340px; margin: 0 auto 18px !important; color: #50627c !important; font-size: .98rem; line-height: 1.62; }
  .hero-section .brand-tagline { justify-content: center; margin-bottom: 20px; color: #155b80; }
  .hero-section .brand-tagline svg { stroke: #0586bc; }
  .hero-section .hero-cta-group { display: flex !important; justify-content: center; gap: 9px; margin: 0 !important; }
  .hero-section .hero-cta-group .btn { width: auto !important; min-height: 44px !important; padding: 11px 15px; font-size: .86rem; }
  .hero-section .hero-cta-group .btn-primary { background: #10265a; color: #fff; box-shadow: 0 12px 22px rgba(16, 38, 90, .18); }
  .hero-section .hero-cta-group .btn-secondary { border-color: rgba(16, 38, 90, .2); background: rgba(255, 255, 255, .8); color: #10265a; }
  .hero-section .hero-microcopy, .hero-section .hero-trust-bar { display: none !important; }
  .hero-section .hero-visual { position: relative; z-index: 1; display: block; width: 100%; min-height: 276px; height: 276px; margin-top: 8px; opacity: 1 !important; transform: none !important; pointer-events: none; }
  .hero-section .mockup-stage { display: none !important; }
  .hero-section .uls-orbit-gallery { display: block; position: absolute; inset: 0; }
  .uls-orbit-card { position: absolute; z-index: 1; width: min(38vw, 150px); margin: 0; overflow: hidden; border: 1px solid rgba(235, 252, 255, .78); border-radius: 13px; background: rgba(245, 252, 255, .97); box-shadow: 0 16px 30px rgba(0, 24, 76, .3), 0 3px 9px rgba(0, 20, 62, .14); color: #0b2463; transform-origin: center; }
  .uls-orbit-card::before { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(116deg, rgba(255, 255, 255, .26), transparent 38%, rgba(10, 97, 202, .08)); }
  .uls-orbit-card img { display: block; width: 100%; height: 79px; object-fit: cover; object-position: top; }
  .orbit-card-manufacturing img { object-position: left top; }
  .uls-orbit-card figcaption { position: relative; z-index: 3; display: grid; gap: 1px; padding: 7px 8px 8px; }
  .uls-orbit-card figcaption span { color: #1680c8; font-size: .41rem; font-weight: 900; letter-spacing: .09em; }
  .uls-orbit-card figcaption strong { overflow: hidden; color: #10265a; font-size: .61rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  .orbit-card-repair { top: 3%; left: 1%; transform: rotate(-8deg); animation: uls-mobile-orbit-one 7.6s ease-in-out infinite; }
  .orbit-card-manufacturing { top: 9%; right: 1%; transform: rotate(8deg); animation: uls-mobile-orbit-two 8.8s ease-in-out .45s infinite; }
  .orbit-card-ot { bottom: 5%; left: 2%; transform: rotate(-5deg); animation: uls-mobile-orbit-three 9.4s ease-in-out .8s infinite; }
  .orbit-card-storeflow { right: 1%; bottom: 1%; transform: rotate(6deg); animation: uls-mobile-orbit-four 8.2s ease-in-out .2s infinite; }
}
@keyframes uls-mobile-orbit-one { 0%,100% { transform: translate3d(0,0,0) rotate(-8deg); } 50% { transform: translate3d(6px,-9px,0) rotate(-5deg); } }
@keyframes uls-mobile-orbit-two { 0%,100% { transform: translate3d(0,0,0) rotate(8deg); } 50% { transform: translate3d(-6px,8px,0) rotate(5deg); } }
@keyframes uls-mobile-orbit-three { 0%,100% { transform: translate3d(0,0,0) rotate(-5deg); } 50% { transform: translate3d(7px,7px,0) rotate(-2deg); } }
@keyframes uls-mobile-orbit-four { 0%,100% { transform: translate3d(0,0,0) rotate(6deg); } 50% { transform: translate3d(-7px,-8px,0) rotate(3deg); } }

/* Keep the longer Bahasa Melayu navigation labels on one clean line. */
@media (min-width: 769px) and (max-width: 1320px) {
  html[lang="ms"] .nav-links { gap: 18px; padding-left: 14px; }
  html[lang="ms"] .nav-link { white-space: nowrap; font-size: .88rem; }
  html[lang="ru"] .nav-links { gap: 14px; padding-left: 12px; }
  html[lang="ru"] .nav-link { white-space: nowrap; font-size: .84rem; }
}
@media (max-width: 768px) {
  html[lang="ms"] .nav-links::before { content: "Pilih halaman" !important; }
  html[lang="ru"] .nav-links::before { content: "Выберите раздел" !important; }
}