/* ==========================================================================
   Home Page Styles
   - Home layout wrapper
   - Hero / News / Industrial Layout / Tech Innovation / About
   - Home responsive rules
   - Home-only animations and fallbacks
   ========================================================================== */
@layer components {
  .page-bottom-wrap {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* --------------------------------------------------------------------------
     Hero Section
     -------------------------------------------------------------------------- */
  .hero-section {
    position: relative;
    display: flex;
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #0a2344;
  }

  .hero-parallax-bg {
    position: absolute;
    inset: calc(var(--spacing) * 0);
    z-index: 0;
    overflow: hidden;
  }

  /* Re-enable this block if the hero needs the dark gradient overlay again.
  .hero-parallax-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
      linear-gradient(180deg, rgba(4, 21, 52, 0.28) 0%, rgba(4, 21, 52, 0.1) 28%, rgba(4, 21, 52, 0.24) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.22) 100%);
    pointer-events: none;
  }
  */

  .hero-carousel-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    touch-action: pan-y;
  }

  .hero-carousel-slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.72s ease,
      visibility 0s linear 0.72s;
  }

  .hero-carousel-slide.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .hero-carousel-picture {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
  }

  .hero-bg-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }

  .hero-carousel-media,
  .hero-bg-fallback-image,
  .hero-bg-video,
  .hero-carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero-bg-fallback-image,
  .hero-carousel-image {
    transform: scale(1.05);
  }

  .hero-bg-video {
    position: absolute;
    inset: calc(var(--spacing) * 0);
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    opacity: 1;
    transition: opacity 0.25s ease;
    background: transparent;
    pointer-events: none;
  }

  .hero-carousel-slide.is-video-fallback .hero-bg-video {
    opacity: 0;
  }

  .hero-main-title-wrap {
    position: absolute;
    left: 50%;
    top: calc(50% - clamp(2.75rem, 4vw, 3.5rem));
    z-index: 12;
    width: min(92%, 72rem);
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
  }

  .hero-main-title {
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    max-width: 100%;
    font-family: var(--font-body);
    font-size: clamp(2rem, 3.125vw, 60px);
    line-height: 1.3;
    font-weight: 900;
    font-variation-settings: "wght" 900;
    letter-spacing: 0.02em;
    color: #ffffff;
    text-shadow:
      0 6px 18px rgba(3, 18, 52, 0.55),
      0 1px 1px rgba(6, 14, 33, 0.38);
  }

  .hero-main-title.is-imprint-ready {
    color: transparent;
    text-shadow: none;
  }

  .hero-main-title-char {
    display: inline-block;
    opacity: 0;
    color: rgba(255, 255, 255, 0);
    transform: translate3d(0, -0.95em, 0) scale(1.045);
    filter: blur(5px);
    -webkit-text-stroke: 1.4px rgba(210, 226, 255, 0.78);
    text-shadow: none;
    will-change: transform, opacity, filter, color, text-shadow;
    animation: heroMainTitleImprint 1.18s cubic-bezier(0.18, 0.9, 0.22, 1) both;
    animation-delay: calc(var(--char-index, 0) * 0.052s + 0.06s);
  }

  .hero-main-title-space {
    display: inline-block;
    width: 0.48em;
  }

  .hero-carousel-controls[hidden] {
    display: none;
  }

  .hero-carousel-arrow[hidden],
  .hero-carousel-dots[hidden] {
    display: none;
  }

  .hero-carousel-controls {
    position: absolute;
    inset: 0;
    z-index: 16;
    pointer-events: none;
  }

  .hero-section.is-mouse-draggable .hero-carousel-stage {
    cursor: grab;
  }

  .hero-section.is-pointer-dragging {
    user-select: none;
  }

  .hero-section.is-pointer-dragging .hero-carousel-stage {
    cursor: grabbing;
  }

  .hero-carousel-arrow {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: inline-flex;
    height: 3.5rem;
    width: 3.5rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(5, 25, 54, 0.24);
    color: #ffffff;
    cursor: pointer;
    pointer-events: auto;
    transform: translateY(-50%);
    transition:
      transform 0.25s ease,
      background-color 0.25s ease,
      border-color 0.25s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .hero-carousel-arrow.is-prev {
    left: clamp(1rem, 3vw, 2.75rem);
  }

  .hero-carousel-arrow.is-next {
    right: clamp(1rem, 3vw, 2.75rem);
  }

  .hero-carousel-arrow:hover {
    transform: translateY(-50%) scale(1.04);
    border-color: rgba(255, 255, 255, 0.46);
    background: rgba(5, 25, 54, 0.34);
  }

  .hero-carousel-arrow-icon {
    font-size: 1.35rem;
    line-height: 1;
  }

  .hero-carousel-dots {
    position: absolute;
    left: 50%;
    bottom: clamp(9rem, 11vw, 10.75rem);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(5, 25, 54, 0.24);
    pointer-events: auto;
    transform: translateX(-50%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .hero-carousel-dot {
    height: 0.65rem;
    width: 0.65rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.42);
    cursor: pointer;
    transition:
      width 0.25s ease,
      background-color 0.25s ease,
      transform 0.25s ease;
  }

  .hero-carousel-dot:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.72);
  }

  .hero-carousel-dot.is-active {
    width: 2rem;
    background: #ffffff;
  }

  .hero-carousel-arrow:focus-visible,
  .hero-carousel-dot:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.96);
    outline-offset: 3px;
  }

  @media (min-width: 64rem) {
    .hero-main-title {
      font-size: 60px;
      line-height: 1.25;
    }
  }

  .hero-banner-wrap {
    position: absolute;
    bottom: calc(var(--spacing) * 0);
    z-index: 20;
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .hero-banner {
    transform: translateY(0);
  }

  .hero-banner-container {
    width: 100%;
    max-width: var(--layout-content-max);
    padding-inline: calc(var(--spacing) * 4);
  }

  @media (min-width: 64rem) {
    .hero-banner-container {
      padding-inline: calc(var(--spacing) * 8);
    }
  }

  @media (min-width: 80rem) {
    .hero-banner-container {
      padding-inline: calc(var(--spacing) * 12);
    }
  }

  .hero-banner-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3207 / 379;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    border-radius: 0;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    background: transparent;
  }

  @media (min-width: 64rem) {
    .hero-banner-card {
      border-radius: 10px 10px 0 0;
    }
  }

  .hero-banner-base,
  .hero-banner-reveal {
    position: absolute;
    inset: 0;
  }

  .hero-banner-base {
    z-index: 0;
    background: #e10000;
  }

  .hero-banner-reveal {
    z-index: 1;
    overflow: hidden;
  }

  .hero-banner-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .hero-banner-headline {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: min(92%, 84rem);
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: var(--font-body);
    font-size: clamp(1rem, 2.15vw, 2rem);
    line-height: 1.35;
    font-weight: 900;
    font-variation-settings: "wght" 900;
    letter-spacing: 0.01em;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 20, 58, 0.55);
    pointer-events: none;
  }

  @media (min-width: 64rem) {
    .hero-banner-headline {
      font-size: 40px;
      line-height: 1.25;
    }
  }

  .hero-banner-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 6);
  }

  @media (min-width: 48rem) {
    .hero-banner-content {
      flex-direction: row;
      padding-inline: calc(var(--spacing) * 6);
    }
  }

  .hero-banner-main {
    display: flex;
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 6);
    overflow: hidden;
  }

  @media (min-width: 48rem) {
    .hero-banner-main {
      width: auto;
    }
  }

  .hero-banner-icon {
    flex-shrink: 0;
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
    color: var(--color-white);
    opacity: 90%;
  }

  .hero-banner-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-widest);
    color: var(--color-white);
  }

  @media (min-width: 48rem) {
    .hero-banner-text {
      font-size: 22px;
    }
  }

  .hero-banner-arrow-btn {
    margin-left: calc(var(--spacing) * 6);
    flex-shrink: 0;
    color: var(--color-white);
  }

  .hero-banner-arrow {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
    font-weight: var(--font-weight-bold);
    opacity: 80%;
    transition-property: all;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: var(--default-transition-duration);
  }

  .hero-banner-card:hover .hero-banner-arrow {
    opacity: 100%;
    transform: translateX(0.25rem);
  }

  /* --------------------------------------------------------------------------
     News Section
     -------------------------------------------------------------------------- */
  .news-section {
    position: relative;
    z-index: 10;
    display: flex;
    height: 100vh;
    scroll-snap-align: start;
    flex-direction: column;
    justify-content: center;
    background-color: #eff5ff;
  }

  .news-wrap {
    width: 100%;
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding-inline: calc(var(--spacing) * 4);
  }

  @media (min-width: 40rem) {
    .news-wrap {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .news-wrap {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .news-wrap {
      max-width: 64rem;
      padding-inline: calc(var(--spacing) * 8);
    }
  }

  @media (min-width: 80rem) {
    .news-wrap {
      max-width: 80rem;
      padding-inline: calc(var(--spacing) * 12);
    }
  }

  @media (min-width: 96rem) {
    .news-wrap {
      max-width: 96rem;
    }
  }

  .news-tabs {
    position: relative;
    margin-bottom: calc(var(--spacing) * 16);
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 0.35rem;
    gap: calc(var(--spacing) * 12);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
  }

  @media (min-width: 48rem) {
    .news-tabs {
      gap: calc(var(--spacing) * 33);
    }
  }

  .news-tab-btn {
    position: relative;
    z-index: 1;
    padding-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
    font-weight: var(--font-weight-normal);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: var(--default-transition-duration);
    color: #6d6c6c;
  }

  @media (min-width: 48rem) {
    .news-tab-btn {
      font-size: 27px;
    }
  }

  .news-tab-btn:hover {
    color: var(--color-gray-800);
  }

  .news-tab-btn.is-active {
    font-weight: var(--font-weight-medium);
    color: #0051ae;
  }

  .news-tab-slider {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 3px;
    width: 0;
    background-color: #0051ae;
    opacity: 0;
    pointer-events: none;
    transition:
      transform 0.44s cubic-bezier(0.22, 1, 0.36, 1),
      width 0.44s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.24s ease;
  }

  .news-list {
    display: grid;
    min-height: 300px;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    column-gap: calc(var(--spacing) * 16);
  }

  @media (min-width: 48rem) {
    .news-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .news-item {
    display: flex;
    gap: calc(var(--spacing) * 6);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-color: #dbe0f0;
    padding-block: calc(var(--spacing) * 6);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: var(--default-transition-duration);
    transition-duration: 380ms;
  }

  @media (min-width: 64rem) {
    .news-item {
      padding-block: calc(var(--spacing) * 8.5);
    }
  }

  .news-item:hover {
    transform: translateY(-0.25rem);
  }

  .news-item-date {
    display: flex;
    height: 82px;
    width: 82px;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #e3ecff;
  }

  .news-item-day {
    font-size: 42px;
    line-height: 1;
    font-weight: var(--font-weight-bold);
    color: #005ebd;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: var(--default-transition-duration);
  }

  .news-item:hover .news-item-day {
    color: #005ebd;
  }

  .news-item-month {
    margin-top: calc(var(--spacing) * 1);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-wide);
    color: #005ebd;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: var(--default-transition-duration);
  }

  .news-item:hover .news-item-month {
    color: #005ebd;
  }

  .news-item-body {
    margin-top: 0;
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 82px;
    font-size: 23px;
  }

  .news-item-title {
    margin-bottom: 0;
    font-size: 1.25rem;
    line-height: var(--leading-relaxed);
    color: #666;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, transform;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: var(--default-transition-duration);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .news-item:hover .news-item-title {
    color: #005ebd;
  }

  @media (min-width: 64rem) {
    .news-item-title {
      transform-origin: left center;
    }

    .news-item:hover .news-item-title {
      transform: scale(1.035);
    }
  }

  .news-more-wrap {
    margin-top: calc(var(--spacing) * 26);
    display: flex;
    justify-content: center;
    text-align: center;
  }

  .news-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: var(--default-transition-duration);
    width: 188px;
    height: 56px;
    font-size: 20px;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.2em;
    background-color: #005ebd;
  }

  .news-more-btn:hover {
    background-color: #00479a;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  }

  /* --------------------------------------------------------------------------
     Industrial Layout Section
     -------------------------------------------------------------------------- */
  .ind-section {
    position: relative;
    display: flex;
    height: 100vh;
    scroll-snap-align: start;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background-color: #001a3a;
    --section-heading-space: clamp(2.1rem, 4.4vh, 3.3rem);
    --section-title-en-color: #ffffff;
    --section-title-cn-color: #f8fbff;
    --section-title-sub-color: #eef5ff;
  }

  .ind-parallax-bg {
    position: absolute;
    top: -12%;
    right: 0;
    bottom: -12%;
    left: 0;
    pointer-events: none;
  }

  .ind-bg-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
  }

  .ind-wrap {
    position: relative;
    z-index: 10;
    width: 100%;
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding-inline: calc(var(--spacing) * 4);
  }

  @media (min-width: 40rem) {
    .ind-wrap {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .ind-wrap {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .ind-wrap {
      max-width: 64rem;
      padding-inline: calc(var(--spacing) * 8);
    }
  }

  @media (min-width: 80rem) {
    .ind-wrap {
      max-width: 80rem;
      padding-inline: calc(var(--spacing) * 12);
    }
  }

  @media (min-width: 96rem) {
    .ind-wrap {
      max-width: 96rem;
    }
  }

  .ind-title-block,
  .sec-tech-title,
  .about-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--section-heading-space);
    text-align: center;
    translate: 0 calc(var(--spacing) * 10);
    opacity: 0%;
  }

  .ind-title-en,
  .sec-tech-en-title,
  .about-title-en {
    margin: 0;
    text-transform: uppercase;
    color: var(--section-title-en-color);
    font-size: clamp(2.16rem, 3.18vw, 3.48rem);
    font-weight: 500;
    letter-spacing: 0.045em;
    line-height: 1;
    font-family: var(--font-display-impact);
  }

  .ind-title-en {
    opacity: 0.3;
  }

  .ind-title-cn,
  .sec-tech-cn-title,
  .about-title-cn {
    position: relative;
    z-index: 1;
    margin: -0.92rem 0 0;
    font-size: clamp(2.08rem, 2.82vw, 2.98rem);
    line-height: 1.08;
    font-family: var(--font-body);
    font-weight: 900;
    font-variation-settings: "wght" 900;
    letter-spacing: 0.05em;
    color: var(--section-title-cn-color);
  }

  .ind-subtitle-wrap {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fcfafa;
  }

  .ind-subtitle-line {
    height: 1px;
    width: calc(var(--spacing) * 44);
    background-color: rgba(255, 255, 255, 0.7);
  }

  .ind-subtitle {
    margin-top: calc(var(--spacing) * 2);
    font-size: clamp(1.08rem, 1.7vw, 1.72rem);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.03em;
    line-height: 1.3;
    color: var(--section-title-sub-color);
  }

  .ind-content {
    margin-bottom: calc(var(--spacing) * 8);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    align-items: center;
    gap: calc(var(--spacing) * 8);
  }

  @media (min-width: 48rem) {
    .ind-content {
      margin-bottom: calc(var(--spacing) * 10);
    }
  }

  @media (min-width: 64rem) {
    .ind-content {
      grid-template-columns: 1.1fr 1fr;
      gap: calc(var(--spacing) * 10);
    }
  }

  .ind-main-image-wrap {
    position: relative;
    margin-inline: auto;
    width: 100%;
    max-width: 720px;
    overflow: hidden;
    height: 230px;
    isolation: isolate;
  }

  .ind-main-image-wrap.is-switching-a,
  .ind-main-image-wrap.is-switching-b {
    animation-duration: 0.52s;
    animation-timing-function: cubic-bezier(0.22, 0.88, 0.34, 1);
    animation-fill-mode: both;
  }

  .ind-main-image-wrap.is-switching-a {
    animation-name: industryVisualStageA;
  }

  .ind-main-image-wrap.is-switching-b {
    animation-name: industryVisualStageB;
  }

  @media (min-width: 64rem) {
    .ind-main-image-wrap {
      margin-inline: calc(var(--spacing) * 0);
    }
  }

  .ind-main-canvas,
  .ind-main-image-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    will-change: opacity, filter;
  }

  .ind-main-image-wrap.is-switching-a .ind-main-canvas,
  .ind-main-image-wrap.is-switching-a .ind-main-image-placeholder,
  .ind-main-image-wrap.is-switching-b .ind-main-canvas,
  .ind-main-image-wrap.is-switching-b .ind-main-image-placeholder {
    animation-duration: 0.92s;
    animation-timing-function: cubic-bezier(0.22, 0.88, 0.34, 1);
    animation-fill-mode: both;
  }

  .ind-main-image-wrap.is-switching-a .ind-main-canvas,
  .ind-main-image-wrap.is-switching-a .ind-main-image-placeholder {
    animation-name: industryVisualEnterA;
  }

  .ind-main-image-wrap.is-switching-b .ind-main-canvas,
  .ind-main-image-wrap.is-switching-b .ind-main-image-placeholder {
    animation-name: industryVisualEnterB;
  }

  .ind-main-canvas {
    z-index: 1;
  }

  .ind-main-image-placeholder {
    z-index: 1;
  }

  .ind-main-image {
    position: absolute;
    inset: calc(var(--spacing) * 0);
    height: 100%;
    width: 100%;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.45));
  }

  .ind-main-image.is-contain {
    object-fit: contain;
  }

  .ind-main-image.is-cover {
    object-fit: cover;
  }

  .ind-points {
    font-size: 13px;
    line-height: 1.95;
    letter-spacing: 0.01em;
    color: #fcfafa;
    will-change: transform, opacity;
  }

  .ind-points.is-switching-a,
  .ind-points.is-switching-b {
    animation-duration: 0.48s;
    animation-timing-function: cubic-bezier(0.22, 0.88, 0.34, 1);
    animation-fill-mode: both;
  }

  .ind-points.is-switching-a {
    animation-name: industryPointsStageA;
  }

  .ind-points.is-switching-b {
    animation-name: industryPointsStageB;
  }

  .ind-point {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
  }

  .ind-points.is-switching-a .ind-point,
  .ind-points.is-switching-b .ind-point {
    animation-duration: 0.72s;
    animation-timing-function: cubic-bezier(0.22, 0.88, 0.34, 1);
    animation-fill-mode: both;
    animation-delay: calc(var(--ind-point-index, 0) * 0.16s + 0.12s);
  }

  .ind-points.is-switching-a .ind-point {
    animation-name: industryPointEnterA;
  }

  .ind-points.is-switching-b .ind-point {
    animation-name: industryPointEnterB;
  }

  .ind-points> :not(:last-child) {
    margin-block-start: 0;
    margin-block-end: calc(var(--spacing) * 2);
  }

  @media (min-width: 48rem) {
    .ind-points {
      font-size: 19px;
    }

    .ind-points> :not(:last-child) {
      margin-block-start: 0;
      margin-block-end: calc(var(--spacing) * 4);
    }
  }

  .ind-point-title {
    margin-right: calc(var(--spacing) * 1);
    font-weight: var(--font-weight-bold);
  }

  .ind-point-phone {
    display: block;
    margin-top: calc(var(--spacing) * 0.5);
    font-weight: var(--font-weight-bold);
  }

  @media (min-width: 48rem) {
    .ind-point {
      text-align: justify;
      text-justify: inter-ideograph;
    }
  }

  .ind-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 3);
  }

  @media (min-width: 48rem) {
    .ind-cards {
      gap: calc(var(--spacing) * 5);
    }
  }

  @media (min-width: 64rem) {
    .ind-cards {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

  .sec-ind-card {
    position: relative;
    overflow: hidden;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.92);
    background-color: rgba(0, 0, 0, 0.2);
    text-align: left;
    height: 78px;
    transition: border-color 0.3s ease,
      box-shadow 0.3s ease,
      opacity 0.3s ease,
      transform 0.32s cubic-bezier(0.22, 0.88, 0.34, 1),
      background-color 0.3s ease;
    transform: scale(1);
    transform-origin: 50% 50%;
  }

  .sec-ind-card.is-active {
    border-color: #ffffff;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.78),
      0 14px 28px rgba(0, 0, 0, 0.22);
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.08);
    transform: scale(1.045);
  }

  .sec-ind-card.is-inactive {
    border-color: rgba(255, 255, 255, 0.8);
    opacity: 0.82;
    background-color: rgba(0, 0, 0, 0.26);
  }

  .sec-ind-card.is-inactive:hover {
    opacity: 1;
  }

  .ind-card-thumb {
    position: absolute;
    inset: calc(var(--spacing) * 0);
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: var(--default-transition-duration);
    transition-duration: 820ms;
    filter: brightness(0.82) saturate(0.88);
  }

  .sec-ind-card:hover .ind-card-thumb {
    transform: scale(1.05);
  }

  .sec-ind-card.is-active .ind-card-thumb {
    transform: scale(1.045);
    filter: brightness(1.06) saturate(1.04);
  }

  .ind-card-overlay {
    position: absolute;
    inset: calc(var(--spacing) * 0);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: var(--default-transition-duration);
    transition-duration: 380ms;
  }

  .ind-card-overlay.is-energy-active {
    background: linear-gradient(90deg, rgba(10, 59, 115, 0.54), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.34));
  }

  .ind-card-overlay.is-energy-inactive {
    background: linear-gradient(90deg, rgba(10, 59, 115, 0.68), rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.68));
  }

  .ind-card-overlay.is-default-active {
    background: rgba(0, 0, 0, 0.18);
  }

  .ind-card-overlay.is-default-inactive {
    background: rgba(0, 0, 0, 0.56);
  }

  .ind-card-label {
    position: relative;
    z-index: 10;
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-inline: calc(var(--spacing) * 2);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #ffffff;
    text-rendering: geometricPrecision;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  }

  @media (min-width: 48rem) {
    .ind-card-label {
      padding-inline: calc(var(--spacing) * 3);
      font-size: clamp(15px, 1.3vw, 20px);
    }
  }

  .ind-card-label.is-active {
    color: #ffffff;
    font-weight: var(--font-weight-bold);
    text-shadow:
      1px 0 0 #005b04,
      -1px 0 0 #005b04,
      0 1px 0 #005b04,
      0 -1px 0 #005b04,
      1px 1px 0 #005b04,
      -1px 1px 0 #005b04,
      1px -1px 0 #005b04,
      -1px -1px 0 #005b04,
      0 1px 2px rgba(0, 0, 0, 0.36);
  }

  .ind-card-label.is-inactive {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  }

  /* --------------------------------------------------------------------------
     About Section
     -------------------------------------------------------------------------- */
  .about-section {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    flex: 1 0 auto;
    background-color: #f2f3f6;
    padding: 5.5rem 0 5rem;
    min-height: 100vh;
    min-height: 100dvh;
    --section-heading-space: clamp(2.1rem, 4.4vh, 3.3rem);
    --section-title-en-color: #e0e3e9;
    --section-title-cn-color: #2a2d33;
    --section-title-sub-color: #0051ae;
  }

  @media (min-width: 64rem) {
    .about-section {
      padding: 7.2rem 0 6.1rem;
    }
  }

  .about-bg-shape {
    position: absolute;
    right: -4%;
    top: 6%;
    width: 40%;
    height: 82%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.66) 0%, rgba(238, 241, 248, 0.3) 100%);
    transform: skewX(-12deg);
    pointer-events: none;
  }

  .about-wrap {
    width: 100%;
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding-inline: calc(var(--spacing) * 4);
  }

  @media (min-width: 40rem) {
    .about-wrap {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .about-wrap {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .about-wrap {
      max-width: 64rem;
      padding-inline: calc(var(--spacing) * 8);
    }
  }

  @media (min-width: 80rem) {
    .about-wrap {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .about-wrap {
      max-width: 96rem;
    }
  }

  .about-title {
    margin-bottom: 7rem;
  }

  .about-title-slogan {
    margin-top: calc(var(--spacing) * 16);
    font-size: 24px;
    line-height: 1.3;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.03em;
    color: var(--section-title-sub-color);
  }

  .about-main {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 2.2rem 3.2rem;
    align-items: start;
  }

  .about-stats-panel {
    width: 100%;
  }

  .about-stats-line {
    display: block;
    width: 100%;
    height: 1px;
    background: #cfd4de;
    margin-bottom: 1.45rem;
  }

  .about-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
  }

  .about-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.72rem;
    text-align: center;
    min-width: 0;
  }

  .about-stat-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.8rem;
    height: 3.8rem;
    margin-bottom: 0;
  }

  .about-stat-icon-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .about-stat-num {
    margin: 0;
    font-family: var(--font-display-impact);
    font-size: clamp(2.15rem, 2.85vw, 3.05rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: #0051ae;
  }

  .about-stat-text {
    margin-top: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: #636162;
    white-space: nowrap;
  }

  @media (min-width: 64rem) {
    .about-stat {
      gap: 1.2rem;
    }
  }

  .about-text {
    max-width: 45.5rem;
    margin-left: auto;
    translate: 0 calc(var(--spacing) * 10);
    opacity: 0%;
  }

  .about-desc {
    margin: 0;
    text-align: justify;
    font-size: 1.4rem;
    line-height: 2.2;
    letter-spacing: 0.04em;
    color: #636162;
  }

  @media (min-width: 80rem) {
    .about-desc {
      position: relative;
      top: -1rem;
      margin-bottom: -0.24rem;
    }
  }

  .about-detail-wrap {
    margin-top: 1.6rem;
    display: flex;
    justify-content: flex-end;
  }

  .about-detail-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 11.3rem;
    min-height: 2.9rem;
    border: 1px solid #d4dae5;
    background: rgba(255, 255, 255, 0.5);
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    color: #7c8087;
    transition: border-color 0.24s ease, color 0.24s ease, background-color 0.24s ease;
  }

  .about-detail-link:hover {
    border-color: #8fb2e4;
    color: #0051ae;
    background: rgba(255, 255, 255, 0.84);
  }

  @media (max-width: 79.999rem) {
    .about-main {
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    .about-text {
      margin-left: 0;
      max-width: 100%;
    }

    .about-stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.2rem 0.9rem;
    }

    .about-stat-text {
      white-space: normal;
    }

  }

  @media (max-width: 63.999rem) {

    /* Mobile: shell scrolling behavior */
    .page-root {
      scroll-snap-type: none;
      scroll-behavior: auto;
    }

    .page-bottom-wrap {
      min-height: auto;
      scroll-snap-align: none;
      scroll-snap-stop: normal;
    }

    /* Mobile: Hero layout + animation */
    .hero-section {
      height: 100vh;
      min-height: 100vh;
      min-height: 100svh;
    }

    .hero-main-title-wrap {
      width: min(calc(100% - 2rem), 21rem);
      top: 44%;
    }

    .hero-main-title {
      font-size: clamp(1.4rem, 7vw, 1.85rem);
      line-height: 1.36;
      letter-spacing: 0.01em;
    }

    .hero-carousel-controls {
      inset: auto 0 calc(8rem + env(safe-area-inset-bottom) + 0.75rem) 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
    }

    .hero-carousel-arrow {
      position: static;
      height: 2.5rem;
      width: 2.5rem;
      transform: none;
    }

    .hero-carousel-arrow:hover {
      transform: scale(1.04);
    }

    .hero-carousel-dots {
      position: static;
      max-width: calc(100vw - 8rem);
      gap: 0.4rem;
      padding: 0.55rem 0.75rem;
      transform: none;
    }

    .hero-carousel-dot {
      height: 0.55rem;
      width: 0.55rem;
    }

    .hero-carousel-dot.is-active {
      width: 1.4rem;
    }

    .hero-banner-wrap.hero-banner {
      width: 100%;
      height: 8rem;
    }

    .hero-banner-container {
      max-width: none;
      height: 100%;
      padding-inline: 0;
    }

    .hero-banner-card,
    .hero-banner-image,
    .hero-banner-reveal {
      width: 100%;
      height: 100%;
    }

    .hero-banner-card {
      aspect-ratio: auto;
    }

    .hero-banner-headline {
      width: calc(100% - 1rem);
      font-size: 1rem;
      line-height: 1.35;
    }

    .hero-section.is-mobile-animated .hero-carousel-slide.is-active .hero-carousel-media {
      animation: mobileHeroBgDrift 14s ease-in-out 0s infinite alternate;
    }

    /* Mobile: tap feedback */
    .news-item,
    .sec-ind-card,
    .sec-tech-card,
    .about-detail-link {
      transition: transform 0.24s ease, box-shadow 0.24s ease, opacity 0.24s ease;
    }

    .news-item:active {
      transform: translateY(-0.08rem) scale(0.997);
    }

    .sec-ind-card:active,
    .sec-tech-card:active {
      transform: translateY(-0.05rem) scale(0.99);
    }

    .about-detail-link:active {
      transform: translateY(-0.06rem);
    }

    /* Mobile: section spacing */
    .news-section,
    .ind-section {
      height: auto;
      min-height: auto;
    }

    .news-section,
    .ind-section {
      justify-content: flex-start;
      padding: 2rem 0 1.85rem;
    }

    .ind-section {
      overflow: hidden;
    }

    /* Mobile: content wrappers */
    .news-wrap,
    .ind-wrap,
    .sec-tech-wrap,
    .about-wrap {
      padding-inline: 1rem;
    }

    /* Mobile: News section */
    .news-tabs {
      width: 100%;
      justify-content: space-between;
      gap: 0.2rem;
      margin-bottom: 1.15rem;
      padding-inline: 0.15rem;
    }

    .news-tab-btn {
      font-size: 1.25rem;
      padding-bottom: 0.72rem;
      white-space: nowrap;
    }

    .news-list {
      min-height: auto;
      row-gap: 0;
    }

    .news-item {
      gap: 0.75rem;
      padding-block: 0.9rem;
    }

    .news-item-date {
      width: 64px;
      height: 64px;
    }

    .news-item-day {
      font-size: 30px;
    }

    .news-item-month {
      margin-top: 0.15rem;
      font-size: 12px;
    }

    .news-item-body {
      min-height: 64px;
      font-size: 1rem;
    }

    .news-item-title {
      font-size: 1rem;
      line-height: 1.5;
      -webkit-line-clamp: 2;
    }

    .news-more-wrap {
      margin-top: 0.95rem;
    }

    .news-more-btn {
      width: 8.75rem;
      height: 2.8rem;
      font-size: 1rem;
      letter-spacing: 0.08em;
    }

    /* Mobile: Industrial layout section */
    .ind-title-block,
    .sec-tech-title,
    .about-title {
      margin-bottom: 1.2rem;
    }

    .ind-title-en,
    .sec-tech-en-title,
    .about-title-en {
      font-size: 1.82rem;
      letter-spacing: 0.04em;
    }

    .ind-title-cn,
    .sec-tech-cn-title,
    .about-title-cn {
      margin-top: -0.5rem;
      font-size: 1.68rem;
      letter-spacing: 0.04em;
    }

    .ind-subtitle {
      font-size: 1rem;
      line-height: 1.45;
    }

    .ind-content {
      gap: 1rem;
      margin-bottom: 0.75rem;
    }

    .ind-main-image-wrap {
      height: clamp(12rem, 52vw, 16rem);
    }

    .ind-points {
      font-size: 0.94rem;
      line-height: 1.75;
      min-height: 18rem;
    }

    .ind-cards {
      gap: 0.55rem;
    }

    .sec-ind-card {
      height: 4.6rem;
    }

    .ind-card-label {
      font-size: 0.93rem;
      line-height: 1.3;
      letter-spacing: 0;
    }

    .ind-card-label.is-active {
      text-shadow:
        0.72px 0 0 #005b04,
        -0.72px 0 0 #005b04,
        0 0.72px 0 #005b04,
        0 -0.72px 0 #005b04,
        0.72px 0.72px 0 #005b04,
        -0.72px 0.72px 0 #005b04,
        0.72px -0.72px 0 #005b04,
        -0.72px -0.72px 0 #005b04,
        0 1px 2px rgba(0, 0, 0, 0.34);
    }

    /* Mobile: About section */
    .about-section {
      padding: 3.35rem 0 2.2rem;
      min-height: auto;
    }

    .about-bg-shape {
      display: none;
    }

    .about-title-slogan {
      margin-top: 1.25rem;
      font-size: 1rem;
      line-height: 1.45;
    }

    .about-main {
      gap: 1.1rem;
    }

    .about-stats-line {
      margin-bottom: 0.9rem;
    }

    .about-stat-icon-wrap {
      width: 3.2rem;
      height: 3.2rem;
    }

    .about-stat {
      gap: 0.62rem;
    }

    .about-stat-num {
      font-size: 2.15rem;
    }

    .about-stat-text {
      font-size: 0.88rem;
      line-height: 1.45;
    }

    .about-desc {
      font-size: 0.98rem;
      line-height: 1.85;
      letter-spacing: 0.03em;
    }

    .about-detail-wrap {
      justify-content: center;
      margin-top: 0.9rem;
    }

    .about-detail-link {
      width: 10rem;
      min-height: 2.7rem;
      font-size: 0.92rem;
    }

    /* Mobile: Footer section */

    /* Mobile: utility buttons */
  }

  @media (max-width: 47.999rem) {

    /* Mobile (small): typography and compact spacing */
    .news-tab-btn {
      font-size: 1.25rem;
    }

    .news-item-day {
      font-size: 28px;
    }

    .news-item-body {
      font-size: 0.95rem;
    }

    .news-item-title {
      font-size: 1rem;
    }

    .sec-ind-card {
      height: 4.25rem;
    }

    .ind-card-label {
      font-size: 0.88rem;
    }

    .about-stat-text {
      font-size: 0.84rem;
    }

    .about-desc {
      font-size: 0.94rem;
      letter-spacing: 0.02em;
    }

  }

  @media (min-width: 640px) {

    /* Tablet breakpoint: industrial main image */
    .ind-main-image-wrap {
      height: 300px;
    }
  }

  @media (min-width: 768px) {

    /* Desktop-small breakpoint: industrial main image */
    .ind-main-image-wrap {
      height: 390px;
    }
  }

  @media (min-width: 1024px) {

    /* Desktop breakpoint: industrial cards */
    .sec-ind-card {
      height: 128px;
    }
  }
}

