/* LOONG desktop refresh. Mobile styling remains in the existing theme. */
.az-about-page .az-profile-carousel-stage {
  position: relative;
}

.az-about-page .az-profile-carousel-stage::after {
  content: "AI concept visuals · Not an actual factory or employees";
  position: absolute;
  z-index: 5;
  left: 16px;
  bottom: 16px;
  max-width: calc(100% - 32px);
  padding: 7px 10px;
  background: rgba(15, 24, 32, .78);
  color: #fff;
  font: 600 11px/1.4 Arial, sans-serif;
  pointer-events: none;
}

@media (max-width: 700px) {
  .loong-home-desktop { display: none !important; }
}

@media (min-width: 701px) {
  html:root {
    --c1: #0869d9;
    --c2: #ff8a16;
  }

  body .dibu {
    background-image: linear-gradient(90deg, rgba(10, 18, 27, .93), rgba(10, 18, 27, .74)), url(../img/loong-20260928/footer-machines.webp);
    background-position: center 52%;
  }

  body .dibu .footer-l .logo img {
    object-fit: contain;
    object-position: left center;
  }

  .loong-home {
    --loong-ink: #17242e;
    --loong-muted: #53616a;
    --loong-blue: #0869d9;
    --loong-orange: #ff8a16;
    color: var(--loong-ink);
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0;
  }

  .loong-home *, .loong-home *::before, .loong-home *::after { box-sizing: border-box; }
  .loong-home h1, .loong-home h2, .loong-home h3, .loong-home p { margin: 0; letter-spacing: 0; }
  .loong-home a { text-decoration: none; }
  .loong-shell { width: min(calc(100% - 96px), 1480px); margin-inline: auto; }
  .loong-section { padding-block: 82px; }

  .loong-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px !important;
    color: var(--loong-blue);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    text-transform: uppercase;
  }
  .loong-eyebrow i { font-size: 18px; font-weight: 400; }
  .loong-eyebrow--light { color: #fff; }
  .loong-eyebrow span { width: 21px; height: 3px; background: var(--loong-orange); }
  .loong-section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 70px;
    margin-bottom: 32px;
  }
  .loong-section-head h2, .loong-factory h2, .loong-global h2 {
    font-size: 40px;
    line-height: 1.15;
    font-weight: 750;
    color: var(--loong-ink);
  }
  .loong-section-head > p { max-width: 390px; padding-bottom: 3px; color: var(--loong-muted); font-size: 16px; line-height: 1.65; }
  .loong-text-link {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: var(--loong-blue);
    font-size: 14px;
    font-weight: 750;
    white-space: nowrap;
  }
  .loong-text-link i, .loong-button i { font-size: 20px; font-weight: 400; transition: transform .2s ease; }
  .loong-text-link:hover i, .loong-button:hover i { transform: translate(3px, -2px); }
  .loong-text-link--light { color: #fff; }
  .loong-button {
    display: inline-flex;
    min-height: 50px;
    padding: 0 24px;
    justify-content: center;
    align-items: center;
    gap: 22px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 750;
    transition: background .2s ease, transform .2s ease;
  }
  .loong-button:hover { transform: translateY(-2px); }
  .loong-button--orange { color: #1b2530; background: var(--loong-orange); }
  .loong-button--orange:hover { background: #ffab46; }
  .loong-button--blue { color: #fff; background: var(--loong-blue); }
  .loong-button--blue:hover { background: #0754af; }
  .loong-button--white { color: #143554; background: #fff; }
  .loong-button--white:hover { background: #e9f4ff; }

  .loong-hero {
    display: flex;
    position: relative;
    height: calc(100svh - 54px);
    min-height: 650px;
    max-height: 1050px;
    background: #162330 var(--loong-hero-image) center center / cover no-repeat;
    color: #fff;
  }
  .loong-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 20, 31, .84) 0%, rgba(8, 20, 31, .48) 40%, rgba(8, 20, 31, .04) 75%);
  }
  .loong-hero__inner { position: relative; display: flex; flex-direction: column; justify-content: center; padding-top: 88px; }
  .loong-hero__copy { max-width: 650px; padding-bottom: 46px; }
  .loong-hero h1 { font-size: 64px; line-height: 1.07; font-weight: 800; color: #fff; }
  .loong-hero__copy > p:not(.loong-eyebrow) { max-width: 510px; margin-top: 24px; color: #e9eff3; font-size: 18px; line-height: 1.65; }
  .loong-actions { display: flex; align-items: center; gap: 33px; margin-top: 34px; }
  .loong-hero__bottom {
    position: absolute;
    bottom: 26px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    color: rgba(255, 255, 255, .82);
    font-size: 11px;
    font-weight: 700;
  }

  .loong-categories { background: #f2f5f7; }
  .loong-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .loong-category {
    position: relative;
    display: block;
    height: 255px;
    overflow: hidden;
    border-radius: 5px;
    background: #fff;
    color: #fff;
  }
  .loong-category::after {
    content: "";
    position: absolute;
    inset: 35% 0 0;
    background: linear-gradient(transparent, rgba(8, 23, 37, .8));
    pointer-events: none;
  }
  .loong-category img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
  .loong-category:hover img { transform: scale(1.04); }
  .loong-category__content { position: absolute; z-index: 1; bottom: 0; left: 0; right: 0; display: flex; align-items: end; justify-content: space-between; gap: 10px; padding: 18px; }
  .loong-category__name { max-width: 82%; font-size: 17px; line-height: 1.27; font-weight: 750; }
  .loong-category__content i { font-size: 21px; flex: none; }
  .loong-category--featured { grid-column: 1 / -1; display: grid; grid-template-columns: 54% 46%; height: 310px; color: #122c45; background: #d9e8f3; }
  .loong-category--featured::after { display: none; }
  .loong-category--featured img { object-fit: cover; object-position: center 45%; }
  .loong-category--featured .loong-category__content { position: static; align-items: center; padding: 42px; }
  .loong-category--featured .loong-category__name { max-width: 75%; font-size: 32px; }
  .loong-category--featured .loong-category__content i { color: var(--loong-blue); font-size: 27px; }

  .loong-factory { background: #fff; }
  .loong-factory__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: end; margin-bottom: 31px; }
  .loong-factory__copy { max-width: 575px; }
  .loong-factory__copy > p { color: var(--loong-muted); font-size: 16px; line-height: 1.7; }
  .loong-factory__copy .loong-text-link { margin-top: 16px; }
  .loong-factory__copy small { display: block; margin-top: 18px; color: #707e87; font-size: 11px; line-height: 1.4; }
  .loong-factory-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .loong-factory-grid__image { height: 185px; overflow: hidden; margin: 0; background: #dce3e8; }
  .loong-factory-grid__image--wide { grid-column: 1 / -1; height: 480px; }
  .loong-factory-grid__image img { width: 100%; height: 100%; object-fit: cover; }
  .loong-factory-grid__image--wide img { object-position: center 53%; }

  .loong-products { background: #f2f5f7; }
  .loong-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .loong-product { display: flex; flex-direction: column; overflow: hidden; min-width: 0; border-radius: 5px; background: #fff; color: var(--loong-ink); transition: box-shadow .2s ease, transform .2s ease; }
  .loong-product:hover { transform: translateY(-3px); box-shadow: 0 13px 29px rgba(22, 38, 53, .12); }
  .loong-product__image { display: block; aspect-ratio: 4 / 3; background: #e7edf0; }
  .loong-product__image img { width: 100%; height: 100%; object-fit: contain; }
  .loong-product__body { display: flex; flex: 1; flex-direction: column; align-items: start; padding: 18px 20px 20px; }
  .loong-product__category { margin-bottom: 8px; color: var(--loong-blue); font-size: 11px; font-weight: 750; text-transform: uppercase; }
  .loong-product strong { display: -webkit-box; min-height: 3.9em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 16px; line-height: 1.3; font-weight: 750; }
  .loong-product__action { display: flex; align-items: center; gap: 7px; margin-top: 17px; color: var(--loong-blue); font-size: 13px; font-weight: 750; }
  .loong-product__action i { font-size: 18px; }

  .loong-global { position: relative; display: flex; align-items: center; min-height: 560px; background: #182633 var(--loong-global-image) center center / cover no-repeat; color: #fff; }
  .loong-global::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 25, 39, .88), rgba(9, 25, 39, .57) 45%, rgba(9, 25, 39, .05) 80%); }
  .loong-global__inner { position: relative; padding-block: 72px; }
  .loong-global h2 { max-width: 630px; color: #fff; font-size: 52px; }
  .loong-global__inner > p:not(.loong-eyebrow) { max-width: 500px; margin-top: 21px; color: #e9edf0; font-size: 17px; line-height: 1.65; }
  .loong-global .loong-button { margin-top: 28px; }
  .loong-global small { display: block; margin-top: 16px; color: #d6dfe6; font-size: 11px; }

  .loong-process { background: #fff; }
  .loong-process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid #d6e0e5; border-bottom: 1px solid #d6e0e5; }
  .loong-process-step { position: relative; min-height: 230px; padding: 30px 28px 28px 0; }
  .loong-process-step + .loong-process-step { padding-left: 28px; border-left: 1px solid #d6e0e5; }
  .loong-process-step > i { display: block; color: var(--loong-blue); font-size: 33px; margin-bottom: 19px; }
  .loong-process-step h3 { color: var(--loong-ink); font-size: 19px; font-weight: 750; line-height: 1.25; }
  .loong-process-step p { max-width: 250px; margin-top: 10px; color: var(--loong-muted); font-size: 14px; line-height: 1.6; }
  .loong-process > .loong-shell > .loong-button { margin-top: 28px; }

  #kf { margin-top: 0 !important; }
}

@media (min-width: 701px) and (max-width: 1500px) {
  .loong-hero__copy { max-width: 560px; }
  .loong-hero h1 { font-size: 52px; }
}

@media (min-width: 701px) and (max-width: 1180px) {
  .loong-shell { width: min(calc(100% - 56px), 1480px); }
  .loong-hero h1 { font-size: 48px; }
  .loong-section-head h2, .loong-factory h2 { font-size: 34px; }
  .loong-category-grid, .loong-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .loong-category--featured { grid-column: 1 / -1; }
  .loong-factory__intro { gap: 40px; }
  .loong-process-step { padding-right: 16px; }
  .loong-process-step + .loong-process-step { padding-left: 16px; }
}

@media (min-width: 701px) and (max-width: 900px) {
  .loong-hero h1 { font-size: 44px; }
  .loong-hero__copy { max-width: 490px; }
  .loong-section-head { gap: 30px; }
  .loong-section-head h2, .loong-factory h2 { font-size: 30px; }
  .loong-category-grid, .loong-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loong-factory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .loong-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loong-process-step:nth-child(3) { border-left: 0; }
  .loong-process-step:nth-child(n+3) { border-top: 1px solid #d6e0e5; }
}