/* --------------------------------------------------------------------------
   Shared Animations
   -------------------------------------------------------------------------- */
@keyframes shine {
  0% {
    left: -100%;
  }

  100% {
    left: 140%;
  }
}

/* --------------------------------------------------------------------------
   Tech Innovation Section (isolated module)
   -------------------------------------------------------------------------- */
@layer components {
  .sec-tech-section {
    display: flex;
    height: 100vh;
    scroll-snap-align: start;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    box-sizing: border-box;
    padding-top: clamp(3.5rem, 7vh, 5.75rem);
    background: linear-gradient(0deg, #FFF 0%, #0051AE 100%);
    --section-heading-space: clamp(2.1rem, 4.4vh, 3.3rem);
    --section-title-en-color: #e0e3e9;
    --section-title-cn-color: #2a2d33;
    --tech-card-expand-duration: 2s;
    --tech-card-expand-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --tech-card-brand-delay: 0.42s;
    --tech-card-title-delay: 0.42s;
    --tech-card-desc-delay: 0.5s;
    --tech-card-link-delay: 0.58s;
  }

  .sec-tech-wrap {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    margin-inline: auto;
    max-width: var(--container-7xl);
    padding-inline: calc(var(--spacing) * 4);
  }

  .sec-tech-section .sec-tech-title {
    margin-bottom: 0;
  }

  .sec-tech-section .sec-tech-en-title {
    color: #fff;
    opacity: 0.2;
  }

  .sec-tech-section .sec-tech-cn-title {
    color: #fff;
  }

  @media (min-width: 40rem) {
    .sec-tech-wrap {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .sec-tech-wrap {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .sec-tech-wrap {
      max-width: 64rem;
      padding-inline: calc(var(--spacing) * 8);
    }
  }

  @media (min-width: 80rem) {
    .sec-tech-wrap {
      max-width: 80rem;
      padding-inline: calc(var(--spacing) * 12);
    }
  }

  @media (min-width: 96rem) {
    .sec-tech-wrap {
      max-width: 96rem;
    }
  }

  .sec-tech-cards {
    display: flex;
    gap: 0.23rem;
    height: min(70vh, 48rem);
    width: 100%;
    margin-top: auto;
    margin-bottom: 4%;
  }

  .sec-tech-card {
    position: relative;
    height: 100%;
    min-width: calc(var(--spacing) * 0);
    cursor: pointer;
    overflow: hidden;
    flex: 0.44 1 0;
    /* border: 1px solid rgba(255, 255, 255, 0.78); */
    border-radius: 0;
    background: #d8d8d8;
    box-shadow: 0 14px 34px -18px rgba(17, 27, 55, 0.36);
    opacity: 0;
    transform: translateY(72px);
    will-change: transform, box-shadow, flex;
    transition: flex var(--tech-card-expand-duration) var(--tech-card-expand-ease), box-shadow 0.46s ease;
  }

  .sec-tech-card.is-active {
    flex: 2.95 1 0;
    box-shadow: 0 24px 48px -20px rgba(17, 27, 55, 0.46);
  }

  @media (min-width: 1024px) {
    .sec-tech-section.is-tech-intro {
      --tech-card-expand-duration: 5s;
      --tech-card-expand-ease: cubic-bezier(0.2, 0.1, 0.16, 1);
      --tech-card-brand-delay: 0.42s;
      --tech-card-title-delay: 0.42s;
      --tech-card-desc-delay: 0.5s;
      --tech-card-link-delay: 0.58s;
    }

    .sec-tech-section.is-tech-intro .sec-tech-card {
      flex: 0 0 calc((100% - (0.23rem * 3)) * 44 / 427);
    }

    .sec-tech-section.is-tech-intro .sec-tech-card.is-active {
      flex: 2.95 1 0;
    }
  }

  .sec-tech-card.is-inactive {
    box-shadow: 0 10px 26px -18px rgba(17, 27, 55, 0.32);
  }

  .sec-tech-card-image {
    position: absolute;
    inset: calc(var(--spacing) * 0);
    height: 100%;
    width: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform 0.86s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .sec-tech-card-mask {
    position: absolute;
    inset: calc(var(--spacing) * 0);
    background: rgba(0, 0, 0, 0.55);
    opacity: 0.92;
    transition: opacity 0.42s ease, background 0.42s ease;
  }

  .sec-tech-card.is-active .sec-tech-card-mask {
    opacity: 1;
    background: rgba(0, 0, 0, 0.2);
  }

  .sec-tech-card:hover .sec-tech-card-mask {
    opacity: 0.96;
  }

  .sec-tech-card-collapsed-title {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 1.2rem;
    text-align: center;
    color: #ffffff;
    text-shadow: 0 8px 18px rgba(4, 15, 42, 0.34);
    transition: opacity 0.34s ease, transform 0.34s ease;
    pointer-events: none;
  }

  .sec-tech-card-logo {
    display: block;
    flex: 0 0 auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(3, 10, 30, 0.26));
  }

  .sec-tech-card-logo-collapsed {
    width: 3.7rem;
    height: 3.7rem;
  }

  .sec-tech-card-collapsed-title>span:not(.sec-tech-card-collapsed-link) {
    display: block;
    font-size: 1rem;
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: 0.08em;
  }

  .sec-tech-card-collapsed-title .sec-tech-card-collapsed-link {
    display: none;
  }

  .sec-tech-card.is-content-visible .sec-tech-card-collapsed-title {
    opacity: 0;
    transform: translateY(10px);
  }

  .sec-tech-card-content {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    /* justify-content: center; */
    gap: 1.3rem;
    padding: 3.15rem 3rem 3.15rem 2.9rem;
    color: #fff;
    pointer-events: none;
  }

  .sec-tech-card-content-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: fit-content;
    max-width: 100%;
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity 0.34s ease,
      transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
  }

  .sec-tech-card-logo-content {
    width: 4.5rem;
    height: 4.5rem;
    margin-top: 0.12rem;
  }

  .sec-tech-card-content-title {
    margin: 0;
    position: relative;
    padding-bottom: 1rem;
    font-size: clamp(2rem, 2vw, 2.5rem);
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #ffffff;
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity 0.34s ease,
      transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
  }

  .sec-tech-card-content-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 5.6rem;
    height: 2px;
    background: rgba(255, 255, 255, 0.82);
  }

  .sec-tech-card-content-desc {
    margin: 0;
    font-size: clamp(1rem, 0.94vw, 1.12rem);
    line-height: 2;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.92);
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity 0.34s ease,
      transform 0.56s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
  }

  .sec-tech-card-content-link {
    display: inline-flex;
    width: fit-content;
    min-width: 7.5rem;
    min-height: 2.9rem;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.78);
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity 0.34s ease,
      transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
      background-color 0.24s ease,
      border-color 0.24s ease;
    transition-delay: 0s, 0s, 0s, 0s;
  }

  .sec-tech-card.is-content-visible .sec-tech-card-content {
    pointer-events: auto;
  }

  .sec-tech-card.is-content-visible .sec-tech-card-content-title,
  .sec-tech-card.is-content-visible .sec-tech-card-content-desc,
  .sec-tech-card.is-content-visible .sec-tech-card-content-link {
    opacity: 1;
    transform: translateY(0);
  }

  .sec-tech-card.is-content-visible .sec-tech-card-content-brand {
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--tech-card-brand-delay);
  }

  .sec-tech-card.is-content-visible .sec-tech-card-content-title {
    transition-delay: var(--tech-card-title-delay);
  }

  .sec-tech-card.is-content-visible .sec-tech-card-content-desc {
    transition-delay: var(--tech-card-desc-delay);
  }

  .sec-tech-card.is-content-visible .sec-tech-card-content-link {
    transition-delay: var(--tech-card-link-delay), var(--tech-card-link-delay), 0s, 0s;
  }

  .sec-tech-card.is-active .sec-tech-card-image,
  .sec-tech-card:hover .sec-tech-card-image {
    transform: scale(1.06);
  }

  .sec-tech-card.is-active:hover .sec-tech-card-content-link,
  .sec-tech-card:focus-visible .sec-tech-card-content-link {
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
  }

  .sec-tech-card:focus-visible {
    outline: 2px solid #4f83f2;
    outline-offset: 2px;
  }

  @media (max-width: 1023px) {

    /* Mobile/Tablet: tech section responsive rules (merged in one place) */
    .sec-tech-section {
      height: auto;
      min-height: 100vh;
      min-height: 100svh;
      justify-content: flex-start;
      overflow: visible;
      padding: 0;
      background: #ffffff;
    }

    .sec-tech-wrap {
      flex: 0 0 auto;
      min-height: clamp(8.5rem, 25vw, 11rem);
      justify-content: center;
      box-sizing: border-box;
      padding-top: 0;
    }

    .sec-tech-section .sec-tech-title {
      translate: 0 0;
      margin-bottom: 0;
    }

    .sec-tech-section .sec-tech-en-title {
      color: #d9dee7;
      opacity: 1;
    }

    .sec-tech-section .sec-tech-cn-title {
      color: #1f2f45;
    }

    .sec-tech-cards {
      display: grid;
      height: auto;
      gap: 0.23rem;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-top: 0;
      margin-bottom: 0;
    }

    .sec-tech-card,
    .sec-tech-card.is-active {
      flex: initial;
      min-height: 13rem;
      border-radius: 0;
    }

    .sec-tech-card-collapsed-title {
      justify-content: flex-start;
      gap: 1.125rem;
      padding: 3.75rem 1rem 0;
      transform: none;
      text-shadow: 0 6px 14px rgba(4, 15, 42, 0.28);
    }

    .sec-tech-card-collapsed-title>span:not(.sec-tech-card-collapsed-link) {
      font-size: 1.125rem;
      line-height: normal;
      font-weight: 400;
      letter-spacing: 0;
    }

    .sec-tech-card-collapsed-title .sec-tech-card-collapsed-link {
      display: none;
      min-width: 6.8rem;
      min-height: 2.35rem;
      align-items: center;
      justify-content: center;
      padding: 0.38rem 1rem;
      border: 1px solid rgba(255, 255, 255, 0.76);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.14);
      font-size: 0.88rem;
      line-height: 1;
      letter-spacing: 0.08em;
      color: #ffffff;
      box-shadow: 0 10px 24px -14px rgba(6, 22, 66, 0.56);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    .sec-tech-card-content {
      display: none;
    }

    .sec-tech-card-mask,
    .sec-tech-card.is-active .sec-tech-card-mask,
    .sec-tech-card:hover .sec-tech-card-mask {
      opacity: 0.6;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000719 100%);
    }

    .sec-tech-card-content-title,
    .sec-tech-card-content-desc,
    .sec-tech-card-content-link {
      transform: translateY(16px);
    }

    .sec-tech-card-content-title {
      padding-bottom: 0.7rem;
      font-size: 1.25rem;
    }

    .sec-tech-card-content-title::after {
      width: 3.6rem;
    }

    .sec-tech-card-content-desc {
      font-size: 0.9rem;
      line-height: 1.75;
    }

    .sec-tech-card-content-link {
      min-width: 6.2rem;
      min-height: 2.3rem;
      padding: 0.35rem 0.9rem;
      font-size: 0.9rem;
    }

    .sec-tech-card.is-active .sec-tech-card-content-title {
      transition-delay: 0.24s;
    }

    .sec-tech-card.is-active .sec-tech-card-content-desc {
      transition-delay: 0.3s;
    }

    .sec-tech-card.is-active .sec-tech-card-content-link {
      transition-delay: 0.36s, 0.36s, 0s, 0s;
    }

    .sec-tech-card.is-active .sec-tech-card-collapsed-title {
      opacity: 1;
      transform: none;
    }

    .sec-tech-card.is-active .sec-tech-card-image {
      transform: scale(1.02);
    }

    .sec-tech-card-logo-collapsed {
      width: 3rem;
      height: 3rem;
    }
  }

  @media (max-width: 639px) {

    /* Mobile-small: one-column cards */
    .sec-tech-cards {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .sec-tech-card,
    .sec-tech-card.is-active {
      min-height: 12rem;
    }

    .ind-points {
      min-height: 19rem;
    }

    .sec-tech-card-collapsed-title {
      gap: 1.125rem;
      padding: 3.75rem 1rem 0;
    }

    .sec-tech-card-logo-collapsed {
      width: 3rem;
      height: 3rem;
    }

    .sec-tech-card-collapsed-title>span:not(.sec-tech-card-collapsed-link) {
      font-size: 1.125rem;
    }

    .sec-tech-card-collapsed-title .sec-tech-card-collapsed-link {
      display: none;
    }
  }
}

@keyframes heroMainTitleImprint {
  0% {
    opacity: 0;
    transform: translate3d(0, -0.95em, 0) scale(1.045);
    filter: blur(5px);
    color: rgba(255, 255, 255, 0);
    -webkit-text-stroke: 1.4px rgba(210, 226, 255, 0.78);
    text-shadow: 0 14px 30px rgba(3, 21, 58, 0.24);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    color: #ffffff;
    -webkit-text-stroke: 0 rgba(194, 218, 255, 0);
    text-shadow:
      0 6px 18px rgba(3, 18, 52, 0.55),
      0 1px 1px rgba(6, 14, 33, 0.38);
  }
}

@media (prefers-reduced-motion: reduce) {

  .hero-carousel-slide,
  .hero-carousel-arrow,
  .hero-carousel-dot {
    transition: none;
  }

  .hero-main-title {
    color: #ffffff;
    text-shadow:
      0 6px 18px rgba(3, 18, 52, 0.55),
      0 1px 1px rgba(6, 14, 33, 0.38);
  }

  .hero-main-title-char {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
    color: #ffffff;
    -webkit-text-stroke: 0 rgba(255, 255, 255, 0);
  }
}

@keyframes mobileHeroBgDrift {
  0% {
    transform: scale(1.05) translate3d(0, 0, 0);
  }

  100% {
    transform: scale(1.1) translate3d(0, -0.9%, 0);
  }
}

@keyframes newsTabEnter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes newsItemEnter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.news-tab-enter {
  animation: newsTabEnter 0.3s ease-out both;
}

.news-tab-enter .news-item {
  animation: newsItemEnter 0.36s ease-out both;
  will-change: opacity;
}

.news-tab-enter .news-item:nth-child(1) {
  animation-delay: 0.02s;
}

.news-tab-enter .news-item:nth-child(2) {
  animation-delay: 0.05s;
}

.news-tab-enter .news-item:nth-child(3) {
  animation-delay: 0.08s;
}

.news-tab-enter .news-item:nth-child(4) {
  animation-delay: 0.11s;
}

.news-tab-enter .news-item:nth-child(5) {
  animation-delay: 0.14s;
}

.news-tab-enter .news-item:nth-child(6) {
  animation-delay: 0.17s;
}

@supports not (-webkit-line-clamp: 2) {
  .news-item-title {
    display: block;
    max-height: 2.9em;
    overflow: hidden;
  }
}

@supports not selector(:focus-visible) {
  .sec-tech-card:focus {
    outline: 2px solid #4f83f2;
    outline-offset: 2px;
  }
}

@keyframes industryVisualStageA {
  0% {
    opacity: 0.52;
    clip-path: inset(3.5% 3% 3.5% 3% round 14px);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 0);
  }
}

@keyframes industryVisualStageB {
  0% {
    opacity: 0.52;
    clip-path: inset(3.5% 3% 3.5% 3% round 14px);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 0);
  }
}

@keyframes industryVisualEnterA {
  0% {
    opacity: 0;
    filter: brightness(0.86) saturate(0.84);
  }

  100% {
    opacity: 1;
    filter: brightness(1) saturate(1);
  }
}

@keyframes industryVisualEnterB {
  0% {
    opacity: 0;
    filter: brightness(0.86) saturate(0.84);
  }

  100% {
    opacity: 1;
    filter: brightness(1) saturate(1);
  }
}

@keyframes industryPointsStageA {
  0% {
    opacity: 0.46;
    transform: translate3d(0, 1rem, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes industryPointsStageB {
  0% {
    opacity: 0.46;
    transform: translate3d(0, 1rem, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes industryPointEnterA {
  0% {
    opacity: 0;
    transform: translate3d(0, 1.15rem, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes industryPointEnterB {
  0% {
    opacity: 0;
    transform: translate3d(0, 1.15rem, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}