/*
  Responsive rules for the static foundation.
  Desktop styles live in style.css; this file only narrows layouts at the requested breakpoints.
*/

.mobile-bottom-nav {
  display: none;
}

/* News mobile final reference layout override: categories counts, news sort tabs, vertical hot cards, and tighter CTA. */
@media (max-width: 768px) {
  body[data-page="news"] .news-page {
    overflow-x: hidden !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 58%, #ffffff 100%) !important;
  }

  body[data-page="news"] .news-banner {
    min-height: 258px !important;
    margin: 0 12px 12px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 16px 34px rgba(0, 20, 52, 0.16) !important;
  }

  body[data-page="news"] .news-banner::before {
    background-image:
      linear-gradient(90deg, rgba(0, 18, 48, 0.92) 0%, rgba(0, 43, 102, 0.72) 52%, rgba(0, 43, 102, 0.12) 100%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png")) !important;
    background-position: right center !important;
    background-size: cover !important;
  }

  body[data-page="news"] .news-banner__inner {
    position: relative;
    display: grid;
    align-content: end;
    min-height: 258px;
    padding: 28px 18px 24px !important;
    padding-right: clamp(116px, 32vw, 180px) !important;
  }

  body[data-page="news"] .news-banner h1 {
    margin: 0 0 8px !important;
    color: #fff !important;
    font-size: 30px !important;
    line-height: 1.08 !important;
    font-weight: 950 !important;
  }

  body[data-page="news"] .news-banner .news-hero-subtitle {
    max-width: 18em;
    margin: 0 0 8px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    font-weight: 700 !important;
  }

  body[data-page="news"] .news-banner .news-hero-desc {
    max-width: 20em;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  body[data-page="news"] .news-hero-media,
  body[data-page="news"] .news-banner .banner-search,
  body[data-page="news"] .news-breadcrumb {
    display: none !important;
  }

  body[data-page="news"] .news-mobile-categories {
    display: block !important;
    margin: 0 0 12px !important;
  }

  body[data-page="news"] .news-mobile-categories .container,
  body[data-page="news"] .news-list-section .container,
  body[data-page="news"] .news-mobile-hot .container,
  body[data-page="news"] .news-mobile-cta .container {
    width: calc(100% - 24px) !important;
    margin-inline: 12px !important;
    padding-inline: 0 !important;
  }

  body[data-page="news"] .news-mobile-categories__card {
    padding: 14px 12px 16px !important;
    border: 1px solid rgba(14, 39, 88, 0.08) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 10px 24px rgba(0, 43, 102, 0.06) !important;
  }

  body[data-page="news"] .news-mobile-categories__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }

  body[data-page="news"] .news-mobile-categories__title {
    margin: 0;
    color: var(--color-text);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 950;
  }

  body[data-page="news"] .news-mobile-categories__more {
    flex: 0 0 auto;
    color: var(--color-blue-700);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="news"] .news-mobile-categories__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px 6px;
  }

  body[data-page="news"] .news-mobile-categories__grid a {
    min-height: 92px;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 5px;
    padding: 8px 4px 9px;
    border: 1px solid rgba(14, 39, 88, 0.08);
    border-radius: 14px;
    background: #fff;
    color: #12469c;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 10px 24px rgba(0, 43, 102, 0.06);
    font-size: 10px;
    font-weight: 850;
    line-height: 1.1;
    overflow: hidden;
  }

  body[data-page="news"] .news-mobile-categories__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.10), rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(0, 70, 184, 0.10);
    box-shadow: 0 8px 18px rgba(0, 43, 102, 0.08);
    color: #1f5dcf;
  }

  body[data-page="news"] .news-mobile-categories__icon svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  body[data-page="news"] .news-mobile-categories__label {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 850;
  }

  body[data-page="news"] .news-mobile-categories__count {
    display: block;
    color: #6f7f94;
    font-size: 10px;
    line-height: 1.1;
    font-weight: 700;
  }

  body[data-page="news"] .news-mobile-categories__grid a.is-active {
    color: #fff;
    border-color: rgba(0, 70, 184, 0.18);
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.94), rgba(0, 43, 102, 0.94));
    box-shadow: 0 12px 24px rgba(0, 43, 102, 0.12);
  }

  body[data-page="news"] .news-mobile-categories__grid a.is-active .news-mobile-categories__icon {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
  }

  body[data-page="news"] .news-mobile-categories__grid a.is-active .news-mobile-categories__count {
    color: rgba(255, 255, 255, 0.92);
  }

  body[data-page="news"] .news-list-section {
    padding-block: 8px 18px !important;
  }

  body[data-page="news"] .news-main-card {
    padding: 0 !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 12px 28px rgba(0, 20, 52, 0.08) !important;
    overflow: hidden !important;
  }

  body[data-page="news"] .news-tabs {
    display: none !important;
  }

  body[data-page="news"] .news-mobile-tabs {
    display: block !important;
    padding: 10px 12px 0 !important;
    margin: 0 !important;
  }

  body[data-page="news"] .news-mobile-tabs__track {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    min-height: 46px;
    padding: 0 10px 6px;
    border-bottom: 1px solid rgba(14, 39, 88, 0.08);
  }

  body[data-page="news"] .news-mobile-tabs__track a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    color: rgba(16, 24, 40, 0.72);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="news"] .news-mobile-tabs__track a.is-active {
    color: var(--color-blue-700);
  }

  body[data-page="news"] .news-mobile-tabs__track a.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 28px;
    height: 3px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #2142ff, #5b8dff);
  }

  body[data-page="news"] .news-list {
    display: grid !important;
    gap: 12px !important;
    padding: 12px !important;
    margin: 0 !important;
  }

  body[data-page="news"] .news-list-item {
    display: grid !important;
    grid-template-columns: clamp(116px, 33%, 148px) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 10px !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 16px !important;
    background: var(--color-white) !important;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08) !important;
  }

  body[data-page="news"] .news-list-item img {
    width: 100% !important;
    height: 88px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    flex-shrink: 0;
  }

  body[data-page="news"] .news-list-item > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title tag"
      "desc desc"
      "meta meta" !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
    min-width: 0 !important;
    align-content: start !important;
  }

  body[data-page="news"] .news-tag {
    grid-area: tag;
    justify-self: end;
    align-self: start;
    width: fit-content;
    margin: 0 !important;
    min-height: 18px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    line-height: 18px !important;
  }

  body[data-page="news"] .news-list-item h2 {
    grid-area: title;
    margin: 0 !important;
    font-size: clamp(13px, 3.4vw, 15px) !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
  }

  body[data-page="news"] .news-list-item h2 a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--color-text);
  }

  body[data-page="news"] .news-list-item p {
    grid-area: desc;
    display: -webkit-box;
    margin: 0 !important;
    color: rgba(71, 84, 103, 0.88);
    font-size: clamp(10px, 2.75vw, 12px) !important;
    line-height: 1.5 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  body[data-page="news"] .news-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  body[data-page="news"] .news-meta span {
    white-space: nowrap;
  }

  body[data-page="news"] .news-meta span:nth-child(3),
  body[data-page="news"] .news-arrow {
    display: none !important;
  }

  body[data-page="news"] .news-mobile-loadmore {
    display: flex !important;
    justify-content: center;
    margin: 14px 12px 0;
  }

  body[data-page="news"] .news-mobile-loadmore .btn {
    width: 100%;
    height: 44px;
    border-radius: 14px;
    border-color: rgba(11, 91, 211, 0.38);
    color: var(--color-blue-700);
    background: rgba(255, 255, 255, 0.96);
  }

  body[data-page="news"] .news-sidebar,
  body[data-page="news"] .news-feature-section,
  body[data-page="news"] .news-subscribe,
  body[data-page="news"] .news-faq-strip,
  body[data-page="news"] .news-quote {
    display: none !important;
  }

  body[data-page="news"] .news-mobile-hot {
    display: block !important;
    padding-block: 18px 0 !important;
  }

  body[data-page="news"] .news-mobile-hot .section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  body[data-page="news"] .news-mobile-hot .section-head h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 950;
  }

  body[data-page="news"] .news-mobile-hot .section-more {
    color: var(--color-blue-700);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="news"] .news-hot-rail {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  body[data-page="news"] .news-hot-card {
    display: grid !important;
    grid-template-columns: clamp(116px, 33%, 148px) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 16px !important;
    background: var(--color-white) !important;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08) !important;
    overflow: hidden !important;
  }

  body[data-page="news"] .news-hot-card img {
    width: 100% !important;
    height: 88px !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    flex-shrink: 0;
  }

  body[data-page="news"] .news-hot-card__body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title tag"
      "desc desc"
      "meta meta" !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
    min-width: 0 !important;
    padding: 0 !important;
    align-content: start !important;
  }

  body[data-page="news"] .news-hot-card .news-tag {
    grid-area: tag;
    justify-self: end;
    align-self: start;
    width: fit-content;
    margin: 0 !important;
    min-height: 18px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    line-height: 18px !important;
  }

  body[data-page="news"] .news-hot-card h3 {
    grid-area: title;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 900;
  }

  body[data-page="news"] .news-hot-card h3 a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--color-text);
  }

  body[data-page="news"] .news-hot-card__body p {
    grid-area: desc;
    display: -webkit-box;
    margin: 0 !important;
    color: rgba(71, 84, 103, 0.88);
    font-size: 11px !important;
    line-height: 1.5 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  body[data-page="news"] .news-hot-card .news-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  body[data-page="news"] .news-hot-card .news-meta span {
    white-space: nowrap;
  }

  body[data-page="news"] .news-mobile-cta {
    display: block !important;
    padding-block: 18px 24px !important;
  }

  body[data-page="news"] .news-cta-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(108px, 28vw, 136px);
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0a33a4 0%, #0b5bd3 55%, #0f49cf 100%);
    color: var(--color-white);
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22);
  }

  body[data-page="news"] .news-cta-card__copy h2 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.2;
    color: #fff;
  }

  body[data-page="news"] .news-cta-card__copy p {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.45;
    opacity: 0.92;
    color: rgba(255, 255, 255, 0.96);
  }

  body[data-page="news"] .news-cta-card .btn.btn-accent {
    height: 40px;
    padding-inline: 16px;
    border-radius: 12px;
    background: #ff7a1a;
    border-color: #ff7a1a;
    color: #fff;
  }

  body[data-page="news"] .news-cta-card__media {
    width: 100%;
    height: 120px;
    border-radius: 14px;
    overflow: hidden;
    opacity: 0.95;
  }

  body[data-page="news"] .news-cta-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Shared mobile width final override.
   This block must live at the real end of responsive.css so it wins over every earlier mobile width rule. */
@media (max-width: 768px) {
  body[data-page][data-page] main,
  body[data-page][data-page] section {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }

  body[data-page][data-page] .container,
  body[data-page][data-page] .container--wide {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  body[data-page][data-page] main > .container,
  body[data-page][data-page] main > .container--wide,
  body[data-page][data-page] section > .container,
  body[data-page][data-page] section > .container--wide {
    width: 100% !important;
    max-width: none !important;
  }

  body[data-page="support"] .support-mobile-assurance > .container,
  body[data-page="support"] .support-mobile-services > .container,
  body[data-page="support"] .support-mobile-faq > .container,
  body[data-page="support"] .support-mobile-download > .container,
  body[data-page="support"] .support-video-section > .container,
  body[data-page="support"] .support-mobile-cta > .container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}


/* Shared mobile width final override.
   This is the last mobile width layer so it wins over earlier page-specific spacing blocks. */
@media (max-width: 768px) {
  body[data-page][data-page] main,
  body[data-page][data-page] section {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }

  body[data-page][data-page] .container,
  body[data-page][data-page] .container--wide {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  body[data-page][data-page] main > .container,
  body[data-page][data-page] main > .container--wide,
  body[data-page][data-page] section > .container,
  body[data-page][data-page] section > .container--wide {
    width: 100% !important;
    max-width: none !important;
  }

  body[data-page="support"] .support-mobile-assurance > .container,
  body[data-page="support"] .support-mobile-services > .container,
  body[data-page="support"] .support-mobile-faq > .container,
  body[data-page="support"] .support-mobile-download > .container,
  body[data-page="support"] .support-video-section > .container,
  body[data-page="support"] .support-mobile-cta > .container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}

/* Shared mobile shell final fix.
   Keep the public header, footer, and bottom nav full-bleed on phones without touching page bodies. */
@media (max-width: 768px) {
  body[data-page] .site-header,
  body[data-page] .site-footer,
  body[data-page] .mobile-bottom-nav--main {
    width: 100vw !important;
    max-width: none !important;
  }

  body[data-page] .site-header,
  body[data-page] .site-footer {
    display: block !important;
    margin-inline: 0 !important;
  }

  body[data-page] .site-header .container,
  body[data-page] .site-footer .container {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 16px !important;
    box-sizing: border-box !important;
  }

  body[data-page] .site-header .navbar,
  body[data-page] .site-header .navbar__inner {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body[data-page] .site-footer .footer-main,
  body[data-page] .site-footer .footer-bottom {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
  }

  body[data-page] .site-footer .footer-main__grid,
  body[data-page] .site-footer .footer-bottom__inner {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body[data-page] .mobile-bottom-nav--main {
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
}

body[data-page="video"] .video-mobile-portal {
  display: none;
}

/* <= 1200px: soften desktop spacing before switching to mobile navigation. */
@media (max-width: 1200px) {
  .container,
  .container--wide {
    width: min(100% - 36px, var(--container));
  }

  .navbar__inner {
    gap: 22px;
  }

  .main-nav,
  body[data-page="home"] .main-nav {
    gap: 18px;
  }

  .header-actions {
    gap: 8px;
  }

  body[data-page] .header-search {
    width: min(200px, 100%);
  }

  .layout-three {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .layout-three > aside:last-child {
    grid-column: 1 / -1;
  }

  .grid-four {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-main__grid {
    gap: 34px;
  }
}

/* <= 992px: tablet and mobile shell, right-side drawer navigation, and stacked page frames. */
@media (max-width: 992px) {
  :root {
    --section-gap: 48px;
  }

  body {
    overflow-x: hidden;
  }

  body.nav-open {
    overflow: hidden;
  }

  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 38;
    background: rgba(0, 20, 52, 0.38);
  }

  body[data-page] {
    background: var(--color-bg);
  }

  body[data-page] .container,
  body[data-page] .container--wide {
    width: min(100% - 24px, var(--container));
  }

  body[data-page] :is(.page-banner, .product-banner, .detail-hero, .case-banner, .news-banner, .about-banner, .service-banner, .contact-hero) {
    --banner-position: center center;
  }

  body[data-page] :is(.page-banner__inner, .product-banner__inner, .detail-hero__inner, .case-banner__inner, .news-banner__inner, .about-banner__inner, .service-banner__inner, .contact-hero__inner) {
    padding-block: 40px;
  }

  body[data-page] :is(
    .banner-search,
    .btn,
    .home-outline-btn,
    .product-result-bar button,
    .product-filters button,
    .service-list-head button,
    .news-pagination a,
    .news-pagination span,
    .service-pagination a,
    .service-pagination span
  ) {
    border-radius: var(--radius-md);
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 60;
  }

  .topbar {
    display: block;
    min-height: 28px;
    font-size: 11px;
  }

  .topbar__inner {
    justify-content: center;
    min-height: 28px;
  }

  .topbar__contact {
    justify-content: center;
  }

  .topbar__contact a:not(:first-child),
  .topbar__links {
    display: none;
  }

  .navbar,
  .navbar__inner {
    min-height: 64px;
  }

  .navbar__inner {
    gap: 14px;
  }

  .brand {
    position: relative;
    z-index: 62;
  }

  .brand__mark {
    width: 38px;
    height: 38px;
    border-radius: 9px;
  }

  .brand__text strong {
    font-size: 20px;
  }

  .brand__text small {
    font-size: 10px;
  }

  .nav-toggle {
    position: relative;
    z-index: 62;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-left: auto;
    padding: 8px;
    border: 0;
    background: transparent;
  }

  .nav-toggle span {
    width: 24px;
    height: 2px;
    margin: 3px 0;
    border-radius: 999px;
    background: var(--color-navy-900);
    transition: transform var(--transition), opacity var(--transition);
  }

  body.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  body.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  body.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .main-nav,
  body[data-page="home"] .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: none;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: min(82vw, 330px);
    height: 100dvh;
    gap: 0;
    padding: 106px 20px 28px;
    overflow-y: auto;
    border-left: 1px solid var(--color-border);
    background: var(--color-white);
    box-shadow: -18px 0 40px rgba(0, 20, 52, 0.16);
  }

  .main-nav__menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .main-nav__menu > li {
    display: block;
    width: 100%;
  }

  body.nav-open .main-nav {
    display: flex;
    animation: mobileDrawerIn 220ms ease both;
  }

  .main-nav a {
    min-height: 48px;
    padding: 0 8px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: var(--text-md);
    cursor: pointer;
    transition: color var(--transition), background-color var(--transition);
  }

  .main-nav a::after {
    display: none;
  }

  .main-nav a:hover {
    color: var(--color-blue-600);
    background: rgba(0, 70, 184, 0.04);
  }

  .main-nav a.is-active,
  .main-nav .current-menu-item > a,
  .main-nav .current-menu-ancestor > a {
    color: var(--color-blue-700);
    font-weight: 700;
    background: rgba(0, 70, 184, 0.06);
  }

  .header-actions {
    display: none;
  }

  .page-banner,
  .product-banner,
  .detail-hero,
  .case-banner,
  .news-banner,
  .about-banner,
  .service-banner,
  .contact-hero {
    min-height: 240px;
    height: auto;
  }

  .page-banner__inner,
  .product-banner__inner,
  .detail-hero__inner,
  .case-banner__inner,
  .news-banner__inner,
  .about-banner__inner,
  .service-banner__inner,
  .contact-hero__inner {
    min-height: 240px;
    height: auto;
    align-content: center;
    justify-items: start;
    padding-block: 34px;
    text-align: left;
  }

  .page-banner h1,
  .product-banner h1,
  .detail-hero h1,
  .case-banner h1,
  .news-banner h1,
  .about-banner h1,
  .service-banner h1,
  .contact-hero h1 {
    font-size: var(--text-3xl);
    line-height: 1.18;
  }

  .page-banner p,
  .product-banner p,
  .detail-hero p,
  .case-banner p,
  .news-banner p,
  .about-banner p,
  .service-banner p,
  .contact-hero p {
    font-size: var(--text-lg);
    line-height: 1.55;
  }

  .banner-search {
    width: min(520px, 100%);
  }

  .layout-two,
  .layout-three,
  .footer-cta__inner,
  .footer-cta__form,
  .product-list-layout,
  .product-main,
  .detail-summary-grid,
  .detail-content-grid,
  .detail-download-faq__grid,
  .detail-related-grid,
  .solution-hero__inner,
  .case-detail-layout,
  .case-detail-summary,
  .case-solution-card,
  .case-subscribe__inner,
  .case-feature,
  .case-related-strip,
  .case-related-strip article,
  .case-related-strip article:nth-child(2),
  .news-layout,
  .news-detail-layout,
  .news-feature-card,
  .news-subscribe__inner,
  .about-intro,
  .about-mixed-grid,
  .about-triple-grid,
  .about-contact-strip__inner,
  .service-home-grid,
  .service-layout,
  .service-layout--left-right,
  .service-detail-layout,
  .service-support-strip .product-inquiry__inner,
  .service-download-hero,
  .contact-hero__inner,
  .contact-map-grid,
  .contact-form-grid,
  .contact-support-grid,
  .contact-phone-cta,
  .product-inquiry__inner,
  .product-inquiry-form,
  .product-inquiry-form--inline {
    grid-template-columns: 1fr;
  }

  .grid-three,
  .grid-four,
  .product-grid,
  .zz-product-grid,
  .home-product-grid,
  .home-case-grid,
  .solution-stats__inner,
  .solution-card-grid,
  .solution-why-row,
  .solution-case-grid,
  .case-card-grid,
  .case-related-cards,
  .case-benefit-row,
  .contact-info-grid,
  .contact-hero__points,
  .about-factory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .solution-process-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .solution-process-row div::after,
  .service-flow div::after {
    display: none;
  }

  .case-detail-sidebar,
  .news-sidebar,
  .service-sidebar,
  .product-sidebar {
    position: static;
  }

  .footer-main__grid {
    grid-template-columns: 1fr;
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* <= 768px: phone layout, 16px gutters, single-column grids, stacked forms, and compact footer. */
@media (max-width: 768px) {
  :root {
    --section-gap: 36px;
    --card-gap: 16px;
  }

  body {
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--color-white);
  }

  .container,
  .container--wide {
    width: calc(100% - 32px);
  }

  .topbar {
    min-height: 26px;
  }

  .topbar__inner {
    min-height: 26px;
  }

  .navbar,
  .navbar__inner {
    min-height: 62px;
  }

  .brand__mark {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }

  .brand__text strong {
    font-size: 18px;
  }

  .brand__text small {
    font-size: 9px;
  }

  .main-nav,
  body[data-page="home"] .main-nav {
    width: min(86vw, 320px);
    padding-top: 96px;
  }

  .page-banner,
  .product-banner,
  .detail-hero,
  .case-banner,
  .news-banner,
  .about-banner,
  .service-banner,
  .contact-hero {
    min-height: 220px;
    border-radius: 0;
  }

  .home-hero,
  .solution-hero {
    min-height: 300px;
  }

  .page-banner__inner,
  .product-banner__inner,
  .detail-hero__inner,
  .case-banner__inner,
  .news-banner__inner,
  .about-banner__inner,
  .service-banner__inner,
  .contact-hero__inner {
    min-height: 220px;
    padding-block: 28px;
  }

  .home-hero__inner,
  .solution-hero__inner {
    min-height: 300px;
    padding-block: 34px;
  }

  .page-banner h1,
  .product-banner h1,
  .detail-hero h1,
  .case-banner h1,
  .news-banner h1,
  .about-banner h1,
  .service-banner h1,
  .contact-hero h1,
  .home-hero h1,
  .solution-hero__content h1 {
    font-size: 30px;
    line-height: 1.2;
  }

  .page-banner p,
  .product-banner p,
  .detail-hero p,
  .case-banner p,
  .news-banner p,
  .about-banner p,
  .service-banner p,
  .contact-hero p,
  .home-hero p,
  .solution-hero__content p {
    font-size: var(--text-md);
  }

  .banner-search {
    display: flex;
    width: 100%;
    margin-top: 18px;
  }

  .banner-search input {
    min-width: 0;
  }

  .home-hero__content {
    max-width: 100%;
  }

  .home-hero__features {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 12px;
    margin-top: 18px;
  }

  .home-hero-feature {
    min-width: 0;
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .home-hero-feature__icon {
    width: 42px;
    height: 42px;
  }

  .home-slider-btn {
    display: none;
  }

  .home-support-more {
    width: 100%;
    max-width: 176px;
  }

  .product-tabs,
  .product-filters {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .product-tabs::-webkit-scrollbar,
  .product-filters::-webkit-scrollbar {
    display: none;
  }

  .product-tabs a,
  .product-filters label,
  .product-filters button {
    flex: 0 0 auto;
  }

  .section,
  .home-section,
  .product-list-section,
  .product-helper-section,
  .service-guarantee,
  .detail-summary,
  .detail-selling-points,
  .detail-content,
  .detail-section,
  .detail-download-faq,
  .detail-related,
  .solution-stats,
  .solution-section,
  .case-list-section,
  .case-detail-main,
  .news-list-section,
  .news-detail-section,
  .news-feature-section,
  .news-faq-strip,
  .about-intro-section,
  .about-timeline-section,
  .about-factory-section,
  .about-triple-section,
  .about-team-section,
  .about-values-section,
  .service-home-section,
  .service-main-section,
  .service-section,
  .contact-main {
    padding-block: 24px;
  }

  .section-header {
    display: grid;
    align-items: start;
    gap: 8px;
    margin-bottom: 18px;
  }

  .section-header h2,
  .home-section-title h2,
  .solution-section h2,
  .service-section-head h2,
  .service-list-head h2,
  .about-section-head h2 {
    font-size: var(--text-xl);
  }

  .layout-two,
  .layout-three,
  .product-list-layout,
  .grid-two,
  .grid-three,
  .grid-four,
  .form-grid,
  .home-quote__inner,
  .home-quote-form,
  .home-quote__points,
  .home-product-grid,
  .home-advantage-grid,
  .home-solution-grid,
  .home-case-grid,
  .home-about-support,
  .home-news-grid,
  .product-grid,
  .product-filter-row,
  .product-helper-grid,
  .service-guarantee-grid,
  .detail-media-grid,
  .detail-spec-grid,
  .detail-icon-row,
  .detail-selling-grid,
  .detail-download-grid,
  .detail-related-products,
  .solution-stats__inner,
  .solution-card-grid,
  .solution-why-row,
  .solution-process-row,
  .solution-case-grid,
  .solution-faq-grid,
  .case-card-grid,
  .case-feature-data,
  .case-benefit-row,
  .case-related-cards,
  .news-faq-grid,
  .news-related-grid,
  .about-stats-row,
  .about-intro-stats,
  .about-tabs__inner,
  .about-factory-grid,
  .about-triple-grid .about-honor-grid,
  .about-contact-form,
  .about-timeline,
  .about-honor-grid,
  .about-team-grid,
  .about-values-grid,
  .service-nav-card,
  .service-video-strip,
  .service-video-grid,
  .service-flow,
  .service-page .service-guarantee-grid,
  .service-video-strip--compact,
  .service-chapter-row,
  .service-doc-toc,
  .contact-info-grid,
  .contact-hero__points,
  .contact-branch-grid,
  .contact-form,
  .contact-trust-grid,
  .contact-number-row,
  .contact-phone-cta ul,
  .case-subscribe form {
    grid-template-columns: 1fr;
  }

  .footer-cta__form,
  .product-inquiry-form,
  .product-inquiry-form--inline,
  .quick-plan-form,
  .solution-hero-form form,
  .about-contact-form,
  .contact-form,
  .home-quote-form,
  .news-subscribe form,
  .case-subscribe form {
    display: grid;
    grid-template-columns: 1fr;
  }

  .form-field input,
  .form-field select,
  .form-field textarea,
  .footer-cta__form input,
  .banner-search input,
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select {
    min-height: 44px;
  }

  textarea {
    min-height: 104px;
  }

  .card__body,
  .form-card,
  .sidebar-card,
  .placeholder-block,
  .service-side-card,
  .service-help-card,
  .news-side-card,
  .case-sidebar-card,
  .product-side-card,
  .contact-panel {
    padding: 20px;
  }

  .news-list-item {
    grid-template-columns: 1fr;
  }

  .news-list-item img {
    width: 100%;
  }

  .news-arrow {
    position: absolute;
    top: 18px;
    right: 0;
  }

  .news-subscribe form,
  .news-prev-next {
    grid-template-columns: 1fr;
  }

  .service-table-head,
  .service-download-table .service-table-head,
  .service-after-table .service-table-head {
    display: none;
  }

  .service-download-table > a,
  .service-after-table > a,
  .service-policy-list a {
    grid-template-columns: 1fr;
  }

  .service-category-card,
  .contact-hotline-card div,
  .contact-bottom-prompt,
  .contact-bottom-prompt > div:last-child {
    display: grid;
    grid-template-columns: 1fr;
  }

  .footer-main {
    padding-block: 32px;
  }

  .footer-main__grid,
  .footer-links,
  .footer-bottom__inner {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .footer-main__grid {
    gap: 26px;
  }

  .footer-links {
    gap: 18px;
    width: 100%;
  }

  .footer-qrcode {
    width: 100%;
  }

  .footer-bottom__inner {
    gap: 10px;
    min-height: auto;
    padding-block: 18px;
  }

  .footer-bottom nav {
    flex-wrap: wrap;
  }

  .floating-contact {
    display: none;
  }
}

/* <= 480px: small-phone refinements. */
@media (max-width: 480px) {
  .container,
  .container--wide {
    width: calc(100% - 32px);
  }

  .navbar,
  .navbar__inner {
    min-height: 60px;
  }

  .main-nav,
  body[data-page="home"] .main-nav {
    width: min(88vw, 300px);
    padding: 86px 18px 24px;
  }

  .brand {
    gap: 8px;
  }

  .brand__mark {
    width: 32px;
    height: 32px;
  }

  .brand__text strong {
    font-size: 17px;
  }

  .nav-toggle {
    width: 40px;
    height: 40px;
  }

  .page-banner,
  .product-banner,
  .detail-hero,
  .case-banner,
  .news-banner,
  .about-banner,
  .service-banner,
  .contact-hero {
    min-height: 204px;
  }

  .page-banner__inner,
  .product-banner__inner,
  .detail-hero__inner,
  .case-banner__inner,
  .news-banner__inner,
  .about-banner__inner,
  .service-banner__inner,
  .contact-hero__inner {
    min-height: 204px;
    padding-block: 24px;
  }

  .home-hero,
  .solution-hero,
  .home-hero__inner,
  .solution-hero__inner {
    min-height: 280px;
  }

  .page-banner h1,
  .product-banner h1,
  .detail-hero h1,
  .case-banner h1,
  .news-banner h1,
  .about-banner h1,
  .service-banner h1,
  .contact-hero h1,
  .home-hero h1,
  .solution-hero__content h1 {
    font-size: 28px;
  }

  .banner-search input,
  .banner-search button {
    min-height: 42px;
  }

  .banner-search button {
    min-width: 76px;
    padding-inline: 12px;
  }

  .btn,
  .btn-accent,
  .btn-primary {
    min-height: 42px;
  }

  .pagination {
    flex-wrap: wrap;
  }

  .footer-company h2 {
    font-size: var(--text-xl);
  }
}

@keyframes mobileDrawerIn {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

/* Homepage mobile composition: scoped to index.html so desktop and inner-page layouts stay untouched. */
@media (max-width: 768px) {
  body[data-page="home"] .topbar {
    display: none;
  }

  body[data-page="home"] .home-main {
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 54%, #ffffff 100%);
  }

  body[data-page="home"] .home-hero {
    min-height: 372px;
    margin: 0 16px 18px;
    border-radius: 10px;
  }

  body[data-page="home"] .home-hero::before {
    background-image:
      linear-gradient(90deg, rgba(0, 25, 60, 0.94) 0%, rgba(0, 43, 102, 0.78) 58%, rgba(0, 43, 102, 0.28) 100%),
      url("../images/banners/home-banner.jpg");
    background-position: center;
  }

  body[data-page="home"] .home-hero::after {
    display: none;
  }

  body[data-page="home"] .home-hero__inner {
    width: 100%;
    min-height: 372px;
    padding: 34px 18px 64px;
  }

  body[data-page="home"] .home-hero h1 {
    max-width: 310px;
    margin-bottom: 14px;
    font-size: 31px;
    line-height: 1.32;
  }

  body[data-page="home"] .home-hero p {
    max-width: 310px;
    font-size: 14px;
    line-height: 1.85;
  }

  body[data-page="home"] .home-hero__features {
    position: absolute;
    right: 16px;
    bottom: 42px;
    left: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: auto;
    margin: 0;
  }

  body[data-page="home"] .home-hero-feature {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    min-width: 0;
    gap: 5px;
    text-align: center;
  }

  body[data-page="home"] .home-hero-feature__icon {
    grid-row: auto;
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  body[data-page="home"] .home-hero-feature strong {
    font-size: 12px;
  }

  body[data-page="home"] .home-hero-feature small {
    font-size: 10px;
    line-height: 1.35;
  }

  body[data-page="home"] .home-hero__dots {
    bottom: 16px;
  }

  body[data-page="home"] .home-hero__dots span {
    width: 18px;
    height: 4px;
  }

  body[data-page="home"] .home-hero__dots .is-active {
    width: 8px;
  }

  body[data-page="home"] .home-section {
    padding-block: 22px;
  }

  body[data-page="home"] .home-section-title,
  body[data-page="home"] .home-news-heading {
    align-items: start;
    margin-bottom: 14px;
    padding-right: 94px;
    text-align: left;
  }

  body[data-page="home"] .home-section-title h2,
  body[data-page="home"] .home-news-heading h2 {
    margin-bottom: 4px;
    font-size: 22px;
    line-height: 1.25;
  }

  body[data-page="home"] .home-section-title p {
    font-size: 12px;
    line-height: 1.5;
  }

  body[data-page="home"] .home-section-title > a,
  body[data-page="home"] .home-news-heading a {
    top: 3px;
    right: 0;
    font-size: 12px;
  }

  body[data-page="home"] .home-product-grid,
  body[data-page="home"] .home-solution-grid,
  body[data-page="home"] .home-case-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  body[data-page="home"] .home-product-grid::-webkit-scrollbar,
  body[data-page="home"] .home-solution-grid::-webkit-scrollbar,
  body[data-page="home"] .home-case-grid::-webkit-scrollbar {
    display: none;
  }

  body[data-page="home"] .home-product-grid {
    grid-auto-columns: minmax(128px, 34vw);
    gap: 12px;
    padding: 2px 0 8px;
  }

  body[data-page="home"] .home-product-card {
    min-height: 238px;
    padding: 14px 12px;
    scroll-snap-align: start;
    text-align: left;
  }

  body[data-page="home"] .home-product-card img {
    height: 82px;
    margin-bottom: 12px;
  }

  body[data-page="home"] .home-product-card h3 {
    font-size: 14px;
    line-height: 1.35;
  }

  body[data-page="home"] .home-product-card p {
    display: -webkit-box;
    min-height: 0;
    overflow: hidden;
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.55;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  body[data-page="home"] .home-outline-btn {
    min-width: 84px;
    min-height: 28px;
    padding-inline: 12px;
    font-size: 12px;
  }

  body[data-page="home"] .home-advantage-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-page="home"] .home-advantage-item {
    min-height: 124px;
    padding: 15px 8px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
    box-shadow: 0 12px 26px rgba(0, 43, 102, 0.07);
  }

  body[data-page="home"] .home-advantage-item span {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
    font-size: 14px;
  }

  body[data-page="home"] .home-advantage-item strong {
    font-size: 14px;
  }

  body[data-page="home"] .home-advantage-item small {
    font-size: 11px;
    line-height: 1.45;
  }

  body[data-page="home"] .home-solution-grid {
    grid-auto-columns: 112px;
    gap: 10px;
    padding-bottom: 8px;
  }

  body[data-page="home"] .home-solution-card {
    height: 92px;
    scroll-snap-align: start;
    border-radius: 8px;
  }

  body[data-page="home"] .home-solution-card span {
    bottom: 10px;
    font-size: 13px;
  }

  body[data-page="home"] .home-case-wrap {
    overflow: visible;
  }

  body[data-page="home"] .home-case-grid {
    grid-auto-columns: minmax(128px, 34vw);
    gap: 12px;
    padding: 2px 0 8px;
  }

  body[data-page="home"] .home-case-card {
    scroll-snap-align: start;
  }

  body[data-page="home"] .home-case-card img {
    height: 86px;
  }

  body[data-page="home"] .home-case-card div {
    padding: 10px;
  }

  body[data-page="home"] .home-case-card h3 {
    margin-bottom: 5px;
    font-size: 13px;
    line-height: 1.35;
  }

  body[data-page="home"] .home-case-card p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.45;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  body[data-page="home"] .home-about-support {
    padding-top: 20px;
  }

  body[data-page="home"] .home-about-support__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    border: 0;
    background: transparent;
  }

  body[data-page="home"] .home-about-card,
  body[data-page="home"] .home-support-card {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-page="home"] .home-about-card__body {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body[data-page="home"] .home-about-card__body img {
    height: 170px;
    border-radius: 8px;
  }

  body[data-page="home"] .home-about-card__body p {
    display: none;
  }

  body[data-page="home"] .home-about-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="home"] .home-about-stats span {
    min-height: 82px;
    padding: 12px 8px;
    border-radius: 8px;
    background: var(--color-white);
    box-shadow: 0 12px 26px rgba(0, 43, 102, 0.07);
  }

  body[data-page="home"] .home-about-stats strong {
    font-size: 18px;
    line-height: 1.2;
  }

  body[data-page="home"] .home-about-stats small {
    font-size: 10px;
  }

  body[data-page="home"] .home-support-tabs {
    display: none;
  }

  body[data-page="home"] .home-support-list {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
    box-shadow: 0 12px 26px rgba(0, 43, 102, 0.07);
  }

  body[data-page="home"] .home-support-list a {
    min-height: 46px;
    padding: 0 12px;
    font-size: 13px;
  }

  body[data-page="home"] .home-support-more {
    width: 100%;
    max-width: none;
    min-height: 40px;
    margin-top: 10px;
    color: var(--color-white);
    background: var(--color-blue-700);
  }

  body[data-page="home"] .home-news {
    padding-bottom: 22px;
  }

  body[data-page="home"] .home-news-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body[data-page="home"] .home-news-grid > div:nth-child(2) {
    display: none;
  }

  body[data-page="home"] .home-news-list article {
    grid-template-columns: 86px minmax(0, 1fr);
    min-height: 72px;
    gap: 12px;
    padding-bottom: 12px;
  }

  body[data-page="home"] .home-news-list img {
    width: 86px;
    height: 64px;
    border-radius: 8px;
  }

  body[data-page="home"] .home-news-list span {
    margin-bottom: 4px;
    font-size: 11px;
  }

  body[data-page="home"] .home-news-list h3 {
    font-size: 13px;
    line-height: 1.45;
  }

  body[data-page="home"] .home-news-list p {
    font-size: 11px;
  }

  body[data-page="home"] .home-quote {
    margin: 8px 16px 0;
    border-radius: 10px;
  }

  body[data-page="home"] .home-quote__inner {
    width: 100%;
    gap: 16px;
    padding: 24px 22px;
    text-align: center;
  }

  body[data-page="home"] .home-quote h2 {
    font-size: 26px;
  }

  body[data-page="home"] .home-quote p {
    font-size: 12px;
  }

  body[data-page="home"] .home-quote-form {
    gap: 10px;
  }

  body[data-page="home"] .home-quote-form input,
  body[data-page="home"] .home-quote-form select {
    height: 44px;
    min-height: 44px;
    border-radius: 6px;
  }

  body[data-page="home"] .home-quote-form button {
    width: 100%;
    height: 46px;
    min-height: 46px;
  }

  body[data-page="home"] .home-quote__points {
    display: none;
  }

  body[data-page="home"] .site-footer {
    margin: 16px;
    overflow: hidden;
    border-radius: 10px;
  }

  body[data-page="home"] .footer-main {
    padding-block: 26px;
  }

  body[data-page="home"] .footer-main__grid {
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 20px 16px;
    align-items: start;
  }

  body[data-page="home"] .footer-company h2 {
    font-size: 22px;
  }

  body[data-page="home"] .footer-company p,
  body[data-page="home"] .footer-contact {
    font-size: 12px;
    line-height: 1.65;
  }

  body[data-page="home"] .footer-links {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  body[data-page="home"] .footer-links h3 {
    margin-bottom: 8px;
    font-size: 13px;
  }

  body[data-page="home"] .footer-links a {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.45;
  }

  body[data-page="home"] .footer-qrcode {
    width: auto;
    justify-self: end;
  }

  body[data-page="home"] .footer-qrcode img {
    width: 88px;
    height: 88px;
    margin-bottom: 10px;
    border-width: 4px;
  }

  body[data-page="home"] .footer-qrcode h3,
  body[data-page="home"] .footer-qrcode p {
    font-size: 12px;
  }

  body[data-page="home"] .social-links a {
    width: 30px;
    height: 30px;
    font-size: 10px;
  }

  body[data-page="home"] .footer-bottom__inner {
    justify-items: center;
    text-align: center;
  }
}

/* Homepage small-phone refinements, tuned to the supplied 390px design frame. */
@media (max-width: 480px) {
  body[data-page="home"] .home-hero {
    min-height: 372px;
    margin: 0 12px 18px;
  }

  body[data-page="home"] .home-hero__inner {
    min-height: 372px;
    padding: 32px 18px 62px;
  }

  body[data-page="home"] .home-hero h1 {
    max-width: 250px;
    font-size: 29px;
  }

  body[data-page="home"] .home-hero p {
    max-width: 268px;
    font-size: 13px;
    line-height: 1.8;
  }

  body[data-page="home"] .home-hero__features {
    right: 12px;
    left: 12px;
  }

  body[data-page="home"] .home-product-grid,
  body[data-page="home"] .home-case-grid {
    grid-auto-columns: minmax(108px, 31vw);
  }

  body[data-page="home"] .home-product-card {
    min-height: 236px;
    padding: 12px 10px;
  }

  body[data-page="home"] .home-product-card img {
    height: 72px;
  }

  body[data-page="home"] .home-product-card h3 {
    font-size: 13px;
  }

  body[data-page="home"] .home-product-card p {
    font-size: 11px;
  }

  body[data-page="home"] .home-advantage-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-page="home"] .home-advantage-item {
    min-height: 116px;
    padding: 14px 6px;
  }

  body[data-page="home"] .home-advantage-item span {
    width: 36px;
    height: 36px;
  }

  body[data-page="home"] .home-advantage-item strong {
    font-size: 13px;
  }

  body[data-page="home"] .home-advantage-item small {
    font-size: 10px;
  }

  body[data-page="home"] .home-solution-grid {
    grid-auto-columns: 78px;
    gap: 8px;
  }

  body[data-page="home"] .home-solution-card {
    height: 82px;
  }

  body[data-page="home"] .home-case-card img {
    height: 72px;
  }

  body[data-page="home"] .home-about-stats {
    gap: 8px;
  }

  body[data-page="home"] .home-about-stats span {
    min-height: 76px;
    padding: 10px 6px;
  }

  body[data-page="home"] .home-about-stats strong {
    font-size: 16px;
  }

  body[data-page="home"] .home-quote {
    margin-inline: 12px;
  }

  body[data-page="home"] .site-footer {
    margin-inline: 12px;
  }
}

/* Homepage overrides, placed last so they win over the global mobile foundation. */
@media (max-width: 768px) {
  body[data-page="home"] .site-header .topbar {
    display: none !important;
  }

  body[data-page="home"] .home-main {
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 54%, #ffffff 100%);
  }

  body[data-page="home"] .home-hero {
    min-height: 372px;
    margin: 0 16px 18px;
    border-radius: 10px;
  }

  body[data-page="home"] .home-hero::before {
    background-image:
      linear-gradient(90deg, rgba(0, 25, 60, 0.94) 0%, rgba(0, 43, 102, 0.78) 58%, rgba(0, 43, 102, 0.28) 100%),
      url("../images/banners/home-banner.jpg");
    background-position: center;
  }

  body[data-page="home"] .home-hero::after {
    display: none;
  }

  body[data-page="home"] .home-hero__inner {
    width: 100%;
    min-height: 372px;
    padding: 34px 18px 64px;
  }

  body[data-page="home"] .home-hero h1 {
    max-width: 310px;
    margin-bottom: 14px;
    font-size: 31px;
    line-height: 1.32;
  }

  body[data-page="home"] .home-hero p {
    max-width: 310px;
    font-size: 14px;
    line-height: 1.85;
  }

  body[data-page="home"] .home-hero__features {
    position: absolute;
    right: 16px;
    bottom: 42px;
    left: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: auto;
    margin: 0;
  }

  body[data-page="home"] .home-hero-feature {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    min-width: 0;
    gap: 5px;
    text-align: center;
  }

  body[data-page="home"] .home-hero-feature__icon {
    grid-row: auto;
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  body[data-page="home"] .home-hero-feature strong {
    font-size: 12px;
  }

  body[data-page="home"] .home-hero-feature small {
    font-size: 10px;
    line-height: 1.35;
  }

  body[data-page="home"] .home-hero__dots {
    bottom: 16px;
  }

  body[data-page="home"] .home-hero__dots span {
    width: 18px;
    height: 4px;
  }

  body[data-page="home"] .home-hero__dots .is-active {
    width: 8px;
  }

  body[data-page="home"] .home-hero__arrow {
    width: 34px;
    height: 34px;
  }

  body[data-page="home"] .home-hero__arrow svg {
    width: 14px;
    height: 14px;
  }

  body[data-page="home"] .home-hero__arrow--prev {
    left: 12px;
  }

  body[data-page="home"] .home-hero__arrow--next {
    right: 12px;
  }

  body[data-page="home"] .home-hero__dots {
    bottom: 14px;
    gap: 8px;
  }

  body[data-page="home"] .home-hero__dots button {
    width: 7px;
    height: 7px;
  }

  body[data-page="home"] .home-hero__dots button.is-active {
    transform: scale(1.15);
  }

  body[data-page="home"] .home-about-support {
    display: none !important;
  }

  body[data-page="home"] .home-product-grid,
  body[data-page="home"] .home-solution-grid,
  body[data-page="home"] .home-case-grid {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  body[data-page="home"] .home-product-grid::-webkit-scrollbar,
  body[data-page="home"] .home-solution-grid::-webkit-scrollbar,
  body[data-page="home"] .home-case-grid::-webkit-scrollbar {
    display: none;
  }

  body[data-page="home"] .home-product-grid {
    grid-auto-columns: minmax(128px, 34vw);
    gap: 12px;
    padding: 2px 0 8px;
  }

  body[data-page="home"] .home-product-card {
    min-height: 238px;
    padding: 14px 12px;
    scroll-snap-align: start;
    text-align: left;
  }

  body[data-page="home"] .home-product-card img {
    height: 82px;
    margin-bottom: 12px;
  }

  body[data-page="home"] .home-product-card h3 {
    font-size: 14px;
    line-height: 1.35;
  }

  body[data-page="home"] .home-product-card p {
    display: -webkit-box;
    min-height: 0;
    overflow: hidden;
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.55;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  body[data-page="home"] .home-outline-btn {
    min-width: 84px;
    min-height: 28px;
    padding-inline: 12px;
    font-size: 12px;
  }

  body[data-page="home"] .home-advantage-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-page="home"] .home-advantage-item {
    min-height: 124px;
    padding: 15px 8px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
    box-shadow: 0 12px 26px rgba(0, 43, 102, 0.07);
  }

  body[data-page="home"] .home-advantage-item span {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
    font-size: 14px;
  }

  body[data-page="home"] .home-advantage-item strong {
    font-size: 14px;
  }

  body[data-page="home"] .home-advantage-item small {
    font-size: 11px;
    line-height: 1.45;
  }

  body[data-page="home"] .home-solution-grid {
    grid-auto-columns: 112px;
    gap: 10px;
    padding-bottom: 8px;
  }

  body[data-page="home"] .home-solution-card {
    height: 92px;
    scroll-snap-align: start;
    border-radius: 8px;
  }

  body[data-page="home"] .home-solution-card span {
    bottom: 10px;
    font-size: 13px;
  }

  body[data-page="home"] .home-case-wrap {
    overflow: visible;
  }

  body[data-page="home"] .home-case-grid {
    grid-auto-columns: minmax(128px, 34vw);
    gap: 12px;
    padding: 2px 0 8px;
  }

  body[data-page="home"] .home-case-card {
    scroll-snap-align: start;
  }

  body[data-page="home"] .home-case-card img {
    height: 86px;
  }

  body[data-page="home"] .home-case-card div {
    padding: 10px;
  }

  body[data-page="home"] .home-case-card h3 {
    margin-bottom: 5px;
    font-size: 13px;
    line-height: 1.35;
  }

  body[data-page="home"] .home-case-card p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.45;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  body[data-page="home"] .home-news {
    padding-bottom: 22px;
  }

  body[data-page="home"] .home-news-grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  body[data-page="home"] .home-news-grid > div:nth-child(2) {
    display: none !important;
  }

  body[data-page="home"] .home-news-list article {
    grid-template-columns: 86px minmax(0, 1fr);
    min-height: 72px;
    gap: 12px;
    padding-bottom: 12px;
  }

  body[data-page="home"] .home-news-list img {
    width: 86px;
    height: 64px;
    border-radius: 8px;
  }

  body[data-page="home"] .home-news-list span {
    margin-bottom: 4px;
    font-size: 11px;
  }

  body[data-page="home"] .home-news-list h3 {
    font-size: 13px;
    line-height: 1.45;
  }

  body[data-page="home"] .home-news-list p {
    font-size: 11px;
  }

  body[data-page="home"] .home-quote {
    margin: 8px 16px 0;
    border-radius: 10px;
  }

  body[data-page="home"] .home-quote__inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px;
    padding: 24px 22px;
    text-align: center;
  }

  body[data-page="home"] .home-quote h2 {
    font-size: 26px;
  }

  body[data-page="home"] .home-quote p {
    font-size: 12px;
  }

  body[data-page="home"] .home-quote-form {
    gap: 10px;
  }

  body[data-page="home"] .home-quote-form input,
  body[data-page="home"] .home-quote-form select {
    height: 44px;
    min-height: 44px;
    border-radius: 6px;
  }

  body[data-page="home"] .home-quote-form button {
    width: 100%;
    height: 46px;
    min-height: 46px;
  }

  body[data-page="home"] .home-quote__points {
    display: none !important;
  }

  body[data-page="home"] .site-footer {
    margin: 16px;
    overflow: hidden;
    border-radius: 10px;
  }

  body[data-page="home"] .footer-main {
    padding-block: 26px;
  }

  body[data-page="home"] .footer-main__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 104px !important;
    gap: 20px 16px;
    align-items: start;
  }

  body[data-page="home"] .footer-company h2 {
    font-size: 22px;
  }

  body[data-page="home"] .footer-company p,
  body[data-page="home"] .footer-contact {
    font-size: 12px;
    line-height: 1.65;
  }

  body[data-page="home"] .footer-links {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px;
  }

  body[data-page="home"] .footer-links h3 {
    margin-bottom: 8px;
    font-size: 13px;
  }

  body[data-page="home"] .footer-links a {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.45;
  }

  body[data-page="home"] .footer-qrcode {
    width: auto;
    justify-self: end;
  }

  body[data-page="home"] .footer-qrcode img {
    width: 88px;
    height: 88px;
    margin-bottom: 10px;
    border-width: 4px;
  }

  body[data-page="home"] .footer-qrcode h3,
  body[data-page="home"] .footer-qrcode p {
    font-size: 12px;
  }

  body[data-page="home"] .social-links a {
    width: 30px;
    height: 30px;
    font-size: 10px;
  }

  body[data-page="home"] .footer-bottom__inner {
    justify-items: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  body[data-page="home"] .home-hero {
    min-height: 372px;
    margin: 0 12px 18px;
  }

  body[data-page="home"] .home-hero__inner {
    min-height: 372px;
    padding: 32px 18px 62px;
  }

  body[data-page="home"] .home-hero h1 {
    max-width: 250px;
    font-size: 29px;
  }

  body[data-page="home"] .home-hero p {
    max-width: 268px;
    font-size: 13px;
    line-height: 1.8;
  }

  body[data-page="home"] .home-hero__features {
    right: 12px;
    left: 12px;
  }

  body[data-page="home"] .home-product-grid,
  body[data-page="home"] .home-case-grid {
    grid-auto-columns: minmax(108px, 31vw);
  }

  body[data-page="home"] .home-product-card {
    min-height: 236px;
    padding: 12px 10px;
  }

  body[data-page="home"] .home-product-card img {
    height: 72px;
  }

  body[data-page="home"] .home-product-card h3 {
    font-size: 13px;
  }

  body[data-page="home"] .home-product-card p {
    font-size: 11px;
  }

  body[data-page="home"] .home-advantage-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-page="home"] .home-advantage-item {
    min-height: 116px;
    padding: 14px 6px;
  }

  body[data-page="home"] .home-advantage-item span {
    width: 36px;
    height: 36px;
  }

  body[data-page="home"] .home-advantage-item strong {
    font-size: 13px;
  }

  body[data-page="home"] .home-advantage-item small {
    font-size: 10px;
  }

  body[data-page="home"] .home-solution-grid {
    grid-auto-columns: 78px;
    gap: 8px;
  }

  body[data-page="home"] .home-solution-card {
    height: 82px;
  }

  body[data-page="home"] .home-case-card img {
    height: 72px;
  }

  body[data-page="home"] .home-about-stats {
    gap: 8px;
  }

  body[data-page="home"] .home-about-stats span {
    min-height: 76px;
    padding: 10px 6px;
  }

  body[data-page="home"] .home-about-stats strong {
    font-size: 16px;
  }

  body[data-page="home"] .home-quote {
    margin-inline: 12px;
  }

  body[data-page="home"] .site-footer {
    margin-inline: 12px;
  }

  body[data-page="home"] .footer-main__grid {
    grid-template-columns: minmax(0, 1fr) 88px !important;
    gap: 16px 12px;
  }

  body[data-page="home"] .footer-links {
    gap: 10px;
  }

  body[data-page="home"] .footer-qrcode img {
    width: 80px;
    height: 80px;
  }
}

/* =========================================================
HOME MOBILE REBUILD - SINGLE SOURCE OF TRUTH
========================================================= */
@media (max-width: 768px) {
  body[data-page="home"] {
    background: #f5f7fa !important;
    overflow-x: hidden !important;
    padding-bottom: 70px !important;
  }

  body[data-page="home"] *,
  body[data-page="home"] *::before,
  body[data-page="home"] *::after {
    box-sizing: border-box;
  }

  body[data-page="home"] img {
    max-width: 100%;
    height: auto;
  }

  body[data-page="home"] .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body[data-page="home"] .home-section {
    padding: 24px 0 !important;
  }

  body[data-page="home"] .home-desktop-only {
    display: none !important;
  }

  body[data-page="home"] .home-mobile-only {
    display: block !important;
  }

  body[data-page="home"] .home-section-title .home-mobile-only,
  body[data-page="home"] .home-section-title > a .home-mobile-only,
  body[data-page="home"] .home-outline-btn .home-mobile-only {
    display: inline !important;
  }

  body[data-page="home"] .home-section-title,
  body[data-page="home"] .home-news-heading {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-right: 0;
  }

  body[data-page="home"] .home-section-title h2,
  body[data-page="home"] .home-news-heading h2 {
    margin: 0;
    color: #0b2348;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 900;
  }

  body[data-page="home"] .home-section-title p,
  body[data-page="home"] .home-news-heading p {
    margin: 4px 0 0;
    color: rgba(14, 39, 88, 0.62);
    font-size: 12px;
    line-height: 1.45;
  }

  body[data-page="home"] .home-section-title > a,
  body[data-page="home"] .home-news-heading a {
    position: static;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    align-self: center;
    color: #0a6cff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
  }

  body[data-page="home"] .home-section-title > a::after,
  body[data-page="home"] .home-news-heading a::after {
    content: " ›";
    font-size: 14px;
  }

  body[data-page="home"] .home-main {
    overflow-x: hidden !important;
    background: #f5f7fa !important;
  }

  body[data-page="home"] .topbar {
    display: none !important;
  }

  body[data-page="home"] .site-header {
    position: sticky;
    top: 0;
    z-index: 120;
    background: #fff;
    box-shadow: 0 1px 0 rgba(14, 39, 88, 0.08);
  }

  body[data-page="home"] .site-header .navbar {
    min-height: 58px !important;
    padding: 0 !important;
    background: #fff !important;
  }

  body[data-page="home"] .site-header .navbar__inner {
    min-height: 58px !important;
    gap: 12px;
    padding: 0 !important;
  }

  body[data-page="home"] .site-header .brand {
    gap: 8px;
    min-width: 0;
  }

  body[data-page="home"] .site-header .brand__mark {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }

  body[data-page="home"] .site-header .brand__text strong {
    font-size: 15px;
    line-height: 1.1;
  }

  body[data-page="home"] .site-header .brand__text small {
    margin-top: 2px;
    font-size: 9px;
    line-height: 1.05;
    letter-spacing: 0.08em;
  }

  body[data-page="home"] .site-header .topbar,
  body[data-page="home"] .site-header .topbar__links,
  body[data-page="home"] .site-header .main-nav,
  body[data-page="home"] .site-header .header-actions {
    display: none !important;
  }

  body[data-page="home"] .site-header .nav-toggle {
    display: inline-flex !important;
    margin-left: auto;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  body[data-page="home"] .home-hero {
    min-height: 280px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body[data-page="home"] .home-hero__slide {
    background-image:
      linear-gradient(90deg, rgba(3, 27, 76, 0.94) 0%, rgba(7, 61, 148, 0.78) 52%, rgba(7, 61, 148, 0.2) 100%),
      var(--home-hero-image);
    background-position: 0 0, 78% center !important;
    background-size: 100% 100%, cover !important;
  }

  body[data-page="home"] .home-hero__inner {
    min-height: 280px !important;
    padding: 20px 16px 54px !important;
  }

  body[data-page="home"] .home-mobile-hero-title {
    display: block !important;
    max-width: 260px;
    margin: 0 0 10px !important;
    color: #fff;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  body[data-page="home"] .home-mobile-hero-subtitle {
    display: block !important;
    max-width: 280px;
    margin: 0 0 12px !important;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: 0.02em;
  }

  body[data-page="home"] .home-hero__features,
  body[data-page="home"] .home-hero__arrow {
    display: none !important;
  }

  body[data-page="home"] .home-hero-kpis {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: auto;
    padding-top: 10px;
  }

  body[data-page="home"] .home-hero-kpi {
    min-width: 0;
    padding-right: 6px;
    color: rgba(255, 255, 255, 0.9);
  }

  body[data-page="home"] .home-hero-kpi strong {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    line-height: 1.1;
    font-weight: 900;
  }

  body[data-page="home"] .home-hero-kpi small {
    display: block;
    font-size: 9px;
    line-height: 1.12;
    opacity: 0.88;
  }

  body[data-page="home"] .home-hero__controls {
    left: 0;
    right: 0;
    bottom: 10px;
  }

  body[data-page="home"] .home-hero__dots {
    gap: 6px;
  }

  body[data-page="home"] .home-hero__dots button {
    width: 7px;
    height: 7px;
  }

  body[data-page="home"] .home-mobile-cta {
    padding: 0 0 24px !important;
  }

  body[data-page="home"] .home-mobile-cta .container {
    width: 100% !important;
  }

  body[data-page="home"] .home-mobile-cta__card {
    width: 100%;
    min-height: 130px;
    padding: 14px 10px 14px 16px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(9, 35, 89, 0.08);
  }

  body[data-page="home"] .home-mobile-cta__body {
    width: 58%;
    gap: 6px;
  }

  body[data-page="home"] .home-mobile-cta__title {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 900;
  }

  body[data-page="home"] .home-mobile-cta__desc {
    font-size: 11px;
    line-height: 1.28;
    color: rgba(14, 39, 88, 0.62);
  }

  body[data-page="home"] .home-mobile-cta__btn {
    min-height: 36px;
    padding-inline: 14px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
  }

  body[data-page="home"] .home-mobile-cta__media {
    width: 42%;
    min-height: 100px;
    border-radius: 14px;
    overflow: hidden;
  }

  body[data-page="home"] .home-mobile-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center right;
  }

  body[data-page="home"] .home-products .home-section-title > p,
  body[data-page="home"] .home-solutions .home-section-title > p,
  body[data-page="home"] .home-cases .home-section-title > p,
  body[data-page="home"] .home-news .home-news-heading > p {
    display: none !important;
  }

  body[data-page="home"] .home-product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 12px !important;
    overflow: visible !important;
    overflow-x: hidden !important;
  }

  body[data-page="home"] .home-product-grid > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="home"] .home-product-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: 210px !important;
    padding: 10px !important;
    gap: 6px !important;
    border: 1px solid rgba(16, 45, 106, 0.08) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 10px 22px rgba(9, 35, 89, 0.08) !important;
    text-align: left !important;
  }

  body[data-page="home"] .home-product-card img {
    width: 100% !important;
    height: 110px !important;
    margin-bottom: 0 !important;
    border-radius: 12px !important;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-product-card h3 {
    margin: 0 !important;
    color: #0e2758 !important;
    font-size: 15px !important;
    line-height: 1.24 !important;
    font-weight: 900 !important;
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-page="home"] .home-product-card p {
    display: -webkit-box !important;
    margin: 0 !important;
    color: rgba(14, 39, 88, 0.66) !important;
    font-size: 11px !important;
    line-height: 1.28 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
  }

  body[data-page="home"] .home-outline-btn {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    margin-top: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #0a6cff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  body[data-page="home"] .home-outline-btn::after {
    content: " →";
  }

  body[data-page="home"] .home-mobile-kpi {
    display: block !important;
    padding: 0 0 24px;
  }

  body[data-page="home"] .home-mobile-kpi .container {
    width: 100% !important;
  }

  body[data-page="home"] .home-mobile-kpi__strip {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding: 12px 8px;
    border-radius: 16px;
    background: linear-gradient(90deg, #174dc8 0%, #0a6cff 100%);
    box-shadow: 0 10px 22px rgba(10, 108, 255, 0.18);
  }

  body[data-page="home"] .home-mobile-kpi__item {
    min-width: 0;
    text-align: center;
    color: #fff;
  }

  body[data-page="home"] .home-mobile-kpi__item strong {
    display: block;
    font-size: 14px;
    line-height: 1.1;
    font-weight: 900;
  }

  body[data-page="home"] .home-mobile-kpi__item small {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    line-height: 1.1;
    opacity: 0.9;
  }

  body[data-page="home"] .home-advantages,
  body[data-page="home"] .home-about-support,
  body[data-page="home"] .home-quote {
    display: none !important;
  }

  body[data-page="home"] .home-solutions .home-solution-grid,
  body[data-page="home"] .home-cases .home-case-wrap,
  body[data-page="home"] .home-cases .home-case-grid {
    display: none !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list,
  body[data-page="home"] .home-cases .home-case-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list > *,
  body[data-page="home"] .home-cases .home-case-list > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list article,
  body[data-page="home"] .home-cases .home-case-list article {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: 0;
    min-height: 186px !important;
    padding: 12px !important;
    gap: 8px !important;
    border: 1px solid rgba(14, 39, 88, 0.08) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 10px 22px rgba(9, 35, 89, 0.08) !important;
    overflow: hidden !important;
    align-content: initial !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list article:hover,
  body[data-page="home"] .home-solutions .home-solution-list article:active,
  body[data-page="home"] .home-cases .home-case-list article:hover,
  body[data-page="home"] .home-cases .home-case-list article:active {
    box-shadow: 0 14px 28px rgba(9, 35, 89, 0.12) !important;
    transform: translateY(-1px) !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list > article > .home-solution-icon {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    background: rgba(10, 108, 255, 0.10) !important;
    color: #0a6cff !important;
    box-shadow: inset 0 0 0 1px rgba(10, 108, 255, 0.12) !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list > article > .home-solution-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list article > div {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    gap: 5px !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list article > div > span {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background: rgba(0, 70, 184, 0.10) !important;
    color: #003a8c !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list h3 {
    margin: 0 !important;
    color: #0e2758 !important;
    font-size: 14px !important;
    line-height: 1.28 !important;
    font-weight: 900 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list p {
    margin: 0 !important;
    color: rgba(14, 39, 88, 0.66) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list .home-solution-more {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    margin-top: auto !important;
    color: #0a6cff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  body[data-page="home"] .home-cases .home-case-list article {
    min-height: 190px !important;
    padding: 10px 10px 12px !important;
  }

  body[data-page="home"] .home-cases .home-case-list img {
    width: 100% !important;
    height: 100px !important;
    margin-bottom: 0 !important;
    border-radius: 12px !important;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-cases .home-case-list article > div {
    position: relative;
    display: grid;
    gap: 4px !important;
    min-width: 0;
    padding: 26px 0 0 !important;
  }

  body[data-page="home"] .home-cases .home-case-list span {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 22px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: rgba(0, 70, 184, 0.10) !important;
    color: #003a8c !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  body[data-page="home"] .home-cases .home-case-list h3 {
    margin: 0 !important;
    color: #0e2758 !important;
    font-size: 13px !important;
    line-height: 1.28 !important;
    font-weight: 900 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-page="home"] .home-cases .home-case-list p {
    display: none !important;
  }

  body[data-page="home"] .home-news {
    padding-bottom: 24px !important;
  }

  body[data-page="home"] .home-news-grid {
    display: block !important;
  }

  body[data-page="home"] .home-news-grid > div + div {
    margin-top: 18px;
  }

  body[data-page="home"] .home-news-list {
    display: grid !important;
    gap: 10px !important;
  }

  body[data-page="home"] .home-news-list article {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px;
    border: 1px solid rgba(14, 39, 88, 0.08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(9, 35, 89, 0.06);
  }

  body[data-page="home"] .home-news-list img {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-news-list article > div {
    position: relative;
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 0 72px 0 0;
  }

  body[data-page="home"] .home-news-list article > div > span {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 20px;
    margin: 0;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(0, 70, 184, 0.10);
    color: #003a8c;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
  }

  body[data-page="home"] .home-news-list h3 {
    margin: 0;
    color: #0e2758;
    font-size: 12px;
    line-height: 1.26;
    font-weight: 900;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="home"] .home-news-list p {
    margin: 0;
    color: rgba(14, 39, 88, 0.58);
    font-size: 10px;
    line-height: 1.12;
  }

  body[data-page="home"] .home-trust {
    display: block !important;
    padding: 24px 0 !important;
  }

  body[data-page="home"] .home-trust .container {
    width: 100% !important;
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 8px 18px rgba(9, 35, 89, 0.06);
  }

  body[data-page="home"] .home-trust__title {
    margin-bottom: 10px;
    color: #23407a;
    font-size: 19px;
    line-height: 1.2;
    font-weight: 900;
    text-align: center;
  }

  body[data-page="home"] .home-trust__logos {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    align-items: center;
  }

  body[data-page="home"] .home-trust__logo {
    min-width: 0;
    padding: 10px 6px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(9, 35, 89, 0.06);
    color: rgba(40, 66, 112, 0.96);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    opacity: 1;
  }

  body[data-page="home"] .home-service-cta {
    display: block !important;
    padding: 24px 0 !important;
  }

  body[data-page="home"] .home-service-cta .container {
    width: 100% !important;
  }

  body[data-page="home"] .home-service-cta__card {
    display: grid !important;
    grid-template-columns: 60% 40%;
    gap: 10px;
    align-items: center;
    min-height: 130px;
    padding: 14px 10px 14px 16px;
    border-radius: 16px;
    background: linear-gradient(90deg, #0a6cff 0%, #0b2348 100%);
    box-shadow: 0 10px 22px rgba(9, 35, 89, 0.10);
  }

  body[data-page="home"] .home-service-cta__body {
    gap: 5px;
  }

  body[data-page="home"] .home-service-cta__body strong {
    color: #fff;
    font-size: 16px;
    line-height: 1.18;
    font-weight: 900;
  }

  body[data-page="home"] .home-service-cta__body p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    line-height: 1.28;
  }

  body[data-page="home"] .home-service-cta__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-page="home"] .home-service-cta__actions .btn {
    min-height: 40px;
    padding-inline: 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="home"] .home-service-cta__actions .btn:first-child {
    box-shadow: 0 10px 18px rgba(255, 106, 26, 0.28);
  }

  body[data-page="home"] .home-service-cta__actions .btn-primary {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.48);
  }

  body[data-page="home"] .home-service-cta__media {
    width: 100%;
    height: 100%;
    min-height: 100px;
    border-radius: 14px;
    overflow: hidden;
  }

  body[data-page="home"] .home-service-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center right;
  }

  body[data-page="home"] .site-footer {
    margin: 24px 16px 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: #0b2348 !important;
  }

  body[data-page="home"] .site-footer .footer-main {
    display: none !important;
  }

  body[data-page="home"] .site-footer .footer-bottom {
    border-top: 0;
  }

  body[data-page="home"] .site-footer .footer-bottom__inner {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    padding: 14px 16px !important;
    text-align: center;
  }

  body[data-page="home"] .site-footer .footer-bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 10px;
    line-height: 1.3;
    white-space: normal;
  }

  body[data-page="home"] .site-footer .footer-bottom nav {
    display: flex !important;
    align-items: center;
    gap: 12px;
  }

  body[data-page="home"] .site-footer .footer-bottom nav a {
    color: rgba(255, 255, 255, 0.84);
    font-size: 10px;
    line-height: 1.2;
  }

  body[data-page="home"] .mobile-bottom-nav--main {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 60px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    border-top: 1px solid rgba(14, 39, 88, 0.08) !important;
    box-shadow: 0 -4px 16px rgba(7, 25, 61, 0.08) !important;
  }

  body[data-page="home"] .mobile-bottom-nav--main a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }

  body[data-page="home"] .mobile-bottom-nav--main svg {
    width: 20px;
    height: 20px;
  }

  body[data-page="home"] .mobile-bottom-nav--main small {
    font-size: 11px;
    line-height: 1.1;
  }
}

/* Product list mobile layout: category moves above content, filters scroll, cards use a compact 2-column grid. */
@media (max-width: 768px) {
  body[data-page="products"] .product-page {
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 58%, #ffffff 100%);
  }

  body[data-page="products"] .topbar {
    display: none;
  }

  body[data-page="products"] .product-banner {
    min-height: 236px;
  }

  body[data-page="products"] .product-banner__inner {
    min-height: 236px;
    padding-block: 30px;
  }

  body[data-page="products"] .product-banner h1 {
    margin-bottom: 10px;
    font-size: 32px;
  }

  body[data-page="products"] .product-banner p {
    max-width: 260px;
    font-size: 18px;
    line-height: 1.55;
  }

  body[data-page="products"] .product-banner span {
    max-width: 260px;
    font-size: 12px;
    line-height: 1.5;
  }

  body[data-page="products"] .product-breadcrumb {
    border-bottom: 0;
  }

  body[data-page="products"] .product-list-section {
    padding-block: 16px 24px;
  }

  body[data-page="products"] .product-list-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  body[data-page="products"] .product-sidebar {
    display: contents;
  }

  body[data-page="products"] .product-category-card {
    order: 1;
    padding: 16px 12px;
    overflow: hidden;
    border-radius: 10px;
  }

  body[data-page="products"] .product-category-card h2 {
    padding: 0;
    margin-bottom: 12px;
    color: var(--color-text);
    background: transparent;
    font-size: 20px;
    line-height: 1.2;
    text-align: center;
  }

  body[data-page="products"] .product-category-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 8px;
    align-items: stretch;
  }

  body[data-page="products"] .product-category-list a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 84px;
    padding: 10px 6px 9px;
    border: 0;
    border-radius: 12px;
    background: var(--color-white);
    color: var(--color-text);
    box-shadow: 0 10px 24px rgba(0, 43, 102, 0.06);
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
  }

  body[data-page="products"] .product-category-list a::before {
    content: "";
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 50%, var(--color-blue-700) 0 3px, transparent 4px),
      var(--color-blue-100);
  }

  body[data-page="products"] .product-category-list a.is-active {
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-blue-700), var(--color-blue-600));
  }

  body[data-page="products"] .product-category-list a.is-active::before {
    background:
      radial-gradient(circle at 50% 50%, var(--color-white) 0 3px, transparent 4px),
      rgba(255, 255, 255, 0.18);
  }

  body[data-page="products"] .product-category-list a span {
    display: flex;
    width: 100%;
    min-height: 2.6em;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.25;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  body[data-page="products"] .product-category-list small {
    display: none;
  }

  body[data-page="products"] .process-card,
  body[data-page="products"] .help-card {
    display: none;
  }

  body[data-page="products"] .product-list-main {
    order: 2;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body[data-page="products"] .product-filter-card {
    padding: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
  }

  body[data-page="products"] .product-tabs,
  body[data-page="products"] .product-filters {
    gap: 8px;
    padding: 0 0 12px;
  }

  body[data-page="products"] .product-tabs {
    border-bottom: 0;
  }

  body[data-page="products"] .product-tabs a {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    background: var(--color-white);
    box-shadow: 0 8px 20px rgba(0, 43, 102, 0.05);
    font-size: 12px;
  }

  body[data-page="products"] .product-tabs a.is-active {
    background: var(--color-blue-700);
    box-shadow: none;
  }

  body[data-page="products"] .product-filters label {
    flex: 0 0 auto;
    gap: 0;
    min-width: 88px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
    box-shadow: 0 8px 20px rgba(0, 43, 102, 0.04);
    color: transparent;
    font-size: 0;
  }

  body[data-page="products"] .product-filters select {
    min-width: 68px;
    width: 100%;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: 12px;
  }

  body[data-page="products"] .product-filters button,
  body[data-page="products"] .product-result-bar button {
    flex: 0 0 auto;
    height: 34px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--color-white);
    font-size: 12px;
  }

  body[data-page="products"] .product-result-bar {
    align-items: center;
    margin: 2px 0 14px;
  }

  body[data-page="products"] .product-result-bar p {
    font-size: 18px;
  }

  body[data-page="products"] .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body[data-page="products"] .zz-product-card {
    padding: 12px;
    border-radius: 10px;
  }

  body[data-page="products"] .zz-product-card img {
    height: 98px;
    margin-bottom: 10px;
    border-radius: 8px;
  }

  body[data-page="products"] .zz-product-card h3 {
    margin-bottom: 6px;
    font-size: 14px;
  }

  body[data-page="products"] .zz-product-card p {
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.45;
  }

  body[data-page="products"] .zz-product-card dl {
    gap: 3px;
    margin-bottom: 10px;
    font-size: 11px;
    line-height: 1.45;
  }

  body[data-page="products"] .zz-product-card a {
    min-height: 32px;
    border-radius: 6px;
    font-size: 12px;
  }

  body[data-page="products"] .product-load-more {
    margin: 18px 0 22px;
  }

  body[data-page="products"] .product-load-more button {
    width: 100%;
    height: 40px;
    min-height: 40px;
    border-radius: 8px;
    background: var(--color-white);
  }

  body[data-page="products"] .recommend-products {
    padding-top: 4px;
  }

  body[data-page="products"] .recommend-products h2 {
    margin-bottom: 12px;
    font-size: 20px;
  }

  body[data-page="products"] .recommend-row {
    display: block;
    padding: 2px 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  body[data-page="products"] .recommend-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  body[data-page="products"] .recommend-track::-webkit-scrollbar {
    display: none;
  }

  body[data-page="products"] .recommend-row button {
    display: none;
  }

  body[data-page="products"] .recommend-track a {
    flex: 0 0 116px;
    min-height: 112px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-white);
    box-shadow: 0 10px 24px rgba(0, 43, 102, 0.05);
    font-size: 12px;
    scroll-snap-align: start;
  }

  body[data-page="products"] .recommend-track img {
    width: 100%;
    height: 56px;
  }

  body[data-page="products"] .product-helper-section,
  body[data-page="products"] .service-guarantee,
  body[data-page="products"] .product-inquiry {
    padding-block: 18px;
  }

  body[data-page="products"] .product-helper-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body[data-page="products"] .helper-card {
    min-height: 0;
    padding: 18px;
    border-radius: 10px;
  }

  body[data-page="products"] .helper-card h2,
  body[data-page="products"] .service-guarantee h2 {
    margin-bottom: 12px;
    font-size: 20px;
  }

  body[data-page="products"] .guide-flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-page="products"] .guide-flow span {
    min-height: 50px;
    font-size: 10px;
  }

  body[data-page="products"] .service-guarantee-grid {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
  }

  body[data-page="products"] .service-guarantee-grid div {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
    min-height: 78px;
    padding: 14px;
    border-right: 1px solid var(--color-border);
    text-align: left;
  }

  body[data-page="products"] .service-guarantee-grid div:last-child {
    border-right: 0;
  }

  body[data-page="products"] .service-guarantee-grid span {
    grid-row: 1 / span 2;
    width: 42px;
    height: 42px;
    font-size: 0;
  }

  body[data-page="products"] .service-guarantee-grid span svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  body[data-page="products"] .service-guarantee-grid strong {
    grid-column: 2;
    grid-row: 1;
    font-size: 14px;
  }

  body[data-page="products"] .service-guarantee-grid small {
    grid-column: 2;
    grid-row: 2;
    display: block;
    min-width: 0;
    font-size: 12px;
    line-height: 1.4;
  }

  body[data-page="products"] .product-inquiry__inner {
    gap: 18px;
    padding: 24px 20px;
    border-radius: 10px;
    text-align: left;
  }

  body[data-page="products"] .product-inquiry h2 {
    margin-bottom: 6px;
    font-size: 26px;
  }

  body[data-page="products"] .product-inquiry p {
    font-size: 13px;
  }

  body[data-page="products"] .product-inquiry-form {
    gap: 12px;
  }

  body[data-page="products"] .product-inquiry-form label {
    gap: 6px;
    font-size: 12px;
  }

  body[data-page="products"] .product-inquiry-form input,
  body[data-page="products"] .product-inquiry-form textarea {
    height: 44px;
    min-height: 44px;
    border-radius: 7px;
  }

  body[data-page="products"] .product-inquiry-form textarea {
    height: 104px;
    min-height: 104px;
  }

  body[data-page="products"] .product-inquiry-form button {
    width: 100%;
    min-height: 46px;
  }
}

/* Product list small-phone refinements. */
@media (max-width: 480px) {
  body[data-page="products"] .product-banner,
  body[data-page="products"] .product-banner__inner {
    min-height: 248px;
  }

  body[data-page="products"] .product-banner h1 {
    font-size: 30px;
  }

  body[data-page="products"] .product-category-card {
    padding: 16px 12px;
  }

  body[data-page="products"] .product-category-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 6px;
  }

  body[data-page="products"] .product-category-list a {
    min-height: 70px;
    font-size: 10px;
  }

  body[data-page="products"] .product-category-list a::before {
    width: 32px;
    height: 32px;
  }

  body[data-page="products"] .product-grid {
    gap: 10px;
  }

  body[data-page="products"] .zz-product-card {
    padding: 10px;
  }

  body[data-page="products"] .zz-product-card img {
    height: 86px;
  }

  body[data-page="products"] .zz-product-card h3 {
    font-size: 13px;
  }

  body[data-page="products"] .zz-product-card p,
  body[data-page="products"] .zz-product-card dl {
    font-size: 10px;
  }

  body[data-page="products"] .service-guarantee-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-page="products"] .service-guarantee-grid div {
    min-height: 98px;
    padding: 12px 6px;
  }

  body[data-page="products"] .product-inquiry {
    padding-bottom: 24px;
  }
}

/* Global mobile foundation. Keep these late in the file so they normalize all pages without touching desktop. */
@media (max-width: 1200px) {
  .container,
  .container--wide {
    width: min(100% - 36px, var(--container));
  }

  .navbar__inner {
    gap: 22px;
  }

  .main-nav,
  body[data-page="home"] .main-nav {
    gap: 18px;
  }
}

@media (max-width: 992px) {
  body {
    overflow-x: hidden;
  }

  body.nav-open {
    overflow: hidden;
  }

  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(0, 20, 52, 0.42);
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 80;
    background: var(--color-white);
  }

  body[data-page] .site-header .topbar,
  .site-header .topbar {
    display: block;
    min-height: 28px;
    font-size: 11px;
  }

  .site-header .topbar__inner {
    justify-content: center;
    min-height: 28px;
  }

  .site-header .topbar__contact {
    justify-content: center;
    width: 100%;
    gap: 0;
  }

  .site-header .topbar__contact a:first-child {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1;
    white-space: nowrap;
  }

  .site-header .topbar__contact a:not(:first-child),
  .site-header .topbar__links,
  .header-actions {
    display: none;
  }

  .navbar,
  .navbar__inner {
    min-height: 64px;
  }

  .navbar__inner {
    justify-content: space-between;
    gap: 12px;
  }

  .brand {
    position: relative;
    z-index: 95;
    min-width: 0;
    margin-right: auto;
  }

  .brand__mark {
    width: 38px;
    height: 38px;
    border-radius: 9px;
  }

  .brand__text {
    min-width: 0;
  }

  .brand__text strong {
    font-size: 20px;
  }

  .brand__text small {
    font-size: 10px;
  }

  .nav-toggle {
    position: relative;
    z-index: 95;
    display: inline-grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin-left: auto;
    padding: 8px;
    border: 0;
    background: transparent;
  }

  .nav-toggle span {
    width: 24px;
    height: 2px;
    margin: 3px 0;
    border-radius: 999px;
    background: var(--color-navy-900);
    transition: transform var(--transition), opacity var(--transition);
  }

  body.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  body.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  body.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .main-nav,
  body[data-page="home"] .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: min(82vw, 330px);
    height: 100dvh;
    gap: 0;
    padding: 104px 20px 28px;
    overflow-y: auto;
    border-left: 1px solid var(--color-border);
    background: var(--color-white);
    box-shadow: -18px 0 40px rgba(0, 20, 52, 0.18);
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform 220ms ease, opacity 180ms ease, visibility 180ms ease;
    visibility: hidden;
  }

  body.nav-open .main-nav,
  body.nav-open[data-page="home"] .main-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
  }

  .main-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 8px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: var(--text-md);
    cursor: pointer;
    transition: color var(--transition), background-color var(--transition);
  }

  .main-nav a::after {
    display: none;
  }

  .main-nav a:hover {
    color: var(--color-blue-600);
    background: rgba(0, 70, 184, 0.04);
  }

  .main-nav a.is-active {
    color: var(--color-blue-700);
    font-weight: 700;
    background: rgba(0, 70, 184, 0.06);
  }

  .page-banner,
  .product-banner,
  .detail-hero,
  .case-banner,
  .news-banner,
  .about-banner,
  .service-banner,
  .contact-hero {
    min-height: 240px;
    height: auto;
    background-position: center;
  }

  .page-banner__inner,
  .product-banner__inner,
  .detail-hero__inner,
  .case-banner__inner,
  .news-banner__inner,
  .about-banner__inner,
  .service-banner__inner,
  .contact-hero__inner {
    min-height: 240px;
    height: auto;
    align-content: center;
    justify-items: start;
    padding-block: 34px;
    text-align: left;
  }

  .page-banner h1,
  .product-banner h1,
  .detail-hero h1,
  .case-banner h1,
  .news-banner h1,
  .about-banner h1,
  .service-banner h1,
  .contact-hero h1 {
    font-size: var(--text-3xl);
    line-height: 1.18;
  }

  .page-banner p,
  .product-banner p,
  .detail-hero p,
  .case-banner p,
  .news-banner p,
  .about-banner p,
  .service-banner p,
  .contact-hero p {
    font-size: var(--text-lg);
    line-height: 1.55;
  }

  .case-detail-sidebar,
  .news-sidebar,
  .service-sidebar,
  .product-sidebar {
    position: static;
    width: 100%;
  }
}

@media (max-width: 768px) {
  :root {
    --section-gap: 36px;
    --card-gap: 16px;
  }

  .container,
  .container--wide {
    width: calc(100% - 32px);
  }

  body[data-page] .site-header .topbar,
  .site-header .topbar {
    display: block;
    min-height: 26px;
  }

  .site-header .topbar__inner {
    min-height: 26px;
  }

  .navbar,
  .navbar__inner {
    min-height: 62px;
  }

  .main-nav,
  body[data-page="home"] .main-nav {
    width: min(86vw, 320px);
    padding-top: 96px;
  }

  .page-banner,
  .product-banner,
  .detail-hero,
  .case-banner,
  .news-banner,
  .about-banner,
  .service-banner,
  .contact-hero {
    min-height: 220px;
    border-radius: 0;
  }

  .page-banner__inner,
  .product-banner__inner,
  .detail-hero__inner,
  .case-banner__inner,
  .news-banner__inner,
  .about-banner__inner,
  .service-banner__inner,
  .contact-hero__inner {
    min-height: 220px;
    padding-block: 28px;
  }

  .page-banner h1,
  .product-banner h1,
  .detail-hero h1,
  .case-banner h1,
  .news-banner h1,
  .about-banner h1,
  .service-banner h1,
  .contact-hero h1,
  .home-hero h1,
  .solution-hero__content h1 {
    font-size: 30px;
    line-height: 1.2;
  }

  .page-banner p,
  .product-banner p,
  .detail-hero p,
  .case-banner p,
  .news-banner p,
  .about-banner p,
  .service-banner p,
  .contact-hero p,
  .home-hero p,
  .solution-hero__content p {
    font-size: var(--text-md);
  }

  .banner-search {
    display: flex;
    width: 100%;
    margin-top: 18px;
  }

  .banner-search input {
    min-width: 0;
  }

  .layout-two,
  .layout-three,
  .product-list-layout,
  .product-main,
  .detail-summary-grid,
  .detail-content-grid,
  .detail-download-faq__grid,
  .detail-related-grid,
  .solution-hero__inner,
  .case-detail-layout,
  .case-detail-summary,
  .case-solution-card,
  .case-subscribe__inner,
  .case-feature,
  .case-related-strip,
  .news-layout,
  .news-detail-layout,
  .news-feature-card,
  .news-subscribe__inner,
  .about-intro,
  .about-mixed-grid,
  .about-triple-grid,
  .about-contact-strip__inner,
  .service-home-grid,
  .service-layout,
  .service-layout--left-right,
  .service-detail-layout,
  .service-download-hero,
  .contact-hero__inner,
  .contact-map-grid,
  .contact-form-grid,
  .contact-support-grid,
  .contact-phone-cta,
  .product-inquiry__inner {
    grid-template-columns: 1fr !important;
  }

  .grid-two,
  .grid-three,
  .grid-four,
  .form-grid,
  .home-product-grid,
  .home-advantage-grid,
  .home-solution-grid,
  .home-case-grid,
  .home-news-grid,
  .product-grid,
  .zz-product-grid,
  .product-filter-row,
  .product-helper-grid,
  .detail-media-grid,
  .detail-spec-grid,
  .detail-icon-row,
  .detail-selling-grid,
  .detail-download-grid,
  .detail-related-products,
  .related-product-grid,
  .solution-stats__inner,
  .solution-card-grid,
  .solution-why-row,
  .solution-process-row,
  .solution-case-grid,
  .solution-faq-grid,
  .case-card-grid,
  .case-feature-data,
  .case-benefit-row,
  .case-related-cards,
  .news-faq-grid,
  .news-related-grid,
  .about-stats-row,
  .about-intro-stats,
  .about-tabs__inner,
  .about-factory-grid,
  .about-honor-grid,
  .about-team-grid,
  .about-values-grid,
  .service-nav-card,
  .service-video-strip,
  .service-video-grid,
  .service-flow,
  .service-guarantee-grid,
  .service-video-strip--compact,
  .service-chapter-row,
  .service-doc-toc,
  .contact-info-grid,
  .contact-hero__points,
  .contact-branch-grid,
  .contact-trust-grid,
  .contact-number-row,
  .contact-phone-cta ul,
  .footer-main__grid,
  .footer-links {
    grid-template-columns: 1fr !important;
  }

  .footer-cta__form,
  .product-inquiry-form,
  .product-inquiry-form--inline,
  .quick-plan-form,
  .solution-hero-form form,
  .about-contact-form,
  .contact-form,
  .home-quote-form,
  .news-subscribe form,
  .case-subscribe form,
  form.js-form:not(.banner-search) {
    display: grid;
    grid-template-columns: 1fr !important;
  }

  .form-field input,
  .form-field select,
  .form-field textarea,
  .footer-cta__form input,
  .banner-search input,
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select {
    min-height: 44px;
  }

  textarea {
    min-height: 104px;
  }

  .card__body,
  .form-card,
  .sidebar-card,
  .placeholder-block,
  .service-side-card,
  .service-help-card,
  .news-side-card,
  .case-sidebar-card,
  .product-side-card,
  .contact-panel {
    padding: 20px;
  }

  .news-list-item,
  .service-download-table > a,
  .service-after-table > a,
  .service-policy-list a {
    grid-template-columns: 1fr !important;
  }

  .service-table-head,
  .service-download-table .service-table-head,
  .service-after-table .service-table-head {
    display: none;
  }

  .footer-main {
    padding-block: 32px;
  }

  .footer-main__grid,
  .footer-links,
  .footer-bottom__inner {
    display: grid;
    justify-items: start;
  }

  .footer-main__grid {
    gap: 26px;
  }

  .footer-links {
    gap: 18px;
    width: 100%;
  }

  .footer-qrcode {
    width: 100%;
  }

  .footer-bottom__inner {
    gap: 10px;
    min-height: auto;
    padding-block: 18px;
  }

  .footer-bottom nav {
    flex-wrap: wrap;
  }

  .floating-contact {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .container,
  .container--wide {
    width: calc(100% - 32px);
  }

  .navbar,
  .navbar__inner {
    min-height: 60px;
  }

  .brand {
    gap: 8px;
  }

  .brand__mark {
    width: 32px;
    height: 32px;
  }

  .brand__text strong {
    font-size: var(--font-brand-main);
  }

  .brand__text small {
    font-size: var(--font-brand-sub);
  }

  .nav-toggle {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  .main-nav,
  body[data-page="home"] .main-nav {
    width: min(88vw, 300px);
    padding: 86px 18px 24px;
  }

  .page-banner,
  .product-banner,
  .detail-hero,
  .case-banner,
  .news-banner,
  .about-banner,
  .service-banner,
  .contact-hero {
    min-height: 204px;
  }

  .page-banner__inner,
  .product-banner__inner,
  .detail-hero__inner,
  .case-banner__inner,
  .news-banner__inner,
  .about-banner__inner,
  .service-banner__inner,
  .contact-hero__inner {
    min-height: 204px;
    padding-block: 24px;
  }

  .page-banner h1,
  .product-banner h1,
  .detail-hero h1,
  .case-banner h1,
  .news-banner h1,
  .about-banner h1,
  .service-banner h1,
  .contact-hero h1,
  .home-hero h1,
  .solution-hero__content h1 {
    font-size: 28px;
  }

  .banner-search input,
  .banner-search button,
  .btn,
  .btn-accent,
  .btn-primary {
    min-height: 42px;
  }

  .banner-search button {
    min-width: 76px;
    padding-inline: 12px;
  }
}

/* Product page final mobile overrides.
   These live after the global mobile foundation so the products page can keep
   its two-column cards and compact support blocks on small screens. */
@media (max-width: 768px) {
  body[data-page="products"] .product-result-bar {
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
  }

  body[data-page="products"] .product-result-bar p {
    margin-right: auto;
  }

  body[data-page="products"] .product-tabs,
  body[data-page="products"] .product-filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body[data-page="products"] .product-tabs::-webkit-scrollbar,
  body[data-page="products"] .product-filters::-webkit-scrollbar {
    display: none;
  }

  body[data-page="products"] .product-tabs a,
  body[data-page="products"] .product-filters label,
  body[data-page="products"] .product-filters button,
  body[data-page="products"] .product-result-bar button {
    flex: 0 0 auto;
  }

  body[data-page="products"] .product-download-card > .btn.btn-primary,
  body[data-page="products"] .product-guide-card > .btn.btn-primary {
    display: flex;
    width: max-content;
    margin: 16px auto 0;
    justify-content: center;
  }

  body[data-page="products"] .product-list-section {
    padding-block: 24px;
  }

  body[data-page="products"] .product-grid {
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(128px, 34vw) !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 2px 0 8px;
  }

  body[data-page="products"] .product-grid::-webkit-scrollbar {
    display: none;
  }

  body[data-page="products"] .product-helper-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-page="products"] .service-guarantee-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body[data-page="products"] .service-guarantee-grid div {
    min-height: 92px;
    padding: 12px 6px;
  }

  body[data-page="products"] .service-guarantee-grid span {
    width: 34px;
    height: 34px;
  }

  body[data-page="products"] .product-inquiry__inner {
    grid-template-columns: 1fr !important;
  }

  body[data-page="products"] .product-inquiry-form {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  body[data-page="products"] .product-list-section {
    padding-block: 22px;
  }

  body[data-page="products"] .product-banner {
    min-height: 224px;
  }

  body[data-page="products"] .product-banner__inner {
    min-height: 224px;
    padding-block: 22px;
  }

  body[data-page="products"] .product-banner h1 {
    font-size: 28px;
  }

  body[data-page="products"] .product-banner p {
    max-width: 240px;
    font-size: 16px;
  }

  body[data-page="products"] .product-banner span {
    max-width: 240px;
    font-size: 11px;
  }

  body[data-page="products"] .product-category-card {
    padding: 14px 10px;
  }

  body[data-page="products"] .product-category-card h2,
  body[data-page="products"] .product-helper-grid h2,
  body[data-page="products"] .service-guarantee h2 {
    font-size: 18px;
  }

  body[data-page="products"] .product-category-list {
    gap: 8px 6px;
  }

  body[data-page="products"] .product-category-list a {
    min-height: 78px;
    padding: 9px 4px 8px;
    font-size: 10px;
    gap: 5px;
    border-radius: 12px;
  }

  body[data-page="products"] .product-category-list a::before {
    width: 32px;
    height: 32px;
  }

  body[data-page="products"] .product-category-list a span {
    min-height: 2.7em;
    font-size: 10px;
    line-height: 1.25;
  }

  body[data-page="products"] .product-grid {
    grid-auto-columns: minmax(108px, 31vw) !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 2px 0 8px;
  }

  body[data-page="products"] .product-grid::-webkit-scrollbar {
    display: none;
  }

  body[data-page="products"] .zz-product-card {
    min-height: 236px;
    padding: 12px 10px;
    scroll-snap-align: start;
  }

  body[data-page="products"] .zz-product-card img {
    height: 72px;
  }

  body[data-page="products"] .zz-product-card h3 {
    font-size: 13px;
  }

  body[data-page="products"] .zz-product-card p,
  body[data-page="products"] .zz-product-card dl {
    font-size: 10px;
  }

  body[data-page="products"] .zz-product-card a {
    min-height: 28px;
    border-radius: 4px;
    font-size: 12px;
  }

  body[data-page="products"] .recommend-row {
    display: block;
  }

  body[data-page="products"] .recommend-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  body[data-page="products"] .recommend-track::-webkit-scrollbar {
    display: none;
  }

  body[data-page="products"] .recommend-track a {
    flex-basis: 108px;
    min-height: 108px;
  }

  body[data-page="products"] .service-guarantee-grid {
    gap: 6px !important;
  }

  body[data-page="products"] .service-guarantee-grid div {
    min-height: 86px;
    padding: 10px 5px;
  }

  body[data-page="products"] .service-guarantee-grid strong {
    font-size: 12px;
  }

  body[data-page="products"] .service-guarantee-grid small {
    font-size: 9px;
  }

  body[data-page="products"] .product-inquiry {
    padding-bottom: 24px;
  }
}

/* Product detail page mobile overrides.
   Placed last so they can override the global mobile foundation cleanly. */
@media (max-width: 768px) {
  body[data-page="product-detail"] .detail-hero {
    min-height: 236px;
  }

  body[data-page="product-detail"] .detail-hero__inner {
    min-height: 236px;
    padding-block: 26px;
  }

  body[data-page="product-detail"] .detail-hero h1 {
    font-size: 30px;
  }

  body[data-page="product-detail"] .detail-hero p {
    max-width: 300px;
    font-size: 16px;
  }

  body[data-page="product-detail"] .detail-hero__features {
    gap: 8px 10px;
  }

  body[data-page="product-detail"] .detail-summary-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body[data-page="product-detail"] .detail-summary-grid > *,
  body[data-page="product-detail"] .detail-two-col > * {
    min-width: 0;
  }

  body[data-page="product-detail"] .product-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    min-width: 0;
  }

  body[data-page="product-detail"] .gallery-thumbs {
    display: flex;
    order: 2;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body[data-page="product-detail"] .gallery-thumbs::-webkit-scrollbar {
    display: none;
  }

  body[data-page="product-detail"] .gallery-thumbs button {
    flex: 0 0 auto;
    width: 72px;
    height: 56px;
  }

  body[data-page="product-detail"] .gallery-main {
    order: 1;
    min-height: 224px;
    padding: 14px;
  }

  body[data-page="product-detail"] .gallery-main img {
    height: 192px;
  }

  body[data-page="product-detail"] .gallery-play {
    width: 54px;
    height: 54px;
  }

  body[data-page="product-detail"] .gallery-actions {
    display: none;
  }

  body[data-page="product-detail"] .detail-product-info {
    padding: 0 4px;
    min-width: 0;
  }

  body[data-page="product-detail"] .detail-product-info h2 {
    font-size: 24px;
  }

  body[data-page="product-detail"] .detail-product-info > p {
    font-size: 14px;
    line-height: 1.7;
  }

  body[data-page="product-detail"] .detail-actions {
    gap: 10px;
    flex-wrap: wrap;
  }

  body[data-page="product-detail"] .detail-actions .btn {
    flex: 1 1 0;
    min-width: 0;
  }

  body[data-page="product-detail"] .detail-two-col {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  body[data-page="product-detail"] .detail-panel {
    padding: 18px 16px;
    min-width: 0;
  }

  body[data-page="product-detail"] .detail-panel-head {
    margin-bottom: 10px;
  }

  body[data-page="product-detail"] .product-params {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
  }

  body[data-page="product-detail"] .product-params table {
    min-width: 560px;
  }

  body[data-page="product-detail"] .detail-point-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-page="product-detail"] .detail-point-grid div {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 88px;
    padding: 12px 8px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-white);
    box-shadow: 0 10px 24px rgba(0, 43, 102, 0.05);
    text-align: center;
  }

  body[data-page="product-detail"] .detail-point-grid span {
    grid-row: auto;
    width: 38px;
    height: 38px;
    margin-bottom: 4px;
  }

  body[data-page="product-detail"] .detail-point-grid small {
    font-size: 11px;
  }

  body[data-page="product-detail"] .detail-advantage-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body[data-page="product-detail"] .detail-advantage-row img {
    height: 96px;
  }

  body[data-page="product-detail"] .detail-advantage-row h3 {
    margin: 12px 12px 4px;
    font-size: 14px;
  }

  body[data-page="product-detail"] .detail-advantage-row p {
    margin: 0 12px 12px;
    font-size: 11px;
    line-height: 1.45;
  }

  body[data-page="product-detail"] .download-file-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="product-detail"] .download-file-grid a {
    min-height: 110px;
    padding: 12px 8px;
  }

  body[data-page="product-detail"] .related-product-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 140px;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body[data-page="product-detail"] .related-product-grid::-webkit-scrollbar {
    display: none;
  }

  body[data-page="product-detail"] .related-product-grid .zz-product-card--small img {
    height: 78px;
  }

  body[data-page="product-detail"] .related-product-grid .zz-product-card--small h3 {
    min-height: 36px;
    font-size: 13px;
  }

  body[data-page="product-detail"] .related-solutions {
    gap: 10px;
    min-width: 0;
  }

  body[data-page="product-detail"] .related-solutions > a {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
  }

  body[data-page="product-detail"] .related-solutions img {
    width: 88px;
    height: 60px;
  }

  body[data-page="product-detail"] .product-inquiry--detail .product-inquiry__inner {
    padding: 22px 18px;
    min-width: 0;
  }

  body[data-page="product-detail"] .product-inquiry__copy h2 {
    font-size: 26px;
  }

  body[data-page="product-detail"] .product-inquiry__copy p {
    font-size: 13px;
  }

  body[data-page="product-detail"] .product-inquiry-form--inline {
    gap: 10px;
  }

  body[data-page="product-detail"] .product-inquiry-form--inline input {
    height: 44px;
  }
}

@media (max-width: 480px) {
  body[data-page="product-detail"] .detail-hero {
    min-height: 214px;
  }

  body[data-page="product-detail"] .detail-hero__inner {
    min-height: 214px;
    padding-block: 22px;
  }

  body[data-page="product-detail"] .detail-hero h1 {
    font-size: 28px;
  }

  body[data-page="product-detail"] .detail-hero p {
    max-width: 260px;
    font-size: 14px;
  }

  body[data-page="product-detail"] .detail-hero__features {
    gap: 6px 8px;
  }

  body[data-page="product-detail"] .detail-hero__features span {
    font-size: 11px;
  }

  body[data-page="product-detail"] .gallery-thumbs button {
    width: 64px;
    height: 50px;
  }

  body[data-page="product-detail"] .gallery-main {
    min-height: 196px;
    padding: 12px;
  }

  body[data-page="product-detail"] .gallery-main img {
    height: 166px;
  }

  body[data-page="product-detail"] .gallery-play {
    width: 50px;
    height: 50px;
  }

  body[data-page="product-detail"] .detail-product-info h2 {
    font-size: 22px;
  }

  body[data-page="product-detail"] .detail-product-info > p {
    font-size: 13px;
  }

  body[data-page="product-detail"] .detail-key-params span {
    font-size: 11px;
  }

  body[data-page="product-detail"] .detail-key-params strong {
    font-size: 14px;
  }

  body[data-page="product-detail"] .detail-mini-icons {
    gap: 8px;
    font-size: 10px;
  }

  body[data-page="product-detail"] .detail-actions {
    gap: 8px;
  }

  body[data-page="product-detail"] .detail-point-grid {
    gap: 6px;
  }

  body[data-page="product-detail"] .detail-point-grid div {
    min-height: 82px;
    padding: 10px 6px;
  }

  body[data-page="product-detail"] .detail-point-grid span {
    width: 34px;
    height: 34px;
  }

  body[data-page="product-detail"] .detail-point-grid strong {
    font-size: 12px;
  }

  body[data-page="product-detail"] .detail-point-grid small {
    font-size: 10px;
  }

  body[data-page="product-detail"] .detail-advantage-row {
    gap: 10px;
  }

  body[data-page="product-detail"] .detail-advantage-row img {
    height: 86px;
  }

  body[data-page="product-detail"] .detail-advantage-row h3 {
    font-size: 13px;
  }

  body[data-page="product-detail"] .detail-advantage-row p {
    font-size: 10px;
  }

  body[data-page="product-detail"] .download-file-grid {
    gap: 8px;
  }

  body[data-page="product-detail"] .download-file-grid a {
    min-height: 102px;
    padding: 10px 8px;
  }

  body[data-page="product-detail"] .download-file-grid span {
    font-size: 11px;
  }

  body[data-page="product-detail"] .related-product-grid {
    grid-auto-columns: 126px;
    gap: 10px;
  }

  body[data-page="product-detail"] .related-product-grid .zz-product-card--small img {
    height: 72px;
  }

  body[data-page="product-detail"] .related-product-grid .zz-product-card--small h3 {
    font-size: 12px;
  }

  body[data-page="product-detail"] .related-solutions > a {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 8px;
  }

  body[data-page="product-detail"] .related-solutions img {
    width: 80px;
    height: 54px;
  }

  body[data-page="product-detail"] .product-inquiry--detail .product-inquiry__inner {
    padding: 20px 16px;
  }

  body[data-page="product-detail"] .product-inquiry__copy h2 {
    font-size: 24px;
  }

  body[data-page="product-detail"] .product-inquiry-form--inline input {
    height: 42px;
  }
}

/* Solutions page final mobile overrides.
   These stay at the very end so solutions.html can follow the screenshot
   layout without disturbing the shared phone foundation. */
@media (max-width: 768px) {
  body[data-page="solutions"] .solution-hero {
    min-height: 252px;
  }

  body[data-page="solutions"] .solution-hero::before {
    background-position: center right;
    background-size: cover;
  }

  body[data-page="solutions"] .solution-hero__inner {
    min-height: 252px;
    padding-block: 26px 22px;
    align-content: center;
    justify-items: start;
    gap: 0;
  }

  body[data-page="solutions"] .solution-hero-form {
    display: none;
  }

  body[data-page="solutions"] .solution-hero__content h1 {
    margin-bottom: 10px;
    font-size: 28px;
    line-height: 1.15;
  }

  body[data-page="solutions"] .solution-hero__content p {
    max-width: 280px;
    font-size: 16px;
    line-height: 1.45;
  }

  body[data-page="solutions"] .solution-hero__content span {
    max-width: 300px;
    font-size: 13px;
    line-height: 1.55;
  }

  body[data-page="solutions"] .solution-hero__points {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 4px;
    margin-top: 18px;
  }

  body[data-page="solutions"] .solution-hero__points strong {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
  }

  body[data-page="solutions"] .solution-hero__points strong::before {
    width: 26px;
    height: 26px;
    border-width: 1.5px;
    background-image: var(--solution-hero-icon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    color: var(--color-white);
  }

  body[data-page="solutions"] .solution-hero__points strong:nth-child(1) {
    --solution-hero-icon: var(--icon-factory);
  }

  body[data-page="solutions"] .solution-hero__points strong:nth-child(2) {
    --solution-hero-icon: var(--icon-lightning);
  }

  body[data-page="solutions"] .solution-hero__points strong:nth-child(3) {
    --solution-hero-icon: var(--icon-shield);
  }

  body[data-page="solutions"] .solution-hero__points strong:nth-child(4) {
    --solution-hero-icon: var(--icon-support);
  }

  body[data-page="solutions"] .solution-stats {
    margin-top: -16px;
  }

  body[data-page="solutions"] .solution-stats__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body[data-page="solutions"] .solution-stats__inner div {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    min-height: 84px;
    padding: 14px 6px;
    text-align: left;
  }

  body[data-page="solutions"] .solution-stats__inner div:nth-child(1) {
    --solution-stat-icon: var(--icon-clock);
  }

  body[data-page="solutions"] .solution-stats__inner div:nth-child(2) {
    --solution-stat-icon: var(--icon-factory);
  }

  body[data-page="solutions"] .solution-stats__inner div:nth-child(3) {
    --solution-stat-icon: var(--icon-users);
  }

  body[data-page="solutions"] .solution-stats__inner div:nth-child(4) {
    --solution-stat-icon: var(--icon-support);
  }

  body[data-page="solutions"] .solution-stats__inner div::before {
    content: "";
    grid-row: 1 / 3;
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--color-blue-700);
    border-radius: 9px;
    background-color: #f4f8ff;
    background-image: var(--solution-stat-icon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    color: var(--color-blue-700);
  }

  body[data-page="solutions"] .solution-stats__inner strong {
    font-size: 18px;
  }

  body[data-page="solutions"] .solution-stats__inner span {
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.25;
  }

  body[data-page="solutions"] .solution-section {
    padding-block: 22px;
  }

  body[data-page="solutions"] .solution-section-title {
    margin-bottom: 16px;
    text-align: center;
  }

  body[data-page="solutions"] .solution-section-title h2 {
    font-size: 22px;
    line-height: 1.25;
  }

  body[data-page="solutions"] .solution-section-title p {
    font-size: 12px;
    line-height: 1.45;
  }

  body[data-page="solutions"] .solution-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }

  body[data-page="solutions"] .solution-card {
    position: relative;
  }

  body[data-page="solutions"] .solution-card img {
    height: 110px;
  }

  body[data-page="solutions"] .solution-card > div {
    padding: 12px;
  }

  body[data-page="solutions"] .solution-card h3 {
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.35;
  }

  body[data-page="solutions"] .solution-card h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 4px;
    font-size: 12px;
  }

  body[data-page="solutions"] .solution-card:nth-child(1) {
    --solution-card-badge: var(--icon-cpu);
  }

  body[data-page="solutions"] .solution-card:nth-child(2) {
    --solution-card-badge: var(--icon-factory);
  }

  body[data-page="solutions"] .solution-card:nth-child(3) {
    --solution-card-badge: var(--icon-target);
  }

  body[data-page="solutions"] .solution-card:nth-child(4) {
    --solution-card-badge: var(--icon-wrench);
  }

  body[data-page="solutions"] .solution-card::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--color-blue-700);
    border-radius: 9px;
    background-color: rgba(255, 255, 255, 0.96);
    background-image: var(--solution-card-badge);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    color: var(--color-blue-700);
    box-shadow: 0 8px 16px rgba(0, 43, 102, 0.12);
    pointer-events: none;
  }

  body[data-page="solutions"] .solution-card h4:nth-of-type(1) {
    --solution-card-h4-icon: var(--icon-target);
  }

  body[data-page="solutions"] .solution-card h4:nth-of-type(2) {
    --solution-card-h4-icon: var(--icon-cpu);
  }

  body[data-page="solutions"] .solution-card h4:nth-of-type(3) {
    --solution-card-h4-icon: var(--icon-check);
  }

  body[data-page="solutions"] .solution-card h4::before {
    content: "";
    width: 13px;
    height: 13px;
    border: 1.5px solid var(--color-blue-700);
    border-radius: 50%;
    background-color: #f4f8ff;
    background-image: var(--solution-card-h4-icon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 8px 8px;
    color: var(--color-blue-700);
  }

  body[data-page="solutions"] .solution-card p,
  body[data-page="solutions"] .solution-card li {
    font-size: 11px;
    line-height: 1.5;
  }

  body[data-page="solutions"] .solution-card li::before {
    top: 8px;
  }

  body[data-page="solutions"] .solution-more {
    width: 100%;
    max-width: 180px;
    margin: 16px auto 0;
  }

  body[data-page="solutions"] .solution-why-row {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0;
  }

  body[data-page="solutions"] .solution-why-row div {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 2px;
    align-items: center;
    justify-items: start;
    padding: 14px 10px;
    border-right: 0;
    text-align: left;
  }

  body[data-page="solutions"] .solution-why-row div:nth-child(1) {
    --solution-why-icon: var(--icon-target);
  }

  body[data-page="solutions"] .solution-why-row div:nth-child(2) {
    --solution-why-icon: var(--icon-cpu);
  }

  body[data-page="solutions"] .solution-why-row div:nth-child(3) {
    --solution-why-icon: var(--icon-wrench);
  }

  body[data-page="solutions"] .solution-why-row div:nth-child(4) {
    --solution-why-icon: var(--icon-clock);
  }

  body[data-page="solutions"] .solution-why-row div:nth-child(5) {
    --solution-why-icon: var(--icon-support);
  }

  body[data-page="solutions"] .solution-why-row div::before {
    content: "";
    grid-row: 1 / 3;
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--color-blue-700);
    border-radius: 8px;
    background-color: #f4f8ff;
    background-image: var(--solution-why-icon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    color: var(--color-blue-700);
  }

  body[data-page="solutions"] .solution-why-row strong {
    font-size: 10px;
    line-height: 1.2;
  }

  body[data-page="solutions"] .solution-why-row span {
    font-size: 9px;
    line-height: 1.25;
  }

  body[data-page="solutions"] .solution-process-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px 6px;
  }

  body[data-page="solutions"] .solution-process-row div {
    gap: 6px;
  }

  body[data-page="solutions"] .solution-process-row div::after {
    display: none;
  }

  body[data-page="solutions"] .solution-process-row span {
    width: 44px;
    height: 44px;
    font-size: 11px;
  }

  body[data-page="solutions"] .solution-process-row strong {
    font-size: 12px;
    line-height: 1.25;
  }

  body[data-page="solutions"] .solution-process-row small {
    font-size: 10px;
    line-height: 1.35;
  }

  body[data-page="solutions"] .solution-case-grid {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(146px, 42vw);
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  body[data-page="solutions"] .solution-case-grid::-webkit-scrollbar {
    display: none;
  }

  body[data-page="solutions"] .solution-case-grid a {
    position: relative;
    min-height: 222px;
    padding: 12px 12px 14px;
    align-content: start;
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
    scroll-snap-align: start;
  }

  body[data-page="solutions"] .solution-case-grid a::after {
    display: none;
  }

  body[data-page="solutions"] .solution-case-grid a:nth-child(1) {
    --solution-case-icon: var(--icon-factory);
  }

  body[data-page="solutions"] .solution-case-grid a:nth-child(2) {
    --solution-case-icon: var(--icon-cpu);
  }

  body[data-page="solutions"] .solution-case-grid a:nth-child(3) {
    --solution-case-icon: var(--icon-target);
  }

  body[data-page="solutions"] .solution-case-grid a:nth-child(4) {
    --solution-case-icon: var(--icon-shield);
  }

  body[data-page="solutions"] .solution-case-grid a::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--color-blue-700);
    border-radius: 9px;
    background-color: rgba(255, 255, 255, 0.96);
    background-image: var(--solution-case-icon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    color: var(--color-blue-700);
    box-shadow: 0 8px 16px rgba(0, 43, 102, 0.12);
    pointer-events: none;
  }

  body[data-page="solutions"] .solution-case-grid img {
    position: static;
    width: 100%;
    height: 96px;
    margin-bottom: 10px;
    border-radius: 10px;
  }

  body[data-page="solutions"] .solution-case-grid strong,
  body[data-page="solutions"] .solution-case-grid span,
  body[data-page="solutions"] .solution-case-grid em {
    position: static;
    z-index: auto;
  }

  body[data-page="solutions"] .solution-case-grid strong {
    margin-bottom: 4px;
    font-size: 15px;
  }

  body[data-page="solutions"] .solution-case-grid span {
    margin-bottom: 6px;
    color: var(--color-muted);
    font-size: 11px;
  }

  body[data-page="solutions"] .solution-case-grid em {
    color: var(--color-blue-700);
    font-size: 11px;
    line-height: 1.35;
  }

  body[data-page="solutions"] .solution-faq .solution-section-title {
    text-align: left;
  }

  body[data-page="solutions"] .solution-faq-grid {
    width: 100%;
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  body[data-page="solutions"] .solution-faq-grid a {
    min-height: 46px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 14px;
  }

  body[data-page="solutions"] .solution-faq-grid span {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border: 1.5px solid var(--color-blue-700);
    border-radius: 50%;
    background-color: #fff;
    color: var(--color-blue-700);
    font-size: 0;
    line-height: 0;
  }

  body[data-page="solutions"] .solution-faq-grid span::before {
    content: "";
    width: 10px;
    height: 10px;
    background-image: var(--icon-chevronRight);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  body[data-page="solutions"] .solution-inquiry {
    padding-top: 10px;
  }

  body[data-page="solutions"] .solution-inquiry .product-inquiry__inner {
    padding: 22px 16px;
    gap: 14px;
    align-items: stretch;
  }

  body[data-page="solutions"] .solution-inquiry .product-inquiry__copy {
    text-align: center;
  }

  body[data-page="solutions"] .solution-inquiry .product-inquiry__copy h2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-left: 0;
    font-size: 24px;
  }

  body[data-page="solutions"] .solution-inquiry .product-inquiry__copy h2::before {
    content: "";
    position: static;
    width: 24px;
    height: 24px;
    border: 1.5px solid rgba(255, 255, 255, 0.82);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
    background-image: var(--icon-support);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 13px 13px;
    color: var(--color-white);
    transform: none;
  }

  body[data-page="solutions"] .solution-inquiry .product-inquiry__copy p {
    font-size: 13px;
    line-height: 1.45;
  }

  body[data-page="solutions"] .solution-inquiry .product-inquiry-form--inline {
    gap: 10px;
  }

  body[data-page="solutions"] .solution-inquiry .product-inquiry-form--inline input,
  body[data-page="solutions"] .solution-inquiry .product-inquiry-form--inline select {
    height: 44px;
  }

  body[data-page="solutions"] .solution-inquiry .product-inquiry-form--inline textarea {
    min-height: 88px;
  }
}

@media (max-width: 480px) {
  body[data-page="solutions"] .solution-hero {
    min-height: 228px;
  }

  body[data-page="solutions"] .solution-hero__inner {
    min-height: 228px;
    padding-block: 22px 18px;
  }

  body[data-page="solutions"] .solution-hero__content h1 {
    font-size: 26px;
  }

  body[data-page="solutions"] .solution-hero__content p {
    max-width: 250px;
    font-size: 15px;
  }

  body[data-page="solutions"] .solution-hero__content span {
    max-width: 260px;
    font-size: 12px;
  }

  body[data-page="solutions"] .solution-hero__points {
    gap: 8px 2px;
    margin-top: 16px;
  }

  body[data-page="solutions"] .solution-hero__points strong {
    gap: 5px;
    font-size: 10px;
  }

  body[data-page="solutions"] .solution-hero__points strong::before {
    width: 24px;
    height: 24px;
    background-size: 12px 12px;
  }

  body[data-page="solutions"] .solution-stats {
    margin-top: -14px;
  }

  body[data-page="solutions"] .solution-stats__inner div {
    position: relative;
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    align-items: center;
    min-height: 80px;
    padding: 12px 4px;
    text-align: left;
  }

  body[data-page="solutions"] .solution-stats__inner div::before {
    width: 26px;
    height: 26px;
    background-size: 12px 12px;
  }

  body[data-page="solutions"] .solution-stats__inner strong {
    font-size: 16px;
  }

  body[data-page="solutions"] .solution-stats__inner span {
    font-size: 9px;
  }

  body[data-page="solutions"] .solution-section {
    padding-block: 20px;
  }

  body[data-page="solutions"] .solution-section-title {
    margin-bottom: 14px;
  }

  body[data-page="solutions"] .solution-section-title h2 {
    font-size: 20px;
  }

  body[data-page="solutions"] .solution-section-title p {
    font-size: 11px;
  }

  body[data-page="solutions"] .solution-card-grid {
    gap: 10px;
  }

  body[data-page="solutions"] .solution-card img {
    height: 100px;
  }

  body[data-page="solutions"] .solution-card > div {
    padding: 11px;
  }

  body[data-page="solutions"] .solution-card h3 {
    font-size: 13px;
  }

  body[data-page="solutions"] .solution-card h4 {
    margin-top: 8px;
    font-size: 11px;
  }

  body[data-page="solutions"] .solution-card::before {
    top: 9px;
    left: 9px;
    width: 26px;
    height: 26px;
    background-size: 14px 14px;
  }

  body[data-page="solutions"] .solution-card h4::before {
    width: 12px;
    height: 12px;
    background-size: 7px 7px;
  }

  body[data-page="solutions"] .solution-card p,
  body[data-page="solutions"] .solution-card li {
    font-size: 10px;
  }

  body[data-page="solutions"] .solution-why-row strong {
    font-size: 9px;
  }

  body[data-page="solutions"] .solution-why-row span {
    font-size: 8px;
  }

  body[data-page="solutions"] .solution-why-row div {
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 6px;
    padding: 12px 8px;
  }

  body[data-page="solutions"] .solution-why-row div::before {
    width: 24px;
    height: 24px;
    background-size: 12px 12px;
  }

  body[data-page="solutions"] .solution-process-row {
    gap: 8px 4px;
  }

  body[data-page="solutions"] .solution-process-row span {
    width: 40px;
    height: 40px;
    font-size: 10px;
  }

  body[data-page="solutions"] .solution-process-row strong {
    font-size: 11px;
  }

  body[data-page="solutions"] .solution-process-row small {
    font-size: 9px;
  }

  body[data-page="solutions"] .solution-case-grid {
    grid-auto-columns: minmax(136px, 44vw);
    gap: 10px;
  }

  body[data-page="solutions"] .solution-case-grid a {
    min-height: 210px;
    padding: 10px 10px 12px;
  }

  body[data-page="solutions"] .solution-case-grid a::before {
    top: 9px;
    left: 9px;
    width: 26px;
    height: 26px;
    background-size: 14px 14px;
  }

  body[data-page="solutions"] .solution-case-grid img {
    height: 88px;
    margin-bottom: 8px;
  }

  body[data-page="solutions"] .solution-case-grid strong {
    font-size: 14px;
  }

  body[data-page="solutions"] .solution-case-grid span,
  body[data-page="solutions"] .solution-case-grid em {
    font-size: 10px;
  }

  body[data-page="solutions"] .solution-faq-grid a {
    min-height: 44px;
    padding: 0 12px;
    font-size: 13px;
  }

  body[data-page="solutions"] .solution-faq-grid span {
    width: 18px;
    height: 18px;
    font-size: 0;
    line-height: 0;
  }

  body[data-page="solutions"] .solution-faq-grid span::before {
    width: 9px;
    height: 9px;
  }

  body[data-page="solutions"] .solution-inquiry .product-inquiry__inner {
    padding: 20px 14px;
    gap: 12px;
  }

  body[data-page="solutions"] .solution-inquiry .product-inquiry__copy h2 {
    gap: 8px;
    font-size: 22px;
  }

  body[data-page="solutions"] .solution-inquiry .product-inquiry__copy h2::before {
    width: 22px;
    height: 22px;
    background-size: 12px 12px;
  }

  body[data-page="solutions"] .solution-inquiry .product-inquiry__copy p {
    font-size: 12px;
  }

  body[data-page="solutions"] .solution-inquiry .product-inquiry-form--inline {
    gap: 8px;
  }
}

/* Cases page final mobile overrides.
   Keeps the list page close to the supplied mobile design without touching desktop. */
@media (max-width: 768px) {
  body[data-page="cases"] {
    padding-bottom: calc(env(safe-area-inset-bottom) + 92px);
  }

  body[data-page="cases"] .topbar {
    display: none;
  }

  body[data-page="cases"] .case-banner {
    min-height: 240px;
  }

  body[data-page="cases"] .case-banner::before {
    background-position: center right;
    background-size: cover;
  }

  body[data-page="cases"] .case-banner__inner {
    min-height: 240px;
    padding-block: 24px 20px;
    align-content: center;
    justify-items: start;
    text-align: left;
  }

  body[data-page="cases"] .case-banner h1 {
    font-size: 28px;
    line-height: 1.18;
  }

  body[data-page="cases"] .case-banner p {
    max-width: 280px;
    font-size: 15px;
    line-height: 1.45;
  }

  body[data-page="cases"] .case-banner-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 4px;
    width: 100%;
    margin-top: 18px;
  }

  body[data-page="cases"] .case-banner-stats span {
    min-width: 0;
    justify-items: center;
    text-align: center;
    font-size: 10px;
    line-height: 1.25;
  }

  body[data-page="cases"] .case-banner-stats span::before {
    width: 26px;
    height: 26px;
    margin-bottom: 5px;
    border-width: 1.5px;
  }

  body[data-page="cases"] .case-banner-stats strong {
    font-size: 16px;
  }

  body[data-page="cases"] .case-list-section {
    padding-block: 20px 22px;
  }

  body[data-page="cases"] .case-filter-bar {
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px;
  }

  body[data-page="cases"] .case-filter-bar nav {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body[data-page="cases"] .case-filter-bar nav::-webkit-scrollbar {
    display: none;
  }

  body[data-page="cases"] .case-filter-bar a,
  body[data-page="cases"] .case-filter-bar button {
    min-height: 34px;
    padding: 0 14px;
    font-size: 12px;
  }

  body[data-page="cases"] .case-filter-bar button {
    flex: 0 0 auto;
  }

  body[data-page="cases"] .case-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }

  body[data-page="cases"] .case-card img {
    height: 112px;
  }

  body[data-page="cases"] .case-card > div {
    padding: 12px;
  }

  body[data-page="cases"] .case-card h2 {
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.35;
  }

  body[data-page="cases"] .case-card h2 span {
    padding: 2px 6px;
    font-size: 10px;
  }

  body[data-page="cases"] .case-card p {
    min-height: 0;
    margin-bottom: 10px;
    font-size: 11px;
    line-height: 1.45;
  }

  body[data-page="cases"] .case-card dl {
    gap: 4px 6px;
    margin-bottom: 10px;
  }

  body[data-page="cases"] .case-card dt {
    font-size: 9px;
  }

  body[data-page="cases"] .case-card dd {
    font-size: 13px;
  }

  body[data-page="cases"] .case-card a {
    font-size: 12px;
  }

  body[data-page="cases"] .case-feature {
    grid-template-columns: 1fr !important;
    gap: 12px;
    margin-top: 20px;
  }

  body[data-page="cases"] .case-feature-cover {
    min-height: 188px;
    padding: 16px;
  }

  body[data-page="cases"] .case-feature-cover h2 {
    font-size: 20px;
  }

  body[data-page="cases"] .case-feature-cover span {
    margin-bottom: 8px;
    font-size: 12px;
  }

  body[data-page="cases"] .case-feature-cover p {
    font-size: 13px;
  }

  body[data-page="cases"] .case-feature-info,
  body[data-page="cases"] .case-feature-data {
    padding: 16px;
  }

  body[data-page="cases"] .case-feature-info,
  body[data-page="cases"] .case-feature-data {
    display: none;
  }

  body[data-page="cases"] .case-feature-info h2,
  body[data-page="cases"] .case-feature-data h2 {
    margin-bottom: 10px;
    font-size: 18px;
  }

  body[data-page="cases"] .case-feature-info h3 {
    margin: 12px 0 6px;
    font-size: 13px;
  }

  body[data-page="cases"] .case-feature-info p,
  body[data-page="cases"] .case-feature-info li {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="cases"] .case-feature-data {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
  }

  body[data-page="cases"] .case-feature-data strong {
    font-size: 18px;
  }

  body[data-page="cases"] .case-feature-data span {
    font-size: 11px;
  }

  body[data-page="cases"] .case-related-strip {
    display: none;
  }

  body[data-page="cases"] .case-inquiry {
    padding-top: 10px;
  }

  body[data-page="cases"] .case-inquiry .product-inquiry__inner {
    padding: 22px 16px;
    gap: 14px;
    align-items: stretch;
  }

  body[data-page="cases"] .case-inquiry .product-inquiry__copy {
    text-align: center;
  }

  body[data-page="cases"] .case-inquiry .product-inquiry__copy h2 {
    font-size: 24px;
  }

  body[data-page="cases"] .case-inquiry .product-inquiry__copy p {
    font-size: 13px;
    line-height: 1.45;
  }

  body[data-page="cases"] .mobile-bottom-nav--cases {
    position: fixed;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom) + 10px);
    left: 16px;
    z-index: 86;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 8px 4px 6px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(0, 20, 52, 0.14);
    backdrop-filter: blur(10px);
  }

  body[data-page="cases"] .mobile-bottom-nav--cases a {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 54px;
    color: var(--color-muted);
    font-size: 10px;
    line-height: 1.15;
    text-align: center;
  }

  body[data-page="cases"] .mobile-bottom-nav--cases a.is-active {
    color: var(--color-blue-700);
  }

  body[data-page="cases"] .mobile-bottom-nav--cases svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 480px) {
  body[data-page="cases"] {
    padding-bottom: calc(env(safe-area-inset-bottom) + 88px);
  }

  body[data-page="cases"] .case-banner {
    min-height: 226px;
  }

  body[data-page="cases"] .case-banner__inner {
    min-height: 226px;
    padding-block: 20px 18px;
  }

  body[data-page="cases"] .case-banner h1 {
    font-size: 26px;
  }

  body[data-page="cases"] .case-banner p {
    max-width: 250px;
    font-size: 14px;
  }

  body[data-page="cases"] .case-banner-stats {
    gap: 7px 3px;
    margin-top: 16px;
  }

  body[data-page="cases"] .case-banner-stats span {
    font-size: 9px;
  }

  body[data-page="cases"] .case-banner-stats span::before {
    width: 24px;
    height: 24px;
  }

  body[data-page="cases"] .case-banner-stats strong {
    font-size: 15px;
  }

  body[data-page="cases"] .case-list-section {
    padding-block: 18px 20px;
  }

  body[data-page="cases"] .case-filter-bar {
    padding: 8px;
  }

  body[data-page="cases"] .case-filter-bar a,
  body[data-page="cases"] .case-filter-bar button {
    min-height: 32px;
    padding: 0 12px;
    font-size: 11px;
  }

  body[data-page="cases"] .case-card-grid {
    gap: 10px;
  }

  body[data-page="cases"] .case-card img {
    height: 104px;
  }

  body[data-page="cases"] .case-card > div {
    padding: 11px;
  }

  body[data-page="cases"] .case-card h2 {
    font-size: 12px;
  }

  body[data-page="cases"] .case-card h2 span {
    padding: 2px 5px;
    font-size: 9px;
  }

  body[data-page="cases"] .case-card p {
    font-size: 10px;
  }

  body[data-page="cases"] .case-card dt {
    font-size: 8px;
  }

  body[data-page="cases"] .case-card dd {
    font-size: 12px;
  }

  body[data-page="cases"] .case-feature-cover {
    min-height: 174px;
    padding: 14px;
  }

  body[data-page="cases"] .case-feature-cover h2 {
    font-size: 18px;
  }

  body[data-page="cases"] .case-feature-cover p {
    font-size: 12px;
  }

  body[data-page="cases"] .case-feature-info,
  body[data-page="cases"] .case-feature-data {
    padding: 14px;
  }

  body[data-page="cases"] .case-feature-info h2,
  body[data-page="cases"] .case-feature-data h2 {
    font-size: 17px;
  }

  body[data-page="cases"] .case-feature-info p,
  body[data-page="cases"] .case-feature-info li {
    font-size: 11px;
  }

  body[data-page="cases"] .case-feature-data strong {
    font-size: 16px;
  }

  body[data-page="cases"] .case-feature-data span {
    font-size: 10px;
  }

  body[data-page="cases"] .case-inquiry .product-inquiry__inner {
    padding: 20px 14px;
    gap: 12px;
  }

  body[data-page="cases"] .case-inquiry .product-inquiry__copy h2 {
    font-size: 22px;
  }

  body[data-page="cases"] .case-inquiry .product-inquiry__copy p {
    font-size: 12px;
  }

  body[data-page="cases"] .mobile-bottom-nav--cases {
    right: 12px;
    left: 12px;
    gap: 2px;
    padding: 7px 2px 5px;
    border-radius: 16px;
  }

  body[data-page="cases"] .mobile-bottom-nav--cases a {
    min-height: 50px;
    font-size: 9px;
  }

  body[data-page="cases"] .mobile-bottom-nav--cases svg {
    width: 18px;
    height: 18px;
  }
}

/* About page final mobile overrides.
   Scoped to the about list page so desktop and shared WordPress-ready markup remain untouched. */
@media (max-width: 768px) {
  body[data-page="about"] {
    padding-bottom: calc(env(safe-area-inset-bottom) + 92px);
    background: var(--color-white);
  }

  /* about mobile header now uses the shared baseline */

  body[data-page="about"] .about-page {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
  }

  body[data-page="about"] .about-banner {
    order: 1;
    min-height: 188px;
    background: var(--color-navy-900);
  }

  body[data-page="about"] .about-banner::before {
    background-image:
      linear-gradient(90deg, rgba(0, 28, 63, 0.94), rgba(0, 43, 102, 0.72) 54%, rgba(0, 43, 102, 0.24)),
      var(--banner-image, url("../images/banners/about-factory-workshop.png"));
    background-position: center;
  }

  body[data-page="about"] .about-banner__inner {
    min-height: 188px;
    padding-block: 24px 20px;
    align-content: center;
  }

  body[data-page="about"] .about-banner h1 {
    margin-bottom: 10px;
    font-size: 25px;
    line-height: 1.18;
  }

  body[data-page="about"] .about-banner p {
    max-width: 280px;
    font-size: 15px;
    line-height: 1.55;
  }

  body[data-page="about"] .about-banner-crumb {
    margin-top: 16px;
    font-size: 12px;
  }

  body[data-page="about"] .about-tabs {
    order: 2;
    margin-top: 0;
    background: var(--color-white);
    box-shadow: 0 8px 22px rgba(0, 20, 52, 0.06);
  }

  body[data-page="about"] .about-tabs__inner {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body[data-page="about"] .about-tabs a {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-height: 72px;
    padding: 10px 4px 9px;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
  }

  body[data-page="about"] .about-tabs a:nth-child(1) {
    --about-tab-icon: var(--icon-home);
  }

  body[data-page="about"] .about-tabs a:nth-child(2) {
    --about-tab-icon: var(--icon-factory);
  }

  body[data-page="about"] .about-tabs a:nth-child(3) {
    --about-tab-icon: var(--icon-shield);
  }

  body[data-page="about"] .about-tabs a:nth-child(4) {
    --about-tab-icon: var(--icon-users);
  }

  body[data-page="about"] .about-tabs a:nth-child(5) {
    --about-tab-icon: var(--icon-clock);
  }

  body[data-page="about"] .about-tabs a:nth-child(6) {
    --about-tab-icon: var(--icon-target);
  }

  body[data-page="about"] .about-tabs a:nth-child(3n) {
    border-right: 0;
  }

  body[data-page="about"] .about-tabs a::before {
    content: "";
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-blue-700);
    border-radius: 8px;
    color: var(--color-blue-700);
    background-color: #f4f8ff;
    background-image: var(--about-tab-icon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
  }

  body[data-page="about"] .about-tabs a::after {
    width: 42px;
    height: 2px;
  }

  body[data-page="about"] .about-tabs a.is-active {
    color: var(--color-blue-700);
    background: #f8fbff;
  }

  body[data-page="about"] .about-intro-section {
    order: 3;
    padding-block: 24px 22px;
    background: var(--color-white);
  }

  body[data-page="about"] .about-intro {
    gap: 16px;
  }

  body[data-page="about"] .about-intro article {
    display: grid;
    justify-items: start;
  }

  body[data-page="about"] .about-intro h2,
  body[data-page="about"] .about-factory-section h2,
  body[data-page="about"] .about-culture h2,
  body[data-page="about"] .about-advantages h2,
  body[data-page="about"] .about-team-section h2,
  body[data-page="about"] .about-values-section h2,
  body[data-page="about"] .about-section-head h2 {
    margin-bottom: 14px;
    font-size: 22px;
    line-height: 1.25;
  }

  body[data-page="about"] .about-intro h2::after,
  body[data-page="about"] .about-team-section h2::after,
  body[data-page="about"] .about-values-section h2::after {
    width: 42px;
    height: 2px;
    margin-top: 9px;
  }

  body[data-page="about"] .about-intro p {
    margin-bottom: 10px;
    color: #4d5a6d;
    font-size: 13px;
    line-height: 1.75;
  }

  body[data-page="about"] .about-intro-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100%;
    gap: 8px;
    margin: 14px 0 16px;
  }

  body[data-page="about"] .about-intro-stats div:nth-child(1) {
    --about-intro-icon: var(--icon-clock);
  }

  body[data-page="about"] .about-intro-stats div:nth-child(2) {
    --about-intro-icon: var(--icon-factory);
  }

  body[data-page="about"] .about-intro-stats div:nth-child(3) {
    --about-intro-icon: var(--icon-users);
  }

  body[data-page="about"] .about-intro-stats div:nth-child(4) {
    --about-intro-icon: var(--icon-support);
  }

  body[data-page="about"] .about-intro-stats div {
    display: grid;
    justify-items: center;
    min-height: 70px;
    padding: 0 2px;
  }

  body[data-page="about"] .about-intro-stats div::before {
    content: "";
    width: 28px;
    height: 28px;
    margin-bottom: 6px;
    border: 1.5px solid rgba(0, 70, 184, 0.16);
    border-radius: 10px;
    color: var(--color-blue-700);
    background-color: #f4f8ff;
    background-image: var(--about-intro-icon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
  }

  body[data-page="about"] .about-intro-stats strong {
    font-size: 16px;
    line-height: 1.2;
  }

  body[data-page="about"] .about-intro-stats span {
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.25;
  }

  body[data-page="about"] .about-intro .btn {
    justify-self: center;
    min-width: 116px;
    min-height: 40px;
    margin-top: 2px;
    padding-inline: 18px;
    border-radius: 6px;
    font-size: 13px;
  }

  body[data-page="about"] .about-video {
    width: 100%;
    border-radius: 8px;
  }

  body[data-page="about"] .about-video img {
    height: 172px;
  }

  body[data-page="about"] .about-video button {
    width: 58px;
    height: 58px;
    font-size: 22px;
  }

  body[data-page="about"] .about-factory-section {
    order: 4;
    padding-block: 20px 22px;
    background: var(--color-white);
  }

  body[data-page="about"] .about-factory-grid {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(118px, 32vw);
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body[data-page="about"] .about-factory-grid::-webkit-scrollbar {
    display: none;
  }

  body[data-page="about"] .about-factory-grid article {
    position: relative;
    overflow: hidden;
    min-height: 88px;
    border-radius: 8px;
    color: var(--color-white);
    background: var(--color-navy-900);
    box-shadow: var(--shadow-soft);
    scroll-snap-align: start;
  }

  body[data-page="about"] .about-factory-grid img {
    position: absolute;
    inset: 0;
    height: 100%;
    border-radius: 0;
    opacity: 0.72;
  }

  body[data-page="about"] .about-factory-grid strong,
  body[data-page="about"] .about-factory-grid span {
    position: relative;
    z-index: 1;
    align-self: end;
    padding-inline: 8px;
    color: var(--color-white);
    text-shadow: 0 1px 8px rgba(0, 20, 52, 0.46);
  }

  body[data-page="about"] .about-factory-grid strong {
    display: none;
  }

  body[data-page="about"] .about-factory-grid span {
    align-self: end;
    padding-bottom: 10px;
    font-size: 12px;
    font-weight: 800;
  }

  body[data-page="about"] .about-triple-section {
    order: 5;
    padding-block: 20px 22px;
    background: var(--color-white);
  }

  body[data-page="about"] .about-triple-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  body[data-page="about"] .about-panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body[data-page="about"] .about-advantages {
    order: 1;
    padding: 0;
  }

  body[data-page="about"] .about-honors {
    order: 2;
    padding: 0;
  }

  body[data-page="about"] .about-culture {
    order: 3;
    padding: 0;
  }

  body[data-page="about"] .about-advantages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
  }

  body[data-page="about"] .about-advantages h2 {
    grid-column: 1 / -1;
  }

  body[data-page="about"] .about-advantages div {
    min-height: 80px;
    gap: 4px;
    padding: 0 0 0 38px;
    border-bottom: 0;
  }

  body[data-page="about"] .about-advantages strong {
    font-size: 14px;
  }

  body[data-page="about"] .about-advantages strong::before {
    left: -38px;
    top: -4px;
    width: 28px;
    height: 28px;
    border-width: 1.5px;
  }

  body[data-page="about"] .about-advantages strong::after {
    left: -31px;
    top: 3px;
    width: 14px;
    height: 14px;
  }

  body[data-page="about"] .about-advantages p {
    font-size: 11px;
    line-height: 1.5;
  }

  body[data-page="about"] .about-culture div {
    padding: 11px 0 11px 42px;
  }

  body[data-page="about"] .about-culture strong::before {
    left: -42px;
    width: 30px;
    height: 30px;
    border-width: 1.5px;
  }

  body[data-page="about"] .about-culture strong::after {
    left: -34px;
    top: 2px;
    width: 14px;
    height: 14px;
  }

  body[data-page="about"] .about-honor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }

  body[data-page="about"] .about-honor-grid a {
    gap: 7px;
  }

  body[data-page="about"] .about-honor-grid img {
    height: 92px;
    border-radius: 6px;
  }

  body[data-page="about"] .about-honor-grid span {
    font-size: 11px;
    line-height: 1.35;
  }

  body[data-page="about"] .about-team-section {
    order: 6;
    padding-block: 20px 22px;
    background: var(--color-white);
  }

  body[data-page="about"] .about-team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  body[data-page="about"] .about-team-grid article {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 20, 52, 0.06);
  }

  body[data-page="about"] .about-team-grid article:first-child {
    grid-column: 1 / -1;
  }

  body[data-page="about"] .about-team-grid img {
    height: 78px;
  }

  body[data-page="about"] .about-team-grid article:first-child img {
    height: 142px;
  }

  body[data-page="about"] .about-team-grid h3 {
    margin: 9px 6px 4px;
    font-size: 12px;
    line-height: 1.25;
  }

  body[data-page="about"] .about-team-grid p {
    margin: 0 8px 10px;
    font-size: 10px;
    line-height: 1.35;
  }

  body[data-page="about"] .about-values-section {
    order: 7;
    padding-block: 20px 22px;
    background: var(--color-white);
  }

  body[data-page="about"] .about-values-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body[data-page="about"] .about-values-grid div:nth-child(1) {
    --about-values-icon: var(--icon-chat);
  }

  body[data-page="about"] .about-values-grid div:nth-child(2) {
    --about-values-icon: var(--icon-wrench);
  }

  body[data-page="about"] .about-values-grid div:nth-child(3) {
    --about-values-icon: var(--icon-support);
  }

  body[data-page="about"] .about-values-grid div:nth-child(4) {
    --about-values-icon: var(--icon-download);
  }

  body[data-page="about"] .about-values-grid div:nth-child(5) {
    --about-values-icon: var(--icon-cpu);
  }

  body[data-page="about"] .about-values-grid div {
    min-height: 72px;
    gap: 4px;
    padding: 0 3px;
    border-right: 0;
    justify-items: center;
  }

  body[data-page="about"] .about-values-grid div::before {
    content: "";
    width: 28px;
    height: 28px;
    margin-bottom: 4px;
    border: 1.5px solid rgba(0, 70, 184, 0.16);
    border-radius: 50%;
    color: var(--color-blue-700);
    background-color: #f4f8ff;
    background-image: var(--about-values-icon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
  }

  body[data-page="about"] .about-values-grid strong {
    font-size: 11px;
    line-height: 1.2;
  }

  body[data-page="about"] .about-values-grid span {
    font-size: 9px;
    line-height: 1.3;
  }

  body[data-page="about"] .about-contact-strip {
    order: 8;
    padding-block: 8px 18px;
    background: var(--color-white);
  }

  body[data-page="about"] .about-contact-strip__inner {
    grid-template-columns: 1fr !important;
    gap: 16px;
    padding: 24px 16px;
    border-radius: 10px;
    background: linear-gradient(145deg, var(--color-navy-900), var(--color-blue-700));
  }

  body[data-page="about"] .about-contact-copy {
    text-align: center;
  }

  body[data-page="about"] .about-contact-copy h2 {
    margin-bottom: 10px;
    font-size: 22px;
    line-height: 1.35;
  }

  body[data-page="about"] .about-contact-copy p {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.6;
  }

  body[data-page="about"] .about-contact-copy span {
    display: block;
    margin: 4px 0 0;
    font-size: 12px;
  }

  body[data-page="about"] .about-contact-form {
    grid-template-columns: 1fr !important;
    gap: 10px;
    width: 100%;
    padding: 14px;
    border-radius: 8px;
  }

  body[data-page="about"] .about-contact-form__wide {
    grid-column: auto;
  }

  body[data-page="about"] .about-contact-form label {
    gap: 5px;
    font-size: 12px;
  }

  body[data-page="about"] .about-contact-form input {
    height: 42px;
  }

  body[data-page="about"] .about-contact-form textarea {
    min-height: 92px;
  }

  body[data-page="about"] .about-contact-form button {
    width: 100%;
    min-height: 44px;
    margin-top: 2px;
    border-radius: 6px;
  }

  body[data-page="about"] .about-timeline-section {
    order: 9;
    padding-block: 20px 24px;
  }

  body[data-page="about"] .about-section-head {
    align-items: flex-start;
    margin-bottom: 14px;
  }

  body[data-page="about"] .about-section-head a {
    font-size: 12px;
  }

  body[data-page="about"] .about-timeline {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px;
    padding: 0;
  }

  body[data-page="about"] .about-timeline::before {
    display: none;
  }

  body[data-page="about"] .about-timeline div {
    --about-timeline-icon: var(--icon-clock);
  }

  body[data-page="about"] .about-timeline div {
    min-height: 64px;
    padding: 12px 14px 12px 48px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
    box-shadow: 0 8px 18px rgba(0, 20, 52, 0.05);
  }

  body[data-page="about"] .about-timeline div::before {
    top: 17px;
    left: 17px;
    width: 14px;
    height: 14px;
    border: 1.5px solid rgba(0, 70, 184, 0.18);
    border-radius: 50%;
    color: var(--color-blue-700);
    background-color: #f4f8ff;
    background-image: var(--about-timeline-icon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 8px 8px;
  }

  body[data-page="about"] .about-timeline strong {
    margin-bottom: 4px;
    font-size: 16px;
  }

  body[data-page="about"] .about-timeline span {
    font-size: 12px;
    line-height: 1.45;
  }

  body[data-page="about"] .site-footer {
    background: var(--color-navy-950);
  }

  body[data-page="about"] .footer-main {
    padding-block: 30px 24px;
  }

  body[data-page="about"] .footer-main__grid {
    gap: 22px;
  }

  body[data-page="about"] .footer-company h2 {
    margin-bottom: 10px;
    font-size: 22px;
  }

  body[data-page="about"] .footer-company p,
  body[data-page="about"] .footer-contact {
    font-size: 12px;
    line-height: 1.6;
  }

  body[data-page="about"] .footer-links {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px;
  }

  body[data-page="about"] .footer-links h3 {
    margin-bottom: 8px;
    font-size: 13px;
  }

  body[data-page="about"] .footer-links a {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.35;
  }

  body[data-page="about"] .footer-qrcode {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  body[data-page="about"] .footer-qrcode img {
    width: 86px;
    height: 86px;
    margin-bottom: 0;
    border-width: 5px;
  }

  body[data-page="about"] .footer-qrcode h3,
  body[data-page="about"] .footer-qrcode p,
  body[data-page="about"] .footer-qrcode .social-links {
    grid-column: 2;
  }

  body[data-page="about"] .footer-bottom__inner {
    justify-items: center;
    text-align: center;
  }

  body[data-page="about"] .footer-bottom nav {
    justify-content: center;
  }

  body[data-page="about"] .mobile-bottom-nav--cases {
    position: fixed;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 10px);
    left: 12px;
    z-index: 86;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 7px 2px 5px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(0, 20, 52, 0.14);
    backdrop-filter: blur(10px);
  }

  body[data-page="about"] .mobile-bottom-nav--cases a {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 50px;
    color: var(--color-muted);
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
  }

  body[data-page="about"] .mobile-bottom-nav--cases a.is-active {
    color: var(--color-blue-700);
  }

body[data-page="about"] .mobile-bottom-nav--cases svg {
    width: 18px;
    height: 18px;
  }
}

/* News page final mobile overrides.
   Scoped to the news list page so the shared desktop layout and other page templates stay intact. */
@media (max-width: 768px) {
  body[data-page="news"] {
    padding-bottom: calc(env(safe-area-inset-bottom) + 92px);
    background: #f7faff;
  }

  body[data-page="news"] .site-header {
    box-shadow: 0 1px 14px rgba(0, 20, 52, 0.08);
  }

  body[data-page="news"] .news-page {
    display: flex;
    flex-direction: column;
    background: #f7faff;
  }

  body[data-page="news"] .news-banner {
    min-height: 214px;
    background: var(--color-navy-900);
  }

  body[data-page="news"] .news-banner::before {
    background-image:
      linear-gradient(90deg, rgba(0, 28, 63, 0.94), rgba(0, 43, 102, 0.76) 52%, rgba(0, 43, 102, 0.2)),
      var(--banner-image, url("../images/banners/news-industrial-production.jpg"));
    background-position: center;
  }

  body[data-page="news"] .news-banner__inner {
    min-height: 214px;
    padding-block: 24px 20px;
    align-content: center;
  }

  body[data-page="news"] .news-banner h1 {
    margin-bottom: 10px;
    font-size: 25px;
    line-height: 1.18;
  }

  body[data-page="news"] .news-banner p {
    max-width: 286px;
    font-size: 15px;
    line-height: 1.55;
  }

  body[data-page="news"] .news-breadcrumb {
    padding-block: 12px 0;
    background: #f7faff;
  }

  body[data-page="news"] .breadcrumb__list {
    gap: 6px;
    color: var(--color-subtle);
    font-size: 12px;
  }

  body[data-page="news"] .news-list-section {
    padding-block: 16px 20px;
  }

  body[data-page="news"] .news-layout {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  body[data-page="news"] .news-main-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-page="news"] .news-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    box-shadow: var(--shadow-card);
  }

  body[data-page="news"] .news-tabs a {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    min-height: 92px;
    padding: 12px 8px 10px;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    background: transparent;
  }

  body[data-page="news"] .news-tabs a:nth-child(1) {
    --news-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='2'/%3E%3Cpath d='M8 9h8M8 13h8M8 17h5'/%3E%3C/svg%3E");
  }

  body[data-page="news"] .news-tabs a:nth-child(2) {
    --news-tab-icon: var(--icon-factory);
  }

  body[data-page="news"] .news-tabs a:nth-child(3) {
    --news-tab-icon: var(--icon-target);
  }

  body[data-page="news"] .news-tabs a:nth-child(4) {
    --news-tab-icon: var(--icon-cpu);
  }

  body[data-page="news"] .news-tabs a:nth-child(5) {
    --news-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5 12 4l8 3.5V17l-8 3.5L4 17V7.5Z'/%3E%3Cpath d='M12 4v16'/%3E%3Cpath d='M4 7.5 12 11l8-3.5'/%3E%3C/svg%3E");
  }

  body[data-page="news"] .news-tabs a:nth-child(6) {
    --news-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='14' rx='2'/%3E%3Cpath d='M8 3.5v4M16 3.5v4M3.5 10h17'/%3E%3C/svg%3E");
  }

  body[data-page="news"] .news-tabs a::before {
    content: "";
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--color-blue-700);
    background-image: var(--news-tab-icon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
  }

  body[data-page="news"] .news-tabs a::after {
    display: none;
  }

  body[data-page="news"] .news-tabs a:nth-child(3n) {
    border-right: 0;
  }

  body[data-page="news"] .news-tabs a:nth-child(n + 4) {
    border-bottom: 0;
  }

  body[data-page="news"] .news-tabs a.is-active,
  body[data-page="news"] .news-tabs a.active,
  body[data-page="news"] .news-tabs a.current,
  body[data-page="news"] .news-tabs a.selected,
  body[data-page="news"] .news-tabs a.news-tab-active,
  body[data-page="news"] .news-tabs a.category-active,
  body[data-page="news"] .news-tabs a.is-active:hover,
  body[data-page="news"] .news-tabs a.active:hover,
  body[data-page="news"] .news-tabs a.current:hover,
  body[data-page="news"] .news-tabs a.selected:hover,
  body[data-page="news"] .news-tabs a.news-tab-active:hover,
  body[data-page="news"] .news-tabs a.category-active:hover {
    color: #fff !important;
    border-color: var(--color-blue-700);
    background: var(--color-blue-700);
  }

  body[data-page="news"] .news-tabs a.is-active::before,
  body[data-page="news"] .news-tabs a.active::before,
  body[data-page="news"] .news-tabs a.current::before,
  body[data-page="news"] .news-tabs a.selected::before,
  body[data-page="news"] .news-tabs a.news-tab-active::before,
  body[data-page="news"] .news-tabs a.category-active::before,
  body[data-page="news"] .news-tabs a.is-active:hover::before,
  body[data-page="news"] .news-tabs a.active:hover::before,
  body[data-page="news"] .news-tabs a.current:hover::before,
  body[data-page="news"] .news-tabs a.selected:hover::before,
  body[data-page="news"] .news-tabs a.news-tab-active:hover::before,
  body[data-page="news"] .news-tabs a.category-active:hover::before {
    color: #fff;
  }

  body[data-page="news"] .news-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
  }

  body[data-page="news"] .news-list-item {
    grid-template-columns: 110px minmax(0, 1fr) !important;
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
  }

  body[data-page="news"] .news-list-item img {
    width: 110px;
    height: 104px;
    border-radius: 8px;
  }

  body[data-page="news"] .news-list-item > div {
    min-width: 0;
  }

  body[data-page="news"] .news-tag {
    margin-bottom: 6px;
    padding: 2px 8px;
    font-size: 11px;
  }

  body[data-page="news"] .news-list-item h2 {
    margin-bottom: 6px;
    font-size: 15px;
    line-height: 1.35;
  }

  body[data-page="news"] .news-list-item p {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="news"] .news-meta {
    gap: 10px;
    font-size: 11px;
    line-height: 1.2;
  }

  body[data-page="news"] .news-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
  }

  body[data-page="news"] .news-meta span::before {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    margin-right: 0;
    border: 0;
    border-radius: 0;
  }

  body[data-page="news"] .news-arrow {
    display: none;
  }

  body[data-page="news"] .news-pagination {
    margin-top: 6px;
    padding-top: 0;
    gap: 6px;
  }

  body[data-page="news"] .news-pagination a,
  body[data-page="news"] .news-pagination span {
    min-width: 28px;
    height: 28px;
    font-size: 11px;
  }

  body[data-page="news"] .news-sidebar {
    gap: 14px;
  }

  body[data-page="news"] .news-side-card {
    padding: 18px 16px;
  }

  body[data-page="news"] .news-side-card h2 {
    margin-bottom: 12px;
    font-size: 18px;
  }

  body[data-page="news"] .news-rank-list {
    gap: 10px;
  }

  body[data-page="news"] .news-rank-list a {
    grid-template-columns: 30px 72px minmax(0, 1fr);
    gap: 8px;
  }

  body[data-page="news"] .news-rank-list span {
    width: 30px;
    height: 38px;
    font-size: 12px;
  }

  body[data-page="news"] .news-rank-list img {
    width: 72px;
    height: 46px;
  }

  body[data-page="news"] .news-rank-list strong {
    font-size: 12px;
    line-height: 1.4;
  }

  body[data-page="news"] .news-rank-list small {
    font-size: 10px;
  }

  body[data-page="news"] .news-recommend-list li {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.5;
  }

  body[data-page="news"] .news-tag-cloud {
    gap: 8px;
    align-items: center;
  }

  body[data-page="news"] .news-tag-cloud a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    text-align: center;
  }

  body[data-page="news"] .news-contact-card strong {
    font-size: 24px;
  }

  body[data-page="news"] .news-contact-card .btn {
    width: 100%;
    margin-top: 14px;
  }

  body[data-page="news"] .news-feature-section {
    padding-bottom: 20px;
  }

  body[data-page="news"] .news-feature-card {
    grid-template-columns: 1fr !important;
    gap: 14px;
    padding: 14px;
    align-items: start;
  }

  body[data-page="news"] .news-feature-card > img {
    height: 196px;
  }

  body[data-page="news"] .news-feature-meta {
    margin-bottom: 8px;
  }

  body[data-page="news"] .news-feature-card h2 {
    font-size: 20px;
    line-height: 1.3;
  }

  body[data-page="news"] .news-feature-card p,
  body[data-page="news"] .news-feature-card li {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="news"] .news-feature-card ol {
    margin-bottom: 14px;
  }

  body[data-page="news"] .news-feature-card aside {
    gap: 10px;
  }

  body[data-page="news"] .news-feature-card aside h3 {
    font-size: 16px;
  }

  body[data-page="news"] .news-feature-card aside a:not(.btn) {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 10px;
  }

  body[data-page="news"] .news-feature-card aside img {
    width: 84px;
    height: 54px;
  }

  body[data-page="news"] .news-feature-card aside span {
    font-size: 12px;
  }

  body[data-page="news"] .news-feature-card > article > .btn.btn-primary.btn-sm {
    display: flex;
    width: max-content;
    margin: 14px auto 0;
    justify-content: center;
  }

  body[data-page="news"] .news-subscribe {
    padding-block: 0 20px;
  }

  body[data-page="news"] .news-subscribe__inner {
    grid-template-columns: 1fr !important;
    gap: 14px;
    padding: 22px 16px;
  }

  body[data-page="news"] .news-subscribe h2 {
    font-size: 22px;
    line-height: 1.25;
  }

  body[data-page="news"] .news-subscribe p {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="news"] .news-subscribe form {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  body[data-page="news"] .news-subscribe input {
    height: 44px;
  }

  body[data-page="news"] .news-faq-strip {
    padding-block: 18px 20px;
  }

  body[data-page="news"] .news-faq-strip h2 {
    margin-bottom: 14px;
    color: var(--color-text);
    font-size: 22px;
    text-align: left;
  }

  body[data-page="news"] .news-faq-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  body[data-page="news"] .news-faq-grid a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 8px;
  }

  body[data-page="news"] .news-faq-grid a::after {
    content: "+";
    color: var(--color-blue-700);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
  }

  body[data-page="news"] .news-faq-grid strong {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.3;
  }

  body[data-page="news"] .news-faq-grid span {
    display: none;
  }

  body[data-page="news"] .news-quote {
    padding-top: 10px;
  }

  body[data-page="news"] .news-quote .product-inquiry__inner {
    padding: 22px 16px;
    gap: 14px;
    align-items: stretch;
  }

  body[data-page="news"] .news-quote .product-inquiry__copy {
    text-align: center;
  }

  body[data-page="news"] .news-quote .product-inquiry__copy h2 {
    font-size: 24px;
    line-height: 1.25;
  }

  body[data-page="news"] .news-quote .product-inquiry__copy p {
    font-size: 13px;
    line-height: 1.45;
  }

  body[data-page="news"] .news-quote .product-inquiry-form--inline {
    gap: 10px;
  }

  body[data-page="news"] .news-quote .product-inquiry-form--inline input,
  body[data-page="news"] .news-quote .product-inquiry-form--inline select {
    height: 44px;
  }

  body[data-page="news"] .news-quote .product-inquiry-form--inline textarea {
    min-height: 88px;
  }

  body[data-page="news"] .mobile-bottom-nav--cases {
    display: none;
  }

  body[data-page="news"] .mobile-bottom-nav--news {
    position: fixed;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 10px);
    left: 12px;
    z-index: 86;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 7px 2px 5px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(0, 20, 52, 0.14);
    backdrop-filter: blur(10px);
  }

  body[data-page="news"] .mobile-bottom-nav--news a {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 50px;
    color: var(--color-muted);
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
  }

  body[data-page="news"] .mobile-bottom-nav--news a.is-active {
    color: var(--color-blue-700);
  }

  body[data-page="news"] .mobile-bottom-nav--news svg {
    width: 18px;
    height: 18px;
  }

  body[data-page="news"] .floating-contact {
    position: fixed;
    top: 50%;
    right: 8px;
    z-index: 88;
    display: grid !important;
    width: 56px;
    gap: 1px;
    padding: 6px 0;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--color-navy-900), var(--color-blue-700));
    box-shadow: 0 14px 32px rgba(0, 20, 52, 0.22);
    transform: translateY(-50%);
  }

  body[data-page="news"] .floating-contact a,
  body[data-page="news"] .floating-contact button {
    display: grid;
    place-items: center;
    min-height: 52px;
    padding: 0 6px;
    color: var(--color-white);
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    background: transparent;
  }

  /* ===== News page mobile rebuild (2026-05-22) ===== */
  body[data-page="news"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 16px;
  }

  body[data-page="news"] .news-banner {
    min-height: 300px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
  }

  body[data-page="news"] .news-banner__inner {
    position: relative;
    min-height: 300px;
    padding-block: 26px 22px;
    padding-right: clamp(96px, 32vw, 140px);
    align-content: end;
  }

  body[data-page="news"] .news-banner h1 {
    font-size: 28px;
    line-height: 1.15;
  }

  body[data-page="news"] .news-banner .news-hero-subtitle {
    max-width: 18em;
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.55;
    opacity: 0.96;
  }

  body[data-page="news"] .news-banner .news-hero-desc {
    max-width: 20em;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.55;
    opacity: 0.82;
  }

  body[data-page="news"] .news-banner .banner-search {
    display: none !important;
  }

  body[data-page="news"] .news-hero-media {
    position: absolute;
    right: -24px;
    bottom: -18px;
    display: block !important;
    width: clamp(150px, 44vw, 188px);
    height: clamp(150px, 44vw, 188px);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 20, 52, 0.32);
    opacity: 0.98;
    pointer-events: none;
  }

  body[data-page="news"] .news-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="news"] .news-breadcrumb {
    display: none;
  }

  body[data-page="news"] .news-mobile-tabs {
    display: block !important;
    padding-block: 14px 8px;
  }

  body[data-page="news"] .news-mobile-tabs__track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  body[data-page="news"] .news-mobile-tabs__track::-webkit-scrollbar {
    display: none;
  }

  body[data-page="news"] .news-mobile-tabs__track a {
    position: relative;
    flex: 0 0 auto;
    padding: 10px 2px 10px;
    color: rgba(16, 24, 40, 0.72);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
  }

  body[data-page="news"] .news-mobile-tabs__track a.is-active {
    color: var(--color-blue-700);
  }

  body[data-page="news"] .news-mobile-tabs__track a.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-blue-700);
  }

  body[data-page="news"] .news-tabs {
    display: none !important;
  }

  body[data-page="news"] .news-list-section {
    padding-block: 8px 18px;
  }

  body[data-page="news"] .news-list {
    margin-top: 0;
    gap: 12px;
  }

  body[data-page="news"] .news-list-item {
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08);
  }

  body[data-page="news"] .news-list-item img {
    height: 92px;
    object-fit: cover;
  }

  body[data-page="news"] .news-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.2px;
  }

  body[data-page="news"] .news-tag.tag--company {
    color: #0b5bd3;
    background: rgba(11, 91, 211, 0.12);
  }

  body[data-page="news"] .news-tag.tag--industry {
    color: #0f766e;
    background: rgba(15, 118, 110, 0.12);
  }

  body[data-page="news"] .news-tag.tag--product {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.12);
  }

  body[data-page="news"] .news-tag.tag--tech {
    color: #d97706;
    background: rgba(217, 119, 6, 0.14);
  }

  body[data-page="news"] .news-tag.tag--media {
    color: #475467;
    background: rgba(71, 84, 103, 0.12);
  }

  body[data-page="news"] .news-list-item h2 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body[data-page="news"] .news-list-item p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body[data-page="news"] .news-meta span:nth-child(3) {
    display: none;
  }

  body[data-page="news"] .news-pagination {
    display: none !important;
  }

  body[data-page="news"] .news-mobile-loadmore {
    display: flex !important;
    justify-content: center;
    margin-top: 14px;
  }

  body[data-page="news"] .news-mobile-loadmore .btn {
    width: min(320px, 100%);
    height: 44px;
    border-radius: 12px;
    border-color: rgba(11, 91, 211, 0.45);
    color: var(--color-blue-700);
    background: rgba(255, 255, 255, 0.9);
  }

  body[data-page="news"] .news-sidebar,
  body[data-page="news"] .news-feature-section,
  body[data-page="news"] .news-subscribe,
  body[data-page="news"] .news-faq-strip,
  body[data-page="news"] .news-quote {
    display: none !important;
  }

  body[data-page="news"] .news-mobile-hot {
    display: block !important;
    padding-block: 18px 0;
  }

  body[data-page="news"] .news-mobile-hot .section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  body[data-page="news"] .news-mobile-hot .section-head h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
  }

  body[data-page="news"] .news-mobile-hot .section-more {
    color: var(--color-blue-700);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
  }

  body[data-page="news"] .news-hot-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(250px, 78%);
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  body[data-page="news"] .news-hot-card {
    scroll-snap-align: start;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-white);
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08);
    overflow: hidden;
  }

  body[data-page="news"] .news-hot-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  body[data-page="news"] .news-hot-card__body {
    padding: 12px;
  }

  body[data-page="news"] .news-hot-card h3 {
    margin: 8px 0 8px;
    font-size: 14px;
    line-height: 1.35;
  }

  body[data-page="news"] .news-hot-card h3 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--color-text);
  }

  body[data-page="news"] .news-mobile-cta {
    display: block !important;
    padding-block: 18px 24px;
  }

  body[data-page="news"] .news-cta-card {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0b3d91, #0b5bd3);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22);
  }

  body[data-page="news"] .news-cta-card__copy h2 {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.2;
    color: #fff;
  }

  body[data-page="news"] .news-cta-card__copy p {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.45;
    opacity: 0.92;
  }

  body[data-page="news"] .news-cta-card .btn.btn-accent {
    height: 40px;
    padding-inline: 16px;
    border-radius: 12px;
    background: #ff7a1a;
    border-color: #ff7a1a;
    color: #fff;
  }

  body[data-page="news"] .news-cta-card__media {
    width: 120px;
    height: 120px;
    border-radius: 14px;
    overflow: hidden;
    opacity: 0.95;
  }

  body[data-page="news"] .news-cta-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* News detail page final mobile overrides.
   Scoped to the article detail page so the news list page keeps its own rhythm. */
@media (max-width: 768px) {
  body[data-page="news-detail"] {
    padding-bottom: calc(env(safe-area-inset-bottom) + 92px);
    background: #f7faff;
  }

  body[data-page="news-detail"] .news-detail-page {
    display: flex;
    flex-direction: column;
    background: #f7faff;
  }

  body[data-page="news-detail"] .news-banner {
    min-height: 214px;
    background: var(--color-navy-900);
  }

  body[data-page="news-detail"] .news-banner::before {
    background-image:
      linear-gradient(90deg, rgba(0, 28, 63, 0.94), rgba(0, 43, 102, 0.76) 52%, rgba(0, 43, 102, 0.2)),
      var(--banner-image, url("../images/banners/news-industrial-production.jpg"));
    background-position: center;
  }

  body[data-page="news-detail"] .news-banner__inner {
    min-height: 214px;
    padding-block: 24px 20px;
    align-content: center;
  }

  body[data-page="news-detail"] .news-banner h1 {
    margin-bottom: 10px;
    font-size: 25px;
    line-height: 1.18;
  }

  body[data-page="news-detail"] .news-banner p {
    max-width: 286px;
    font-size: 15px;
    line-height: 1.55;
  }

  body[data-page="news-detail"] .news-breadcrumb {
    padding-block: 12px 0;
    background: #f7faff;
  }

  body[data-page="news-detail"] .breadcrumb__list {
    gap: 6px;
    color: var(--color-subtle);
    font-size: 12px;
  }

  body[data-page="news-detail"] .news-detail-section {
    padding-block: 16px 20px;
  }

  body[data-page="news-detail"] .news-detail-layout {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  body[data-page="news-detail"] .news-article {
    padding: 18px 16px;
  }

  body[data-page="news-detail"] .news-article__header h1 {
    margin-bottom: 12px;
    font-size: 22px;
    line-height: 1.3;
  }

  body[data-page="news-detail"] .news-meta {
    gap: 10px;
    font-size: 11px;
    line-height: 1.2;
  }

  body[data-page="news-detail"] .news-meta span::before {
    width: 5px;
    height: 5px;
    margin-right: 5px;
  }

  body[data-page="news-detail"] .news-article__header p {
    margin-top: 16px;
    padding: 14px 16px;
    font-size: 12px;
    line-height: 1.65;
  }

  body[data-page="news-detail"] .news-article__cover {
    height: 210px;
    margin: 18px 0 18px;
    border-radius: 8px;
  }

  body[data-page="news-detail"] .news-article__body p {
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.85;
  }

  body[data-page="news-detail"] .news-share-row {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
  }

  body[data-page="news-detail"] .news-share-row span {
    width: 100%;
  }

  body[data-page="news-detail"] .news-share-row a {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }

  body[data-page="news-detail"] .news-prev-next {
    margin-top: 18px;
    border-radius: 8px;
  }

  body[data-page="news-detail"] .news-prev-next a {
    min-height: 64px;
    padding: 14px 16px;
  }

  body[data-page="news-detail"] .news-related-section {
    margin-top: 22px;
  }

  body[data-page="news-detail"] .news-related-section h2 {
    margin-bottom: 12px;
    font-size: 20px;
  }

  body[data-page="news-detail"] .news-related-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  body[data-page="news-detail"] .news-related-grid a {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px;
  }

  body[data-page="news-detail"] .news-related-grid img {
    width: 94px;
    height: 68px;
    border-radius: 6px;
  }

  body[data-page="news-detail"] .news-related-grid strong,
  body[data-page="news-detail"] .news-related-grid span {
    padding-inline: 0;
  }

  body[data-page="news-detail"] .news-related-grid strong {
    padding-top: 0;
    font-size: 13px;
    line-height: 1.45;
  }

  body[data-page="news-detail"] .news-related-grid span {
    padding-bottom: 0;
    font-size: 11px;
  }

  body[data-page="news-detail"] .news-sidebar {
    gap: 12px;
  }

  body[data-page="news-detail"] .news-side-card {
    padding: 18px 16px;
  }

  body[data-page="news-detail"] .news-side-card h2 {
    margin-bottom: 12px;
    font-size: 18px;
  }

  body[data-page="news-detail"] .news-rank-list {
    gap: 10px;
  }

  body[data-page="news-detail"] .news-rank-list a {
    grid-template-columns: 30px 72px minmax(0, 1fr);
    gap: 8px;
  }

  body[data-page="news-detail"] .news-rank-list span {
    width: 30px;
    height: 38px;
    font-size: 12px;
  }

  body[data-page="news-detail"] .news-rank-list img {
    width: 72px;
    height: 46px;
  }

  body[data-page="news-detail"] .news-rank-list strong {
    font-size: 12px;
    line-height: 1.4;
  }

  body[data-page="news-detail"] .news-rank-list small {
    font-size: 10px;
  }

  body[data-page="news-detail"] .news-recommend-list li {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.5;
  }

  body[data-page="news-detail"] .news-tag-cloud {
    gap: 8px;
  }

  body[data-page="news-detail"] .news-tag-cloud a {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
  }

  body[data-page="news-detail"] .news-contact-card strong {
    font-size: 24px;
  }

  body[data-page="news-detail"] .news-contact-card .btn {
    width: 100%;
    margin-top: 14px;
  }

  body[data-page="news-detail"] .news-subscribe {
    padding-block: 0 20px;
  }

  body[data-page="news-detail"] .news-subscribe__inner {
    grid-template-columns: 1fr !important;
    gap: 14px;
    padding: 22px 16px;
  }

  body[data-page="news-detail"] .news-subscribe h2 {
    font-size: 22px;
    line-height: 1.25;
  }

  body[data-page="news-detail"] .news-subscribe p {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="news-detail"] .news-subscribe form {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  body[data-page="news-detail"] .news-subscribe input {
    height: 44px;
  }

  body[data-page="news-detail"] .mobile-bottom-nav--cases {
    display: none;
  }

  body[data-page="news-detail"] .mobile-bottom-nav--news {
    position: fixed;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 10px);
    left: 12px;
    z-index: 86;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 7px 2px 5px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(0, 20, 52, 0.14);
    backdrop-filter: blur(10px);
  }

  body[data-page="news-detail"] .mobile-bottom-nav--news a {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 50px;
    color: var(--color-muted);
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
  }

  body[data-page="news-detail"] .mobile-bottom-nav--news a.is-active {
    color: var(--color-blue-700);
  }

  body[data-page="news-detail"] .mobile-bottom-nav--news svg {
    width: 18px;
    height: 18px;
  }

  body[data-page="news-detail"] .floating-contact {
    position: fixed;
    top: 50%;
    right: 8px;
    z-index: 88;
    display: grid !important;
    width: 56px;
    gap: 1px;
    padding: 6px 0;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--color-navy-900), var(--color-blue-700));
    box-shadow: 0 14px 32px rgba(0, 20, 52, 0.22);
    transform: translateY(-50%);
  }

  body[data-page="news-detail"] .floating-contact a,
  body[data-page="news-detail"] .floating-contact button {
    display: grid;
    place-items: center;
    min-height: 52px;
    padding: 0 6px;
    color: var(--color-white);
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    background: transparent;
  }
}

/* News detail mobile rebuild (2026-05-23).
   Replaces sidebar-heavy detail layout with a reading-first mobile article page. */
@media (max-width: 768px) {
  body[data-page="news-detail"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 16px;
  }

  body[data-page="news-detail"] .news-banner,
  body[data-page="news-detail"] .news-detail-section,
  body[data-page="news-detail"] .news-subscribe {
    display: none !important;
  }

  body[data-page="news-detail"] .news-breadcrumb {
    display: block !important;
    padding-block: 10px 0;
    background: #f7faff;
  }

  body[data-page="news-detail"] .news-breadcrumb .breadcrumb__list {
    gap: 6px;
    color: rgba(16, 24, 40, 0.5);
    font-size: 11px;
    line-height: 1.25;
    flex-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-page="news-detail"] .news-detail-mobile {
    display: block !important;
    padding-block: 12px 18px;
  }

  body[data-page="news-detail"] .news-detail-mobile__head h1 {
    margin: 0;
    color: var(--color-navy-900);
    font-size: 30px;
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0.2px;
  }

  body[data-page="news-detail"] .news-detail-mobile__head > p {
    margin: 10px 0 0;
    color: rgba(16, 24, 40, 0.58);
    font-size: 14px;
    line-height: 1.6;
  }

  body[data-page="news-detail"] .news-detail-mobile__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    color: rgba(16, 24, 40, 0.58);
    font-size: 12px;
    line-height: 1.2;
    flex-wrap: wrap;
  }

  body[data-page="news-detail"] .news-detail-mobile__meta a {
    color: var(--color-blue-700);
    font-weight: 800;
  }

  body[data-page="news-detail"] .news-detail-mobile__hero-image {
    margin: 14px 0 0;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
  }

  body[data-page="news-detail"] .news-detail-mobile__hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="news-detail"] .news-detail-mobile__body {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid rgba(0, 20, 52, 0.10);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 30px rgba(0, 20, 52, 0.08);
  }

  body[data-page="news-detail"] .news-detail-mobile__summary {
    margin: 0 0 14px;
    padding: 12px 12px;
    border: 1px solid rgba(11, 91, 211, 0.22);
    border-radius: 12px;
    background: rgba(11, 91, 211, 0.08);
    color: rgba(16, 24, 40, 0.78);
    font-size: 14px;
    line-height: 1.7;
    font-weight: 700;
  }

  body[data-page="news-detail"] .news-detail-mobile__body section + section {
    margin-top: 14px;
  }

  body[data-page="news-detail"] .news-detail-mobile__body h2 {
    position: relative;
    margin: 0 0 8px;
    padding-left: 12px;
    color: var(--color-navy-900);
    font-size: 18px;
    line-height: 1.3;
    font-weight: 900;
  }

  body[data-page="news-detail"] .news-detail-mobile__body h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 4px;
    border-radius: 4px;
    background: var(--color-blue-700);
  }

  body[data-page="news-detail"] .news-detail-mobile__body p {
    margin: 0;
    color: rgba(16, 24, 40, 0.72);
    font-size: 15px;
    line-height: 1.8;
  }

  body[data-page="news-detail"] .news-detail-mobile__event-card {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(11, 91, 211, 0.18);
    border-radius: 16px;
    background: rgba(11, 91, 211, 0.06);
    box-shadow: 0 12px 30px rgba(0, 20, 52, 0.08);
  }

  body[data-page="news-detail"] .news-detail-mobile__event-card img {
    width: 120px;
    height: 84px;
    border-radius: 10px;
    object-fit: cover;
  }

  body[data-page="news-detail"] .news-detail-mobile__event-card h3 {
    margin: 0 0 6px;
    color: var(--color-navy-900);
    font-size: 15px;
    line-height: 1.3;
    font-weight: 900;
  }

  body[data-page="news-detail"] .news-detail-mobile__event-card p {
    margin: 0 0 10px;
    color: rgba(16, 24, 40, 0.62);
    font-size: 12px;
    line-height: 1.45;
  }

  body[data-page="news-detail"] .news-detail-mobile__event-card .btn {
    min-height: 34px;
    padding-inline: 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
  }

  body[data-page="news-detail"] .news-detail-mobile__prev-next {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  body[data-page="news-detail"] .news-detail-mobile__prev-next a {
    display: block;
    padding: 12px;
    border: 1px solid rgba(0, 20, 52, 0.10);
    border-radius: 14px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 10px 24px rgba(0, 20, 52, 0.06);
  }

  body[data-page="news-detail"] .news-detail-mobile__prev-next span {
    display: block;
    margin-bottom: 6px;
    color: rgba(16, 24, 40, 0.52);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
  }

  body[data-page="news-detail"] .news-detail-mobile__prev-next strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: rgba(16, 24, 40, 0.9);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 900;
  }

  body[data-page="news-detail"] .news-detail-mobile__related {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid rgba(0, 20, 52, 0.10);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 30px rgba(0, 20, 52, 0.08);
  }

  body[data-page="news-detail"] .news-detail-mobile__related header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }

  body[data-page="news-detail"] .news-detail-mobile__related h2 {
    margin: 0;
    color: var(--color-navy-900);
    font-size: 18px;
    line-height: 1.25;
    font-weight: 900;
  }

  body[data-page="news-detail"] .news-detail-mobile__related header a {
    color: var(--color-blue-700);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="news-detail"] .news-detail-mobile__related-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  body[data-page="news-detail"] .news-detail-mobile__related-track a {
    flex: 0 0 220px;
    border: 1px solid rgba(0, 20, 52, 0.10);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 20, 52, 0.06);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
  }

  body[data-page="news-detail"] .news-detail-mobile__related-track img {
    width: 100%;
    height: 126px;
    object-fit: cover;
  }

  body[data-page="news-detail"] .news-detail-mobile__tag {
    display: inline-flex;
    margin: 10px 10px 0;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(11, 91, 211, 0.14);
    color: var(--color-blue-700);
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
  }

  body[data-page="news-detail"] .news-detail-mobile__tag.is-green {
    background: rgba(34, 197, 94, 0.16);
    color: #15803d;
  }

  body[data-page="news-detail"] .news-detail-mobile__tag.is-orange {
    background: rgba(251, 146, 60, 0.18);
    color: #c2410c;
  }

  body[data-page="news-detail"] .news-detail-mobile__related-track strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 8px 10px 0;
    color: rgba(16, 24, 40, 0.92);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 900;
  }

  body[data-page="news-detail"] .news-detail-mobile__related-track small {
    display: block;
    margin: 8px 10px 12px;
    color: rgba(16, 24, 40, 0.56);
    font-size: 11px;
    line-height: 1.2;
  }
}

/* Mobile Case detail v2 (Reference-template rebuild, mobile-only, desktop intact) */
@media (max-width: 768px) {
  body[data-page="case-detail"] {
    background: #f7faff;
    overflow-x: hidden;
    padding-bottom: calc(env(safe-area-inset-bottom) + 14px);
  }

  body[data-page="case-detail"] .site-header .topbar,
  body[data-page="case-detail"] .topbar,
  body[data-page="case-detail"] .case-banner,
  body[data-page="case-detail"] .case-detail-breadcrumb,
  body[data-page="case-detail"] .case-detail-main,
  body[data-page="case-detail"] .case-subscribe,
  body[data-page="case-detail"] .mobile-bottom-nav--cases,
  body[data-page="case-detail"] .floating-contact {
    display: none !important;
  }

  body[data-page="case-detail"] .site-header {
    box-shadow: 0 1px 14px rgba(0, 20, 52, 0.08);
  }

  body[data-page="case-detail"] .navbar,
  body[data-page="case-detail"] .navbar__inner {
    min-height: 62px;
  }

  body[data-page="case-detail"] .case-detail-page {
    background: #f7faff;
  }

  body[data-page="case-detail"] .case-detail-mobile {
    display: block !important;
    padding: 12px 0 16px;
  }

  body[data-page="case-detail"] .case-detail-mobile .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 12px;
  }

  body[data-page="case-detail"] .case-detail-mobile__breadcrumb {
    margin-bottom: 10px;
  }

  body[data-page="case-detail"] .case-detail-mobile__breadcrumb .breadcrumb__list {
    gap: 4px;
    color: rgba(16, 24, 40, 0.58);
    font-size: 11px;
    line-height: 1.35;
    flex-wrap: wrap;
  }

  body[data-page="case-detail"] .case-detail-mobile__breadcrumb .breadcrumb__list a {
    color: rgba(16, 24, 40, 0.62);
  }

  body[data-page="case-detail"] .case-detail-mobile__hero {
    position: relative;
    overflow: hidden;
    min-height: 240px;
    margin-bottom: 12px;
    border-radius: 18px;
    background:
      linear-gradient(90deg, rgba(0, 18, 48, 0.96) 0%, rgba(0, 43, 102, 0.84) 46%, rgba(0, 43, 102, 0.16) 100%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png")) right center / cover no-repeat;
    box-shadow: 0 14px 34px rgba(0, 18, 48, 0.16);
  }

  body[data-page="case-detail"] .case-detail-mobile__hero-copy {
    position: relative;
    z-index: 1;
    max-width: 270px;
    padding: 28px 18px 20px;
  }

  body[data-page="case-detail"] .case-detail-mobile__hero-copy h1 {
    margin: 0 0 10px;
    color: var(--color-white);
    font-size: 27px;
    line-height: 1.18;
    letter-spacing: 0;
    font-weight: 900;
  }

  body[data-page="case-detail"] .case-detail-mobile__hero-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    line-height: 1.7;
    font-weight: 500;
  }

  body[data-page="case-detail"] .case-detail-mobile__panel,
  body[data-page="case-detail"] .case-detail-mobile__quote,
  body[data-page="case-detail"] .case-detail-mobile__cta {
    margin-bottom: 12px;
    border: 1px solid rgba(0, 20, 52, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 28px rgba(0, 18, 48, 0.08);
  }

  body[data-page="case-detail"] .case-detail-mobile__panel {
    padding: 14px;
  }

  body[data-page="case-detail"] .case-detail-mobile__section-head {
    margin-bottom: 12px;
  }

  body[data-page="case-detail"] .case-detail-mobile__section-head h2,
  body[data-page="case-detail"] .case-detail-mobile__quote-copy h2 {
    margin: 0;
    color: #0d1e46;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0;
  }

  body[data-page="case-detail"] .case-detail-mobile__overview {
    margin-top: -10px;
  }

  body[data-page="case-detail"] .case-detail-mobile__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-page="case-detail"] .case-detail-mobile__stat {
    display: grid;
    justify-items: center;
    gap: 5px;
    min-width: 0;
    padding-top: 4px;
    text-align: center;
  }

  body[data-page="case-detail"] .case-detail-mobile__stat-icon,
  body[data-page="case-detail"] .case-detail-mobile__feature-icon,
  body[data-page="case-detail"] .case-detail-mobile__result-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(11, 91, 211, 0.10);
    color: var(--color-blue-700);
  }

  body[data-page="case-detail"] .case-detail-mobile__stat-icon svg,
  body[data-page="case-detail"] .case-detail-mobile__feature-icon svg,
  body[data-page="case-detail"] .case-detail-mobile__result-icon svg {
    width: 16px;
    height: 16px;
  }

  body[data-page="case-detail"] .case-detail-mobile__stat strong {
    color: var(--color-blue-700);
    font-size: 14px;
    line-height: 1.1;
    font-weight: 900;
  }

  body[data-page="case-detail"] .case-detail-mobile__stat small {
    color: rgba(16, 24, 40, 0.55);
    font-size: 9px;
    line-height: 1.2;
    font-weight: 700;
  }

  body[data-page="case-detail"] .case-detail-mobile__two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
  }

  body[data-page="case-detail"] .case-detail-mobile__info-card {
    padding: 14px;
    border: 1px solid rgba(0, 20, 52, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 28px rgba(0, 18, 48, 0.08);
    min-width: 0;
  }

  body[data-page="case-detail"] .case-detail-mobile__info-card h2 {
    margin: 0 0 10px;
    color: #0d1e46;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 900;
  }

  body[data-page="case-detail"] .case-detail-mobile__info-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  body[data-page="case-detail"] .case-detail-mobile__info-card li {
    position: relative;
    padding-left: 12px;
    color: rgba(16, 24, 40, 0.76);
    font-size: 10.5px;
    line-height: 1.55;
    min-width: 0;
  }

  body[data-page="case-detail"] .case-detail-mobile__info-card li + li {
    margin-top: 8px;
  }

  body[data-page="case-detail"] .case-detail-mobile__info-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-blue-700);
  }

  body[data-page="case-detail"] .case-detail-mobile__info-card span {
    color: #0d1e46;
    font-weight: 800;
  }

  body[data-page="case-detail"] .case-detail-mobile__solution p {
    margin: 0 0 12px;
    color: rgba(16, 24, 40, 0.74);
    font-size: 12px;
    line-height: 1.7;
  }

  body[data-page="case-detail"] .case-detail-mobile__solution-media {
    margin: 0 0 12px;
    overflow: hidden;
    border-radius: 14px;
  }

  body[data-page="case-detail"] .case-detail-mobile__solution-media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
  }

  body[data-page="case-detail"] .case-detail-mobile__feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-page="case-detail"] .case-detail-mobile__feature-grid > div {
    display: grid;
    justify-items: center;
    gap: 5px;
    min-width: 0;
    text-align: center;
  }

  body[data-page="case-detail"] .case-detail-mobile__feature-grid strong,
  body[data-page="case-detail"] .case-detail-mobile__feature-grid small {
    display: block;
    min-width: 0;
  }

  body[data-page="case-detail"] .case-detail-mobile__feature-grid strong {
    color: #0d1e46;
    font-size: 9px;
    line-height: 1.35;
    font-weight: 900;
  }

  body[data-page="case-detail"] .case-detail-mobile__feature-grid small {
    color: rgba(16, 24, 40, 0.52);
    font-size: 8px;
    line-height: 1.25;
    font-weight: 700;
  }

  body[data-page="case-detail"] .case-detail-mobile__results-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 12px;
  }

  body[data-page="case-detail"] .case-detail-mobile__result-list {
    display: grid;
    gap: 8px;
  }

  body[data-page="case-detail"] .case-detail-mobile__result-list > div {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 0 8px;
    align-items: center;
    padding: 8px 0;
    min-width: 0;
  }

  body[data-page="case-detail"] .case-detail-mobile__result-list strong {
    color: #0d1e46;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 900;
  }

  body[data-page="case-detail"] .case-detail-mobile__result-list small {
    grid-column: 2;
    color: rgba(16, 24, 40, 0.54);
    font-size: 9px;
    line-height: 1.35;
  }

  body[data-page="case-detail"] .case-detail-mobile__result-table {
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(11, 91, 211, 0.12);
    background: rgba(11, 91, 211, 0.04);
  }

  body[data-page="case-detail"] .case-detail-mobile__table-head {
    padding: 10px 10px 8px;
    color: #0d1e46;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 900;
    text-align: center;
  }

  body[data-page="case-detail"] .case-detail-mobile__result-table table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  body[data-page="case-detail"] .case-detail-mobile__result-table th,
  body[data-page="case-detail"] .case-detail-mobile__result-table td {
    padding: 8px 6px;
    border-top: 1px solid rgba(11, 91, 211, 0.10);
    color: rgba(16, 24, 40, 0.74);
    font-size: 8.5px;
    line-height: 1.3;
    text-align: center;
    word-break: break-word;
  }

  body[data-page="case-detail"] .case-detail-mobile__result-table th {
    background: rgba(11, 91, 211, 0.08);
    color: #0d1e46;
    font-weight: 900;
  }

  body[data-page="case-detail"] .case-detail-mobile__result-table td:last-child {
    color: var(--color-blue-700);
    font-weight: 900;
  }

  body[data-page="case-detail"] .case-detail-mobile__quote {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 12px;
    align-items: stretch;
    padding: 14px;
    background: linear-gradient(180deg, rgba(244, 248, 255, 0.98), rgba(255, 255, 255, 0.98));
  }

  body[data-page="case-detail"] .case-detail-mobile__quote-copy {
    min-width: 0;
  }

  body[data-page="case-detail"] .case-detail-mobile__quote-copy blockquote {
    margin: 10px 0 12px;
    color: rgba(16, 24, 40, 0.72);
    font-size: 12px;
    line-height: 1.75;
  }

  body[data-page="case-detail"] .case-detail-mobile__quote-copy p {
    margin: 0;
    color: rgba(16, 24, 40, 0.5);
    font-size: 10px;
    line-height: 1.4;
    font-weight: 700;
  }

  body[data-page="case-detail"] .case-detail-mobile__quote-media {
    position: relative;
    overflow: hidden;
    border-radius: 16px 16px 16px 48px;
    min-width: 0;
  }

  body[data-page="case-detail"] .case-detail-mobile__quote-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="case-detail"] .case-detail-mobile__related-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
  }

  body[data-page="case-detail"] .case-detail-mobile__related-head h2 {
    margin: 0;
    color: #0d1e46;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 900;
  }

  body[data-page="case-detail"] .case-detail-mobile__related-arrows {
    display: inline-flex;
    gap: 8px;
  }

  body[data-page="case-detail"] .case-detail-mobile__related-arrows span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(11, 91, 211, 0.16);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.98);
    color: var(--color-blue-700);
    font-size: 16px;
    line-height: 1;
    font-weight: 900;
  }

  body[data-page="case-detail"] .case-detail-mobile__related-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="case-detail"] .case-detail-mobile__related-track a {
    overflow: hidden;
    border: 1px solid rgba(0, 20, 52, 0.08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 18, 48, 0.06);
    text-decoration: none;
    color: inherit;
    min-width: 0;
  }

  body[data-page="case-detail"] .case-detail-mobile__related-track img {
    display: block;
    width: 100%;
    height: 74px;
    object-fit: cover;
  }

  body[data-page="case-detail"] .case-detail-mobile__related-track div {
    padding: 10px 8px 11px;
    min-width: 0;
  }

  body[data-page="case-detail"] .case-detail-mobile__related-track strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #0d1e46;
    font-size: 10px;
    line-height: 1.35;
    font-weight: 900;
    min-width: 0;
  }

  body[data-page="case-detail"] .case-detail-mobile__related-track small {
    display: block;
    margin-top: 4px;
    color: rgba(16, 24, 40, 0.54);
    font-size: 8px;
    line-height: 1.3;
    min-width: 0;
  }

  body[data-page="case-detail"] .case-detail-mobile__related-track span {
    display: block;
    margin-top: 6px;
    color: var(--color-blue-700);
    font-size: 9px;
    line-height: 1.25;
    font-weight: 900;
  }

  body[data-page="case-detail"] .case-detail-mobile__cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border: 0;
    background:
      linear-gradient(135deg, #1655e8 0%, #0a39b5 58%, #0a2e87 100%);
    box-shadow: 0 16px 32px rgba(10, 57, 181, 0.28);
    color: var(--color-white);
  }

  body[data-page="case-detail"] .case-detail-mobile__cta-copy {
    min-width: 0;
  }

  body[data-page="case-detail"] .case-detail-mobile__cta h2 {
    margin: 0 0 6px;
    color: var(--color-white);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 900;
  }

  body[data-page="case-detail"] .case-detail-mobile__cta p {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 11px;
    line-height: 1.55;
  }

  body[data-page="case-detail"] .case-detail-mobile__cta-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }

  body[data-page="case-detail"] .case-detail-mobile__cta-actions .btn {
    min-height: 34px;
    padding-inline: 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
  }

  body[data-page="case-detail"] .case-detail-mobile__cta-actions .btn-outline {
    border-color: rgba(255, 255, 255, 0.45);
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.06);
  }

  body[data-page="case-detail"] .case-detail-mobile__cta-art {
    position: relative;
    min-height: 84px;
  }

  body[data-page="case-detail"] .case-detail-mobile__cta-bubble {
    position: absolute;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  }

  body[data-page="case-detail"] .case-detail-mobile__cta-bubble--back {
    width: 38px;
    height: 38px;
    left: 8px;
    top: 20px;
    border-radius: 12px;
  }

  body[data-page="case-detail"] .case-detail-mobile__cta-bubble--front {
    width: 44px;
    height: 44px;
    left: 28px;
    top: 34px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.24);
  }

  body[data-page="case-detail"] .case-detail-mobile__cta-headset {
    position: absolute;
    left: 30px;
    top: 22px;
    width: 42px;
    height: 42px;
    border: 3px solid rgba(255, 255, 255, 0.92);
    border-bottom-color: transparent;
    border-radius: 50%;
    transform: rotate(8deg);
  }

  body[data-page="case-detail"] .case-detail-mobile__cta-headset::before,
  body[data-page="case-detail"] .case-detail-mobile__cta-headset::after {
    content: "";
    position: absolute;
    bottom: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
  }

  body[data-page="case-detail"] .case-detail-mobile__cta-headset::before {
    left: -6px;
  }

  body[data-page="case-detail"] .case-detail-mobile__cta-headset::after {
    right: -6px;
  }
}

/* Contact page final mobile overrides.
   Scoped to the contact page so the shared page shell keeps behaving the same everywhere else. */
@media (max-width: 768px) {
  body[data-page="contact"] {
    padding-bottom: calc(env(safe-area-inset-bottom) + 92px);
    background: #f7faff;
  }

  body[data-page="contact"] .contact-page {
    background: #f7faff;
  }

  body[data-page="contact"] .site-header .topbar,
  body[data-page="contact"] .topbar {
    display: none;
  }

  body[data-page="contact"] .contact-hero {
    background: var(--color-navy-950);
  }

  body[data-page="contact"] .contact-hero::before {
    background-image:
      linear-gradient(90deg, rgba(0, 28, 63, 0.96) 0%, rgba(0, 43, 102, 0.82) 54%, rgba(0, 28, 63, 0.34) 100%),
      var(--banner-image, url("../images/banners/contact-factory-office.jpg"));
    background-position: center;
  }

  body[data-page="contact"] .contact-hero__inner {
    grid-template-columns: 1fr !important;
    gap: 14px;
    min-height: auto;
    padding-block: 24px 16px;
    align-items: stretch;
  }

  body[data-page="contact"] .contact-hero h1 {
    margin-bottom: 10px;
    font-size: 28px;
    line-height: 1.18;
  }

  body[data-page="contact"] .contact-hero p {
    font-size: 15px;
    line-height: 1.55;
  }

  body[data-page="contact"] .contact-hero__points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 8px;
    margin-top: 18px;
  }

  body[data-page="contact"] .contact-hero__points span {
    min-height: 50px;
    padding-left: 44px;
  }

  body[data-page="contact"] .contact-hero__points span::before {
    width: 34px;
    height: 34px;
    background-size: 16px 16px;
  }

  body[data-page="contact"] .contact-hero__points strong {
    font-size: 13px;
  }

  body[data-page="contact"] .contact-hero__points small {
    font-size: 11px;
    line-height: 1.35;
  }

  body[data-page="contact"] .contact-hotline-card {
    padding: 18px 16px 16px;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 16, 42, 0.22);
  }

  body[data-page="contact"] .contact-hotline-card > span {
    font-size: 12px;
  }

  body[data-page="contact"] .contact-hotline-card strong {
    margin: 4px 0 6px;
    font-size: 30px;
  }

  body[data-page="contact"] .contact-hotline-card p {
    font-size: 12px;
  }

  body[data-page="contact"] .contact-hotline-card div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
  }

  body[data-page="contact"] .contact-main {
    padding-block: 14px 18px;
  }

  body[data-page="contact"] .contact-info-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
    margin-bottom: 14px;
  }

  body[data-page="contact"] .contact-info-card {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    min-height: 86px;
    padding: 14px 14px 14px 12px;
    border-radius: 10px;
  }

  body[data-page="contact"] .contact-info-card > span {
    width: 42px;
    height: 42px;
  }

  body[data-page="contact"] .contact-info-card h2 {
    font-size: 12px;
  }

  body[data-page="contact"] .contact-info-card strong {
    font-size: 15px;
    line-height: 1.45;
  }

  body[data-page="contact"] .contact-info-card--qr {
    grid-template-columns: 46px minmax(0, 1fr) 68px;
  }

  body[data-page="contact"] .contact-info-card--qr img {
    width: 68px;
    height: 68px;
  }

  body[data-page="contact"] .contact-map-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
    margin-bottom: 14px;
  }

  body[data-page="contact"] .contact-map-card {
    min-height: 258px;
  }

  body[data-page="contact"] .contact-map-card img {
    min-height: 258px;
  }

  body[data-page="contact"] .contact-map-pin {
    left: 14px;
    top: auto;
    bottom: 16px;
    width: calc(100% - 28px);
    padding: 14px 16px;
    transform: none;
  }

  body[data-page="contact"] .contact-map-pin::after {
    left: 50%;
    bottom: -36px;
    transform: translateX(-50%);
  }

  body[data-page="contact"] .contact-branches {
    padding: 18px 16px;
  }

  body[data-page="contact"] .contact-section-head h2,
  body[data-page="contact"] .contact-form-card h2,
  body[data-page="contact"] .contact-panel h2 {
    margin-bottom: 10px;
    font-size: 20px;
  }

  body[data-page="contact"] .contact-branch-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body[data-page="contact"] .contact-branch-grid article {
    min-height: 0;
    padding: 16px;
    border-radius: 8px;
  }

  body[data-page="contact"] .contact-branch-grid em {
    top: 12px;
    right: 12px;
  }

  body[data-page="contact"] .contact-branch-grid strong {
    margin-bottom: 6px;
    font-size: 15px;
  }

  body[data-page="contact"] .contact-branch-grid p {
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.5;
  }

  body[data-page="contact"] .contact-branch-grid a {
    font-size: 13px;
  }

  body[data-page="contact"] .contact-branch-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    text-align: center;
  }

  body[data-page="contact"] .contact-branch-footer .btn {
    width: max-content;
    margin: 0 auto;
  }

  body[data-page="contact"] .contact-form-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
    margin-bottom: 14px;
  }

  body[data-page="contact"] .contact-form-card {
    padding: 20px 16px;
  }

  body[data-page="contact"] .contact-form-card p {
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="contact"] .contact-form {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  body[data-page="contact"] .contact-form label {
    gap: 4px;
    font-size: 13px;
  }

  body[data-page="contact"] .contact-form input,
  body[data-page="contact"] .contact-form select {
    height: 44px;
    padding: 0 12px;
  }

  body[data-page="contact"] .contact-form textarea {
    min-height: 104px;
  }

  body[data-page="contact"] .contact-upload {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 88px;
    padding: 12px 112px 12px 14px;
    border: 1px dashed rgba(0, 70, 184, 0.18);
    border-radius: 12px;
    background: #f5f9ff;
  }

  body[data-page="contact"] .contact-upload > span {
    display: block;
    margin-bottom: 4px;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
  }

  body[data-page="contact"] .contact-upload small {
    display: block;
    margin-top: 6px;
    color: var(--color-muted);
    font-size: 10px;
    line-height: 1.35;
  }

  body[data-page="contact"] .contact-upload input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }

  body[data-page="contact"] .contact-upload::before {
    content: "选择文件";
    position: absolute;
    right: 12px;
    top: 12px;
    display: flex;
    width: 88px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 70, 184, 0.2);
    border-radius: 10px;
    background: var(--color-white);
    color: var(--color-blue-700);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
  }

  body[data-page="contact"] .contact-upload::after {
    content: attr(data-file-label);
    position: absolute;
    right: 12px;
    top: 48px;
    width: 88px;
    color: var(--color-muted);
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
    pointer-events: none;
  }

  body[data-page="contact"] #contact-form .contact-form > .contact-form__check,
  body[data-page="contact"] #quote-form .contact-form > .contact-form__check {
    display: flex !important;
    align-items: center;
    gap: 8px !important;
    margin-top: -8px;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.3;
  }

  body[data-page="contact"] .contact-form .btn {
    width: 100%;
  }

  body[data-page="contact"] .contact-support-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
    margin-bottom: 14px;
  }

  body[data-page="contact"] .contact-panel {
    padding: 18px 16px;
  }

  body[data-page="contact"] .contact-mini-faq {
    gap: 10px;
    margin-bottom: 14px;
  }

  body[data-page="contact"] .contact-mini-faq details {
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
  }

  body[data-page="contact"] .contact-mini-faq summary {
    padding: 14px 12px;
    font-size: 14px;
    line-height: 1.45;
  }

  body[data-page="contact"] .contact-mini-faq summary::after {
    content: "+";
    font-size: 18px;
    line-height: 1;
  }

  body[data-page="contact"] .contact-mini-faq p {
    margin: 0;
    padding: 0 12px 12px;
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="contact"] .contact-panel .btn {
    width: 100%;
  }

  body[data-page="contact"] .contact-support-grid .contact-panel:nth-of-type(2) h2 {
    margin-bottom: 10px;
  }

  body[data-page="contact"] .contact-support-grid .contact-panel:nth-of-type(2) .contact-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
    margin-bottom: 12px;
  }

  body[data-page="contact"] .contact-support-grid .contact-panel:nth-of-type(2) .contact-trust-grid article {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 86px;
    min-width: 0;
    padding: 10px 8px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-soft);
    text-align: center;
  }

  body[data-page="contact"] .contact-support-grid .contact-panel:nth-of-type(2) .contact-trust-grid span {
    display: none !important;
  }

  body[data-page="contact"] .contact-support-grid > .contact-panel:nth-of-type(2) .contact-trust-grid > article > strong {
    display: block;
    width: 100%;
    color: #1f2a3d;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
  }

  body[data-page="contact"] .contact-support-grid > .contact-panel:nth-of-type(2) .contact-trust-grid > article > small {
    display: block;
    width: 100%;
    color: #6b778c;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
  }

  body[data-page="contact"] .contact-support-grid .contact-panel:nth-of-type(2) .contact-number-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
    margin-top: 12px;
    padding-top: 0;
    border-top: 0;
  }

  body[data-page="contact"] .contact-support-grid .contact-panel:nth-of-type(2) .contact-number-row > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 10px 8px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
  }

  body[data-page="contact"] .contact-support-grid > .contact-panel:nth-of-type(2) .contact-number-row strong {
    margin-bottom: 1px;
    font-size: 18px;
    line-height: 1.25;
  }

  body[data-page="contact"] .contact-support-grid > .contact-panel:nth-of-type(2) .contact-number-row span {
    color: #6b778c;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
  }

  body[data-page="contact"] .contact-review-list {
    gap: 10px;
    margin-bottom: 14px;
  }

  body[data-page="contact"] .contact-review-list blockquote {
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-soft);
  }

  body[data-page="contact"] .contact-review-list p {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="contact"] .contact-review-list cite {
    font-size: 12px;
  }

  body[data-page="contact"] .contact-phone-cta {
    grid-template-columns: 1fr !important;
    gap: 14px;
    padding: 20px 16px;
    align-items: stretch;
    text-align: center;
  }

  body[data-page="contact"] .contact-phone-cta > div > span {
    float: none;
    margin: 0 auto 10px;
  }

  body[data-page="contact"] .contact-phone-cta h2 {
    font-size: 23px;
    line-height: 1.25;
  }

  body[data-page="contact"] .contact-phone-cta p {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="contact"] .contact-phone-cta ul {
    display: none;
  }

  body[data-page="contact"] .contact-phone-cta .btn {
    width: 100%;
  }

  body[data-page="contact"] .contact-bottom-prompt {
    display: grid;
    gap: 12px;
    padding: 18px 16px;
  }

  body[data-page="contact"] .contact-bottom-prompt strong {
    font-size: 18px;
    line-height: 1.3;
  }

  body[data-page="contact"] .contact-bottom-prompt p {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="contact"] .contact-bottom-prompt > div:last-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="contact"] .contact-bottom-prompt .btn {
    width: 100%;
  }

  body[data-page="contact"] .mobile-bottom-nav--cases,
  body[data-page="contact"] .mobile-bottom-nav--news {
    display: none;
  }

  body[data-page="contact"] .mobile-bottom-nav--contact {
    position: fixed;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 10px);
    left: 12px;
    z-index: 86;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 7px 2px 5px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(0, 20, 52, 0.14);
    backdrop-filter: blur(10px);
  }

  body[data-page="contact"] .mobile-bottom-nav--contact a {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 50px;
    color: var(--color-muted);
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
  }

  body[data-page="contact"] .mobile-bottom-nav--contact a.is-active {
    color: var(--color-blue-700);
  }

body[data-page="contact"] .mobile-bottom-nav--contact svg {
    width: 18px;
    height: 18px;
  }
}

/* Contact page reference rebuild for mobile.
   This replaces the old contact mobile stack with a page-scoped mobile-only layout. */
@media (max-width: 768px) {
  body[data-page="contact"] {
    overflow-x: hidden;
    background: #f7faff;
    padding-bottom: calc(env(safe-area-inset-bottom) + 14px);
  }

  body[data-page="contact"] .contact-hero,
  body[data-page="contact"] .contact-main,
  body[data-page="contact"] .mobile-bottom-nav--contact {
    display: none !important;
  }

  body[data-page="contact"] .contact-mobile[hidden] {
    display: block !important;
  }

  body[data-page="contact"] {
    --btn-height: 44px;
    --btn-height-sm: 44px;
    --mobile-radius-card: 16px;
    --mobile-radius-button: 14px;
    padding-bottom: calc(env(safe-area-inset-bottom) + 92px);
    overflow-x: hidden;
  }

  body[data-page="contact"] .contact-mobile {
    display: block !important;
    padding: 10px 0 24px;
  }

  body[data-page="contact"] .contact-mobile .container {
    width: calc(100% - 32px);
  }

  body[data-page="contact"] .contact-mobile__breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: #74809a;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
  }

  body[data-page="contact"] .contact-mobile__breadcrumb a,
  body[data-page="contact"] .contact-mobile__breadcrumb strong {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="contact"] .contact-mobile__breadcrumb a svg {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
  }

  body[data-page="contact"] .contact-mobile__hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: 180px;
    margin-bottom: 24px;
    padding: 0 18px;
    border-radius: 24px;
    background-image:
      linear-gradient(90deg, rgba(0, 24, 68, 0.92) 0%, rgba(0, 43, 102, 0.76) 46%, rgba(0, 43, 102, 0.24) 100%),
      var(--banner-image, url("../images/banners/contact-factory-office.jpg"));
    background-position: center center, center center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0 18px 38px rgba(12, 34, 118, 0.24);
  }

  body[data-page="contact"] .contact-mobile__hero-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    align-content: center;
    max-width: 18em;
    color: #fff;
  }

  body[data-page="contact"] .contact-mobile__hero-copy h1 {
    margin: 0;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: 0.02em;
  }

  body[data-page="contact"] .contact-mobile__hero-subtitle {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.96);
  }

  body[data-page="contact"] .contact-mobile__hero-desc,
  body[data-page="contact"] .contact-mobile__hero-art {
    display: none !important;
  }

  body[data-page="contact"] .contact-mobile__section {
    margin-top: 24px;
  }

  body[data-page="contact"] .contact-mobile__section-head {
    margin-bottom: 12px;
  }

  body[data-page="contact"] .contact-mobile__section-head--center {
    text-align: center;
  }

  body[data-page="contact"] .contact-mobile__section-head h2 {
    position: relative;
    display: inline-block;
    margin: 0;
    color: #11193a;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 900;
  }

  body[data-page="contact"] .contact-mobile__section-head--center h2::after {
    content: "";
    display: block;
    width: 28px;
    height: 3px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #2142ff, #5b8dff);
  }

  body[data-page="contact"] .contact-mobile__section-head--split {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  body[data-page="contact"] .contact-mobile__section-head--split > div {
    min-width: 0;
  }

  body[data-page="contact"] .contact-mobile__section-head--split h2 {
    display: block;
  }

  body[data-page="contact"] .contact-mobile__section-head--split p {
    margin: 6px 0 0;
    color: #8a92a8;
    font-size: 11px;
    line-height: 1.45;
  }

  body[data-page="contact"] .contact-mobile__route-btn,
  body[data-page="contact"] .contact-mobile__more-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(33, 66, 255, 0.16);
    border-radius: 999px;
    background: rgba(33, 66, 255, 0.06);
    color: #1f3aff;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="contact"] .contact-mobile__route-btn svg,
  body[data-page="contact"] .contact-mobile__more-link svg {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
  }

  body[data-page="contact"] .contact-mobile__quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body[data-page="contact"] .contact-mobile__quick-card {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-height: 90px;
    padding: 12px 10px;
    border: 1px solid rgba(17, 31, 68, 0.06);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(9, 24, 80, 0.08);
    text-align: center;
  }

  body[data-page="contact"] .contact-mobile__quick-card--full {
    grid-column: 1 / -1;
  }

  body[data-page="contact"] .contact-mobile__quick-icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
  }

  body[data-page="contact"] .contact-mobile__quick-icon.is-blue {
    background: linear-gradient(145deg, #2d5bff, #1842eb);
  }

  body[data-page="contact"] .contact-mobile__quick-icon.is-green {
    background: linear-gradient(145deg, #31c26d, #14a64f);
  }

  body[data-page="contact"] .contact-mobile__quick-icon svg {
    width: 20px;
    height: 20px;
  }

  body[data-page="contact"] .contact-mobile__quick-card strong {
    color: #10162f;
    font-size: 14px;
    font-weight: 900;
  }

  body[data-page="contact"] .contact-mobile__quick-card small {
    color: #667086;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 700;
  }

  body[data-page="contact"] .contact-mobile__quick-card p {
    display: none;
  }

  body[data-page="contact"] .contact-mobile__address-list {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
  }

  body[data-page="contact"] .contact-mobile__address-list > div {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    color: #22304d;
    font-size: 12px;
    line-height: 1.5;
  }

  body[data-page="contact"] .contact-mobile__address-list svg {
    width: 14px;
    height: 14px;
    margin-top: 2px;
    color: #2342ff;
  }

  body[data-page="contact"] .contact-mobile__map {
    position: relative;
    overflow: hidden;
    min-height: 160px;
    border: 1px solid rgba(15, 32, 83, 0.06);
    border-radius: 16px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.22)),
      radial-gradient(circle at 18% 25%, rgba(88, 182, 122, 0.26), transparent 22%),
      radial-gradient(circle at 78% 18%, rgba(92, 151, 255, 0.24), transparent 20%),
      radial-gradient(circle at 58% 74%, rgba(255, 182, 98, 0.2), transparent 22%),
      #edf5ff;
    box-shadow: 0 16px 38px rgba(12, 34, 118, 0.12);
  }

  body[data-page="contact"] .contact-mobile__map::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(90deg, transparent 0, transparent 31px, rgba(46, 108, 204, 0.08) 31px, rgba(46, 108, 204, 0.08) 32px),
      repeating-linear-gradient(0deg, transparent 0, transparent 31px, rgba(46, 108, 204, 0.08) 31px, rgba(46, 108, 204, 0.08) 32px);
    opacity: 0.75;
  }

  body[data-page="contact"] .contact-mobile__map-grid {
    position: absolute;
    inset: 0;
    opacity: 0.44;
  }

  body[data-page="contact"] .contact-mobile__map-grid span {
    position: absolute;
    background: rgba(76, 131, 255, 0.14);
  }

  body[data-page="contact"] .contact-mobile__map-grid span:nth-child(1) {
    top: 18%;
    left: 0;
    width: 100%;
    height: 2px;
  }

  body[data-page="contact"] .contact-mobile__map-grid span:nth-child(2) {
    top: 44%;
    left: 0;
    width: 100%;
    height: 2px;
  }

  body[data-page="contact"] .contact-mobile__map-grid span:nth-child(3) {
    top: 70%;
    left: 0;
    width: 100%;
    height: 2px;
  }

  body[data-page="contact"] .contact-mobile__map-grid span:nth-child(4) {
    top: 0;
    left: 22%;
    width: 2px;
    height: 100%;
  }

  body[data-page="contact"] .contact-mobile__map-grid span:nth-child(5) {
    top: 0;
    left: 66%;
    width: 2px;
    height: 100%;
  }

  body[data-page="contact"] .contact-mobile__map-roads {
    position: absolute;
    inset: 0;
  }

  body[data-page="contact"] .contact-mobile__map-roads i {
    position: absolute;
    display: block;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(243, 181, 61, 0.76), rgba(243, 181, 61, 0.2));
    filter: blur(0.1px);
  }

  body[data-page="contact"] .contact-mobile__map-roads i:nth-child(1) {
    top: 28px;
    left: -6px;
    width: 120%;
    height: 6px;
    transform: rotate(-16deg);
  }

  body[data-page="contact"] .contact-mobile__map-roads i:nth-child(2) {
    top: 70px;
    left: 26px;
    width: 98px;
    height: 6px;
    transform: rotate(36deg);
  }

  body[data-page="contact"] .contact-mobile__map-roads i:nth-child(3) {
    right: -6px;
    bottom: 74px;
    width: 118%;
    height: 6px;
    transform: rotate(9deg);
  }

  body[data-page="contact"] .contact-mobile__map-roads i:nth-child(4) {
    right: 20px;
    bottom: 32px;
    width: 92px;
    height: 6px;
    transform: rotate(-48deg);
  }

  body[data-page="contact"] .contact-mobile__map-pin {
    position: absolute;
    top: 14px;
    left: 50%;
    z-index: 2;
    width: min(78%, 220px);
    padding: 10px 12px 10px 38px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 28px rgba(13, 33, 112, 0.14);
    transform: translateX(-50%);
  }

  body[data-page="contact"] .contact-mobile__map-pin::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2350ff;
    transform: translateY(-50%);
    box-shadow: 0 0 0 6px rgba(35, 80, 255, 0.12);
  }

  body[data-page="contact"] .contact-mobile__map-pin strong {
    display: block;
    color: #12204a;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 900;
  }

  body[data-page="contact"] .contact-mobile__map-pin small {
    display: block;
    margin-top: 4px;
    color: #31426d;
    font-size: 11px;
    line-height: 1.45;
    font-weight: 700;
  }

  body[data-page="contact"] .contact-mobile__map-marker {
    display: none;
  }

  body[data-page="contact"] .contact-mobile__branch-list {
    display: grid;
    gap: 10px;
  }

  body[data-page="contact"] .contact-mobile__branch-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 96px;
    padding: 8px 10px;
    border: 1px solid rgba(15, 32, 83, 0.08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(9, 24, 80, 0.08);
  }

  body[data-page="contact"] .contact-mobile__branch-item[hidden] {
    display: none !important;
  }

  body[data-page="contact"] .contact-mobile__branch-item img {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    object-fit: cover;
  }

  body[data-page="contact"] .contact-mobile__branch-body {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  body[data-page="contact"] .contact-mobile__branch-head {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  body[data-page="contact"] .contact-mobile__branch-head h3 {
    margin: 0;
    color: #12204a;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 900;
  }

  body[data-page="contact"] .contact-mobile__branch-head span {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(33, 66, 255, 0.08);
    color: #2142ff;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="contact"] .contact-mobile__branch-body p {
    margin: 0;
    color: #4a5978;
    font-size: 11px;
    line-height: 1.35;
  }

  body[data-page="contact"] .contact-mobile__branch-body small {
    color: #5d6985;
    font-size: 10px;
    line-height: 1.35;
    font-weight: 700;
  }

  body[data-page="contact"] .contact-mobile__message-grid {
    display: grid;
    gap: 12px;
  }

  body[data-page="contact"] .contact-mobile__message-card {
    padding: 16px;
    border: 1px solid rgba(15, 32, 83, 0.08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(9, 24, 80, 0.08);
  }

  body[data-page="contact"] .contact-mobile__message-lead {
    margin: 0 0 12px;
    color: #63708d;
    font-size: 13px;
    line-height: 1.5;
  }

  body[data-page="contact"] .contact-mobile__form.js-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body[data-page="contact"] .contact-mobile__form label {
    display: grid;
    gap: 6px;
  }

  body[data-page="contact"] .contact-mobile__form .contact-mobile__form-textarea,
  body[data-page="contact"] .contact-mobile__form .btn {
    grid-column: auto;
  }

  body[data-page="contact"] .contact-mobile__form span {
    color: #33415f;
    font-size: 11px;
    font-weight: 800;
  }

  body[data-page="contact"] .contact-mobile__form input,
  body[data-page="contact"] .contact-mobile__form textarea {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #d4deec;
    border-radius: 14px;
    background: #fff;
    color: #10203f;
    font-size: 14px;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  }

  body[data-page="contact"] .contact-mobile__form textarea {
    min-height: 118px;
    padding-top: 12px;
    padding-bottom: 12px;
    resize: vertical;
  }

  body[data-page="contact"] .contact-mobile__form .btn {
    width: 100%;
    min-height: 44px;
    margin-top: 2px;
    border-radius: 14px;
    font-size: 14px;
  }

  body[data-page="contact"] .contact-mobile__form-textarea {
    gap: 6px;
  }

  body[data-page="contact"] .contact-mobile__tech-cta-card {
    display: grid;
    gap: 12px;
    min-height: 120px;
    padding: 16px;
    border: 1px solid rgba(15, 32, 83, 0.08);
    border-radius: 16px;
    background:
      radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.18), transparent 24%),
      linear-gradient(135deg, #0050c8 0%, #0a58d0 60%, #0849b7 100%);
    box-shadow: 0 18px 38px rgba(12, 34, 118, 0.18);
    color: #fff;
  }

  body[data-page="contact"] .contact-mobile__tech-cta-copy {
    display: grid;
    gap: 6px;
  }

  body[data-page="contact"] .contact-mobile__tech-cta-copy strong {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 900;
  }

  body[data-page="contact"] .contact-mobile__tech-cta-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
  }

  body[data-page="contact"] .contact-mobile__tech-cta-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="contact"] .contact-mobile__tech-cta-actions .btn {
    width: 100%;
  }
}

/* Support hub page final mobile overrides.
   Scoped to the service support hub so the other service pages keep their own mobile rhythm. */
@media (max-width: 768px) {
  body[data-page="support"] {
    padding-bottom: calc(env(safe-area-inset-bottom) + 92px);
    background: #f7faff;
  }

  body[data-page="support"] .service-page {
    background: #f7faff;
  }

  body[data-page="support"] .site-header .topbar {
    display: none !important;
  }

  body[data-page="support"] .service-breadcrumb {
    display: none;
  }

  body[data-page="support"] .service-home-section,
  body[data-page="support"] .service-section {
    padding-block: 18px;
  }

  body[data-page="support"] .service-banner {
    min-height: 228px;
  }

  body[data-page="support"] .service-banner__inner {
    min-height: 228px;
    padding-block: 24px 18px;
    gap: 10px;
  }

  body[data-page="support"] .service-banner h1 {
    margin-bottom: 2px;
    font-size: 28px;
    line-height: 1.18;
  }

  body[data-page="support"] .service-banner p {
    max-width: 280px;
    font-size: 14px;
    line-height: 1.5;
  }

  body[data-page="support"] .service-banner-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.35;
  }

  body[data-page="support"] .service-banner-points span {
    display: flex;
    align-items: center;
    min-width: 0;
  }

  body[data-page="support"] .service-banner-points span::before {
    width: 7px;
    height: 7px;
    margin-right: 7px;
  }

  body[data-page="support"] .banner-search {
    width: 100%;
    margin-top: 14px;
  }

  body[data-page="support"] .banner-search input,
  body[data-page="support"] .banner-search button {
    min-height: 44px;
  }

  body[data-page="support"] .banner-search button {
    min-width: 82px;
    padding-inline: 12px;
  }

  body[data-page="support"] .service-nav-section {
    clear: both;
    margin-top: 16px;
  }

  body[data-page="support"] .service-nav-card {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-page="support"] .service-nav-card a {
    min-height: 92px;
    padding: 12px 8px 10px;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }

  body[data-page="support"] .service-nav-card a:nth-child(3n) {
    border-right: 0;
  }

  body[data-page="support"] .service-nav-card a:nth-child(n + 4) {
    border-bottom: 0;
  }

  body[data-page="support"] .service-nav-card span {
    width: 30px;
    height: 30px;
  }

  body[data-page="support"] .service-nav-card strong {
    font-size: 13px;
    line-height: 1.2;
  }

  body[data-page="support"] .service-nav-card small {
    font-size: 10px;
    line-height: 1.35;
  }

  body[data-page="support"] .service-home-grid {
    gap: 14px;
  }

  body[data-page="support"] .service-card {
    padding: 18px 16px;
  }

  body[data-page="support"] .service-section-head,
  body[data-page="support"] .service-list-head {
    margin-bottom: 14px;
  }

  body[data-page="support"] .service-section-head h2,
  body[data-page="support"] .service-list-head h2,
  body[data-page="support"] .service-flow-section h2 {
    font-size: 20px;
  }

  body[data-page="support"] .service-accordion-list {
    gap: 8px;
  }

  body[data-page="support"] .service-accordion-list summary {
    min-height: 46px;
    padding: 0 14px;
    font-size: 13px;
  }

  body[data-page="support"] .service-accordion-list p {
    display: block;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0 14px;
    opacity: 0;
    transition:
      max-height var(--transition),
      opacity 0.22s ease,
      padding-top var(--transition),
      padding-bottom var(--transition);
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="support"] .service-accordion-list details[open] p {
    max-height: 260px;
    padding: 0 14px 14px;
    opacity: 1;
  }

  body[data-page="support"] .service-file-list {
    gap: 8px;
  }

  body[data-page="support"] .service-file-list a {
    grid-template-columns: 30px minmax(0, 1fr) 48px;
    gap: 8px;
    min-height: 52px;
  }

  body[data-page="support"] .service-file-list span {
    width: 30px;
    height: 34px;
    font-size: 10px;
  }

  body[data-page="support"] .service-file-list strong {
    font-size: 13px;
  }

  body[data-page="support"] .service-file-list small {
    font-size: 10px;
  }

  body[data-page="support"] .service-file-list em {
    min-height: 28px;
    font-size: 11px;
  }

  body[data-page="support"] .service-home-download .service-file-list {
    gap: 8px;
  }

  body[data-page="support"] .service-home-download .service-file-list a {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 48px;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 2px;
    align-items: start;
    min-height: 52px;
    padding: 8px 0;
    overflow: hidden;
  }

  body[data-page="support"] .service-home-download .service-file-list span {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    width: 30px;
    height: 34px;
    font-size: 10px;
  }

  body[data-page="support"] .service-home-download .service-file-list strong {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    margin-top: 0;
    font-size: 13px;
    line-height: 1.35;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  body[data-page="support"] .service-home-download .service-file-list small {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin-top: 0;
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="support"] .service-home-download .service-file-list em {
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: center;
    width: 48px;
    min-height: 28px;
    font-size: 11px;
  }

  body[data-page="support"] .service-video-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="support"] .service-video-card img {
    height: 88px;
  }

  body[data-page="support"] .service-video-card > span {
    top: 32px;
    width: 30px;
    height: 30px;
  }

  body[data-page="support"] .service-video-card strong {
    padding-top: 4px;
    padding-inline: 0;
    font-size: 12px;
    line-height: 1.35;
  }

  body[data-page="support"] .service-video-card__duration {
    display: block;
    margin-top: 2px;
  }

  body[data-page="support"] .service-video-card small {
    padding-bottom: 12px;
    padding-inline: 0;
    font-size: 10px;
  }

  body[data-page="support"] .service-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 8px;
    margin-top: 16px;
  }

  body[data-page="support"] .service-flow div {
    gap: 5px;
    padding: 4px 2px;
  }

  body[data-page="support"] .service-flow span {
    width: 42px;
    height: 42px;
    font-size: 14px;
  }

  body[data-page="support"] .service-flow strong {
    font-size: 12px;
  }

  body[data-page="support"] .service-flow small {
    font-size: 10px;
    line-height: 1.4;
  }

  body[data-page="support"] .service-guarantee-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="support"] .service-guarantee-grid div {
    min-height: 84px;
    padding: 12px 10px;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 4px 8px;
  }

  body[data-page="support"] .service-guarantee-grid div:nth-child(odd) {
    border-right: 1px solid var(--color-border);
  }

  body[data-page="support"] .service-guarantee-grid div:nth-child(even) {
    border-right: 0;
  }

  body[data-page="support"] .service-guarantee-grid div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--color-border);
  }

  body[data-page="support"] .service-guarantee-grid span {
    width: 36px;
    height: 36px;
    font-size: 0;
    line-height: 0;
  }

  body[data-page="support"] .service-guarantee-grid span::before {
    width: 18px;
    height: 18px;
  }

  body[data-page="support"] .service-guarantee-grid strong {
    font-size: 13px;
  }

  body[data-page="support"] .service-guarantee-grid small {
    font-size: 10px;
  }

  body[data-page="support"] .service-support-strip {
    padding-block: 12px 20px;
  }

  body[data-page="support"] .service-support-strip .product-inquiry__inner {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 16px;
    text-align: center;
  }

  body[data-page="support"] .service-support-strip .product-inquiry__copy h2 {
    font-size: 24px;
    line-height: 1.25;
  }

  body[data-page="support"] .service-support-strip .product-inquiry__copy p {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="support"] .service-support-strip .btn {
    width: 100%;
  }

  body[data-page="support"] .service-hotline {
    text-align: center;
  }

  body[data-page="support"] .service-hotline strong {
    font-size: 20px;
  }

  body[data-page="support"] .service-hotline span {
    font-size: 12px;
  }

  body[data-page="support"] .mobile-bottom-nav--cases,
  body[data-page="support"] .mobile-bottom-nav--news,
  body[data-page="support"] .mobile-bottom-nav--contact {
    display: none;
  }

  body[data-page="support"] .mobile-bottom-nav--support {
    position: fixed;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 10px);
    left: 12px;
    z-index: 86;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 7px 2px 5px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(0, 20, 52, 0.14);
    backdrop-filter: blur(10px);
  }

  body[data-page="support"] .mobile-bottom-nav--support a {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 50px;
    color: var(--color-muted);
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
  }

  body[data-page="support"] .mobile-bottom-nav--support a.is-active {
    color: var(--color-blue-700);
  }

  body[data-page="support"] .mobile-bottom-nav--support svg {
    width: 18px;
    height: 18px;
  }

  body[data-page="support"] .floating-contact {
    position: fixed;
    top: 50%;
    right: 8px;
    z-index: 88;
    display: grid !important;
    width: 56px;
    gap: 1px;
    padding: 6px 0;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--color-navy-900), var(--color-blue-700));
    box-shadow: 0 14px 32px rgba(0, 20, 52, 0.22);
    transform: translateY(-50%);
  }

body[data-page="support"] .floating-contact a,
  body[data-page="support"] .floating-contact button {
    display: grid;
    place-items: center;
    min-height: 52px;
    padding: 0 6px;
    color: var(--color-white);
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    background: transparent;
  }
}

/* FAQ page final mobile overrides.
   Scoped to the FAQ list page so the shared support template stays reusable elsewhere. */
@media (max-width: 768px) {
  body[data-page="faq"] {
    padding-bottom: calc(env(safe-area-inset-bottom) + 92px);
    background: #f7faff;
  }

  body[data-page="faq"] .service-page {
    background: #f7faff;
  }

  body[data-page="faq"] .site-header .topbar {
    display: none !important;
  }

  body[data-page="faq"] .site-header {
    box-shadow: 0 1px 14px rgba(0, 20, 52, 0.08);
  }

  body[data-page="faq"] .service-banner {
    min-height: 222px;
  }

  body[data-page="faq"] .service-banner__inner {
    min-height: 222px;
    padding-block: 24px 18px;
    gap: 10px;
  }

  body[data-page="faq"] .service-banner h1 {
    margin-bottom: 4px;
    font-size: 28px;
    line-height: 1.18;
  }

  body[data-page="faq"] .service-banner p {
    max-width: 250px;
    font-size: 14px;
    line-height: 1.5;
  }

  body[data-page="faq"] .banner-search {
    width: 100%;
    margin-top: 14px;
  }

  body[data-page="faq"] .banner-search input,
  body[data-page="faq"] .banner-search button {
    min-height: 44px;
  }

  body[data-page="faq"] .banner-search button {
    min-width: 82px;
    padding-inline: 12px;
  }

  body[data-page="faq"] .service-breadcrumb {
    padding-block: 10px 0;
    background: #f7faff;
  }

  body[data-page="faq"] .service-breadcrumb .breadcrumb__list {
    gap: 6px;
    font-size: 11px;
    line-height: 1.35;
  }

  body[data-page="faq"] .service-nav-section {
    margin-top: -18px;
  }

  body[data-page="faq"] .service-nav-card {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-page="faq"] .service-nav-card a {
    min-height: 92px;
    padding: 12px 8px 10px;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }

  body[data-page="faq"] .service-nav-card a:nth-child(3n) {
    border-right: 0;
  }

  body[data-page="faq"] .service-nav-card a:nth-child(n + 4) {
    border-bottom: 0;
  }

  body[data-page="faq"] .service-nav-card span {
    width: 30px;
    height: 30px;
  }

  body[data-page="faq"] .service-nav-card strong {
    font-size: 13px;
    line-height: 1.2;
  }

  body[data-page="faq"] .service-nav-card small {
    font-size: 10px;
    line-height: 1.35;
  }

  body[data-page="faq"] .service-main-section {
    padding-block: 16px 18px;
  }

  body[data-page="faq"] .service-layout--left-right {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
  }

  body[data-page="faq"] .service-category-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
    min-width: 0;
  }

  body[data-page="faq"] .service-category-card a {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    min-height: 76px;
    padding: 10px 8px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
    color: var(--color-text);
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
  }

  body[data-page="faq"] .service-category-card a::before {
    content: "";
    width: 24px;
    height: 24px;
    color: var(--color-blue-700);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
  }

  body[data-page="faq"] .service-category-card a:nth-child(1)::before {
    background-image: var(--icon-search);
  }

  body[data-page="faq"] .service-category-card a:nth-child(2)::before {
    background-image: var(--icon-cpu);
  }

  body[data-page="faq"] .service-category-card a:nth-child(3)::before {
    background-image: var(--icon-wrench);
  }

  body[data-page="faq"] .service-category-card a:nth-child(4)::before {
    background-image: var(--icon-support);
  }

  body[data-page="faq"] .service-category-card a:nth-child(5)::before {
    background-image: var(--icon-target);
  }

  body[data-page="faq"] .service-category-card a:nth-child(6)::before {
    background-image: var(--icon-video);
  }

  body[data-page="faq"] .service-category-card a:nth-child(7)::before {
    background-image: var(--icon-shield);
  }

  body[data-page="faq"] .service-category-card a:nth-child(8)::before {
    background-image: var(--icon-download);
  }

  body[data-page="faq"] .service-category-card a:nth-child(9)::before {
    background-image: var(--icon-shield);
  }

  body[data-page="faq"] .service-category-card a:nth-child(10)::before {
    background-image: var(--icon-chat);
  }

  body[data-page="faq"] .service-category-card a.is-active,
  body[data-page="faq"] .service-category-card a:hover {
    border-color: var(--color-blue-700);
    background: var(--color-blue-700);
    color: var(--color-white);
  }

  body[data-page="faq"] .service-category-card a.is-active::before,
  body[data-page="faq"] .service-category-card a:hover::before {
    color: var(--color-white);
  }

  body[data-page="faq"] .service-list-panel {
    padding: 16px 14px;
    min-width: 0;
  }

  body[data-page="faq"] .service-list-head {
    min-height: auto;
    margin-bottom: 12px;
    gap: 8px;
  }

  body[data-page="faq"] .service-list-head h2 {
    font-size: 19px;
  }

  body[data-page="faq"] .service-list-head span {
    font-size: 11px;
  }

  body[data-page="faq"] .service-faq-list {
    gap: 8px;
  }

  body[data-page="faq"] .service-faq-list a {
    min-height: 46px;
    padding: 0 12px;
    min-width: 0;
    font-size: 12px;
    line-height: 1.35;
  }

  body[data-page="faq"] .service-faq-list a span {
    margin-left: 10px;
    font-size: 12px;
  }

  body[data-page="faq"] .service-pagination {
    margin-top: 16px;
  }

  body[data-page="faq"] .service-pagination a,
  body[data-page="faq"] .service-pagination span {
    min-width: 32px;
    height: 32px;
    font-size: 12px;
  }

  body[data-page="faq"] .service-sidebar {
    grid-column: 1 / -1;
    gap: 12px;
    margin-top: 2px;
    min-width: 0;
  }

  body[data-page="faq"] .service-side-card,
  body[data-page="faq"] .service-help-card {
    padding: 18px 16px;
  }

  body[data-page="faq"] .service-side-card h2,
  body[data-page="faq"] .service-help-card h2 {
    margin-bottom: 12px;
    font-size: 18px;
  }

  body[data-page="faq"] .service-sidebar .service-side-card:first-of-type {
    padding: 16px 14px;
  }

  body[data-page="faq"] .service-sidebar .service-side-card:first-of-type h2 {
    margin-bottom: 10px;
    font-size: 17px;
  }

  body[data-page="faq"] .service-sidebar .service-side-card:first-of-type .service-rank-list {
    gap: 8px;
  }

  body[data-page="faq"] .service-sidebar .service-side-card:first-of-type .service-rank-list a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 4px 0;
  }

  body[data-page="faq"] .service-sidebar .service-side-card:first-of-type .service-rank-list span {
    flex: 0 0 30px;
    width: 30px;
    height: 34px;
    font-size: 12px;
  }

  body[data-page="faq"] .service-sidebar .service-side-card:first-of-type .service-rank-copy {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
  }

  body[data-page="faq"] .service-sidebar .service-side-card:first-of-type .service-rank-copy strong {
    margin-top: 0;
    font-size: 12px;
    line-height: 1.3;
  }

  body[data-page="faq"] .service-sidebar .service-side-card:first-of-type .service-rank-copy small {
    margin-top: 0;
    font-size: 10px;
    line-height: 1.15;
    white-space: nowrap;
  }

  body[data-page="faq"] .service-help-card p {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="faq"] .service-help-card strong {
    margin-top: 10px;
    font-size: 22px;
  }

  body[data-page="faq"] .service-help-card span {
    font-size: 12px;
  }

  body[data-page="faq"] .service-help-card .btn {
    width: 100%;
  }

  body[data-page="faq"] .service-support-strip {
    padding-block: 12px 20px;
  }

  body[data-page="faq"] .service-support-strip .product-inquiry__inner {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 16px;
    text-align: center;
  }

  body[data-page="faq"] .service-support-strip .product-inquiry__copy h2 {
    font-size: 24px;
    line-height: 1.25;
  }

  body[data-page="faq"] .service-support-strip .product-inquiry__copy p {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="faq"] .service-support-strip .btn {
    width: 100%;
  }

  body[data-page="faq"] .service-hotline {
    text-align: center;
  }

  body[data-page="faq"] .service-hotline strong {
    font-size: 20px;
  }

  body[data-page="faq"] .service-hotline span {
    font-size: 12px;
  }

  body[data-page="faq"] .mobile-bottom-nav--support {
    position: fixed;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 10px);
    left: 12px;
    z-index: 86;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 7px 2px 5px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(0, 20, 52, 0.14);
    backdrop-filter: blur(10px);
  }

  body[data-page="faq"] .mobile-bottom-nav--support a {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 50px;
    color: var(--color-muted);
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
  }

  body[data-page="faq"] .mobile-bottom-nav--support a.is-active {
    color: var(--color-blue-700);
  }

  body[data-page="faq"] .mobile-bottom-nav--support svg {
    width: 18px;
    height: 18px;
  }

  body[data-page="faq"] .floating-contact {
    position: fixed;
    top: 50%;
    right: 8px;
    z-index: 88;
    display: grid !important;
    width: 56px;
    gap: 1px;
    padding: 6px 0;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--color-navy-900), var(--color-blue-700));
    box-shadow: 0 14px 32px rgba(0, 20, 52, 0.22);
    transform: translateY(-50%);
  }

  body[data-page="faq"] .floating-contact a,
  body[data-page="faq"] .floating-contact button {
    display: grid;
    place-items: center;
    min-height: 52px;
    padding: 0 6px;
    color: var(--color-white);
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    background: transparent;
  }
}

/* FAQ hub mobile rebuild (2026-05-23).
   Replaces the old category+list layout with a knowledge-base style FAQ center while preserving desktop. */
@media (max-width: 768px) {
  body[data-page="faq"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 12px;
  }

  body[data-page="faq"] .service-banner,
  body[data-page="faq"] .service-breadcrumb,
  body[data-page="faq"] .service-nav-section,
  body[data-page="faq"] .service-main-section,
  body[data-page="faq"] .service-support-strip {
    display: none !important;
  }

  body[data-page="faq"] .faq-mobile-hub {
    display: block !important;
    padding-block: 12px 18px;
  }

  body[data-page="faq"] .faq-hub-hero {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    min-height: 240px;
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22);
    background: linear-gradient(135deg, #0b3d91, #0b5bd3);
    color: #fff;
  }

  body[data-page="faq"] .faq-hub-hero__bg {
    position: absolute;
    inset: 0;
    opacity: 0.78;
  }

  body[data-page="faq"] .faq-hub-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.10), transparent 60%),
      linear-gradient(135deg, rgba(11, 61, 145, 0.65), rgba(11, 91, 211, 0.85));
  }

  body[data-page="faq"] .faq-hub-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="faq"] .faq-hub-hero__content {
    position: relative;
    z-index: 1;
    padding: 22px 18px;
    max-width: 86%;
  }

  body[data-page="faq"] .faq-hub-hero h1 {
    margin: 0 0 10px;
    font-size: 28px;
    line-height: 1.12;
    color: #fff;
    letter-spacing: 0.2px;
  }

  body[data-page="faq"] .faq-hub-hero p {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.9);
  }

  body[data-page="faq"] .faq-hub-search {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 86px;
    align-items: center;
    height: 44px;
    margin-top: -18px;
    overflow: hidden;
    border: 1px solid rgba(0, 20, 52, 0.10);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 28px rgba(0, 20, 52, 0.12);
  }

  body[data-page="faq"] .faq-hub-search__icon {
    width: 38px;
    height: 44px;
    background: rgba(11, 91, 211, 0.08);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
    background-color: var(--color-blue-700);
    opacity: 0.78;
  }

  body[data-page="faq"] .faq-hub-search input {
    height: 44px;
    border: 0;
    background: transparent;
    padding: 0 10px 0 8px;
    font-size: 13px;
    min-width: 0;
  }

  body[data-page="faq"] .faq-hub-search .btn {
    height: 44px;
    border-radius: 0;
    min-width: 86px;
    padding-inline: 14px;
    font-size: 13px;
  }

  body[data-page="faq"] .faq-hub-card {
    margin-top: 14px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(0, 20, 52, 0.10);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 30px rgba(0, 20, 52, 0.08);
  }

  body[data-page="faq"] .faq-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="faq"] .faq-cat-pill {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    min-height: 74px;
    padding: 10px 8px;
    border: 1px solid rgba(0, 20, 52, 0.10);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08);
    text-decoration: none;
    color: inherit;
    text-align: center;
  }

  body[data-page="faq"] .faq-cat-pill strong {
    color: rgba(16, 24, 40, 0.92);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 900;
  }

  body[data-page="faq"] .faq-cat-pill small {
    color: rgba(16, 24, 40, 0.56);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
  }

  body[data-page="faq"] .faq-cat-pill.is-active {
    border-color: transparent;
    background: linear-gradient(180deg, var(--color-blue-600), var(--color-blue-700));
    box-shadow: 0 14px 30px rgba(0, 68, 184, 0.16);
  }

  body[data-page="faq"] .faq-cat-pill.is-active strong,
  body[data-page="faq"] .faq-cat-pill.is-active small {
    color: rgba(255, 255, 255, 0.95);
  }

  body[data-page="faq"] .faq-accordion-list {
    display: grid;
    gap: 10px;
  }

  body[data-page="faq"] .faq-qa {
    border: 1px solid rgba(0, 20, 52, 0.10);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
  }

  body[data-page="faq"] .faq-qa summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    color: rgba(16, 24, 40, 0.9);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 900;
    min-height: 52px;
  }

  body[data-page="faq"] .faq-qa summary::-webkit-details-marker {
    display: none;
  }

  body[data-page="faq"] .faq-qno {
    width: 40px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(11, 91, 211, 0.12);
    color: var(--color-blue-700);
    font-size: 11px;
    font-weight: 900;
  }

  body[data-page="faq"] .faq-qtitle {
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  body[data-page="faq"] .faq-qa summary::after {
    content: "";
    width: 18px;
    height: 18px;
    justify-self: end;
    background: rgba(16, 24, 40, 0.52);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.18s ease;
  }

  body[data-page="faq"] .faq-qa[open] summary {
    background: rgba(11, 91, 211, 0.06);
  }

  body[data-page="faq"] .faq-qa[open] summary::after {
    transform: rotate(90deg);
  }

  body[data-page="faq"] .faq-qa__body {
    padding: 12px 12px 14px;
    border-top: 1px solid rgba(0, 20, 52, 0.08);
    background: rgba(11, 91, 211, 0.06);
    color: rgba(16, 24, 40, 0.66);
    font-size: 12px;
    line-height: 1.65;
  }

  body[data-page="faq"] .faq-ahead {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: rgba(16, 24, 40, 0.84);
    font-weight: 900;
  }

  body[data-page="faq"] .faq-abadge {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: rgba(11, 91, 211, 0.14);
    color: var(--color-blue-700);
    font-weight: 900;
    font-size: 12px;
  }

  body[data-page="faq"] .faq-steps {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
  }

  body[data-page="faq"] .faq-hub-title h2 {
    margin: 0 0 10px;
    color: var(--color-navy-900);
    font-size: 18px;
    line-height: 1.25;
    font-weight: 900;
  }

  body[data-page="faq"] .faq-hot-list {
    display: grid;
    gap: 10px;
  }

  body[data-page="faq"] .faq-hot-list a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(0, 20, 52, 0.10);
    border-radius: 16px;
    background: #fff;
    text-decoration: none;
    color: rgba(16, 24, 40, 0.92);
    font-weight: 900;
    font-size: 13px;
    line-height: 1.35;
  }

  body[data-page="faq"] .faq-hot-rank {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, var(--color-blue-600), var(--color-blue-700));
    color: #fff;
    font-size: 12px;
    font-weight: 900;
  }

  body[data-page="faq"] .faq-hub-cta {
    margin-top: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 122px;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0b3d91, #0b5bd3);
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22);
    overflow: hidden;
    color: #fff;
  }

  body[data-page="faq"] .faq-hub-cta__copy h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 18px;
    line-height: 1.22;
    font-weight: 900;
  }

  body[data-page="faq"] .faq-hub-cta__copy p {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="faq"] .faq-hub-cta__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  body[data-page="faq"] .faq-hub-cta__actions .btn {
    min-height: 40px;
    border-radius: 12px;
    padding-inline: 14px;
    font-weight: 900;
  }

  body[data-page="faq"] .faq-hub-cta__actions .btn.btn-outline {
    border-color: rgba(255, 255, 255, 0.42);
    color: rgba(255, 255, 255, 0.96);
    background: rgba(255, 255, 255, 0.06);
  }

  body[data-page="faq"] .faq-hub-cta__media {
    width: 122px;
    height: 122px;
    border-radius: 14px;
    overflow: hidden;
    opacity: 0.96;
  }

  body[data-page="faq"] .faq-hub-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="faq"] .site-header,
  body[data-page="faq"] .mobile-bottom-nav,
  body[data-page="faq"] .floating-contact,
  body[data-page="faq"] .service-banner,
  body[data-page="faq"] .service-breadcrumb,
  body[data-page="faq"] .service-nav-section,
  body[data-page="faq"] .service-main-section,
  body[data-page="faq"] .service-support-strip {
    display: none !important;
  }

  body[data-page="faq"] {
    padding-bottom: 0;
    background: #f4f7fd;
  }

  body[data-page="faq"] .faq-mobile-hub {
    display: block !important;
    padding-block: 12px 18px;
  }

  body[data-page="faq"] .faq-mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }

  body[data-page="faq"] .faq-mobile-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--color-text);
  }

  body[data-page="faq"] .faq-mobile-brand__mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 2px solid #1e5ae8;
    border-radius: 10px;
    color: #1e5ae8;
    font-size: 18px;
    font-weight: 900;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 20, 52, 0.06);
  }

  body[data-page="faq"] .faq-mobile-brand__text {
    min-width: 0;
  }

  body[data-page="faq"] .faq-mobile-brand__text strong {
    display: block;
    color: #17315f;
    font-size: 20px;
    line-height: 1.05;
    letter-spacing: 0.1px;
  }

  body[data-page="faq"] .faq-mobile-brand__text small {
    display: block;
    color: rgba(23, 49, 95, 0.68);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
  }

  body[data-page="faq"] .faq-mobile-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1e5ae8;
    font-weight: 900;
    font-size: 14px;
    white-space: nowrap;
  }

  body[data-page="faq"] .faq-mobile-phone svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }

  body[data-page="faq"] .faq-mobile-phone strong {
    font: inherit;
    letter-spacing: 0.01em;
  }

  body[data-page="faq"] .faq-mobile-menu {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 8px;
    margin-left: 0;
    border: 0;
    background: transparent;
  }

  body[data-page="faq"] .faq-mobile-menu span {
    width: 22px;
    height: 2px;
    margin: 3px 0;
    border-radius: 999px;
    background: #17315f;
  }

  body[data-page="faq"] .faq-hub-hero {
    position: relative;
    overflow: hidden;
    min-height: 212px;
    border-radius: 20px;
    background: linear-gradient(90deg, rgba(4, 27, 64, 0.94), rgba(4, 27, 64, 0.76) 56%, rgba(4, 27, 64, 0.34));
    box-shadow: 0 16px 38px rgba(0, 20, 52, 0.18);
    color: #fff;
  }

  body[data-page="faq"] .faq-hub-hero__bg {
    position: absolute;
    inset: 0;
    opacity: 0.74;
  }

  body[data-page="faq"] .faq-hub-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 80% 28%, rgba(255, 198, 112, 0.26), transparent 22%),
      linear-gradient(90deg, rgba(4, 27, 64, 0.34), rgba(4, 27, 64, 0.08) 52%, rgba(4, 27, 64, 0.24));
  }

  body[data-page="faq"] .faq-hub-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  body[data-page="faq"] .faq-hub-hero__content {
    position: relative;
    z-index: 1;
    padding: 22px 20px 24px;
    max-width: 76%;
  }

  body[data-page="faq"] .faq-hub-hero h1 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 28px;
    line-height: 1.12;
    letter-spacing: 0.1px;
  }

  body[data-page="faq"] .faq-hub-hero p {
    margin: 0;
    color: rgba(255, 255, 255, 0.94);
    font-size: 13px;
    line-height: 1.72;
  }

  body[data-page="faq"] .faq-hub-board {
    margin-top: -18px;
    padding: 14px 12px 12px;
    border-radius: 22px 22px 18px 18px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(0, 20, 52, 0.08);
  }

  body[data-page="faq"] .faq-hub-search {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    height: 46px;
    overflow: hidden;
    border: 1px solid rgba(0, 20, 52, 0.08);
    border-radius: 16px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 10px 24px rgba(0, 20, 52, 0.06);
  }

  body[data-page="faq"] .faq-hub-search__icon {
    width: 34px;
    height: 46px;
    opacity: 0.92;
    background-color: #1e5ae8;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
  }

  body[data-page="faq"] .faq-hub-search__placeholder {
    position: absolute;
    left: 42px;
    right: 14px;
    top: 50%;
    z-index: 0;
    transform: translateY(-50%);
    color: rgba(23, 49, 95, 0.60);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="faq"] .faq-hub-search input {
    height: 46px;
    padding: 0 12px 0 4px;
    border: 0;
    background: transparent;
    color: #17315f;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
  }

  body[data-page="faq"] .faq-hub-search input::placeholder {
    color: rgba(23, 49, 95, 0.72);
    opacity: 1;
    font-weight: 700;
  }

  body[data-page="faq"] .faq-hub-search .btn {
    display: none;
  }

  body[data-page="faq"] .faq-hub-cats {
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-page="faq"] .faq-cat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-page="faq"] .faq-cat-pill {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 72px;
    padding: 8px 4px;
    border: 1px solid rgba(0, 20, 52, 0.10);
    border-radius: 14px;
    background: #fff;
    color: rgba(16, 24, 40, 0.92);
    text-align: center;
    box-shadow: 0 10px 22px rgba(0, 20, 52, 0.05);
  }

  body[data-page="faq"] .faq-cat-pill strong {
    color: inherit;
    font-size: 11px;
    line-height: 1.12;
    font-weight: 900;
    word-break: keep-all;
  }

  body[data-page="faq"] .faq-cat-pill small {
    color: rgba(16, 24, 40, 0.56);
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
  }

  body[data-page="faq"] .faq-cat-pill.is-active {
    border-color: transparent;
    background: linear-gradient(180deg, #2a67ef, #1e5ae8);
    box-shadow: 0 14px 26px rgba(30, 90, 232, 0.20);
  }

  body[data-page="faq"] .faq-cat-pill.is-active strong,
  body[data-page="faq"] .faq-cat-pill.is-active small {
    color: #fff;
  }

  body[data-page="faq"] .faq-hub-accordion {
    margin-top: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-page="faq"] .faq-accordion-list {
    display: grid;
    gap: 10px;
  }

  body[data-page="faq"] .faq-qa {
    overflow: hidden;
    border: 1px solid rgba(0, 20, 52, 0.10);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(0, 20, 52, 0.05);
  }

  body[data-page="faq"] .faq-qa summary {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 12px 12px 12px 12px;
    color: rgba(16, 24, 40, 0.92);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
  }

  body[data-page="faq"] .faq-qa summary::-webkit-details-marker {
    display: none;
  }

  body[data-page="faq"] .faq-qno {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: linear-gradient(180deg, #e2ecff, #d4e3ff);
    color: #1e5ae8;
    font-size: 11px;
    font-weight: 900;
  }

  body[data-page="faq"] .faq-qtitle {
    min-width: 0;
    line-height: 1.35;
  }

  body[data-page="faq"] .faq-qa summary::after {
    content: "";
    width: 18px;
    height: 18px;
    justify-self: end;
    background: rgba(23, 49, 95, 0.74);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.18s ease;
  }

  body[data-page="faq"] .faq-qa[open] summary {
    border-bottom: 1px solid rgba(0, 20, 52, 0.08);
  }

  body[data-page="faq"] .faq-qa[open] summary::after {
    transform: rotate(180deg);
  }

  body[data-page="faq"] .faq-qa__body {
    padding: 14px 14px 16px;
    border-top: 0;
    background: #edf4ff;
    color: rgba(16, 24, 40, 0.72);
    font-size: 12px;
    line-height: 1.72;
  }

  body[data-page="faq"] .faq-ahead {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: rgba(16, 24, 40, 0.84);
    font-weight: 900;
  }

  body[data-page="faq"] .faq-abadge {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #d8e5ff;
    color: #1e5ae8;
    font-size: 12px;
    font-weight: 900;
  }

  body[data-page="faq"] .faq-steps {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
  }

  body[data-page="faq"] .faq-hot-list,
  body[data-page="faq"] .faq-hub-hot {
    display: none !important;
  }

  body[data-page="faq"] .faq-hub-cta {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px 14px 14px 12px;
    border: 1px solid rgba(0, 20, 52, 0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, #eff5ff, #eaf1ff);
    box-shadow: 0 14px 32px rgba(0, 20, 52, 0.08);
    color: var(--color-navy-900);
  }

  body[data-page="faq"] .faq-hub-cta__art {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 18px;
    overflow: hidden;
    background:
      radial-gradient(circle at 24% 28%, rgba(42, 103, 239, 0.20), transparent 28%),
      radial-gradient(circle at 72% 72%, rgba(30, 90, 232, 0.18), transparent 26%),
      linear-gradient(180deg, #eef4ff, #dde8ff);
  }

  body[data-page="faq"] .faq-hub-cta__bubble,
  body[data-page="faq"] .faq-hub-cta__headset {
    position: absolute;
    display: block;
  }

  body[data-page="faq"] .faq-hub-cta__bubble--back {
    left: 14px;
    top: 26px;
    width: 42px;
    height: 30px;
    border-radius: 12px;
    background: rgba(42, 103, 239, 0.78);
    box-shadow: 0 8px 20px rgba(30, 90, 232, 0.16);
  }

  body[data-page="faq"] .faq-hub-cta__bubble--back::after {
    content: "";
    position: absolute;
    left: 6px;
    bottom: -6px;
    width: 12px;
    height: 12px;
    border-left: 7px solid rgba(42, 103, 239, 0.78);
    border-bottom: 7px solid transparent;
    border-top: 7px solid transparent;
    transform: rotate(22deg);
  }

  body[data-page="faq"] .faq-hub-cta__bubble--front {
    right: 10px;
    bottom: 16px;
    width: 48px;
    height: 34px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 28px rgba(30, 90, 232, 0.12);
  }

  body[data-page="faq"] .faq-hub-cta__bubble--front::after {
    content: "";
    position: absolute;
    left: 8px;
    bottom: -7px;
    width: 10px;
    height: 10px;
    border-left: 7px solid rgba(255, 255, 255, 0.96);
    border-bottom: 7px solid transparent;
    border-top: 7px solid transparent;
    transform: rotate(24deg);
  }

  body[data-page="faq"] .faq-hub-cta__headset {
    left: 38px;
    top: 37px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid #2a67ef;
    box-sizing: border-box;
    background: transparent;
  }

  body[data-page="faq"] .faq-hub-cta__headset::before,
  body[data-page="faq"] .faq-hub-cta__headset::after {
    content: "";
    position: absolute;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: #2a67ef;
  }

  body[data-page="faq"] .faq-hub-cta__headset::before {
    left: -6px;
    box-shadow: 18px 0 0 #2a67ef;
  }

  body[data-page="faq"] .faq-hub-cta__copy h2 {
    margin: 0 0 8px;
    color: var(--color-navy-900);
    font-size: 18px;
    line-height: 1.25;
    font-weight: 900;
  }

  body[data-page="faq"] .faq-hub-cta__copy p {
    margin: 0 0 12px;
    color: rgba(16, 24, 40, 0.72);
    font-size: 12px;
    line-height: 1.6;
  }

  body[data-page="faq"] .faq-hub-cta__actions {
    display: flex;
    gap: 10px;
  }

  body[data-page="faq"] .faq-hub-cta__actions .btn {
    flex: 1 1 0;
    min-height: 38px;
    padding-inline: 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
  }

  body[data-page="faq"] .faq-hub-cta__actions .btn.btn-accent {
    box-shadow: 0 10px 20px rgba(30, 90, 232, 0.18);
  }

  body[data-page="faq"] .faq-hub-cta__actions .btn.btn-outline {
    border-color: rgba(30, 90, 232, 0.22);
    color: #1e5ae8;
    background: rgba(255, 255, 255, 0.86);
  }

  body[data-page="faq"] .site-footer {
    padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
  }
}

/* After-sale page mobile rebuild.
   Replaces the old list-style mobile layout with a reference-like service overview while preserving desktop. */
@media (max-width: 768px) {
  body[data-page="after-sale"] {
    background: #f6f8ff;
  }

  body[data-page="after-sale"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 16px;
  }

  body[data-page="after-sale"] .site-header,
  body[data-page="after-sale"] .topbar,
  body[data-page="after-sale"] .service-banner,
  body[data-page="after-sale"] .service-breadcrumb,
  body[data-page="after-sale"] .service-main-section,
  body[data-page="after-sale"] .service-support-strip,
  body[data-page="after-sale"] .floating-contact,
  body[data-page="after-sale"] .mobile-bottom-nav--main,
  body[data-page="after-sale"] .mobile-bottom-nav--support {
    display: none !important;
  }

  body[data-page="after-sale"] .after-sale-mobile {
    display: block !important;
    padding: 10px 0 0;
  }

  body[data-page="after-sale"] .after-sale-mobile__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
  }

  body[data-page="after-sale"] .after-sale-mobile__brand {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    color: var(--color-navy-900);
  }

  body[data-page="after-sale"] .after-sale-mobile__brand-mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-blue-700);
    border-radius: 11px;
    color: var(--color-blue-700);
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
  }

  body[data-page="after-sale"] .after-sale-mobile__brand-text {
    min-width: 0;
    line-height: 1;
  }

  body[data-page="after-sale"] .after-sale-mobile__brand-text strong {
    display: block;
    font-size: 18px;
    line-height: 1.06;
    font-weight: 900;
    letter-spacing: 0.01em;
  }

  body[data-page="after-sale"] .after-sale-mobile__brand-text small {
    display: block;
    margin-top: 3px;
    color: rgba(16, 24, 40, 0.56);
    font-size: 10px;
    line-height: 1.15;
    letter-spacing: 0.16em;
    transform: scale(0.96);
    transform-origin: left top;
  }

  body[data-page="after-sale"] .after-sale-mobile__phone {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(11, 91, 211, 0.08);
    color: var(--color-blue-700);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="after-sale"] .after-sale-mobile__phone svg {
    width: 14px;
    height: 14px;
  }

  body[data-page="after-sale"] .after-sale-mobile__menu {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
  }

  body[data-page="after-sale"] .after-sale-mobile__menu span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 2px 0;
    border-radius: 999px;
    background: var(--color-navy-900);
  }

  body[data-page="after-sale"] .after-sale-mobile__crumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    color: rgba(16, 24, 40, 0.52);
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
  }

  body[data-page="after-sale"] .after-sale-mobile__crumb a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
  }

  body[data-page="after-sale"] .after-sale-mobile__crumb svg {
    width: 12px;
    height: 12px;
  }

  body[data-page="after-sale"] .after-sale-mobile__crumb span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="after-sale"] .after-sale-mobile__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(116px, 32vw, 148px);
    gap: 10px;
    align-items: center;
    padding: 18px 16px 16px;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #0b3d91 0%, #0b58d2 58%, #0e69ea 100%);
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22);
    color: #fff;
  }

  body[data-page="after-sale"] .after-sale-mobile__hero-copy {
    min-width: 0;
  }

  body[data-page="after-sale"] .after-sale-mobile__hero-copy h1 {
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(24px, 6.4vw, 28px);
    line-height: 1.08;
    font-weight: 900;
  }

  body[data-page="after-sale"] .after-sale-mobile__hero-sub {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
  }

  body[data-page="after-sale"] .after-sale-mobile__hero-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="after-sale"] .after-sale-mobile__hero-art {
    min-width: 0;
    align-self: end;
  }

  body[data-page="after-sale"] .after-sale-mobile__hero-illustration {
    display: block;
    width: 100%;
    height: auto;
  }

  body[data-page="after-sale"] .after-sale-mobile__card {
    margin-top: 14px;
    padding: 16px 14px 15px;
    border-radius: 18px;
    border: 1px solid rgba(0, 20, 52, 0.08);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 30px rgba(0, 20, 52, 0.08);
  }

  body[data-page="after-sale"] .after-sale-mobile__title h2 {
    margin: 0;
    color: var(--color-navy-900);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 900;
  }

  body[data-page="after-sale"] .after-sale-mobile__title p {
    margin: 5px 0 0;
    color: rgba(16, 24, 40, 0.56);
    font-size: 11px;
    line-height: 1.35;
  }

  body[data-page="after-sale"] .after-sale-mobile__title--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  body[data-page="after-sale"] .after-sale-mobile__title--row a {
    color: var(--color-blue-700);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="after-sale"] .after-sale-type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }

  body[data-page="after-sale"] .after-sale-type-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 2px 8px;
    align-items: start;
    padding: 11px 8px;
    border: 1px solid rgba(11, 91, 211, 0.08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 20, 52, 0.05);
  }

  body[data-page="after-sale"] .after-sale-type-item__icon {
    grid-row: 1 / span 3;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    color: #fff;
  }

  body[data-page="after-sale"] .after-sale-type-item__icon svg {
    width: 18px;
    height: 18px;
  }

  body[data-page="after-sale"] .after-sale-type-item__icon.is-blue { background: linear-gradient(135deg, #2f6fff, #0b5bd3); }
  body[data-page="after-sale"] .after-sale-type-item__icon.is-green { background: linear-gradient(135deg, #22c55e, #16a34a); }
  body[data-page="after-sale"] .after-sale-type-item__icon.is-orange { background: linear-gradient(135deg, #ff9f43, #ff7d00); }
  body[data-page="after-sale"] .after-sale-type-item__icon.is-purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
  body[data-page="after-sale"] .after-sale-type-item__icon.is-cyan { background: linear-gradient(135deg, #06b6d4, #0891b2); }
  body[data-page="after-sale"] .after-sale-type-item__icon.is-red { background: linear-gradient(135deg, #f97316, #ea580c); }

  body[data-page="after-sale"] .after-sale-type-item strong {
    grid-column: 2;
    color: var(--color-navy-900);
    font-size: 13px;
    line-height: 1.25;
    font-weight: 900;
  }

  body[data-page="after-sale"] .after-sale-type-item p,
  body[data-page="after-sale"] .after-sale-type-item small {
    grid-column: 2;
    margin: 0;
    color: rgba(16, 24, 40, 0.56);
    font-size: 10px;
    line-height: 1.35;
  }

  body[data-page="after-sale"] .after-sale-flow-track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }

  body[data-page="after-sale"] .after-sale-flow-step {
    position: relative;
    min-width: 0;
    min-height: 98px;
    padding: 10px 4px 8px;
    border: 1px solid rgba(11, 91, 211, 0.08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 20, 52, 0.05);
    text-align: center;
  }

  body[data-page="after-sale"] .after-sale-flow-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 30px;
    right: -8px;
    width: 12px;
    height: 12px;
    background: rgba(11, 91, 211, 0.88);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.72;
  }

  body[data-page="after-sale"] .after-sale-flow-step__icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: 0 auto 8px;
    border-radius: 10px;
    background: rgba(11, 91, 211, 0.08);
    color: var(--color-blue-700);
  }

  body[data-page="after-sale"] .after-sale-flow-step__icon svg {
    width: 18px;
    height: 18px;
  }

  body[data-page="after-sale"] .after-sale-flow-step strong {
    display: block;
    margin: 0 0 4px;
    color: var(--color-navy-900);
    font-size: 11px;
    line-height: 1.22;
    font-weight: 900;
  }

  body[data-page="after-sale"] .after-sale-flow-step small {
    display: block;
    color: rgba(16, 24, 40, 0.54);
    font-size: 9px;
    line-height: 1.35;
  }

  body[data-page="after-sale"] .after-sale-promise-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }

  body[data-page="after-sale"] .after-sale-promise-grid article {
    padding: 10px 4px 8px;
    border: 1px solid rgba(11, 91, 211, 0.08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 20, 52, 0.05);
    text-align: center;
  }

  body[data-page="after-sale"] .after-sale-promise-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin: 0 auto 8px;
    color: var(--color-blue-700);
  }

  body[data-page="after-sale"] .after-sale-promise-icon svg {
    width: 22px;
    height: 22px;
  }

  body[data-page="after-sale"] .after-sale-promise-grid strong {
    display: block;
    color: var(--color-blue-700);
    font-size: 16px;
    line-height: 1;
    font-weight: 900;
    margin-bottom: 5px;
  }

  body[data-page="after-sale"] .after-sale-promise-grid h3 {
    margin: 0 0 4px;
    color: var(--color-navy-900);
    font-size: 11px;
    line-height: 1.25;
    font-weight: 900;
  }

  body[data-page="after-sale"] .after-sale-promise-grid p {
    margin: 0;
    color: rgba(16, 24, 40, 0.54);
    font-size: 9px;
    line-height: 1.35;
  }

  body[data-page="after-sale"] .after-sale-contact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }

  body[data-page="after-sale"] .after-sale-contact-grid a {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 5px;
    padding: 11px 6px 10px;
    border-radius: 14px;
    border: 1px solid rgba(11, 91, 211, 0.18);
    background: #fff;
    color: inherit;
    text-align: center;
    box-shadow: 0 10px 24px rgba(0, 20, 52, 0.05);
  }

  body[data-page="after-sale"] .after-sale-contact-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: #fff;
  }

  body[data-page="after-sale"] .after-sale-contact-icon svg {
    width: 18px;
    height: 18px;
  }

  body[data-page="after-sale"] .after-sale-contact-icon.is-blue { background: linear-gradient(135deg, #2f6fff, #0b5bd3); }
  body[data-page="after-sale"] .after-sale-contact-icon.is-green { background: linear-gradient(135deg, #22c55e, #16a34a); }

  body[data-page="after-sale"] .after-sale-contact-grid strong {
    display: block;
    color: var(--color-navy-900);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 900;
  }

  body[data-page="after-sale"] .after-sale-contact-grid small {
    display: block;
    color: rgba(16, 24, 40, 0.54);
    font-size: 9px;
    line-height: 1.28;
    word-break: break-word;
  }

  body[data-page="after-sale"] .after-sale-faq-list {
    margin-top: 10px;
  }

  body[data-page="after-sale"] .after-sale-faq-list details {
    border-top: 1px solid rgba(0, 20, 52, 0.08);
    padding: 12px 0;
  }

  body[data-page="after-sale"] .after-sale-faq-list details:first-child {
    border-top: 0;
    padding-top: 0;
  }

  body[data-page="after-sale"] .after-sale-faq-list summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 8px;
    align-items: center;
    color: rgba(16, 24, 40, 0.9);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 800;
  }

  body[data-page="after-sale"] .after-sale-faq-list summary::-webkit-details-marker {
    display: none;
  }

  body[data-page="after-sale"] .after-sale-faq-list summary::after {
    content: "";
    width: 18px;
    height: 18px;
    justify-self: end;
    background: rgba(16, 24, 40, 0.5);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.18s ease;
  }

  body[data-page="after-sale"] .after-sale-faq-list details[open] summary::after {
    transform: rotate(90deg);
  }

  body[data-page="after-sale"] .after-sale-faq-body {
    margin-top: 8px;
    color: rgba(16, 24, 40, 0.56);
    font-size: 11px;
    line-height: 1.5;
  }

  body[data-page="after-sale"] .after-sale-mobile__cta {
    margin-top: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(108px, 32vw, 136px);
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #0b3d91 0%, #0b5bd3 56%, #0b78f2 100%);
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22);
    color: #fff;
  }

  body[data-page="after-sale"] .after-sale-mobile__cta-copy h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 900;
  }

  body[data-page="after-sale"] .after-sale-mobile__cta-copy p {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    line-height: 1.5;
  }

  body[data-page="after-sale"] .after-sale-mobile__cta-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  body[data-page="after-sale"] .after-sale-mobile__cta-actions .btn {
    min-height: 40px;
    border-radius: 12px;
    padding-inline: 14px;
    font-weight: 900;
  }

  body[data-page="after-sale"] .after-sale-mobile__cta-actions .btn.btn-outline {
    border-color: rgba(255, 255, 255, 0.42);
    color: rgba(255, 255, 255, 0.96);
    background: rgba(255, 255, 255, 0.06);
  }

  body[data-page="after-sale"] .after-sale-mobile__cta-media {
    min-width: 0;
    height: 126px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
  }

  body[data-page="after-sale"] .after-sale-mobile__cta-illustration {
    display: block;
    width: 100%;
    height: 100%;
  }

  body[data-page="after-sale"] .site-footer {
    margin-top: 12px;
    padding: 0 0 14px;
    background: transparent;
  }

  body[data-page="after-sale"] .footer-main {
    padding: 0;
  }

  body[data-page="after-sale"] .footer-main__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) 76px minmax(0, 1.14fr);
    gap: 12px;
    padding: 18px 14px 14px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(135deg, #071637 0%, #0a255a 55%, #08162f 100%);
    color: #fff;
  }

  body[data-page="after-sale"] .footer-company h2 {
    margin-bottom: 8px;
    color: #fff;
    font-size: 18px;
  }

  body[data-page="after-sale"] .footer-company p {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 11px;
    line-height: 1.55;
  }

  body[data-page="after-sale"] .footer-contact {
    gap: 5px;
  }

  body[data-page="after-sale"] .footer-contact li {
    color: rgba(255, 255, 255, 0.84);
    font-size: 10px;
    line-height: 1.45;
  }

  body[data-page="after-sale"] .footer-qrcode {
    align-self: start;
    text-align: center;
  }

  body[data-page="after-sale"] .footer-qrcode img {
    width: 74px;
    height: 74px;
    margin-bottom: 6px;
    border-radius: 12px;
    background: #fff;
  }

  body[data-page="after-sale"] .footer-qrcode h3 {
    margin-bottom: 2px;
    color: #fff;
    font-size: 12px;
  }

  body[data-page="after-sale"] .footer-qrcode p {
    color: rgba(255, 255, 255, 0.66);
    font-size: 10px;
    line-height: 1.35;
  }

  body[data-page="after-sale"] .social-links {
    display: none;
  }

  body[data-page="after-sale"] .footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 10px;
    align-content: start;
  }

  body[data-page="after-sale"] .footer-links > div:nth-child(3) {
    display: none;
  }

  body[data-page="after-sale"] .footer-links > div h3 {
    margin-bottom: 6px;
    color: #fff;
    font-size: 12px;
    line-height: 1.2;
  }

  body[data-page="after-sale"] .footer-links > div a {
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 10px;
    line-height: 1.3;
  }

  body[data-page="after-sale"] .footer-bottom {
    background: transparent;
  }

  body[data-page="after-sale"] .footer-bottom__inner {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px 14px;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(135deg, #071637 0%, #0a255a 55%, #08162f 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.68);
    font-size: 10px;
    line-height: 1.45;
  }

  body[data-page="after-sale"] .footer-bottom__inner p {
    max-width: 62%;
    margin: 0;
  }

  body[data-page="after-sale"] .footer-bottom__inner nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
  }

  body[data-page="after-sale"] .footer-bottom__inner nav a {
    color: rgba(255, 255, 255, 0.78);
  }
}

@media (max-width: 390px) {
  body[data-page="after-sale"] .container {
    padding-inline: 14px;
  }

  body[data-page="after-sale"] .after-sale-mobile__hero {
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 8px;
    padding: 16px 14px 14px;
  }

  body[data-page="after-sale"] .after-sale-mobile__hero-copy h1 {
    font-size: 25px;
  }

  body[data-page="after-sale"] .after-sale-mobile__card {
    padding-inline: 13px;
  }

  body[data-page="after-sale"] .after-sale-type-grid,
  body[data-page="after-sale"] .after-sale-flow-track,
  body[data-page="after-sale"] .after-sale-promise-grid,
  body[data-page="after-sale"] .after-sale-contact-grid {
    gap: 7px;
  }

  body[data-page="after-sale"] .after-sale-type-item {
    padding: 10px 7px;
  }

  body[data-page="after-sale"] .after-sale-type-item strong {
    font-size: 12px;
  }

  body[data-page="after-sale"] .after-sale-flow-step {
    min-height: 94px;
    padding-inline: 3px;
  }

  body[data-page="after-sale"] .after-sale-flow-step strong {
    font-size: 10px;
  }

  body[data-page="after-sale"] .after-sale-flow-step small {
    font-size: 8px;
  }

  body[data-page="after-sale"] .after-sale-promise-grid strong {
    font-size: 15px;
  }

  body[data-page="after-sale"] .after-sale-contact-grid a {
    padding-inline: 5px;
  }

  body[data-page="after-sale"] .after-sale-mobile__cta {
    grid-template-columns: minmax(0, 1fr) 110px;
    padding: 15px;
  }

  body[data-page="after-sale"] .after-sale-mobile__cta-media {
    height: 118px;
  }

  body[data-page="after-sale"] .footer-main__grid {
    grid-template-columns: minmax(0, 1.02fr) 70px minmax(0, 1.06fr);
    gap: 10px;
    padding-inline: 12px;
  }

  body[data-page="after-sale"] .footer-links {
    gap: 6px 8px;
  }

  body[data-page="after-sale"] .footer-links > div h3 {
    font-size: 11px;
  }

  body[data-page="after-sale"] .footer-links > div a {
    font-size: 9px;
  }

  body[data-page="after-sale"] .footer-bottom__inner {
    padding-inline: 12px;
  }
}

@media (max-width: 375px) {
  body[data-page="after-sale"] .after-sale-mobile__header {
    gap: 6px;
  }

  body[data-page="after-sale"] .after-sale-mobile__brand {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
  }

  body[data-page="after-sale"] .after-sale-mobile__brand-mark {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  body[data-page="after-sale"] .after-sale-mobile__brand-text strong {
    font-size: 16px;
  }

  body[data-page="after-sale"] .after-sale-mobile__phone {
    gap: 4px;
    min-height: 36px;
    padding: 0 7px;
    font-size: 10px;
  }

  body[data-page="after-sale"] .after-sale-mobile__menu {
    width: 34px;
    height: 34px;
  }

  body[data-page="after-sale"] .after-sale-mobile__hero {
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 8px;
    padding: 15px 12px 13px;
  }

  body[data-page="after-sale"] .after-sale-mobile__hero-copy h1 {
    font-size: 24px;
  }

  body[data-page="after-sale"] .after-sale-mobile__card {
    padding-inline: 12px;
  }

  body[data-page="after-sale"] .after-sale-type-grid,
  body[data-page="after-sale"] .after-sale-flow-track,
  body[data-page="after-sale"] .after-sale-promise-grid,
  body[data-page="after-sale"] .after-sale-contact-grid {
    gap: 6px;
  }

  body[data-page="after-sale"] .after-sale-type-item {
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 9px 6px;
  }

  body[data-page="after-sale"] .after-sale-type-item__icon {
    width: 30px;
    height: 30px;
  }

  body[data-page="after-sale"] .after-sale-type-item__icon svg {
    width: 16px;
    height: 16px;
  }

  body[data-page="after-sale"] .after-sale-type-item strong {
    font-size: 11px;
  }

  body[data-page="after-sale"] .after-sale-type-item p,
  body[data-page="after-sale"] .after-sale-type-item small {
    font-size: 9px;
  }

  body[data-page="after-sale"] .after-sale-flow-step {
    min-height: 90px;
    padding: 8px 3px 7px;
  }

  body[data-page="after-sale"] .after-sale-flow-step__icon {
    width: 28px;
    height: 28px;
    margin-bottom: 7px;
  }

  body[data-page="after-sale"] .after-sale-flow-step__icon svg {
    width: 16px;
    height: 16px;
  }

  body[data-page="after-sale"] .after-sale-flow-step strong {
    font-size: 10px;
  }

  body[data-page="after-sale"] .after-sale-flow-step small {
    font-size: 8px;
  }

  body[data-page="after-sale"] .after-sale-promise-grid article {
    padding: 8px 3px 7px;
  }

  body[data-page="after-sale"] .after-sale-promise-grid strong {
    font-size: 14px;
  }

  body[data-page="after-sale"] .after-sale-promise-grid h3 {
    font-size: 10px;
  }

  body[data-page="after-sale"] .after-sale-promise-grid p {
    font-size: 8px;
  }

  body[data-page="after-sale"] .after-sale-contact-grid a {
    padding: 9px 4px 8px;
  }

  body[data-page="after-sale"] .after-sale-contact-icon {
    width: 20px;
    height: 20px;
  }

  body[data-page="after-sale"] .after-sale-contact-icon svg {
    width: 16px;
    height: 16px;
  }

  body[data-page="after-sale"] .after-sale-contact-grid strong {
    font-size: 10px;
  }

  body[data-page="after-sale"] .after-sale-contact-grid small {
    font-size: 8px;
  }

  body[data-page="after-sale"] .after-sale-mobile__cta {
    grid-template-columns: minmax(0, 1fr) 100px;
    padding: 14px;
  }

  body[data-page="after-sale"] .after-sale-mobile__cta-media {
    height: 116px;
  }

  body[data-page="after-sale"] .footer-main__grid {
    grid-template-columns: minmax(0, 1.02fr) 66px minmax(0, 1.04fr);
    gap: 8px;
    padding-inline: 10px;
  }

  body[data-page="after-sale"] .footer-links {
    gap: 5px 7px;
  }

  body[data-page="after-sale"] .footer-links > div h3 {
    font-size: 10px;
  }

  body[data-page="after-sale"] .footer-links > div a {
    font-size: 8px;
  }

  body[data-page="after-sale"] .footer-bottom__inner {
    padding-inline: 10px;
  }
}

/* FAQ detail page final mobile overrides.
   Scoped to the question detail page so the FAQ list template keeps its own mobile rhythm. */
@media (max-width: 768px) {
  body[data-page="faq-detail"] {
    padding-bottom: calc(env(safe-area-inset-bottom) + 92px);
    background: #f7faff;
  }

  body[data-page="faq-detail"] .service-page {
    background: #f7faff;
  }

  body[data-page="faq-detail"] .site-header .topbar,
  body[data-page="faq-detail"] .topbar {
    display: none !important;
  }

  body[data-page="faq-detail"] .site-header {
    box-shadow: 0 1px 14px rgba(0, 20, 52, 0.08);
  }

  body[data-page="faq-detail"] .service-banner {
    min-height: 222px;
  }

  body[data-page="faq-detail"] .service-banner__inner {
    min-height: 222px;
    padding-block: 24px 18px;
    gap: 10px;
  }

  body[data-page="faq-detail"] .service-banner h1 {
    margin-bottom: 4px;
    font-size: 28px;
    line-height: 1.18;
  }

  body[data-page="faq-detail"] .service-banner p {
    max-width: 250px;
    font-size: 14px;
    line-height: 1.5;
  }

  body[data-page="faq-detail"] .banner-search {
    width: 100%;
    margin-top: 14px;
  }

  body[data-page="faq-detail"] .banner-search input,
  body[data-page="faq-detail"] .banner-search button {
    min-height: 44px;
  }

  body[data-page="faq-detail"] .banner-search button {
    min-width: 82px;
    padding-inline: 12px;
  }

  body[data-page="faq-detail"] .service-breadcrumb {
    padding-block: 10px 0;
    background: #f7faff;
  }

  body[data-page="faq-detail"] .service-breadcrumb .breadcrumb__list {
    gap: 6px;
    font-size: 11px;
    line-height: 1.35;
  }

  body[data-page="faq-detail"] .service-main-section {
    padding-block: 16px 18px;
  }

  body[data-page="faq-detail"] .service-detail-layout {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  body[data-page="faq-detail"] .service-article {
    padding: 18px 16px;
  }

  body[data-page="faq-detail"] .service-article header h1 {
    margin-bottom: 12px;
    font-size: 22px;
    line-height: 1.3;
  }

  body[data-page="faq-detail"] .news-meta {
    gap: 10px;
    font-size: 11px;
    line-height: 1.2;
  }

  body[data-page="faq-detail"] .news-meta span::before {
    width: 5px;
    height: 5px;
    margin-right: 5px;
  }

  body[data-page="faq-detail"] .service-article header p {
    margin-top: 16px;
    padding: 14px 16px;
    font-size: 12px;
    line-height: 1.65;
  }

  body[data-page="faq-detail"] .service-article section {
    display: flow-root;
    margin-top: 20px;
  }

  body[data-page="faq-detail"] .service-article h2 {
    margin-bottom: 10px;
    font-size: 19px;
    line-height: 1.3;
  }

  body[data-page="faq-detail"] .service-article p,
  body[data-page="faq-detail"] .service-article li {
    font-size: 14px;
    line-height: 1.75;
  }

  body[data-page="faq-detail"] .service-article ol {
    padding-left: 18px;
  }

  body[data-page="faq-detail"] .service-article img {
    float: right;
    width: 132px;
    height: 132px;
    margin: 4px 0 10px 12px;
    border-radius: 8px;
  }

  body[data-page="faq-detail"] .service-tip {
    margin-top: 16px;
    padding: 14px 16px;
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="faq-detail"] .news-share-row {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
  }

  body[data-page="faq-detail"] .news-share-row span {
    width: 100%;
    font-size: 13px;
  }

  body[data-page="faq-detail"] .news-share-row a {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  body[data-page="faq-detail"] .news-prev-next {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
    border-radius: 8px;
  }

  body[data-page="faq-detail"] .news-prev-next a {
    min-height: 72px;
    padding: 12px 14px;
  }

  body[data-page="faq-detail"] .news-prev-next span {
    font-size: 11px;
  }

  body[data-page="faq-detail"] .news-prev-next strong {
    font-size: 12px;
    line-height: 1.4;
  }

  body[data-page="faq-detail"] .service-sidebar {
    grid-column: 1 / -1;
    gap: 12px;
    min-width: 0;
  }

  body[data-page="faq-detail"] .service-side-card,
  body[data-page="faq-detail"] .service-help-card {
    padding: 18px 16px;
  }

  body[data-page="faq-detail"] .service-side-card h2,
  body[data-page="faq-detail"] .service-help-card h2 {
    margin-bottom: 12px;
    font-size: 18px;
  }

  body[data-page="faq-detail"] .service-rank-list {
    gap: 10px;
  }

  body[data-page="faq-detail"] .service-rank-list a {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
    align-items: center;
  }

  body[data-page="faq-detail"] .service-rank-list span {
    width: 30px;
    height: 34px;
    font-size: 12px;
  }

  body[data-page="faq-detail"] .service-rank-list strong {
    font-size: 12px;
    line-height: 1.4;
  }

  body[data-page="faq-detail"] .service-rank-list small {
    font-size: 10px;
  }

  body[data-page="faq-detail"] .service-file-list {
    gap: 8px;
  }

  body[data-page="faq-detail"] .service-file-list--compact a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 52px;
    padding: 8px 0;
    width: 100%;
    min-width: 0;
  }

  body[data-page="faq-detail"] .service-file-copy {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
  }

  body[data-page="faq-detail"] .service-file-list span {
    flex: 0 0 30px;
    width: 30px;
    height: 34px;
    font-size: 10px;
  }

  body[data-page="faq-detail"] .service-file-list strong {
    min-width: 0;
    font-size: 13px;
    line-height: 1.35;
    white-space: normal;
    overflow: hidden;
  }

  body[data-page="faq-detail"] .service-file-list small {
    font-size: 10px;
    line-height: 1.35;
    white-space: nowrap;
  }

  body[data-page="faq-detail"] .service-file-list em {
    flex: 0 0 48px;
    margin-left: 8px;
    min-height: 28px;
    font-size: 11px;
  }

  body[data-page="faq-detail"] .service-side-card > .btn.btn-light.btn-sm {
    display: flex;
    width: max-content;
    margin: 12px auto 0;
    justify-content: center;
  }

  body[data-page="faq-detail"] .service-help-card p {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="faq-detail"] .service-help-card strong {
    margin-top: 10px;
    font-size: 22px;
  }

  body[data-page="faq-detail"] .service-help-card span {
    font-size: 12px;
  }

  body[data-page="faq-detail"] .service-help-card .btn {
    width: 100%;
  }

  body[data-page="faq-detail"] .service-support-strip {
    padding-block: 12px 20px;
  }

  body[data-page="faq-detail"] .service-support-strip .product-inquiry__inner {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 16px;
    text-align: center;
  }

  body[data-page="faq-detail"] .service-support-strip .product-inquiry__copy h2 {
    font-size: 24px;
    line-height: 1.25;
  }

  body[data-page="faq-detail"] .service-support-strip .product-inquiry__copy p {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="faq-detail"] .service-support-strip .btn {
    width: 100%;
  }

  body[data-page="faq-detail"] .service-hotline {
    text-align: center;
  }

  body[data-page="faq-detail"] .service-hotline strong {
    font-size: 20px;
  }

  body[data-page="faq-detail"] .service-hotline span {
    font-size: 12px;
  }

  body[data-page="faq-detail"] .mobile-bottom-nav--cases,
  body[data-page="faq-detail"] .mobile-bottom-nav--news,
  body[data-page="faq-detail"] .mobile-bottom-nav--contact {
    display: none;
  }

  body[data-page="faq-detail"] .mobile-bottom-nav--support {
    position: fixed;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 10px);
    left: 12px;
    z-index: 86;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 7px 2px 5px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(0, 20, 52, 0.14);
    backdrop-filter: blur(10px);
  }

  body[data-page="faq-detail"] .mobile-bottom-nav--support a {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 50px;
    color: var(--color-muted);
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
  }

  body[data-page="faq-detail"] .mobile-bottom-nav--support a.is-active {
    color: var(--color-blue-700);
  }

  body[data-page="faq-detail"] .mobile-bottom-nav--support svg {
    width: 18px;
    height: 18px;
  }

  body[data-page="faq-detail"] .floating-contact {
    position: fixed;
    top: 50%;
    right: 8px;
    z-index: 88;
    display: grid !important;
    width: 56px;
    gap: 1px;
    padding: 6px 0;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--color-navy-900), var(--color-blue-700));
    box-shadow: 0 14px 32px rgba(0, 20, 52, 0.22);
    transform: translateY(-50%);
  }

body[data-page="faq-detail"] .floating-contact a,
  body[data-page="faq-detail"] .floating-contact button {
    display: grid;
    place-items: center;
    min-height: 52px;
    padding: 0 6px;
    color: var(--color-white);
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    background: transparent;
  }
}

/* Download detail page final mobile overrides.
   Scoped to the download detail page so the list template keeps its own mobile rhythm. */
@media (max-width: 768px) {
  body[data-page="download-detail"] {
    padding-bottom: calc(env(safe-area-inset-bottom) + 92px);
    background: #f7faff;
  }

  body[data-page="download-detail"] .service-page {
    background: #f7faff;
  }

  body[data-page="download-detail"] .site-header .topbar,
  body[data-page="download-detail"] .topbar {
    display: none !important;
  }

  body[data-page="download-detail"] .site-header {
    box-shadow: 0 1px 14px rgba(0, 20, 52, 0.08);
  }

  body[data-page="download-detail"] .service-banner {
    min-height: 222px;
  }

  body[data-page="download-detail"] .service-banner__inner {
    min-height: 222px;
    padding-block: 24px 18px;
    gap: 10px;
  }

  body[data-page="download-detail"] .service-banner h1 {
    margin-bottom: 4px;
    font-size: 28px;
    line-height: 1.18;
  }

  body[data-page="download-detail"] .service-banner p {
    max-width: 250px;
    font-size: 14px;
    line-height: 1.5;
  }

  body[data-page="download-detail"] .banner-search {
    width: 100%;
    margin-top: 14px;
  }

  body[data-page="download-detail"] .banner-search input,
  body[data-page="download-detail"] .banner-search button {
    min-height: 44px;
  }

  body[data-page="download-detail"] .banner-search button {
    min-width: 82px;
    padding-inline: 12px;
  }

  body[data-page="download-detail"] .service-breadcrumb {
    padding-block: 10px 0;
    background: #f7faff;
  }

  body[data-page="download-detail"] .service-breadcrumb .breadcrumb__list {
    gap: 6px;
    font-size: 11px;
    line-height: 1.35;
  }

  body[data-page="download-detail"] .service-main-section {
    padding-block: 16px 18px;
  }

  body[data-page="download-detail"] .service-detail-layout {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  body[data-page="download-detail"] .service-download-detail {
    padding: 18px 16px 16px;
  }

  body[data-page="download-detail"] .service-download-hero {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  body[data-page="download-detail"] .service-download-hero > img {
    width: 132px;
    height: 206px;
    border-radius: 8px;
    padding: 8px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #dbe6f7;
    box-shadow: 0 6px 14px rgba(18, 54, 119, 0.08);
    object-fit: cover;
  }

  body[data-page="download-detail"] .service-download-hero > div {
    display: grid;
    gap: 6px;
    min-width: 0;
  }

  body[data-page="download-detail"] .service-download-hero h1 {
    margin-bottom: 0;
    font-size: 21px;
    line-height: 1.25;
  }

  body[data-page="download-detail"] .service-download-hero h1 span {
    margin-left: 6px;
    padding: 3px 8px;
    font-size: 11px;
  }

  body[data-page="download-detail"] .news-meta {
    gap: 8px;
    font-size: 11px;
    line-height: 1.2;
  }

  body[data-page="download-detail"] .news-meta span::before {
    width: 5px;
    height: 5px;
    margin-right: 5px;
  }

  body[data-page="download-detail"] .service-download-hero p {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.6;
  }

  body[data-page="download-detail"] .service-download-hero dl {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 10px;
    margin: 8px 0 10px;
  }

  body[data-page="download-detail"] .service-download-hero dt {
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
  }

  body[data-page="download-detail"] .service-download-hero dd {
    margin: 0;
    color: var(--color-text);
    font-size: 12px;
    line-height: 1.35;
  }

  body[data-page="download-detail"] .service-action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  body[data-page="download-detail"] .service-action-row .btn {
    width: 100%;
    min-height: 42px;
    padding-inline: 12px;
    font-size: 13px;
  }

  body[data-page="download-detail"] .service-tabs {
    gap: 20px;
    margin-top: 16px;
  }

  body[data-page="download-detail"] .service-tabs a {
    padding-bottom: 12px;
    font-size: 14px;
  }

  body[data-page="download-detail"] .service-download-detail .service-article--inner {
    padding: 16px 22px 0;
  }

  body[data-page="download-detail"] .service-article--inner h2 {
    margin-bottom: 10px;
    font-size: 19px;
    line-height: 1.3;
  }

  body[data-page="download-detail"] .service-article--inner p {
    font-size: 14px;
    line-height: 1.75;
  }

  body[data-page="download-detail"] .service-doc-toc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.45;
  }

  body[data-page="download-detail"] .service-sidebar {
    grid-column: 1 / -1;
    gap: 12px;
    min-width: 0;
  }

  body[data-page="download-detail"] .service-side-card,
  body[data-page="download-detail"] .service-help-card {
    padding: 18px 16px;
  }

  body[data-page="download-detail"] .service-side-card h2,
  body[data-page="download-detail"] .service-help-card h2 {
    margin-bottom: 12px;
    font-size: 18px;
  }

  body[data-page="download-detail"] .service-file-list {
    gap: 8px;
  }

  body[data-page="download-detail"] .service-file-list--compact a {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    min-height: 50px;
    padding: 0 0 8px;
  }

  body[data-page="download-detail"] .service-file-list span {
    width: 30px;
    height: 34px;
    font-size: 10px;
  }

  body[data-page="download-detail"] .service-file-list strong {
    font-size: 13px;
    line-height: 1.35;
  }

  body[data-page="download-detail"] .service-file-list small {
    font-size: 10px;
    line-height: 1.35;
  }

  body[data-page="download-detail"] .service-card-link {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    font-size: 14px;
  }

  body[data-page="download-detail"] .service-help-card p {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="download-detail"] .service-help-card strong {
    margin-top: 10px;
    font-size: 22px;
  }

  body[data-page="download-detail"] .service-help-card span {
    font-size: 12px;
  }

  body[data-page="download-detail"] .service-help-card .btn {
    width: 100%;
  }

  body[data-page="download-detail"] .service-support-strip {
    padding-block: 12px 20px;
  }

  /* ===== Download detail mobile rebuild (2026-05-22) ===== */
  body[data-page="download-detail"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 16px;
  }

  body[data-page="download-detail"] .service-banner,
  body[data-page="download-detail"] .service-banner__inner,
  body[data-page="download-detail"] .banner-search,
  body[data-page="download-detail"] .service-breadcrumb {
    display: none !important;
  }

  body[data-page="download-detail"] .download-detail-mobile {
    display: block !important;
    padding-block: 12px 18px;
  }

  body[data-page="download-detail"] .download-hero {
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(135deg, #0b3d91, #0b5bd3);
    color: #fff;
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22);
    overflow: hidden;
  }

  body[data-page="download-detail"] .download-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    font-weight: 700;
  }

  body[data-page="download-detail"] .download-hero__back::before {
    content: "←";
    font-size: 14px;
    line-height: 1;
  }

  body[data-page="download-detail"] .download-hero__body {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-top: 14px;
    min-width: 0;
  }

  body[data-page="download-detail"] .download-hero__file {
    position: relative;
    display: grid;
    place-items: center;
    width: 88px;
    height: 112px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    font-weight: 900;
    letter-spacing: 0.5px;
  }

  body[data-page="download-detail"] .download-file-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.95);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
  }

  body[data-page="download-detail"] .download-hero__meta {
    min-width: 0;
  }

  body[data-page="download-detail"] .download-hero__meta h1 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.25;
  }

  body[data-page="download-detail"] .download-hero__meta p {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    line-height: 1.5;
  }

  body[data-page="download-detail"] .download-hero__info {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 11px;
    line-height: 1.2;
  }

  body[data-page="download-detail"] .download-hero__cta {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 44px;
    margin-top: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-weight: 800;
  }

  body[data-page="download-detail"] .download-card {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08);
  }

  body[data-page="download-detail"] .download-card h2 {
    margin: 0 0 12px;
    color: var(--color-navy-900);
    font-size: 18px;
    line-height: 1.2;
  }

  body[data-page="download-detail"] .download-info-table {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px 10px;
    margin: 0;
  }

  body[data-page="download-detail"] .download-info-table dt {
    color: rgba(16, 24, 40, 0.56);
    font-size: 12px;
    line-height: 1.35;
  }

  body[data-page="download-detail"] .download-info-table dd {
    margin: 0;
    color: var(--color-text);
    font-size: 12px;
    line-height: 1.35;
  }

  body[data-page="download-detail"] .download-summary p {
    margin: 0;
    color: rgba(16, 24, 40, 0.72);
    font-size: 14px;
    line-height: 1.7;
  }

  body[data-page="download-detail"] .download-preview-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(132px, 44%);
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  body[data-page="download-detail"] .download-preview-rail::-webkit-scrollbar {
    display: none;
  }

  body[data-page="download-detail"] .download-preview-card {
    scroll-snap-align: start;
    display: grid;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(0, 20, 52, 0.10);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08);
  }

  body[data-page="download-detail"] .download-preview-card img {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    object-fit: cover;
  }

  body[data-page="download-detail"] .download-preview-card span {
    color: rgba(16, 24, 40, 0.62);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
  }

  body[data-page="download-detail"] .download-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
  }

  body[data-page="download-detail"] .download-section-head a {
    color: var(--color-blue-700);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="download-detail"] .download-related-list {
    display: grid;
    gap: 10px;
  }

  body[data-page="download-detail"] .download-related-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08);
    min-width: 0;
  }

  body[data-page="download-detail"] .download-related-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 16px;
    color: #fff;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 0.4px;
  }

  body[data-page="download-detail"] .download-related-icon.is-doc { background: #2563eb; }
  body[data-page="download-detail"] .download-related-icon.is-xls { background: #16a34a; }
  body[data-page="download-detail"] .download-related-icon.is-mp4 { background: #7c3aed; }
  body[data-page="download-detail"] .download-related-icon.is-pdf { background: #ef4444; }

  body[data-page="download-detail"] .download-related-main h3 {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.25;
  }

  body[data-page="download-detail"] .download-related-main h3 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--color-text);
  }

  body[data-page="download-detail"] .download-related-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    color: rgba(16, 24, 40, 0.58);
    font-size: 11px;
    line-height: 1.2;
  }

  body[data-page="download-detail"] .download-related-item .btn {
    height: 36px;
    padding-inline: 14px;
    border-radius: 12px;
    white-space: nowrap;
  }

  body[data-page="download-detail"] .download-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 122px;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0b3d91, #0b5bd3);
    color: #fff;
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22);
    overflow: hidden;
  }

  body[data-page="download-detail"] .download-cta__copy h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 22px;
    line-height: 1.15;
  }

  body[data-page="download-detail"] .download-cta__copy p {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    line-height: 1.45;
  }

  body[data-page="download-detail"] .download-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  body[data-page="download-detail"] .download-cta__actions .btn {
    height: 40px;
    padding-inline: 16px;
    border-radius: 12px;
  }

  body[data-page="download-detail"] .download-cta__actions .btn.btn-accent {
    border-color: #ff7a1a;
    background: #ff7a1a;
    color: #fff;
  }

  body[data-page="download-detail"] .download-cta__actions .btn.btn-outline {
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    background: transparent;
  }

  body[data-page="download-detail"] .download-cta__media {
    width: 122px;
    height: 122px;
    border-radius: 14px;
    overflow: hidden;
    opacity: 0.96;
  }

  body[data-page="download-detail"] .download-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="download-detail"] .service-main-section,
  body[data-page="download-detail"] .service-support-strip {
    display: none !important;
  }

  body[data-page="download-detail"] .service-support-strip .product-inquiry__inner {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 16px;
    text-align: center;
  }

  body[data-page="download-detail"] .service-support-strip .product-inquiry__copy h2 {
    font-size: 24px;
    line-height: 1.25;
  }

  body[data-page="download-detail"] .service-support-strip .product-inquiry__copy p {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="download-detail"] .service-support-strip .btn {
    width: 100%;
  }

  body[data-page="download-detail"] .service-hotline {
    text-align: center;
  }

  body[data-page="download-detail"] .service-hotline strong {
    font-size: 20px;
  }

  body[data-page="download-detail"] .service-hotline span {
    font-size: 12px;
  }

  body[data-page="download-detail"] .mobile-bottom-nav--cases,
  body[data-page="download-detail"] .mobile-bottom-nav--news,
  body[data-page="download-detail"] .mobile-bottom-nav--contact {
    display: none;
  }

  body[data-page="download-detail"] .mobile-bottom-nav--support {
    position: fixed;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 10px);
    left: 12px;
    z-index: 86;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 7px 2px 5px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(0, 20, 52, 0.14);
    backdrop-filter: blur(10px);
  }

  body[data-page="download-detail"] .mobile-bottom-nav--support a {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 50px;
    color: var(--color-muted);
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
  }

  body[data-page="download-detail"] .mobile-bottom-nav--support a.is-active {
    color: var(--color-blue-700);
  }

  body[data-page="download-detail"] .mobile-bottom-nav--support svg {
    width: 18px;
    height: 18px;
  }

  body[data-page="download-detail"] .floating-contact {
    position: fixed;
    top: 50%;
    right: 8px;
    z-index: 88;
    display: grid !important;
    width: 56px;
    gap: 1px;
    padding: 6px 0;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--color-navy-900), var(--color-blue-700));
    box-shadow: 0 14px 32px rgba(0, 20, 52, 0.22);
    transform: translateY(-50%);
  }

  body[data-page="download-detail"] .floating-contact a,
  body[data-page="download-detail"] .floating-contact button {
    display: grid;
    place-items: center;
    min-height: 52px;
    padding: 0 6px;
    color: var(--color-white);
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    background: transparent;
  }
}

/* FAQ detail page mobile rebuild (2026-05-31).
   Keeps desktop article layout intact, replaces mobile with a reference-style FAQ solution detail page. */
@media (max-width: 768px) {
  body[data-page="faq-detail"] {
    padding-bottom: calc(env(safe-area-inset-bottom) + 92px);
    background: linear-gradient(180deg, #f7faff 0%, #f7faff 100%);
  }

  body[data-page="faq-detail"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 16px;
  }

  body[data-page="faq-detail"] .site-header,
  body[data-page="faq-detail"] .service-banner,
  body[data-page="faq-detail"] .service-breadcrumb,
  body[data-page="faq-detail"] .service-main-section,
  body[data-page="faq-detail"] .service-support-strip,
  body[data-page="faq-detail"] .floating-contact,
  body[data-page="faq-detail"] .mobile-bottom-nav {
    display: none !important;
  }

  body[data-page="faq-detail"] .faq-detail-mobile {
    display: block !important;
    padding-block: 8px 18px;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 4px 0 10px;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-header__brand {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
    text-decoration: none;
    color: var(--color-navy-900);
  }

  body[data-page="faq-detail"] .faq-detail-mobile-header__mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(11, 91, 211, 0.86);
    color: var(--color-blue-700);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.2px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 18px rgba(0, 20, 52, 0.08);
  }

  body[data-page="faq-detail"] .faq-detail-mobile-header__text {
    min-width: 0;
    display: grid;
    gap: 1px;
    overflow: hidden;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-header__text strong {
    font-size: 15px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-header__text small {
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    color: rgba(16, 24, 40, 0.52);
    letter-spacing: 0.8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-header__hotline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-blue-700);
    text-decoration: none;
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-header__hotline svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-header__menu {
    width: 40px;
    height: 40px;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 0 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-header__menu span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: var(--color-navy-900);
    justify-self: end;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-breadcrumb {
    padding: 2px 0 10px;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-breadcrumb .breadcrumb__list {
    gap: 6px;
    font-size: 11px;
    line-height: 1.35;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-breadcrumb .breadcrumb__list a,
  body[data-page="faq-detail"] .faq-detail-mobile-breadcrumb .breadcrumb__list li {
    color: rgba(14, 39, 88, 0.72);
  }

  body[data-page="faq-detail"] .faq-detail-mobile-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: stretch;
    overflow: hidden;
    min-height: 170px;
    margin-bottom: 0;
    border-radius: 0 0 20px 20px;
    background: linear-gradient(90deg, #07193f 0%, #08224c 50%, #0b57c8 100%);
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22);
  }

  body[data-page="faq-detail"] .faq-detail-mobile-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(4, 17, 45, 0.95) 0%, rgba(4, 17, 45, 0.88) 42%, rgba(4, 17, 45, 0.12) 100%);
    pointer-events: none;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-hero__copy {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 22px 14px 20px 18px;
    min-width: 0;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-hero__copy h1 {
    margin: 0;
    color: #fff;
    font-size: 28px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: 0.1px;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-hero__copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    line-height: 1.5;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-hero__media {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    display: block;
    filter: saturate(1.05) contrast(1.02);
  }

  body[data-page="faq-detail"] .faq-detail-card {
    margin-top: 12px;
    padding: 16px 15px;
    border-radius: 18px;
    border: 1px solid rgba(0, 20, 52, 0.09);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 30px rgba(0, 20, 52, 0.08);
  }

  body[data-page="faq-detail"] .faq-question {
    margin-top: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  body[data-page="faq-detail"] .faq-detail-head {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  body[data-page="faq-detail"] .faq-badge {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    font-weight: 950;
    font-size: 13px;
    letter-spacing: 0.2px;
    color: #fff;
    background: var(--color-blue-700);
    box-shadow: 0 8px 18px rgba(0, 70, 184, 0.18);
  }

  body[data-page="faq-detail"] .faq-detail-head__copy {
    min-width: 0;
  }

  body[data-page="faq-detail"] .faq-question h2 {
    margin: 0 0 6px;
    font-size: 16px;
    line-height: 1.4;
    color: rgba(12, 34, 80, 0.96);
    font-weight: 950;
  }

  body[data-page="faq-detail"] .faq-detail-meta {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(16, 24, 40, 0.55);
  }

  body[data-page="faq-detail"] .faq-steps {
    padding-bottom: 14px;
  }

  body[data-page="faq-detail"] .faq-steps h3 {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.35;
    color: rgba(12, 34, 80, 0.98);
    font-weight: 950;
  }

  body[data-page="faq-detail"] .faq-step-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: faqStep;
    display: grid;
    gap: 14px;
  }

  body[data-page="faq-detail"] .faq-step-list li {
    counter-increment: faqStep;
    min-width: 0;
  }

  body[data-page="faq-detail"] .faq-step-list strong {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(12, 34, 80, 0.96);
    font-weight: 950;
  }

  body[data-page="faq-detail"] .faq-step-list strong::before {
    content: counter(faqStep) ". ";
    color: var(--color-blue-700);
  }

  body[data-page="faq-detail"] .faq-step-list span {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(16, 24, 40, 0.62);
  }

  body[data-page="faq-detail"] .faq-tip {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(11, 91, 211, 0.24);
    background: rgba(11, 91, 211, 0.06);
  }

  body[data-page="faq-detail"] .faq-tip__icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background-color: rgba(11, 91, 211, 0.14);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
    background-color: var(--color-blue-700);
  }

  body[data-page="faq-detail"] .faq-tip__copy strong {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 950;
    color: var(--color-blue-700);
  }

  body[data-page="faq-detail"] .faq-tip__copy p {
    margin: 0;
    font-size: 12px;
    line-height: 1.65;
    color: rgba(16, 24, 40, 0.66);
  }

  body[data-page="faq-detail"] .faq-card-title h3 {
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 1.2;
    color: rgba(12, 34, 80, 0.98);
    font-weight: 950;
  }

  body[data-page="faq-detail"] .faq-doc-list {
    display: grid;
    gap: 0;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(0, 20, 52, 0.08);
    background: rgba(255, 255, 255, 0.72);
  }

  body[data-page="faq-detail"] .faq-doc-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 11px 0;
    margin: 0 12px;
    border-top: 1px solid rgba(0, 20, 52, 0.08);
    text-decoration: none;
    color: inherit;
  }

  body[data-page="faq-detail"] .faq-doc-item:first-child {
    border-top: 0;
  }

  body[data-page="faq-detail"] .faq-doc-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 950;
    color: #fff;
    overflow: hidden;
  }

  body[data-page="faq-detail"] .faq-doc-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
  }

  body[data-page="faq-detail"] .faq-doc-icon.is-pdf {
    background: linear-gradient(180deg, #ff5a5f, #ff3b30);
  }

  body[data-page="faq-detail"] .faq-doc-icon.is-mp4 {
    background: linear-gradient(180deg, #6f7bf7, #4f46e5);
  }

  body[data-page="faq-detail"] .faq-doc-main {
    min-width: 0;
  }

  body[data-page="faq-detail"] .faq-doc-main strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.38;
    color: rgba(12, 34, 80, 0.96);
    font-weight: 900;
  }

  body[data-page="faq-detail"] .faq-doc-main small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: rgba(16, 24, 40, 0.56);
  }

  body[data-page="faq-detail"] .faq-doc-action {
    justify-self: end;
    font-size: 12px;
    font-weight: 950;
    color: var(--color-blue-700);
    white-space: nowrap;
  }

  body[data-page="faq-detail"] .faq-accordion details {
    border-top: 1px solid rgba(0, 20, 52, 0.08);
    padding: 12px 0;
  }

  body[data-page="faq-detail"] .faq-accordion details:first-child {
    border-top: 0;
    padding-top: 0;
  }

  body[data-page="faq-detail"] .faq-accordion summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 900;
    color: rgba(12, 34, 80, 0.92);
  }

  body[data-page="faq-detail"] .faq-accordion summary::-webkit-details-marker {
    display: none;
  }

  body[data-page="faq-detail"] .faq-accordion summary::after {
    content: "⌄";
    justify-self: end;
    color: rgba(12, 34, 80, 0.72);
    font-weight: 950;
    line-height: 1;
    transition: transform 0.18s ease;
  }

  body[data-page="faq-detail"] .faq-accordion details[open] summary::after {
    transform: rotate(180deg);
  }

  body[data-page="faq-detail"] .faq-accordion__body {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.65;
    color: rgba(16, 24, 40, 0.62);
  }

  body[data-page="faq-detail"] .faq-feedback {
    text-align: left;
  }

  body[data-page="faq-detail"] .faq-feedback h3 {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 950;
    color: rgba(12, 34, 80, 0.98);
  }

  body[data-page="faq-detail"] .faq-feedback__actions {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
  }

  body[data-page="faq-detail"] .faq-feedback__actions .btn {
    min-height: 40px;
    padding-inline: 14px;
    border-radius: 12px;
    font-weight: 950;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  body[data-page="faq-detail"] .faq-feedback__actions .btn svg {
    width: 16px;
    height: 16px;
    color: var(--color-blue-700);
    flex: 0 0 auto;
  }

  body[data-page="faq-detail"] .faq-support-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px;
    gap: 12px;
    align-items: end;
    margin-top: 12px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #083da0 0%, #0b6be2 100%);
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22);
    overflow: hidden;
    color: #fff;
  }

  body[data-page="faq-detail"] .faq-support-cta__copy h2 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 950;
    color: #fff;
  }

  body[data-page="faq-detail"] .faq-support-cta__copy p {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
  }

  body[data-page="faq-detail"] .faq-support-cta__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  body[data-page="faq-detail"] .faq-support-cta__actions .btn {
    min-height: 40px;
    padding-inline: 14px;
    border-radius: 12px;
    font-weight: 950;
  }

  body[data-page="faq-detail"] .faq-support-cta__actions .btn.btn-accent {
    background: #ff7a18;
    border-color: #ff7a18;
  }

  body[data-page="faq-detail"] .faq-support-cta__actions .btn.btn-outline {
    border-color: rgba(255, 255, 255, 0.42);
    color: rgba(255, 255, 255, 0.96);
    background: rgba(255, 255, 255, 0.06);
  }

  body[data-page="faq-detail"] .faq-support-cta__media {
    width: 118px;
    height: 126px;
    border-radius: 14px;
    overflow: hidden;
    align-self: end;
    opacity: 0.98;
  }

  body[data-page="faq-detail"] .faq-support-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }

  body[data-page="faq-detail"] .site-footer {
    background: linear-gradient(135deg, #001c3f 0%, #003a8c 100%);
    color: rgba(255, 255, 255, 0.9);
  }

  body[data-page="faq-detail"] .site-footer a {
    color: rgba(255, 255, 255, 0.9);
  }

  body[data-page="faq-detail"] .site-footer .footer-main {
    padding: 22px 0 12px;
  }

  body[data-page="faq-detail"] .site-footer .footer-main__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body[data-page="faq-detail"] .site-footer .footer-company h2 {
    font-size: 20px;
  }

  body[data-page="faq-detail"] .site-footer .footer-company p,
  body[data-page="faq-detail"] .site-footer .footer-contact li {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="faq-detail"] .site-footer .footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body[data-page="faq-detail"] .site-footer .footer-links h3 {
    font-size: 13px;
  }

  body[data-page="faq-detail"] .site-footer .footer-links a {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="faq-detail"] .site-footer .footer-qrcode {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  body[data-page="faq-detail"] .site-footer .footer-qrcode img {
    width: 86px;
    height: 86px;
    object-fit: cover;
    border-radius: 16px;
  }

  body[data-page="faq-detail"] .site-footer .social-links {
    display: none;
  }

  body[data-page="faq-detail"] .site-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  body[data-page="faq-detail"] .site-footer .footer-bottom__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding-bottom: 92px;
  }
}

@media (max-width: 390px) {
  body[data-page="faq-detail"] .container {
    padding-inline: 14px;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-header {
    gap: 8px;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-header__text strong {
    font-size: 14px;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-header__text small {
    font-size: 9px;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-header__hotline {
    font-size: 11px;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-hero {
    grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr);
    min-height: 164px;
  }

  body[data-page="faq-detail"] .faq-support-cta {
    grid-template-columns: minmax(0, 1fr) 106px;
    padding: 14px;
  }

  body[data-page="faq-detail"] .faq-support-cta__media {
    width: 106px;
    height: 118px;
  }

  body[data-page="faq-detail"] .site-footer .footer-links {
    gap: 10px;
  }
}

/* Download list page final mobile overrides.
   Scoped to the download hub so the shared support list template keeps its desktop structure. */
@media (max-width: 768px) {
  body[data-page="download"] {
    padding-bottom: calc(env(safe-area-inset-bottom) + 92px);
    background: #f7faff;
  }

  body[data-page="download"] .service-page {
    background: #f7faff;
  }

  body[data-page="download"] .site-header .topbar,
  body[data-page="download"] .topbar {
    display: none !important;
  }

  body[data-page="download"] .site-header {
    box-shadow: 0 1px 14px rgba(0, 20, 52, 0.08);
  }

  body[data-page="download"] .service-banner {
    min-height: 222px;
  }

  body[data-page="download"] .service-banner__inner {
    min-height: 222px;
    padding-block: 24px 18px;
    gap: 10px;
  }

  body[data-page="download"] .service-banner h1 {
    margin-bottom: 4px;
    font-size: 28px;
    line-height: 1.18;
  }

  body[data-page="download"] .service-banner p {
    max-width: 250px;
    font-size: 14px;
    line-height: 1.5;
  }

  body[data-page="download"] .banner-search {
    width: 100%;
    margin-top: 14px;
  }

  body[data-page="download"] .banner-search input,
  body[data-page="download"] .banner-search button {
    min-height: 44px;
  }

  body[data-page="download"] .banner-search button {
    min-width: 82px;
    padding-inline: 12px;
  }

  body[data-page="download"] .service-breadcrumb {
    padding-block: 10px 0;
    background: #f7faff;
  }

  body[data-page="download"] .service-breadcrumb .breadcrumb__list {
    gap: 6px;
    font-size: 11px;
    line-height: 1.35;
  }

  body[data-page="download"] .service-main-section {
    padding-block: 16px 18px;
  }

  body[data-page="download"] .service-layout {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  body[data-page="download"] .service-sidebar {
    grid-column: 1 / -1;
    gap: 12px;
    min-width: 0;
  }

  body[data-page="download"] .service-category-card--download {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
    padding: 14px;
  }

  body[data-page="download"] .service-category-card--download strong {
    display: none;
  }

  body[data-page="download"] .service-category-card--download a {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    min-height: 88px;
    padding: 12px 8px 10px;
    border: 1px solid rgba(0, 68, 184, 0.12);
    border-radius: 12px;
    color: var(--color-text);
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 20, 52, 0.06);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    min-width: 0;
  }

  body[data-page="download"] .service-category-card--download a::before {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--color-blue-100);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px 18px;
  }

  body[data-page="download"] .service-category-card--download a:nth-of-type(1)::before {
    background-image: var(--icon-download);
  }

  body[data-page="download"] .service-category-card--download a:nth-of-type(2)::before {
    background-image: var(--icon-wrench);
  }

  body[data-page="download"] .service-category-card--download a:nth-of-type(3)::before {
    background-image: var(--icon-cpu);
  }

  body[data-page="download"] .service-category-card--download a:nth-of-type(4)::before {
    background-image: var(--icon-support);
  }

  body[data-page="download"] .service-category-card--download a:nth-of-type(5)::before {
    background-image: var(--icon-shield);
  }

  body[data-page="download"] .service-category-card--download a:nth-of-type(6)::before {
    background-image: var(--icon-target);
  }

  body[data-page="download"] .service-category-card--download a:nth-of-type(7)::before {
    background-image: var(--icon-video);
  }

  body[data-page="download"] .service-category-card--download a.is-active,
  body[data-page="download"] .service-category-card--download a:hover {
    color: var(--color-white);
    border-color: transparent;
    background: linear-gradient(180deg, var(--color-blue-600), var(--color-blue-700));
    box-shadow: 0 10px 22px rgba(0, 68, 184, 0.18);
  }

  body[data-page="download"] .service-category-card--download a.is-active::before,
  body[data-page="download"] .service-category-card--download a:hover::before {
    background-color: rgba(255, 255, 255, 0.16);
  }

  body[data-page="download"] .service-list-panel {
    padding: 16px 14px;
    min-width: 0;
  }

  body[data-page="download"] .service-list-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 1px 8px;
    min-height: auto;
    margin-bottom: 10px;
    align-items: center;
  }

  body[data-page="download"] .service-list-head h2 {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    font-size: 18px;
  }

  body[data-page="download"] .service-list-head span {
    grid-column: 1;
    grid-row: 2;
    width: auto;
    font-size: 11px;
  }

  body[data-page="download"] .service-list-head button {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: center;
    min-width: 0;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 12px;
  }

  body[data-page="download"] .service-download-table .service-table-head {
    display: none;
  }

  body[data-page="download"] .service-download-table--cards {
    gap: 8px;
  }

  body[data-page="download"] .service-download-table--cards > a {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 4px 10px;
    min-height: 0;
    padding: 10px 12px;
    border: 1px solid rgba(0, 68, 184, 0.12);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 20, 52, 0.06);
    width: 100%;
    min-width: 0;
  }

  body[data-page="download"] .service-download-table--cards > a::before {
    content: "";
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin-top: 0;
    border: 1px solid rgba(255, 106, 26, 0.2);
    border-radius: 8px;
    color: var(--color-orange-600);
    background-color: #fff4ec;
    background-image: var(--icon-download);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    font-size: 0;
    align-self: flex-start;
  }

  body[data-page="download"] .service-download-table--cards strong {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.3;
  }

  body[data-page="download"] .service-download-table--cards p {
    order: 2;
    flex: 1 1 100%;
    margin: 0 0 0 38px;
    color: var(--color-muted);
    font-size: 11px;
    line-height: 1.4;
  }

  body[data-page="download"] .service-download-table--cards span {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    color: var(--color-muted);
    background: var(--color-bg-soft);
    font-size: 10px;
    line-height: 1.25;
    white-space: nowrap;
    order: 3;
    flex: 0 0 auto;
  }

  body[data-page="download"] .service-download-table--cards span:nth-of-type(1) {
    margin-left: 38px;
  }

  body[data-page="download"] .service-download-table--cards span:nth-of-type(n + 2) {
    margin-left: 6px;
  }

  body[data-page="download"] .service-download-table--cards em {
    order: 4;
    flex: 0 0 auto;
    width: 56px;
    min-width: 56px;
    margin: 0 0 0 auto;
    min-height: 28px;
    padding: 0 8px;
    border-radius: 10px;
    background: var(--color-blue-700);
    color: var(--color-white);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
  }

  body[data-page="download"] .service-pagination {
    margin-top: 16px;
  }

  body[data-page="download"] .service-pagination a,
  body[data-page="download"] .service-pagination span {
    min-width: 32px;
    height: 32px;
    font-size: 12px;
  }

  body[data-page="download"] .service-side-card,
  body[data-page="download"] .service-help-card {
    padding: 18px 16px;
  }

  body[data-page="download"] .service-side-card h2,
  body[data-page="download"] .service-help-card h2 {
    margin-bottom: 12px;
    font-size: 18px;
  }

  body[data-page="download"] .service-bullet-list {
    gap: 8px;
  }

  body[data-page="download"] .service-bullet-list li {
    position: relative;
    padding-left: 14px;
  }

  body[data-page="download"] .service-bullet-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--color-blue-700);
  }

  body[data-page="download"] .service-bullet-list a {
    display: block;
    padding-bottom: 10px;
  }

  body[data-page="download"] .service-help-card p {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="download"] .service-help-card strong {
    margin-top: 10px;
    font-size: 22px;
  }

  body[data-page="download"] .service-help-card span {
    font-size: 12px;
  }

  body[data-page="download"] .service-help-card .btn {
    width: 100%;
  }

  body[data-page="download"] .service-support-strip {
    padding-block: 12px 20px;
  }

  body[data-page="download"] .service-support-strip .product-inquiry__inner {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 16px;
    text-align: center;
  }

  body[data-page="download"] .service-support-strip .product-inquiry__copy h2 {
    font-size: 24px;
    line-height: 1.25;
  }

  body[data-page="download"] .service-support-strip .product-inquiry__copy p {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="download"] .service-support-strip .btn {
    width: 100%;
  }

  body[data-page="download"] .service-hotline {
    text-align: center;
  }

  body[data-page="download"] .service-hotline strong {
    font-size: 20px;
  }

  body[data-page="download"] .service-hotline span {
    font-size: 12px;
  }

  body[data-page="download"] .mobile-bottom-nav--cases,
  body[data-page="download"] .mobile-bottom-nav--news,
  body[data-page="download"] .mobile-bottom-nav--contact {
    display: none;
  }

  body[data-page="download"] .mobile-bottom-nav--support {
    position: fixed;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 10px);
    left: 12px;
    z-index: 86;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 7px 2px 5px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(0, 20, 52, 0.14);
    backdrop-filter: blur(10px);
  }

  body[data-page="download"] .mobile-bottom-nav--support a {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 50px;
    color: var(--color-muted);
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
  }

  body[data-page="download"] .mobile-bottom-nav--support a.is-active {
    color: var(--color-blue-700);
  }

  body[data-page="download"] .mobile-bottom-nav--support svg {
    width: 18px;
    height: 18px;
  }

  body[data-page="download"] .floating-contact {
    position: fixed;
    top: 50%;
    right: 8px;
    z-index: 88;
    display: grid !important;
    width: 56px;
    gap: 1px;
    padding: 6px 0;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--color-navy-900), var(--color-blue-700));
    box-shadow: 0 14px 32px rgba(0, 20, 52, 0.22);
    transform: translateY(-50%);
  }

  body[data-page="download"] .floating-contact a,
  body[data-page="download"] .floating-contact button {
    display: grid;
    place-items: center;
    min-height: 52px;
    padding: 0 6px;
    color: var(--color-white);
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    background: transparent;
  }

  /* ===== Download center mobile rebuild (2026-05-22) ===== */
  body[data-page="download"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 16px;
  }

  body[data-page="download"] .service-banner,
  body[data-page="download"] .service-banner__inner,
  body[data-page="download"] .banner-search,
  body[data-page="download"] .service-breadcrumb {
    display: none !important;
  }

  body[data-page="download"] .download-mobile-center {
    display: block !important;
    padding-block: 12px 18px;
  }

  body[data-page="download"] .download-center-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 124px;
    gap: 12px;
    align-items: center;
    padding: 18px 16px;
    border-radius: 20px;
    background: linear-gradient(135deg, #0b3d91, #0b5bd3);
    color: #fff;
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22);
    overflow: hidden;
  }

  body[data-page="download"] .download-center-hero__copy h1 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 30px;
    line-height: 1.08;
  }

  body[data-page="download"] .download-center-hero__subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    line-height: 1.6;
  }

  body[data-page="download"] .download-center-hero__art {
    width: 124px;
    height: 124px;
    border-radius: 16px;
    overflow: hidden;
    opacity: 0.95;
  }

  body[data-page="download"] .download-center-hero__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="download"] .download-center-search {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 86px;
    align-items: center;
    height: 44px;
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 20, 52, 0.10);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 24px rgba(0, 20, 52, 0.10);
  }

  body[data-page="download"] .download-center-search__icon {
    width: 38px;
    height: 44px;
    background: rgba(11, 91, 211, 0.08);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
    background-color: var(--color-blue-700);
    opacity: 0.78;
  }

  body[data-page="download"] .download-center-search input {
    height: 44px;
    border: 0;
    background: transparent;
    padding: 0 10px 0 8px;
    font-size: 13px;
    min-width: 0;
  }

  body[data-page="download"] .download-center-search .btn {
    height: 44px;
    border-radius: 0;
    min-width: 86px;
    padding-inline: 14px;
    font-size: 13px;
  }

  body[data-page="download"] .download-center-section {
    margin-top: 14px;
  }

  body[data-page="download"] .download-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="download"] .download-cat-card {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    min-height: 96px;
    padding: 12px 8px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08);
    text-align: center;
  }

  body[data-page="download"] .download-cat-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(11, 91, 211, 0.12);
    color: var(--color-blue-700);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
  }

  body[data-page="download"] .download-cat-card strong {
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.2;
  }

  body[data-page="download"] .download-cat-card small {
    color: rgba(16, 24, 40, 0.58);
    font-size: 11px;
    line-height: 1;
  }

  body[data-page="download"] .download-cat-card.is-active {
    border-color: transparent;
    background: linear-gradient(180deg, var(--color-blue-600), var(--color-blue-700));
    box-shadow: 0 14px 30px rgba(0, 68, 184, 0.16);
  }

  body[data-page="download"] .download-cat-card.is-active .download-cat-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
  }

  body[data-page="download"] .download-cat-card.is-active strong,
  body[data-page="download"] .download-cat-card.is-active small {
    color: rgba(255, 255, 255, 0.95);
  }

  body[data-page="download"] .download-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 12px 8px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08);
  }

  body[data-page="download"] .download-tabs {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body[data-page="download"] .download-tabs::-webkit-scrollbar {
    display: none;
  }

  body[data-page="download"] .download-tabs button {
    position: relative;
    flex: 0 0 auto;
    padding: 10px 2px;
    border: 0;
    background: transparent;
    color: rgba(16, 24, 40, 0.72);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="download"] .download-tabs button.is-active {
    color: var(--color-blue-700);
  }

  body[data-page="download"] .download-tabs button.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-blue-700);
  }

  body[data-page="download"] .download-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(11, 91, 211, 0.28);
    background: rgba(11, 91, 211, 0.06);
    color: var(--color-blue-700);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="download"] .download-filter-btn::after {
    content: "";
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6.5 7.5V19l-3 1v-7.5L4 5z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6.5 7.5V19l-3 1v-7.5L4 5z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  body[data-page="download"] .download-file-list {
    display: grid;
    gap: 10px;
  }

  body[data-page="download"] .download-file-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08);
    min-width: 0;
  }

  body[data-page="download"] .download-file-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 18px;
    color: #fff;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 0.4px;
  }

  body[data-page="download"] .download-file-icon.is-pdf { background: #ef4444; }
  body[data-page="download"] .download-file-icon.is-doc { background: #2563eb; }
  body[data-page="download"] .download-file-icon.is-xls { background: #16a34a; }
  body[data-page="download"] .download-file-icon.is-zip { background: #0ea5e9; }
  body[data-page="download"] .download-file-icon.is-mp4 { background: #7c3aed; }

  body[data-page="download"] .download-file-main {
    min-width: 0;
  }

  body[data-page="download"] .download-file-main h3 {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.25;
  }

  body[data-page="download"] .download-file-main h3 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--color-text);
  }

  body[data-page="download"] .download-file-main p {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 8px;
    color: rgba(16, 24, 40, 0.62);
    font-size: 12px;
    line-height: 1.45;
  }

  body[data-page="download"] .download-file-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    color: rgba(16, 24, 40, 0.58);
    font-size: 11px;
    line-height: 1.2;
  }

  body[data-page="download"] .download-file-actions {
    display: grid;
    justify-items: end;
    gap: 6px;
    text-align: right;
  }

  body[data-page="download"] .download-file-actions .btn {
    height: 36px;
    padding-inline: 14px;
    border-radius: 12px;
    white-space: nowrap;
  }

  body[data-page="download"] .download-file-actions small {
    color: rgba(16, 24, 40, 0.56);
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
  }

  body[data-page="download"] .download-center-pagination {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 0;
  }

  body[data-page="download"] .download-center-pagination a,
  body[data-page="download"] .download-center-pagination span {
    display: grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(0, 20, 52, 0.12);
    border-radius: 10px;
    background: #fff;
    color: rgba(16, 24, 40, 0.78);
    font-size: 12px;
    font-weight: 700;
  }

  body[data-page="download"] .download-center-pagination a.is-active {
    border-color: transparent;
    background: var(--color-blue-700);
    color: #fff;
  }

  body[data-page="download"] .download-center-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 122px;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0b3d91, #0b5bd3);
    color: #fff;
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22);
    overflow: hidden;
  }

  body[data-page="download"] .download-center-cta__copy h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 22px;
    line-height: 1.15;
  }

  body[data-page="download"] .download-center-cta__copy p {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    line-height: 1.45;
  }

  body[data-page="download"] .download-center-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  body[data-page="download"] .download-center-cta__actions .btn {
    height: 40px;
    padding-inline: 16px;
    border-radius: 12px;
  }

  body[data-page="download"] .download-center-cta__actions .btn.btn-accent {
    border-color: #ff7a1a;
    background: #ff7a1a;
    color: #fff;
  }

  body[data-page="download"] .download-center-cta__actions .btn.btn-outline {
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    background: transparent;
  }

  body[data-page="download"] .download-center-cta__media {
    width: 122px;
    height: 122px;
    border-radius: 14px;
    overflow: hidden;
    opacity: 0.96;
  }

  body[data-page="download"] .download-center-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="download"] .service-main-section,
  body[data-page="download"] .service-support-strip {
    display: none !important;
  }

  /* Product detail page mobile rebuild (2026-05-23).
     Replaces the old stacked detail layout with a conversion-focused product detail sales page. */
  body[data-page="product-detail"] {
    padding-bottom: calc(env(safe-area-inset-bottom) + 92px);
    background: #f7faff;
  }

  body[data-page="product-detail"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 16px;
  }

  body[data-page="product-detail"] .detail-hero,
  body[data-page="product-detail"] .detail-summary,
  body[data-page="product-detail"] .detail-selling-points,
  body[data-page="product-detail"] .detail-content,
  body[data-page="product-detail"] .detail-section,
  body[data-page="product-detail"] .detail-download-faq,
  body[data-page="product-detail"] .detail-related,
  body[data-page="product-detail"] .product-inquiry--detail {
    display: none !important;
  }

  body[data-page="product-detail"] .product-detail-mobile {
    display: block !important;
    padding-block: 12px 18px;
  }

  body[data-page="product-detail"] .product-detail-mobile__crumb {
    margin-bottom: 10px;
    font-size: 11px;
    line-height: 1.2;
    color: rgba(16, 24, 40, 0.52);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="product-detail"] .product-detail-mobile__crumb a {
    color: inherit;
  }

  body[data-page="product-detail"] .pdm-hero,
  body[data-page="product-detail"] .pdm-card {
    margin-top: 14px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(0, 20, 52, 0.10);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 30px rgba(0, 20, 52, 0.08);
  }

  body[data-page="product-detail"] .pdm-hero {
    margin-top: 0;
  }

  body[data-page="product-detail"] .pdm-hero__main {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #f5f8ff;
    border: 1px solid rgba(0, 20, 52, 0.08);
  }

  body[data-page="product-detail"] .pdm-hero__main img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    background: #f5f8ff;
  }

  body[data-page="product-detail"] .pdm-hero__thumbs {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  body[data-page="product-detail"] .pdm-hero__thumbs button {
    flex: 0 0 62px;
    padding: 0;
    border: 1px solid rgba(0, 20, 52, 0.12);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
  }

  body[data-page="product-detail"] .pdm-hero__thumbs img {
    width: 62px;
    height: 44px;
    object-fit: cover;
  }

  body[data-page="product-detail"] .pdm-hero__info {
    margin-top: 12px;
  }

  body[data-page="product-detail"] .pdm-hero__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  body[data-page="product-detail"] .pdm-hero__title-row h1 {
    margin: 0;
    color: var(--color-navy-900);
    font-size: 24px;
    line-height: 1.15;
    font-weight: 900;
  }

  body[data-page="product-detail"] .pdm-tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(11, 91, 211, 0.12);
    color: var(--color-blue-700);
    font-size: 11px;
    font-weight: 800;
  }

  body[data-page="product-detail"] .pdm-hero__desc {
    margin: 10px 0 0;
    color: rgba(16, 24, 40, 0.84);
    font-size: 14px;
    line-height: 1.6;
  }

  body[data-page="product-detail"] .pdm-hero__industry {
    margin: 8px 0 0;
    color: rgba(16, 24, 40, 0.58);
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="product-detail"] .pdm-selling-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-page="product-detail"] .pdm-selling-grid article {
    padding: 10px 8px;
    border: 1px solid rgba(0, 20, 52, 0.10);
    border-radius: 12px;
    background: #fff;
  }

  body[data-page="product-detail"] .pdm-selling-grid strong {
    display: block;
    color: var(--color-navy-900);
    font-size: 13px;
    line-height: 1.25;
    font-weight: 900;
  }

  body[data-page="product-detail"] .pdm-selling-grid small {
    display: block;
    margin-top: 4px;
    color: rgba(16, 24, 40, 0.58);
    font-size: 11px;
    line-height: 1.3;
  }

  body[data-page="product-detail"] .pdm-hero__actions {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="product-detail"] .pdm-hero__actions .btn {
    min-height: 40px;
    border-radius: 12px;
    font-weight: 900;
  }

  body[data-page="product-detail"] .pdm-card h2 {
    margin: 0;
    color: var(--color-navy-900);
    font-size: 18px;
    line-height: 1.25;
    font-weight: 900;
  }

  body[data-page="product-detail"] .pdm-param-table {
    margin-top: 12px;
    border: 1px solid rgba(0, 20, 52, 0.10);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
  }

  body[data-page="product-detail"] .pdm-param-table > div {
    display: grid;
    grid-template-columns: 42% 58%;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(0, 20, 52, 0.08);
  }

  body[data-page="product-detail"] .pdm-param-table > div:first-child {
    border-top: 0;
  }

  body[data-page="product-detail"] .pdm-param-table span {
    color: rgba(16, 24, 40, 0.56);
    font-size: 12px;
    line-height: 1.4;
  }

  body[data-page="product-detail"] .pdm-param-table strong {
    color: rgba(16, 24, 40, 0.9);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    word-break: break-word;
  }

  body[data-page="product-detail"] .pdm-feature-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="product-detail"] .pdm-feature-grid article {
    padding: 12px 10px;
    border: 1px solid rgba(0, 20, 52, 0.10);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 20, 52, 0.06);
  }

  body[data-page="product-detail"] .pdm-feature-grid span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: rgba(11, 91, 211, 0.12);
    color: var(--color-blue-700);
    font-size: 12px;
    font-weight: 900;
  }

  body[data-page="product-detail"] .pdm-feature-grid h3 {
    margin: 0 0 4px;
    color: var(--color-navy-900);
    font-size: 13px;
    line-height: 1.3;
    font-weight: 900;
  }

  body[data-page="product-detail"] .pdm-feature-grid p {
    margin: 0;
    color: rgba(16, 24, 40, 0.58);
    font-size: 11px;
    line-height: 1.45;
  }

  body[data-page="product-detail"] .pdm-gallery-track {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  body[data-page="product-detail"] .pdm-gallery-track img {
    flex: 0 0 208px;
    height: 134px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(0, 20, 52, 0.10);
  }

  body[data-page="product-detail"] .pdm-download-list {
    margin-top: 12px;
    display: grid;
    gap: 8px;
  }

  body[data-page="product-detail"] .pdm-download-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    border: 1px solid rgba(0, 20, 52, 0.10);
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: inherit;
  }

  body[data-page="product-detail"] .pdm-download-list a > span {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
  }

  body[data-page="product-detail"] .pdm-download-list a > span.is-pdf {
    background: linear-gradient(180deg, #ff5a5f, #ff3b30);
  }

  body[data-page="product-detail"] .pdm-download-list a > span.is-dwg {
    background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  }

  body[data-page="product-detail"] .pdm-download-list b {
    display: block;
    color: rgba(16, 24, 40, 0.9);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
  }

  body[data-page="product-detail"] .pdm-download-info {
    flex: 1;
    min-width: 0;
  }

  body[data-page="product-detail"] .pdm-download-list small {
    display: block;
    margin-top: 4px;
    color: rgba(16, 24, 40, 0.56);
    font-size: 11px;
    line-height: 1.2;
  }

  body[data-page="product-detail"] .pdm-download-list em {
    flex-shrink: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(11, 91, 211, 0.42);
    border-radius: 10px;
    color: var(--color-blue-700);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="product-detail"] .pdm-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  body[data-page="product-detail"] .pdm-card-head a {
    color: var(--color-blue-700);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="product-detail"] .pdm-cases-track {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  body[data-page="product-detail"] .pdm-cases-track a {
    flex: 0 0 220px;
    border: 1px solid rgba(0, 20, 52, 0.10);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
  }

  body[data-page="product-detail"] .pdm-cases-track img {
    width: 100%;
    height: 128px;
    object-fit: cover;
  }

  body[data-page="product-detail"] .pdm-cases-track strong {
    display: block;
    margin: 10px 10px 0;
    color: rgba(16, 24, 40, 0.92);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 900;
  }

  body[data-page="product-detail"] .pdm-cases-track p {
    margin: 6px 10px 0;
    color: rgba(16, 24, 40, 0.58);
    font-size: 11px;
    line-height: 1.4;
  }

  body[data-page="product-detail"] .pdm-cases-track small {
    display: inline-block;
    margin: 8px 10px 0;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(11, 91, 211, 0.12);
    color: var(--color-blue-700);
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
  }

  body[data-page="product-detail"] .pdm-cases-track em {
    display: block;
    margin: 10px 10px 12px;
    color: var(--color-blue-700);
    font-size: 12px;
    line-height: 1.2;
    font-style: normal;
    font-weight: 800;
  }

  body[data-page="product-detail"] .pdm-faq-list {
    margin-top: 10px;
  }

  body[data-page="product-detail"] .pdm-faq-list details {
    border-top: 1px solid rgba(0, 20, 52, 0.08);
    padding: 10px 0;
  }

  body[data-page="product-detail"] .pdm-faq-list details:first-child {
    border-top: 0;
    padding-top: 0;
  }

  body[data-page="product-detail"] .pdm-faq-list summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 8px;
    align-items: center;
    color: rgba(16, 24, 40, 0.9);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
  }

  body[data-page="product-detail"] .pdm-faq-list summary::-webkit-details-marker {
    display: none;
  }

  body[data-page="product-detail"] .pdm-faq-list summary::after {
    content: "";
    width: 18px;
    height: 18px;
    justify-self: end;
    background: rgba(16, 24, 40, 0.52);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.18s ease;
  }

  body[data-page="product-detail"] .pdm-faq-list details[open] summary::after {
    transform: rotate(90deg);
  }

  body[data-page="product-detail"] .pdm-faq-list details div {
    margin-top: 8px;
    color: rgba(16, 24, 40, 0.62);
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="product-detail"] .pdm-cta {
    margin-top: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 122px;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0b3d91, #0b5bd3);
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22);
    overflow: hidden;
    color: #fff;
  }

  body[data-page="product-detail"] .pdm-cta__copy h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 18px;
    line-height: 1.22;
    font-weight: 900;
  }

  body[data-page="product-detail"] .pdm-cta__copy p {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="product-detail"] .pdm-cta__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  body[data-page="product-detail"] .pdm-cta__actions .btn {
    min-height: 40px;
    border-radius: 12px;
    padding-inline: 14px;
    font-weight: 900;
  }

  body[data-page="product-detail"] .pdm-cta__actions .btn.btn-outline {
    border-color: rgba(255, 255, 255, 0.42);
    color: rgba(255, 255, 255, 0.96);
    background: rgba(255, 255, 255, 0.06);
  }

  body[data-page="product-detail"] .pdm-cta__media {
    width: 122px;
    height: 122px;
    border-radius: 14px;
    overflow: hidden;
    opacity: 0.96;
  }

  body[data-page="product-detail"] .pdm-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Product detail page mobile v2: reference-matched structure and tighter module rhythm. */
  body[data-page="product-detail"] {
    overflow-x: hidden;
    background: #f6f9ff;
  }

  body[data-page="product-detail"] .container {
    width: calc(100% - 32px);
    max-width: 100%;
    padding-inline: 0;
  }

  body[data-page="product-detail"] .product-detail-mobile {
    display: block !important;
    padding-block: 10px 16px;
  }

  body[data-page="product-detail"] .product-detail-mobile > .container {
    display: grid;
    gap: 10px;
  }

  body[data-page="product-detail"] .detail-hero,
  body[data-page="product-detail"] .detail-summary,
  body[data-page="product-detail"] .detail-selling-points,
  body[data-page="product-detail"] .detail-content,
  body[data-page="product-detail"] .detail-section,
  body[data-page="product-detail"] .detail-download-faq,
  body[data-page="product-detail"] .detail-related,
  body[data-page="product-detail"] .product-inquiry--detail {
    display: none !important;
  }

  body[data-page="product-detail"] .pdm-mobile-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 4px 2px 6px;
  }

  body[data-page="product-detail"] .pdm-mobile-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #10162f;
  }

  body[data-page="product-detail"] .pdm-mobile-brand__mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 2px solid #2554ff;
    border-radius: 10px;
    color: #2554ff;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    background: #fff;
    flex: 0 0 auto;
  }

  body[data-page="product-detail"] .pdm-mobile-brand__text {
    display: grid;
    min-width: 0;
    line-height: 1.05;
  }

  body[data-page="product-detail"] .pdm-mobile-brand__text strong {
    color: #10162f;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.02em;
  }

  body[data-page="product-detail"] .pdm-mobile-brand__text small {
    margin-top: 2px;
    color: #8b94aa;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
  }

  body[data-page="product-detail"] .pdm-mobile-topbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
    min-width: 0;
  }

  body[data-page="product-detail"] .pdm-mobile-phone {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #2142ff;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  body[data-page="product-detail"] .pdm-mobile-phone svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }

  body[data-page="product-detail"] .pdm-mobile-menu {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    flex: 0 0 auto;
  }

  body[data-page="product-detail"] .pdm-mobile-menu span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 2px 0;
    border-radius: 999px;
    background: #2142ff;
  }

  body[data-page="product-detail"] .pdm-mobile-breadcrumb {
    padding: 8px 12px;
    border: 1px solid rgba(18, 31, 62, 0.08);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff 0%, #f7f9ff 100%);
    box-shadow: 0 10px 24px rgba(0, 20, 52, 0.06);
    overflow: hidden;
  }

  body[data-page="product-detail"] .pdm-mobile-breadcrumb__list {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: rgba(16, 24, 40, 0.52);
    font-size: 11px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="product-detail"] .pdm-mobile-breadcrumb__list li {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="product-detail"] .pdm-mobile-breadcrumb__list li:not(:last-child)::after {
    content: ">";
    margin-left: 5px;
    color: rgba(16, 24, 40, 0.42);
  }

  body[data-page="product-detail"] .pdm-mobile-breadcrumb__list a {
    color: inherit;
  }

  body[data-page="product-detail"] .pdm-mobile-hero,
  body[data-page="product-detail"] .pdm-card {
    margin-top: 0;
    padding: 16px;
    border: 1px solid rgba(0, 20, 52, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 30px rgba(0, 20, 52, 0.08);
    overflow: hidden;
  }

  body[data-page="product-detail"] .pdm-mobile-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 12px;
    align-items: start;
  }

  body[data-page="product-detail"] .pdm-mobile-hero__media,
  body[data-page="product-detail"] .pdm-mobile-hero__body {
    min-width: 0;
  }

  body[data-page="product-detail"] .pdm-mobile-hero__main {
    margin: 0;
    border: 1px solid rgba(0, 20, 52, 0.08);
    border-radius: 14px;
    overflow: hidden;
    background: #eef3ff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  }

  body[data-page="product-detail"] .pdm-mobile-hero__main img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #eef3ff;
  }

  body[data-page="product-detail"] .pdm-mobile-hero__thumbs {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  body[data-page="product-detail"] .pdm-mobile-hero__thumbs button {
    padding: 0;
    border: 1px solid rgba(0, 20, 52, 0.12);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    min-width: 0;
  }

  body[data-page="product-detail"] .pdm-mobile-hero__thumbs img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  body[data-page="product-detail"] .pdm-mobile-hero__body {
    padding-top: 2px;
  }

  body[data-page="product-detail"] .pdm-mobile-hero__body h1 {
    margin: 0;
    color: #10162f;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -0.01em;
  }

  body[data-page="product-detail"] .pdm-mobile-hero__body h1 span {
    display: block;
  }

  body[data-page="product-detail"] .pdm-mobile-hero__tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    margin-top: 4px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(11, 91, 211, 0.12);
    color: #0b5bd3;
    font-size: 11px;
    font-weight: 800;
  }

  body[data-page="product-detail"] .pdm-mobile-hero__lead {
    margin: 10px 0 0;
    color: rgba(16, 24, 40, 0.86);
    font-size: 13px;
    line-height: 1.55;
  }

  body[data-page="product-detail"] .pdm-mobile-hero__sublead {
    margin: 8px 0 0;
    color: rgba(16, 24, 40, 0.58);
    font-size: 11px;
    line-height: 1.5;
  }

  body[data-page="product-detail"] .pdm-mobile-selling {
    display: none !important;
  }

  body[data-page="product-detail"] .pdm-mobile-hero__actions {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  body[data-page="product-detail"] .pdm-mobile-hero__actions .btn {
    min-width: 0;
    height: 48px;
    min-height: 48px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 15px !important;
    line-height: normal;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 12px;
  }

  body[data-page="product-detail"] .pdm-mobile-hero__actions .btn.btn-outline {
    background: #fff;
  }

  body[data-page="product-detail"] .pdm-card {
    margin-top: 14px;
  }

  body[data-page="product-detail"] .pdm-card h2 {
    margin: 0;
    color: #10162f;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 900;
  }

  body[data-page="product-detail"] .pdm-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  body[data-page="product-detail"] .pdm-card-head a,
  body[data-page="product-detail"] .pdm-card-more {
    color: #0b5bd3;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="product-detail"] .pdm-spec-table {
    width: 100%;
    margin-top: 12px;
    border: 1px solid rgba(0, 20, 52, 0.1);
    border-radius: 14px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: #fff;
    table-layout: fixed;
  }

  body[data-page="product-detail"] .pdm-spec-table tr {
    display: grid;
    grid-template-columns: 22% 28% 22% 28%;
  }

  body[data-page="product-detail"] .pdm-spec-table tr + tr {
    border-top: 1px solid rgba(0, 20, 52, 0.08);
  }

  body[data-page="product-detail"] .pdm-spec-table th,
  body[data-page="product-detail"] .pdm-spec-table td {
    min-width: 0;
    padding: 10px 8px;
    border-right: 1px solid rgba(0, 20, 52, 0.08);
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  body[data-page="product-detail"] .pdm-spec-table th:last-child,
  body[data-page="product-detail"] .pdm-spec-table td:last-child {
    border-right: 0;
  }

  body[data-page="product-detail"] .pdm-spec-table th {
    color: rgba(16, 24, 40, 0.56);
    font-weight: 600;
    background: #f9fbff;
    text-align: left;
  }

  body[data-page="product-detail"] .pdm-spec-table td {
    color: #10162f;
    font-weight: 800;
  }

  body[data-page="product-detail"] .pdm-spec-note {
    margin: 8px 0 0;
    color: rgba(16, 24, 40, 0.5);
    font-size: 10px;
    line-height: 1.45;
  }

  body[data-page="product-detail"] .pdm-feature-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-page="product-detail"] .pdm-feature-grid article {
    min-width: 0;
    padding: 10px 6px 8px;
    border: 1px solid rgba(0, 20, 52, 0.1);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 20, 52, 0.06);
    text-align: center;
  }

  body[data-page="product-detail"] .pdm-feature-grid span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: rgba(11, 91, 211, 0.12);
    color: #0b5bd3;
  }

  body[data-page="product-detail"] .pdm-feature-grid svg {
    width: 18px;
    height: 18px;
  }

  body[data-page="product-detail"] .pdm-feature-grid h3 {
    margin: 0 0 4px;
    color: #10162f;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 900;
    overflow-wrap: anywhere;
  }

  body[data-page="product-detail"] .pdm-feature-grid p {
    margin: 0;
    color: rgba(16, 24, 40, 0.58);
    font-size: 10px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  body[data-page="product-detail"] .pdm-gallery-shell {
    position: relative;
    margin-top: 12px;
    padding-inline: 28px;
  }

  body[data-page="product-detail"] .pdm-gallery-arrow {
    position: absolute;
    top: 50%;
    width: 26px;
    height: 42px;
    margin-top: -21px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    color: #8b94aa;
    font-size: 28px;
    line-height: 1;
    box-shadow: 0 10px 22px rgba(0, 20, 52, 0.12);
  }

  body[data-page="product-detail"] .pdm-gallery-arrow:first-child {
    left: 0;
  }

  body[data-page="product-detail"] .pdm-gallery-arrow:last-child {
    right: 0;
  }

  body[data-page="product-detail"] .pdm-gallery-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  body[data-page="product-detail"] .pdm-gallery-item {
    flex: 0 0 31%;
    min-width: 112px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 20, 52, 0.08);
    box-shadow: 0 8px 18px rgba(0, 20, 52, 0.06);
    scroll-snap-align: start;
    background: #fff;
  }

  body[data-page="product-detail"] .pdm-gallery-item img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  body[data-page="product-detail"] .pdm-download-list {
    margin-top: 12px;
    display: grid;
    gap: 8px;
  }

  body[data-page="product-detail"] .pdm-download-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    border: 1px solid rgba(0, 20, 52, 0.1);
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: inherit;
  }

  body[data-page="product-detail"] .pdm-download-list a > span {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    flex: 0 0 auto;
  }

  body[data-page="product-detail"] .pdm-download-list a > span.is-pdf {
    background: linear-gradient(180deg, #ff5a5f, #ff3b30);
  }

  body[data-page="product-detail"] .pdm-download-list a > span.is-dwg {
    background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  }

  body[data-page="product-detail"] .pdm-download-list b {
    display: block;
    color: rgba(16, 24, 40, 0.92);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
  }

  body[data-page="product-detail"] .pdm-download-info {
    flex: 1;
    min-width: 0;
  }

  body[data-page="product-detail"] .pdm-download-list small {
    display: block;
    margin-top: 4px;
    color: rgba(16, 24, 40, 0.56);
    font-size: 11px;
    line-height: 1.2;
  }

  body[data-page="product-detail"] .pdm-download-list em {
    flex-shrink: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(11, 91, 211, 0.42);
    border-radius: 10px;
    color: #0b5bd3;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="product-detail"] .pdm-card-more {
    display: block;
    margin-top: 10px;
    text-align: right;
  }

  body[data-page="product-detail"] .pdm-case-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="product-detail"] .pdm-case-card {
    min-width: 0;
    border: 1px solid rgba(0, 20, 52, 0.1);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 20, 52, 0.06);
  }

  body[data-page="product-detail"] .pdm-case-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  body[data-page="product-detail"] .pdm-case-card strong {
    display: block;
    margin: 10px 10px 0;
    color: rgba(16, 24, 40, 0.92);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 900;
    overflow-wrap: anywhere;
  }

  body[data-page="product-detail"] .pdm-case-card p {
    margin: 6px 10px 0;
    color: rgba(16, 24, 40, 0.58);
    font-size: 10px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  body[data-page="product-detail"] .pdm-case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 8px 10px 0;
  }

  body[data-page="product-detail"] .pdm-case-tags span {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(11, 91, 211, 0.12);
    color: #0b5bd3;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="product-detail"] .pdm-case-card a {
    display: block;
    margin: 10px 10px 12px;
    color: #0b5bd3;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
  }

  body[data-page="product-detail"] .pdm-faq-list {
    margin-top: 10px;
  }

  body[data-page="product-detail"] .pdm-faq-list details {
    padding: 10px 0;
    border-top: 1px solid rgba(0, 20, 52, 0.08);
  }

  body[data-page="product-detail"] .pdm-faq-list details:first-child {
    padding-top: 0;
    border-top: 0;
  }

  body[data-page="product-detail"] .pdm-faq-list summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 8px;
    align-items: center;
    color: rgba(16, 24, 40, 0.92);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
  }

  body[data-page="product-detail"] .pdm-faq-list summary::-webkit-details-marker {
    display: none;
  }

  body[data-page="product-detail"] .pdm-faq-list summary::after {
    content: "";
    width: 18px;
    height: 18px;
    justify-self: end;
    background: rgba(16, 24, 40, 0.52);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.18s ease;
  }

  body[data-page="product-detail"] .pdm-faq-list details[open] summary::after {
    transform: rotate(90deg);
  }

  body[data-page="product-detail"] .pdm-faq-list details div {
    margin-top: 8px;
    color: rgba(16, 24, 40, 0.62);
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="product-detail"] .pdm-cta {
    margin-top: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 122px;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0b3d91, #0b5bd3);
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22);
    overflow: hidden;
    color: #fff;
  }

  body[data-page="product-detail"] .pdm-cta__copy h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 18px;
    line-height: 1.22;
    font-weight: 900;
  }

  body[data-page="product-detail"] .pdm-cta__copy p {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="product-detail"] .pdm-cta__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  body[data-page="product-detail"] .pdm-cta__actions .btn {
    min-height: 40px;
    border-radius: 12px;
    padding-inline: 14px;
    font-weight: 900;
  }

  body[data-page="product-detail"] .pdm-cta__actions .btn.btn-outline {
    border-color: rgba(255, 255, 255, 0.42);
    color: rgba(255, 255, 255, 0.96);
    background: rgba(255, 255, 255, 0.06);
  }

  body[data-page="product-detail"] .pdm-cta__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 10px;
  }

  body[data-page="product-detail"] .pdm-cta__chips span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
  }

  body[data-page="product-detail"] .pdm-cta__chips span::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    flex: 0 0 auto;
  }

  body[data-page="product-detail"] .pdm-cta__media {
    width: 122px;
    height: 122px;
    border-radius: 14px;
    overflow: hidden;
    opacity: 0.96;
  }

  body[data-page="product-detail"] .pdm-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Video tutorial list page: mobile single-column layout only. */
  body[data-page="video"] {
    padding-bottom: calc(env(safe-area-inset-bottom) + 92px);
    background: #f7faff;
  }

  body[data-page="video"] .service-page {
    background: #f7faff;
  }

  body[data-page="video"] .service-home-section,
  body[data-page="video"] .service-main-section,
  body[data-page="video"] .service-section {
    padding-block: 18px;
  }

  body[data-page="video"] .service-banner {
    min-height: 228px;
  }

  body[data-page="video"] .service-banner__inner {
    min-height: 228px;
    padding-block: 24px 18px;
    gap: 10px;
  }

  body[data-page="video"] .service-banner h1 {
    margin-bottom: 2px;
    font-size: 28px;
    line-height: 1.18;
  }

  body[data-page="video"] .service-banner p {
    max-width: 280px;
    font-size: 14px;
    line-height: 1.5;
  }

  body[data-page="video"] .banner-search {
    display: flex;
    width: 100%;
    margin-top: 14px;
    overflow: hidden;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 24px rgba(0, 20, 52, 0.12);
  }

  body[data-page="video"] .banner-search input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 13px;
  }

  body[data-page="video"] .banner-search button {
    flex: 0 0 78px;
    min-height: 44px;
    min-width: 78px;
    padding-inline: 12px;
    border-radius: 0;
    font-size: 13px;
  }

  body[data-page="video"] .service-breadcrumb {
    padding-block: 12px 0;
  }

  body[data-page="video"] .breadcrumb__list {
    gap: 4px 6px;
    font-size: 11px;
    line-height: 1.45;
  }

  body[data-page="video"] .service-layout {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  body[data-page="video"] .service-category-card {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 8px;
    padding: 14px;
    overflow: visible;
  }

  body[data-page="video"] .service-category-card a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 84px;
    padding: 12px 6px 10px;
    border: 1px solid rgba(0, 68, 184, 0.12);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 20, 52, 0.06);
    color: var(--color-text);
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
  }

  body[data-page="video"] .service-category-card a::before {
    content: "▶";
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(180deg, var(--color-blue-600), var(--color-blue-700));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    font-size: 11px;
    line-height: 1;
  }

  body[data-page="video"] .service-category-card a em {
    display: block;
    margin-top: 1px;
    color: var(--color-subtle);
    font-size: 11px;
    font-style: normal;
    opacity: 1;
  }

  body[data-page="video"] .service-category-card a.is-active {
    border-color: transparent;
    color: var(--color-white);
    background: linear-gradient(180deg, var(--color-blue-600), var(--color-blue-700));
    box-shadow: 0 10px 22px rgba(0, 68, 184, 0.18);
  }

  body[data-page="video"] .service-category-card a.is-active::before {
    background: rgba(255, 255, 255, 0.16);
  }

  body[data-page="video"] .service-category-card a.is-active em {
    color: rgba(255, 255, 255, 0.9);
  }

  body[data-page="video"] .service-list-panel,
  body[data-page="video"] .service-side-card,
  body[data-page="video"] .service-help-card {
    padding: 16px;
    border-radius: 16px;
  }

  body[data-page="video"] .service-list-head {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
  }

  body[data-page="video"] .service-list-head h2,
  body[data-page="video"] .service-list-head span {
    grid-column: 1 / -1;
  }

  body[data-page="video"] .service-list-head h2 {
    margin-bottom: 0;
    font-size: 22px;
    line-height: 1.25;
  }

  body[data-page="video"] .service-list-head span {
    margin-right: 0;
    margin-top: -2px;
    color: var(--color-muted);
    font-size: 12px;
  }

  body[data-page="video"] .service-list-head button {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 12px;
  }

  body[data-page="video"] .service-video-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body[data-page="video"] .service-video-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
  }

  body[data-page="video"] .service-video-card img {
    width: 112px;
    height: 76px;
    border-radius: 10px;
  }

  body[data-page="video"] .service-video-card > span {
    top: 34px;
    left: 52px;
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  body[data-page="video"] .service-video-card strong,
  body[data-page="video"] .service-video-card small {
    padding-inline: 0;
  }

  body[data-page="video"] .service-video-card strong {
    padding-top: 2px;
    font-size: 15px;
    line-height: 1.35;
  }

  body[data-page="video"] .service-video-card small {
    padding-bottom: 0;
    color: var(--color-muted);
    font-size: 11px;
  }

  body[data-page="video"] .service-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 16px;
  }

  body[data-page="video"] .service-pagination a,
  body[data-page="video"] .service-pagination span {
    min-width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 12px;
  }

  body[data-page="video"] .service-sidebar {
    gap: 12px;
  }

  body[data-page="video"] .service-side-card h2,
  body[data-page="video"] .service-help-card h2 {
    margin-bottom: 12px;
    font-size: 20px;
  }

  body[data-page="video"] .service-guide-list {
    gap: 10px;
  }

  body[data-page="video"] .service-guide-list a {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px 14px;
    border: 1px solid rgba(0, 68, 184, 0.12);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 20, 52, 0.06);
  }

  body[data-page="video"] .service-guide-list a::before {
    content: "▶";
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(180deg, var(--color-blue-600), var(--color-blue-700));
    font-size: 10px;
    line-height: 1;
  }

  body[data-page="video"] .service-guide-list strong,
  body[data-page="video"] .service-guide-list small {
    grid-column: 2;
  }

  body[data-page="video"] .service-guide-list strong {
    font-size: 14px;
    line-height: 1.35;
  }

  body[data-page="video"] .service-guide-list small {
    margin-top: 2px;
    color: var(--color-muted);
    font-size: 11px;
    line-height: 1.45;
  }

  body[data-page="video"] .service-sidebar > .service-side-card:first-child > .btn.btn-light.btn-sm {
    display: flex;
    width: max-content;
    margin: 18px auto 0;
    justify-content: center;
    align-items: center;
  }

  body[data-page="video"] .service-rank-list {
    gap: 10px;
  }

  body[data-page="video"] .service-rank-list a {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 0;
  }

  body[data-page="video"] .service-rank-list span {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  body[data-page="video"] .service-rank-list strong,
  body[data-page="video"] .service-rank-list small {
    grid-column: 2;
  }

  body[data-page="video"] .service-rank-list strong {
    font-size: 13px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="video"] .service-rank-list small {
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="video"] .service-support-strip {
    padding-block: 12px 20px;
  }

  body[data-page="video"] .service-support-strip .product-inquiry__inner {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 16px;
    text-align: center;
  }

  body[data-page="video"] .service-support-strip .product-inquiry__copy h2 {
    font-size: 24px;
    line-height: 1.25;
  }

  body[data-page="video"] .service-support-strip .product-inquiry__copy p {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="video"] .service-support-strip .btn {
    width: 100%;
  }

  body[data-page="video"] .service-hotline {
    text-align: center;
  }

  body[data-page="video"] .service-hotline strong {
    font-size: 20px;
  }

  body[data-page="video"] .service-hotline span {
    font-size: 12px;
  }

  body[data-page="video"] .mobile-bottom-nav--cases,
  body[data-page="video"] .mobile-bottom-nav--news,
  body[data-page="video"] .mobile-bottom-nav--contact {
    display: none;
  }

  body[data-page="video"] .mobile-bottom-nav--support {
    position: fixed;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 10px);
    left: 12px;
    z-index: 86;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 7px 2px 5px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(0, 20, 52, 0.14);
    backdrop-filter: blur(10px);
  }

  body[data-page="video"] .mobile-bottom-nav--support a {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 50px;
    color: var(--color-muted);
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
  }

  body[data-page="video"] .mobile-bottom-nav--support a.is-active {
    color: var(--color-blue-700);
  }

  body[data-page="video"] .mobile-bottom-nav--support svg {
    width: 18px;
    height: 18px;
  }

  body[data-page="video"] .floating-contact {
    position: fixed;
    top: 50%;
    right: 8px;
    z-index: 88;
    display: grid !important;
    width: 56px;
    gap: 1px;
    padding: 6px 0;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--color-navy-900), var(--color-blue-700));
    box-shadow: 0 14px 32px rgba(0, 20, 52, 0.22);
    transform: translateY(-50%);
  }

  body[data-page="video"] .floating-contact a,
  body[data-page="video"] .floating-contact button {
    display: grid;
    place-items: center;
    min-height: 52px;
    padding: 0 6px;
    color: var(--color-white);
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    background: transparent;
  }

  /* ===== Video page mobile rebuild (2026-05-31) ===== */
  body[data-page="video"] {
    padding-bottom: calc(env(safe-area-inset-bottom) + 92px);
    background: #f7faff;
    overflow-x: hidden;
  }

  body[data-page="video"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 16px;
  }

  body[data-page="video"] .service-banner,
  body[data-page="video"] .service-banner__inner,
  body[data-page="video"] .banner-search,
  body[data-page="video"] .service-breadcrumb,
  body[data-page="video"] .service-main-section,
  body[data-page="video"] .service-support-strip {
    display: none !important;
  }

  body[data-page="video"] .service-page {
    background: #f7faff;
  }

  body[data-page="video"] .video-mobile-portal {
    display: block !important;
    padding-block: 12px 18px;
  }

  body[data-page="video"] .video-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 4px 2px 2px;
  }

  body[data-page="video"] .video-mobile-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--color-blue-700);
  }

  body[data-page="video"] .video-mobile-brand .brand__mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  body[data-page="video"] .video-mobile-brand .brand__text {
    min-width: 0;
  }

  body[data-page="video"] .video-mobile-brand .brand__text strong {
    font-size: 17px;
  }

  body[data-page="video"] .video-mobile-brand .brand__text small {
    font-size: 10px;
  }

  body[data-page="video"] .video-mobile-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }

  body[data-page="video"] .video-mobile-call {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-blue-700);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="video"] .video-mobile-call svg {
    width: 16px;
    height: 16px;
  }

  body[data-page="video"] .video-mobile-call span {
    line-height: 1;
  }

  body[data-page="video"] .video-mobile-menu {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    border: 0;
    background: transparent;
  }

  body[data-page="video"] .video-mobile-menu span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 3px 0;
    border-radius: 999px;
    background: var(--color-navy-900);
  }

  body[data-page="video"] .video-portal-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px;
    gap: 12px;
    align-items: center;
    padding: 20px 16px 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, #0b2f76 0%, #0b4db8 56%, #0d69ff 100%);
    color: #fff;
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22);
    overflow: hidden;
  }

  body[data-page="video"] .video-portal-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 72% 22%, rgba(255, 255, 255, 0.18), transparent 22%),
      radial-gradient(circle at 88% 60%, rgba(255, 255, 255, 0.1), transparent 15%),
      linear-gradient(135deg, rgba(11, 61, 145, 0.96), rgba(11, 91, 211, 0.72));
    opacity: 0.88;
    pointer-events: none;
  }

  body[data-page="video"] .video-portal-hero__copy {
    position: relative;
    z-index: 1;
    min-width: 0;
  }

  body[data-page="video"] .video-portal-hero__copy h1 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 30px;
    line-height: 1.08;
  }

  body[data-page="video"] .video-portal-hero__subtitle {
    margin: 0 0 6px;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
  }

  body[data-page="video"] .video-portal-hero__desc {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    line-height: 1.6;
  }

  body[data-page="video"] .video-portal-hero__art {
    position: relative;
    z-index: 1;
    width: 118px;
    height: 118px;
  }

  body[data-page="video"] .video-portal-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(4px);
    pointer-events: none;
  }

  body[data-page="video"] .video-portal-hero__glow--one {
    inset: 16px 14px auto auto;
    width: 58px;
    height: 58px;
    background: rgba(255, 255, 255, 0.18);
  }

  body[data-page="video"] .video-portal-hero__glow--two {
    inset: auto auto 18px 8px;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.1);
  }

  body[data-page="video"] .video-portal-hero__platform {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 10px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.06));
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.18);
  }

  body[data-page="video"] .video-portal-hero__card {
    position: absolute;
    right: 10px;
    top: 12px;
    width: 72px;
    height: 84px;
    border-radius: 18px;
    background: linear-gradient(180deg, #69c0ff, #1766ff);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    transform: rotate(14deg);
  }

  body[data-page="video"] .video-portal-hero__card::before {
    content: "";
    position: absolute;
    inset: 12px 12px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
  }

  body[data-page="video"] .video-portal-hero__screen {
    position: absolute;
    right: 18px;
    top: 26px;
    width: 56px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    transform: rotate(14deg);
  }

  body[data-page="video"] .video-portal-hero__play {
    position: absolute;
    right: 38px;
    top: 43px;
    width: 0;
    height: 0;
    border-left: 18px solid rgba(255, 255, 255, 0.98);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    transform: rotate(14deg);
  }

  body[data-page="video"] .video-portal-search {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 84px;
    gap: 0;
    align-items: center;
    height: 46px;
    margin-top: -14px;
    overflow: hidden;
    border: 1px solid rgba(0, 20, 52, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.99);
    box-shadow: 0 10px 24px rgba(0, 20, 52, 0.12);
  }

  body[data-page="video"] .video-portal-search__icon {
    width: 38px;
    height: 46px;
    background: rgba(11, 91, 211, 0.08);
    -webkit-mask: var(--icon-search) center / 18px 18px no-repeat;
            mask: var(--icon-search) center / 18px 18px no-repeat;
    background-color: var(--color-blue-700);
    opacity: 0.84;
  }

  body[data-page="video"] .video-portal-search input {
    height: 46px;
    border: 0;
    background: transparent;
    padding: 0 10px 0 8px;
    min-width: 0;
    font-size: 13px;
  }

  body[data-page="video"] .video-portal-search .btn {
    height: 46px;
    border-radius: 0;
    min-width: 84px;
    padding-inline: 14px;
    font-size: 13px;
  }

  body[data-page="video"] .video-portal-breadcrumb {
    display: none;
  }

  body[data-page="video"] .video-portal-section {
    margin-top: 16px;
  }

  body[data-page="video"] .video-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  body[data-page="video"] .video-section-head h2 {
    margin: 0;
    color: var(--color-navy-900);
    font-size: 20px;
    line-height: 1.2;
  }

  body[data-page="video"] .video-section-more {
    color: var(--color-blue-700);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="video"] .video-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-page="video"] .video-cat-card {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 5px;
    min-height: 94px;
    padding: 12px 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08);
    text-align: center;
    min-width: 0;
  }

  body[data-page="video"] .video-cat-card.is-active {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(180deg, #1a57da, #0b3d91);
    box-shadow: 0 10px 22px rgba(0, 68, 184, 0.18);
  }

  body[data-page="video"] .video-cat-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(11, 91, 211, 0.12);
    color: var(--color-blue-700);
  }

  body[data-page="video"] .video-cat-icon svg {
    width: 18px;
    height: 18px;
  }

  body[data-page="video"] .video-cat-card.is-active .video-cat-icon {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
  }

  body[data-page="video"] .video-cat-card strong {
    color: inherit;
    font-size: 13px;
    line-height: 1.2;
  }

  body[data-page="video"] .video-cat-card small {
    color: rgba(16, 24, 40, 0.58);
    font-size: 11px;
    line-height: 1;
  }

  body[data-page="video"] .video-cat-card.is-active small {
    color: rgba(255, 255, 255, 0.9);
  }

  body[data-page="video"] .video-hot-list {
    display: grid;
    gap: 10px;
  }

  body[data-page="video"] .video-hot-item {
    position: relative;
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08);
    min-width: 0;
  }

  body[data-page="video"] .video-hot-thumb {
    position: relative;
    display: block;
    width: 110px;
    height: 78px;
    border-radius: 12px;
    overflow: hidden;
  }

  body[data-page="video"] .video-hot-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="video"] .video-duration {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  body[data-page="video"] .video-hot-main {
    min-width: 0;
  }

  body[data-page="video"] .video-hot-main h3 {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.25;
  }

  body[data-page="video"] .video-hot-main h3 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--color-text);
  }

  body[data-page="video"] .video-hot-main p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 8px;
    color: rgba(16, 24, 40, 0.62);
    font-size: 12px;
    line-height: 1.45;
  }

  body[data-page="video"] .video-hot-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    color: rgba(16, 24, 40, 0.58);
    font-size: 11px;
    line-height: 1.2;
  }

  body[data-page="video"] .video-hot-badge {
    position: absolute;
    right: 12px;
    top: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 106, 26, 0.14);
    color: #ff6a1a;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
  }

  body[data-page="video"] .video-browse-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="video"] .video-browse-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 56px;
    gap: 8px;
    align-items: start;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08);
    overflow: hidden;
  }

  body[data-page="video"] .video-browse-card__copy {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    gap: 5px;
    min-width: 0;
  }

  body[data-page="video"] .video-browse-card__views {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: rgba(16, 24, 40, 0.64);
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
  }

  body[data-page="video"] .video-browse-card__thumb {
    grid-column: 1;
    grid-row: 3;
    align-self: stretch;
    margin: 0 -12px -12px;
    height: 56px;
    overflow: hidden;
    border-radius: 0 0 16px 16px;
  }

  body[data-page="video"] .video-browse-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="video"] .video-browse-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: rgba(11, 91, 211, 0.12);
    color: var(--color-blue-700);
  }

  body[data-page="video"] .video-browse-icon svg {
    width: 16px;
    height: 16px;
  }

  body[data-page="video"] .video-browse-card strong {
    display: block;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.25;
  }

  body[data-page="video"] .video-browse-card small {
    display: block;
    color: rgba(16, 24, 40, 0.56);
    font-size: 11px;
    line-height: 1.2;
  }

  body[data-page="video"] .video-latest-list {
    display: grid;
    gap: 10px;
  }

  body[data-page="video"] .video-latest-item {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08);
    min-width: 0;
  }

  body[data-page="video"] .video-latest-thumb {
    position: relative;
    display: block;
    width: 110px;
    height: 78px;
    border-radius: 12px;
    overflow: hidden;
  }

  body[data-page="video"] .video-latest-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="video"] .video-latest-main {
    min-width: 0;
  }

  body[data-page="video"] .video-latest-main h3 {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.25;
  }

  body[data-page="video"] .video-latest-main h3 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--color-text);
  }

  body[data-page="video"] .video-latest-main p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 8px;
    color: rgba(16, 24, 40, 0.62);
    font-size: 12px;
    line-height: 1.45;
  }

  body[data-page="video"] .video-latest-item .btn {
    height: 36px;
    padding-inline: 14px;
    border-radius: 12px;
    white-space: nowrap;
  }

  body[data-page="video"] .video-portal-cta {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #0b3d91, #0b5bd3);
    color: #fff;
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22);
    overflow: hidden;
  }

  body[data-page="video"] .video-portal-cta__copy {
    position: relative;
    z-index: 1;
    min-width: 0;
  }

  body[data-page="video"] .video-portal-cta__copy h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 22px;
    line-height: 1.15;
  }

  body[data-page="video"] .video-portal-cta__copy p {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    line-height: 1.45;
  }

  body[data-page="video"] .video-portal-cta__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="video"] .video-portal-cta__actions .btn {
    height: 40px;
    padding-inline: 10px;
    border-radius: 12px;
    min-width: 0;
  }

  body[data-page="video"] .video-portal-cta__actions .btn.btn-accent {
    border-color: #ff7a1a;
    background: #ff7a1a;
    color: #fff;
  }

  body[data-page="video"] .video-portal-cta__actions .btn.btn-outline {
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    background: transparent;
  }

  body[data-page="video"] .video-portal-cta__media {
    position: relative;
    width: 118px;
    height: 118px;
    border-radius: 16px;
    overflow: hidden;
    opacity: 0.98;
    justify-self: end;
    align-self: end;
  }

  body[data-page="video"] .video-portal-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Service policy detail page: mobile single-column layout only. */
  body[data-page="service-policy-detail"] {
    padding-bottom: calc(env(safe-area-inset-bottom) + 92px);
    background: #f7faff;
  }

  body[data-page="service-policy-detail"] .service-page {
    background: #f7faff;
  }

  body[data-page="service-policy-detail"] .site-header .topbar,
  body[data-page="service-policy-detail"] .topbar {
    display: none !important;
  }

  body[data-page="service-policy-detail"] .site-header {
    box-shadow: 0 6px 18px rgba(0, 20, 52, 0.08);
  }

  body[data-page="service-policy-detail"] .service-home-section,
  body[data-page="service-policy-detail"] .service-main-section,
  body[data-page="service-policy-detail"] .service-section {
    padding-block: 18px;
  }

  body[data-page="service-policy-detail"] .service-banner {
    min-height: 228px;
  }

  body[data-page="service-policy-detail"] .service-banner__inner {
    min-height: 228px;
    padding-block: 24px 18px;
    gap: 10px;
  }

  body[data-page="service-policy-detail"] .service-banner h1 {
    margin-bottom: 2px;
    font-size: 28px;
    line-height: 1.18;
  }

  body[data-page="service-policy-detail"] .service-banner p {
    max-width: 280px;
    font-size: 14px;
    line-height: 1.5;
  }

  body[data-page="service-policy-detail"] .banner-search {
    display: flex;
    width: 100%;
    margin-top: 14px;
    overflow: hidden;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 24px rgba(0, 20, 52, 0.12);
  }

  body[data-page="service-policy-detail"] .banner-search input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 13px;
  }

  body[data-page="service-policy-detail"] .banner-search button {
    flex: 0 0 78px;
    min-height: 44px;
    min-width: 78px;
    padding-inline: 12px;
    border-radius: 0;
    font-size: 13px;
  }

  body[data-page="service-policy-detail"] .service-breadcrumb {
    padding-block: 12px 0;
  }

  body[data-page="service-policy-detail"] .breadcrumb__list {
    gap: 4px 6px;
    font-size: 11px;
    line-height: 1.45;
  }

  body[data-page="service-policy-detail"] .service-layout {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  body[data-page="service-policy-detail"] .service-category-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    overflow: visible;
  }

  body[data-page="service-policy-detail"] .service-category-card strong {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0 2px 2px;
    border: 0;
    color: var(--color-navy-900);
    font-size: 20px;
    line-height: 1.2;
    text-align: center;
  }

  body[data-page="service-policy-detail"] .service-category-card a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 88px;
    padding: 12px 8px 10px;
    border: 1px solid rgba(0, 68, 184, 0.12);
    border-radius: 12px;
    color: var(--color-text);
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 20, 52, 0.06);
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
  }

  body[data-page="service-policy-detail"] .service-category-card a::before {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--color-blue-100);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230046b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.5 2.8 7.7 7 10 4.2-2.3 7-5.5 7-10V6l-7-3z'/%3E%3Cpath d='M9.5 12.5 11 14l3.5-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
  }

  body[data-page="service-policy-detail"] .service-category-card a.is-active {
    color: var(--color-white);
    border-color: transparent;
    background: linear-gradient(180deg, var(--color-blue-600), var(--color-blue-700));
    box-shadow: 0 10px 22px rgba(0, 68, 184, 0.18);
  }

  body[data-page="service-policy-detail"] .service-category-card a.is-active::before {
    background-color: rgba(255, 255, 255, 0.16);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.5 2.8 7.7 7 10 4.2-2.3 7-5.5 7-10V6l-7-3z'/%3E%3Cpath d='M9.5 12.5 11 14l3.5-4'/%3E%3C/svg%3E");
  }

  body[data-page="service-policy-detail"] .service-article,
  body[data-page="service-policy-detail"] .service-side-card,
  body[data-page="service-policy-detail"] .service-help-card {
    padding: 16px;
    border-radius: 16px;
  }

  body[data-page="service-policy-detail"] .service-article header {
    display: grid;
    gap: 8px;
  }

  body[data-page="service-policy-detail"] .service-article header h1 {
    display: block;
    margin-bottom: 0;
    font-size: 22px;
    line-height: 1.28;
  }

  body[data-page="service-policy-detail"] .service-article header h1 span {
    display: inline-flex;
    margin-left: 0;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
  }

  body[data-page="service-policy-detail"] .service-article header h1 span + span {
    margin-left: 8px;
  }

  body[data-page="service-policy-detail"] .service-article header h1 br {
    display: block;
    height: 6px;
  }

  body[data-page="service-policy-detail"] .service-article header h1 span:first-of-type {
    color: var(--color-blue-700);
    border: 1px solid rgba(0, 70, 184, 0.2);
    background: #fff;
    box-shadow: 0 6px 14px rgba(0, 20, 52, 0.06);
  }

  body[data-page="service-policy-detail"] .service-article header h1 span:last-of-type {
    color: var(--color-muted);
    background: var(--color-bg-soft);
  }

  body[data-page="service-policy-detail"] .service-article header .news-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 11px;
    line-height: 1.2;
  }

  body[data-page="service-policy-detail"] .service-article header .news-meta span {
    white-space: nowrap;
  }

  body[data-page="service-policy-detail"] .service-article header p {
    margin-top: 4px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.7;
  }

  body[data-page="service-policy-detail"] .service-article section {
    margin-top: 18px;
  }

  body[data-page="service-policy-detail"] .service-article h2 {
    margin-bottom: 10px;
    font-size: 19px;
  }

  body[data-page="service-policy-detail"] .service-article p,
  body[data-page="service-policy-detail"] .service-article li {
    font-size: 13px;
    line-height: 1.75;
  }

  body[data-page="service-policy-detail"] .service-article ul {
    gap: 4px;
    padding-left: 20px;
  }

  body[data-page="service-policy-detail"] .service-article ol {
    padding-left: 20px;
  }

  body[data-page="service-policy-detail"] .service-article table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }

  body[data-page="service-policy-detail"] .service-article th,
  body[data-page="service-policy-detail"] .service-article td {
    padding: 9px 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  body[data-page="service-policy-detail"] .service-sidebar {
    gap: 12px;
  }

  body[data-page="service-policy-detail"] .service-side-card h2,
  body[data-page="service-policy-detail"] .service-help-card h2 {
    margin-bottom: 12px;
    font-size: 20px;
  }

  body[data-page="service-policy-detail"] .service-related-list {
    gap: 10px;
  }

  body[data-page="service-policy-detail"] .service-related-list a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px 14px;
    border: 1px solid rgba(0, 68, 184, 0.12);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 20, 52, 0.06);
  }

  body[data-page="service-policy-detail"] .service-related-list a::before {
    content: "";
    grid-row: 1 / span 2;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--color-blue-100);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230046b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h7l4 4v12H7z'/%3E%3Cpath d='M14 4v4h4'/%3E%3Cpath d='M10 12h4M10 15h4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
  }

  body[data-page="service-policy-detail"] .service-related-list strong,
  body[data-page="service-policy-detail"] .service-related-list small {
    grid-column: 2;
  }

  body[data-page="service-policy-detail"] .service-related-list strong {
    font-size: 14px;
    line-height: 1.35;
  }

  body[data-page="service-policy-detail"] .service-related-list small {
    margin-top: 2px;
    color: var(--color-muted);
    font-size: 11px;
    line-height: 1.45;
  }

  body[data-page="service-policy-detail"] .service-card-link {
    display: block;
    margin-top: 12px;
    text-align: center;
  }

  body[data-page="service-policy-detail"] .service-help-card p {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="service-policy-detail"] .service-help-card strong {
    margin-top: 12px;
    font-size: 20px;
  }

  body[data-page="service-policy-detail"] .service-help-card span {
    font-size: 12px;
  }

  body[data-page="service-policy-detail"] .service-help-card .btn {
    width: 100%;
    margin-top: 14px;
  }

  body[data-page="service-policy-detail"] .service-support-strip {
    padding-block: 12px 20px;
  }

  body[data-page="service-policy-detail"] .service-support-strip .product-inquiry__inner {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 16px;
    text-align: center;
  }

  body[data-page="service-policy-detail"] .service-support-strip .product-inquiry__copy h2 {
    font-size: 24px;
    line-height: 1.25;
  }

  body[data-page="service-policy-detail"] .service-support-strip .product-inquiry__copy p {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="service-policy-detail"] .service-support-strip .btn {
    width: 100%;
  }

  body[data-page="service-policy-detail"] .service-hotline {
    text-align: center;
  }

  body[data-page="service-policy-detail"] .service-hotline strong {
    font-size: 20px;
  }

  body[data-page="service-policy-detail"] .service-hotline span {
    font-size: 12px;
  }

  body[data-page="service-policy-detail"] .mobile-bottom-nav--cases,
  body[data-page="service-policy-detail"] .mobile-bottom-nav--news,
  body[data-page="service-policy-detail"] .mobile-bottom-nav--contact {
    display: none;
  }

  body[data-page="service-policy-detail"] .mobile-bottom-nav--support {
    position: fixed;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 10px);
    left: 12px;
    z-index: 86;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 7px 2px 5px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(0, 20, 52, 0.14);
    backdrop-filter: blur(10px);
  }

  body[data-page="service-policy-detail"] .mobile-bottom-nav--support a {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 50px;
    color: var(--color-muted);
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
  }

  body[data-page="service-policy-detail"] .mobile-bottom-nav--support a.is-active {
    color: var(--color-blue-700);
  }

  body[data-page="service-policy-detail"] .mobile-bottom-nav--support svg {
    width: 18px;
    height: 18px;
  }

  body[data-page="service-policy-detail"] .floating-contact {
    position: fixed;
    top: 50%;
    right: 8px;
    z-index: 88;
    display: grid !important;
    width: 56px;
    gap: 1px;
    padding: 6px 0;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--color-navy-900), var(--color-blue-700));
    box-shadow: 0 14px 32px rgba(0, 20, 52, 0.22);
    transform: translateY(-50%);
  }

  body[data-page="service-policy-detail"] .floating-contact a,
  body[data-page="service-policy-detail"] .floating-contact button {
    display: grid;
    place-items: center;
    min-height: 52px;
    padding: 0 6px;
    color: var(--color-white);
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    background: transparent;
  }

  /* ===== Service policy detail mobile rebuild (2026-05-22) ===== */
  body[data-page="service-policy-detail"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 16px;
  }

  body[data-page="service-policy-detail"] .service-banner,
  body[data-page="service-policy-detail"] .service-banner__inner,
  body[data-page="service-policy-detail"] .banner-search,
  body[data-page="service-policy-detail"] .service-breadcrumb {
    display: none !important;
  }

  body[data-page="service-policy-detail"] .policy-detail-mobile {
    display: block !important;
    padding-block: 12px 18px;
  }

  body[data-page="service-policy-detail"] .policy-detail-breadcrumb__list {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    color: rgba(16, 24, 40, 0.52);
    font-size: 11px;
    line-height: 1.35;
    overflow: hidden;
    white-space: nowrap;
  }

  body[data-page="service-policy-detail"] .policy-detail-breadcrumb__list li {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="service-policy-detail"] .policy-detail-breadcrumb__list a {
    color: inherit;
  }

  body[data-page="service-policy-detail"] .policy-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 124px;
    gap: 12px;
    align-items: center;
    padding: 18px 16px;
    border-radius: 20px;
    background: linear-gradient(135deg, #0b3d91, #0b5bd3);
    color: #fff;
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22);
    overflow: hidden;
  }

  body[data-page="service-policy-detail"] .policy-detail-hero__copy h1 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 30px;
    line-height: 1.08;
  }

  body[data-page="service-policy-detail"] .policy-detail-hero__subtitle {
    margin: 0 0 6px;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
  }

  body[data-page="service-policy-detail"] .policy-detail-hero__desc {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    line-height: 1.6;
  }

  body[data-page="service-policy-detail"] .policy-detail-hero__art {
    width: 124px;
    height: 124px;
    border-radius: 16px;
    overflow: hidden;
    opacity: 0.95;
  }

  body[data-page="service-policy-detail"] .policy-detail-hero__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="service-policy-detail"] .policy-detail-card {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08);
  }

  body[data-page="service-policy-detail"] .policy-detail-card h2 {
    margin: 0 0 10px;
    color: var(--color-navy-900);
    font-size: 22px;
    line-height: 1.15;
  }

  body[data-page="service-policy-detail"] .policy-detail-card p {
    margin: 0;
    color: rgba(16, 24, 40, 0.72);
    font-size: 14px;
    line-height: 1.7;
  }

  body[data-page="service-policy-detail"] .policy-commitment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="service-policy-detail"] .policy-commitment-item {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 6px;
    min-height: 132px;
    padding: 12px 8px;
    border: 1px solid rgba(11, 91, 211, 0.12);
    border-radius: 14px;
    background: #fafdff;
    text-align: center;
  }

  body[data-page="service-policy-detail"] .policy-commitment-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(11, 91, 211, 0.12);
    color: var(--color-blue-700);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
  }

  body[data-page="service-policy-detail"] .policy-commitment-item h3 {
    margin: 0;
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.25;
  }

  body[data-page="service-policy-detail"] .policy-commitment-item p {
    margin: 0;
    color: rgba(16, 24, 40, 0.66);
    font-size: 12px;
    line-height: 1.42;
  }

  body[data-page="service-policy-detail"] .policy-commitment-item small {
    color: rgba(16, 24, 40, 0.56);
    font-size: 11px;
    line-height: 1.3;
  }

  body[data-page="service-policy-detail"] .policy-detail-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  body[data-page="service-policy-detail"] .policy-detail-card__head h2 {
    margin: 0;
  }

  body[data-page="service-policy-detail"] .policy-detail-collapse {
    border: 0;
    background: transparent;
    padding: 8px 0;
    color: var(--color-blue-700);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="service-policy-detail"] .policy-step-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
  }

  body[data-page="service-policy-detail"] .policy-step-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid rgba(11, 91, 211, 0.12);
    border-radius: 14px;
    background: #fff;
  }

  body[data-page="service-policy-detail"] .policy-step-no {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(11, 91, 211, 0.12);
    color: var(--color-blue-700);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
  }

  body[data-page="service-policy-detail"] .policy-step-body strong {
    display: block;
    margin: 0 0 6px;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
  }

  body[data-page="service-policy-detail"] .policy-step-body p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
  }

  body[data-page="service-policy-detail"] .policy-standard-flow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="service-policy-detail"] .policy-standard-arrow {
    display: none;
  }

  body[data-page="service-policy-detail"] .policy-standard-item {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    min-height: 98px;
    padding: 12px 8px;
    border: 1px solid rgba(11, 91, 211, 0.12);
    border-radius: 14px;
    background: #fafdff;
    text-align: center;
  }

  body[data-page="service-policy-detail"] .policy-standard-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(11, 91, 211, 0.12);
    color: var(--color-blue-700);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
  }

  body[data-page="service-policy-detail"] .policy-standard-item strong {
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.25;
  }

  body[data-page="service-policy-detail"] .policy-standard-item small {
    color: rgba(16, 24, 40, 0.56);
    font-size: 11px;
    line-height: 1.3;
  }

  body[data-page="service-policy-detail"] .policy-guarantee-list {
    display: grid;
    gap: 10px;
  }

  body[data-page="service-policy-detail"] .policy-guarantee-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid rgba(0, 20, 52, 0.10);
    border-radius: 14px;
    background: #fff;
  }

  body[data-page="service-policy-detail"] .policy-guarantee-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: rgba(11, 91, 211, 0.10);
    color: var(--color-blue-700);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
  }

  body[data-page="service-policy-detail"] .policy-guarantee-item h3 {
    margin: 0 0 6px;
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.25;
  }

  body[data-page="service-policy-detail"] .policy-guarantee-item p {
    margin: 0;
    color: rgba(16, 24, 40, 0.66);
    font-size: 13px;
    line-height: 1.6;
  }

  body[data-page="service-policy-detail"] .policy-detail-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 122px;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0b3d91, #0b5bd3);
    color: #fff;
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22);
    overflow: hidden;
  }

  body[data-page="service-policy-detail"] .policy-detail-cta__copy h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 22px;
    line-height: 1.15;
  }

  body[data-page="service-policy-detail"] .policy-detail-cta__copy p {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    line-height: 1.45;
  }

  body[data-page="service-policy-detail"] .policy-detail-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  body[data-page="service-policy-detail"] .policy-detail-cta__actions .btn {
    height: 40px;
    padding-inline: 16px;
    border-radius: 12px;
  }

  body[data-page="service-policy-detail"] .policy-detail-cta__actions .btn.btn-accent {
    border-color: #ff7a1a;
    background: #ff7a1a;
    color: #fff;
  }

  body[data-page="service-policy-detail"] .policy-detail-cta__actions .btn.btn-outline {
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    background: transparent;
  }

  body[data-page="service-policy-detail"] .policy-detail-cta__media {
    width: 122px;
    height: 122px;
    border-radius: 14px;
    overflow: hidden;
    opacity: 0.96;
  }

  body[data-page="service-policy-detail"] .policy-detail-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="service-policy-detail"] .service-main-section,
  body[data-page="service-policy-detail"] .service-support-strip {
    display: none !important;
  }

  body[data-page="service-policy-detail"] .site-header {
    display: none !important;
  }

  body[data-page="service-policy-detail"] .policy-detail-mobile {
    display: block !important;
    padding-block: 8px 14px;
  }

  body[data-page="service-policy-detail"] .policy-detail-mobile .container {
    width: min(100%, calc(100% - 16px));
    max-width: 100%;
    padding-inline: 0;
  }

  body[data-page="service-policy-detail"] .policy-detail-mobile .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  body[data-page="service-policy-detail"] .policy-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding: 4px 2px 6px;
  }

  body[data-page="service-policy-detail"] .policy-mobile-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--color-navy-900);
  }

  body[data-page="service-policy-detail"] .policy-mobile-brand__mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 2px solid var(--color-blue-700);
    border-radius: 9px;
    color: var(--color-blue-700);
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
  }

  body[data-page="service-policy-detail"] .policy-mobile-brand__text {
    display: grid;
    min-width: 0;
  }

  body[data-page="service-policy-detail"] .policy-mobile-brand__text strong {
    font-size: 15px;
    line-height: 1.1;
  }

  body[data-page="service-policy-detail"] .policy-mobile-brand__text small {
    color: var(--color-muted);
    font-size: 9px;
    line-height: 1.15;
    letter-spacing: 0.08em;
  }

  body[data-page="service-policy-detail"] .policy-mobile-phone {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--color-blue-700);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="service-policy-detail"] .policy-mobile-phone svg {
    width: 17px;
    height: 17px;
  }

  body[data-page="service-policy-detail"] .policy-mobile-menu {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  body[data-page="service-policy-detail"] .policy-mobile-menu span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 2px 0;
    border-radius: 999px;
    background: var(--color-blue-700);
  }

  body[data-page="service-policy-detail"] .policy-detail-breadcrumb {
    margin-bottom: 10px;
  }

  body[data-page="service-policy-detail"] .policy-detail-breadcrumb__list {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    color: rgba(16, 24, 40, 0.54);
    font-size: 11px;
    line-height: 1.35;
    list-style: none;
    white-space: nowrap;
    overflow: hidden;
  }

  body[data-page="service-policy-detail"] .policy-detail-breadcrumb__list li {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="service-policy-detail"] .policy-detail-breadcrumb__list li:not(:last-child)::after {
    content: ">";
    margin-left: 5px;
    color: rgba(16, 24, 40, 0.42);
  }

  body[data-page="service-policy-detail"] .policy-detail-breadcrumb__list a {
    color: inherit;
  }

  body[data-page="service-policy-detail"] .policy-detail-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 136px;
    gap: 10px;
    align-items: center;
    padding: 20px 16px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, #1031a8 0%, #0b55c8 52%, #0c79e3 100%);
    color: #fff;
    box-shadow: 0 16px 34px rgba(6, 35, 118, 0.24);
    overflow: hidden;
  }

  body[data-page="service-policy-detail"] .policy-detail-hero__copy {
    position: relative;
    z-index: 1;
  }

  body[data-page="service-policy-detail"] .policy-detail-hero__copy h1 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 30px;
    line-height: 1.08;
  }

  body[data-page="service-policy-detail"] .policy-detail-hero__subtitle {
    margin: 0 0 8px;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
  }

  body[data-page="service-policy-detail"] .policy-detail-hero__desc {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    line-height: 1.65;
  }

  body[data-page="service-policy-detail"] .policy-detail-hero__art {
    position: relative;
    width: 136px;
    height: 136px;
    justify-self: end;
  }

  body[data-page="service-policy-detail"] .policy-detail-hero__orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.12) 58%, transparent 72%);
    filter: blur(0.2px);
  }

  body[data-page="service-policy-detail"] .policy-detail-hero__orb--one {
    top: 26px;
    left: 4px;
    width: 18px;
    height: 18px;
    opacity: 0.7;
  }

  body[data-page="service-policy-detail"] .policy-detail-hero__orb--two {
    top: 8px;
    right: 18px;
    width: 12px;
    height: 12px;
    opacity: 0.56;
  }

  body[data-page="service-policy-detail"] .policy-detail-hero__platform {
    position: absolute;
    left: 17px;
    right: 18px;
    bottom: 6px;
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.2));
    box-shadow: 0 9px 18px rgba(0, 0, 0, 0.12);
  }

  body[data-page="service-policy-detail"] .policy-detail-hero__shield {
    position: absolute;
    inset: 12px 18px 28px 16px;
  }

  body[data-page="service-policy-detail"] .policy-detail-hero__shield::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.9) 0 12%, transparent 13%),
      linear-gradient(180deg, rgba(191, 225, 255, 0.96), rgba(100, 170, 255, 0.9) 55%, rgba(66, 130, 243, 0.95));
    clip-path: polygon(50% 0%, 82% 10%, 86% 43%, 50% 100%, 14% 43%, 18% 10%);
    box-shadow:
      inset 0 -10px 20px rgba(6, 41, 122, 0.22),
      0 14px 22px rgba(0, 0, 0, 0.14);
  }

  body[data-page="service-policy-detail"] .policy-detail-hero__shield::after {
    content: "";
    position: absolute;
    inset: 18% 20% 24% 20%;
    border: 2px solid rgba(255, 255, 255, 0.48);
    border-radius: 18px;
    transform: rotate(-4deg);
  }

  body[data-page="service-policy-detail"] .policy-detail-card {
    margin-top: 12px;
    padding: 16px;
    border: 1px solid rgba(16, 40, 84, 0.08);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(9, 28, 80, 0.08);
  }

  body[data-page="service-policy-detail"] .policy-detail-overview {
    margin-top: 12px;
  }

  body[data-page="service-policy-detail"] .policy-detail-overview h2,
  body[data-page="service-policy-detail"] .policy-detail-steps h2,
  body[data-page="service-policy-detail"] .policy-detail-standards h2,
  body[data-page="service-policy-detail"] .policy-detail-guarantee h2 {
    margin: 0 0 10px;
    color: var(--color-navy-900);
    font-size: 21px;
    line-height: 1.18;
  }

  body[data-page="service-policy-detail"] .policy-detail-overview p {
    margin: 0;
    color: rgba(16, 24, 40, 0.72);
    font-size: 14px;
    line-height: 1.72;
  }

  body[data-page="service-policy-detail"] .policy-detail-commitments {
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-page="service-policy-detail"] .policy-commitment-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  body[data-page="service-policy-detail"] .policy-commitment-item {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 4px;
    min-height: 114px;
    min-width: 0;
    padding: 10px 4px 8px;
    border: 1px solid rgba(16, 40, 84, 0.08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(9, 28, 80, 0.06);
    text-align: center;
  }

  body[data-page="service-policy-detail"] .policy-commitment-icon,
  body[data-page="service-policy-detail"] .policy-standard-icon,
  body[data-page="service-policy-detail"] .policy-guarantee-icon {
    display: grid;
    place-items: center;
    color: var(--color-blue-700);
  }

  body[data-page="service-policy-detail"] .policy-commitment-icon {
    width: 28px;
    height: 28px;
  }

  body[data-page="service-policy-detail"] .policy-commitment-icon svg {
    width: 16px;
    height: 16px;
  }

  body[data-page="service-policy-detail"] .policy-commitment-item h3 {
    margin: 0;
    color: var(--color-text);
    font-size: 12px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  body[data-page="service-policy-detail"] .policy-commitment-item p {
    margin: 0;
    color: rgba(16, 24, 40, 0.64);
    font-size: 9px;
    line-height: 1.28;
    overflow-wrap: anywhere;
  }

  body[data-page="service-policy-detail"] .policy-commitment-item small {
    color: rgba(16, 24, 40, 0.54);
    font-size: 8px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  body[data-page="service-policy-detail"] .policy-detail-steps .policy-detail-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  body[data-page="service-policy-detail"] .policy-detail-steps .policy-detail-card__head h2 {
    margin-bottom: 0;
  }

  body[data-page="service-policy-detail"] .policy-detail-collapse {
    border: 0;
    padding: 0;
    color: var(--color-blue-700);
    background: transparent;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="service-policy-detail"] .policy-step-list {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  body[data-page="service-policy-detail"] .policy-step-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 0;
    border: 0;
    background: transparent;
  }

  body[data-page="service-policy-detail"] .policy-step-no {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(180deg, #1a5def, #0f43cc);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 8px 16px rgba(15, 67, 204, 0.2);
  }

  body[data-page="service-policy-detail"] .policy-step-body strong {
    display: block;
    margin: 0 0 4px;
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.28;
  }

  body[data-page="service-policy-detail"] .policy-step-body p {
    margin: 0;
    color: rgba(16, 24, 40, 0.68);
    font-size: 12px;
    line-height: 1.62;
  }

  body[data-page="service-policy-detail"] .policy-detail-standards {
    overflow: hidden;
  }

  body[data-page="service-policy-detail"] .policy-standard-flow {
    display: flex;
    align-items: stretch;
    gap: 6px;
  }

  body[data-page="service-policy-detail"] .policy-standard-item {
    flex: 1 1 0;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 4px;
    min-width: 0;
    min-height: 96px;
    padding: 10px 4px 8px;
    border: 1px solid rgba(16, 40, 84, 0.08);
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fbff, #ffffff);
    box-shadow: 0 8px 18px rgba(9, 28, 80, 0.05);
    text-align: center;
  }

  body[data-page="service-policy-detail"] .policy-standard-arrow {
    flex: 0 0 10px;
    display: grid;
    place-items: center;
    color: rgba(15, 67, 204, 0.72);
    font-size: 14px;
    font-weight: 700;
  }

  body[data-page="service-policy-detail"] .policy-standard-icon {
    width: 28px;
    height: 28px;
  }

  body[data-page="service-policy-detail"] .policy-standard-icon svg {
    width: 16px;
    height: 16px;
  }

  body[data-page="service-policy-detail"] .policy-standard-item strong {
    color: var(--color-text);
    font-size: 12px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  body[data-page="service-policy-detail"] .policy-standard-item small {
    color: rgba(16, 24, 40, 0.56);
    font-size: 8px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  body[data-page="service-policy-detail"] .policy-guarantee-list {
    display: grid;
    gap: 10px;
  }

  body[data-page="service-policy-detail"] .policy-guarantee-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 0;
    border: 0;
    background: transparent;
  }

  body[data-page="service-policy-detail"] .policy-guarantee-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(15, 67, 204, 0.10);
  }

  body[data-page="service-policy-detail"] .policy-guarantee-icon svg {
    width: 18px;
    height: 18px;
  }

  body[data-page="service-policy-detail"] .policy-guarantee-item h3 {
    margin: 0 0 4px;
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  body[data-page="service-policy-detail"] .policy-guarantee-item p {
    margin: 0;
    color: rgba(16, 24, 40, 0.68);
    font-size: 12px;
    line-height: 1.62;
    overflow-wrap: anywhere;
  }

  body[data-page="service-policy-detail"] .policy-detail-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 126px;
    gap: 10px;
    align-items: end;
    margin-top: 12px;
    padding: 18px 16px 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0d43b2 0%, #0b63db 52%, #114ecf 100%);
    color: #fff;
    box-shadow: 0 18px 36px rgba(6, 35, 118, 0.22);
    overflow: hidden;
  }

  body[data-page="service-policy-detail"] .policy-detail-cta__copy h2 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 22px;
    line-height: 1.18;
    overflow-wrap: anywhere;
  }

  body[data-page="service-policy-detail"] .policy-detail-cta__copy p {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  body[data-page="service-policy-detail"] .policy-detail-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  body[data-page="service-policy-detail"] .policy-detail-cta__actions .btn {
    height: 38px;
    padding-inline: 14px;
    border-radius: 11px;
    font-size: 12px;
  }

  body[data-page="service-policy-detail"] .policy-detail-cta__actions .btn.btn-accent {
    border-color: #ff8b2b;
    background: linear-gradient(180deg, #ff8825, #ff6f13);
    color: #fff;
  }

  body[data-page="service-policy-detail"] .policy-detail-cta__actions .btn.btn-outline {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    background: transparent;
  }

  body[data-page="service-policy-detail"] .policy-detail-cta__art {
    position: relative;
    width: 126px;
    height: 150px;
    min-width: 0;
    justify-self: end;
    align-self: end;
  }

  body[data-page="service-policy-detail"] .policy-detail-cta__illustration {
    position: absolute;
    inset: 0;
    width: 126px;
    height: 150px;
    display: block;
  }

  body[data-page="service-policy-detail"] .policy-detail-cta__halo {
    position: absolute;
    inset: auto 12px 0 6px;
    height: 110px;
    border-radius: 50% 50% 44% 44% / 56% 56% 24% 24%;
    background: radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.02) 62%, transparent 64%);
    box-shadow: inset 0 -12px 26px rgba(0, 0, 0, 0.08);
  }

  body[data-page="service-policy-detail"] .policy-detail-cta__art img {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 126px;
    height: 150px;
    object-fit: cover;
    object-position: 60% center;
    border-radius: 20px 20px 0 0;
    filter: saturate(1.05) contrast(1.02);
  }

  body[data-page="service-policy-detail"] .policy-detail-mobile ~ .site-footer,
  body[data-page="service-policy-detail"] .site-footer {
    margin-top: 12px;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
  }

  body[data-page="service-policy-detail"] .site-footer .footer-main {
    padding-block: 22px 18px !important;
  }

  body[data-page="service-policy-detail"] .site-footer .footer-main__grid {
    grid-template-columns: minmax(0, 1.25fr) 88px repeat(3, minmax(0, 0.78fr));
    gap: 12px;
    align-items: start;
  }

  body[data-page="service-policy-detail"] .site-footer .footer-company h2 {
    margin-bottom: 10px;
    font-size: 18px;
  }

  body[data-page="service-policy-detail"] .site-footer .footer-company p,
  body[data-page="service-policy-detail"] .site-footer .footer-contact,
  body[data-page="service-policy-detail"] .site-footer .footer-contact li {
    font-size: 10px;
    line-height: 1.45;
  }

  body[data-page="service-policy-detail"] .site-footer .footer-contact {
    gap: 4px;
  }

  body[data-page="service-policy-detail"] .site-footer .footer-links {
    gap: 10px;
    width: 100%;
  }

  body[data-page="service-policy-detail"] .site-footer .footer-links h3 {
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.25;
  }

  body[data-page="service-policy-detail"] .site-footer .footer-links a {
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.35;
  }

  body[data-page="service-policy-detail"] .site-footer .footer-qrcode {
    width: 100%;
  }

  body[data-page="service-policy-detail"] .site-footer .footer-qrcode img {
    width: 72px;
    height: 72px;
    margin-bottom: 10px;
    border-width: 4px;
  }

  body[data-page="service-policy-detail"] .site-footer .footer-qrcode h3 {
    margin-bottom: 6px;
    font-size: 11px;
  }

  body[data-page="service-policy-detail"] .site-footer .footer-qrcode p,
  body[data-page="service-policy-detail"] .site-footer .social-links {
    font-size: 9px;
  }

  body[data-page="service-policy-detail"] .site-footer .social-links {
    gap: 6px;
  }

  body[data-page="service-policy-detail"] .site-footer .social-links a {
    width: 26px;
    height: 26px;
  }

  body[data-page="service-policy-detail"] .site-footer .footer-bottom__inner {
    gap: 8px;
    min-height: auto;
    padding-block: 14px;
    font-size: 10px;
  }

  body[data-page="service-policy-detail"] .site-footer .footer-bottom nav {
    gap: 12px;
  }

  body[data-page="service-policy-detail"] .mobile-bottom-nav,
  body[data-page="service-policy-detail"] .floating-contact {
    display: none !important;
  }

  /* Service policy list page: mobile single-column layout only. */
  body[data-page="service-policy"] {
    padding-bottom: calc(env(safe-area-inset-bottom) + 92px);
    background: #f7faff;
  }

  body[data-page="service-policy"] .service-page {
    background: #f7faff;
  }

  body[data-page="service-policy"] .site-header .topbar,
  body[data-page="service-policy"] .topbar {
    display: none !important;
  }

  body[data-page="service-policy"] .site-header {
    box-shadow: 0 6px 18px rgba(0, 20, 52, 0.08);
  }

  body[data-page="service-policy"] .service-home-section,
  body[data-page="service-policy"] .service-main-section,
  body[data-page="service-policy"] .service-section {
    padding-block: 18px;
  }

  body[data-page="service-policy"] .service-banner {
    min-height: 228px;
  }

  body[data-page="service-policy"] .service-banner__inner {
    min-height: 228px;
    padding-block: 24px 18px;
    gap: 10px;
  }

  body[data-page="service-policy"] .service-banner h1 {
    margin-bottom: 2px;
    font-size: 28px;
    line-height: 1.18;
  }

  body[data-page="service-policy"] .service-banner p {
    max-width: 280px;
    font-size: 14px;
    line-height: 1.5;
  }

  body[data-page="service-policy"] .banner-search {
    display: flex;
    width: 100%;
    margin-top: 14px;
    overflow: hidden;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 24px rgba(0, 20, 52, 0.12);
  }

  body[data-page="service-policy"] .banner-search input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 13px;
  }

  body[data-page="service-policy"] .banner-search button {
    flex: 0 0 78px;
    min-height: 44px;
    min-width: 78px;
    padding-inline: 12px;
    border-radius: 0;
    font-size: 13px;
  }

  body[data-page="service-policy"] .service-breadcrumb {
    padding-block: 12px 0;
  }

  body[data-page="service-policy"] .breadcrumb__list {
    gap: 4px 6px;
    font-size: 11px;
    line-height: 1.45;
  }

  body[data-page="service-policy"] .service-layout {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  body[data-page="service-policy"] .service-category-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    overflow: visible;
  }

  body[data-page="service-policy"] .service-category-card a {
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 80px;
    padding: 10px 8px;
    border: 1px solid rgba(0, 68, 184, 0.12);
    border-radius: 14px;
    color: var(--color-text);
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 20, 52, 0.06);
    font-size: 12px;
    line-height: 1.15;
    text-align: center;
  }

  body[data-page="service-policy"] .service-category-card a::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--color-blue-100);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230046b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.5 2.8 7.7 7 10 4.2-2.3 7-5.5 7-10V6l-7-3z'/%3E%3Cpath d='M9.5 12.5 11 14l3.5-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
  }

  body[data-page="service-policy"] .service-category-card a em {
    display: block;
    margin-top: 0;
    color: var(--color-subtle);
    font-size: 11px;
    font-style: normal;
    line-height: 1;
    opacity: 1;
  }

  body[data-page="service-policy"] .service-category-card a.is-active {
    color: var(--color-white);
    border-color: transparent;
    background: linear-gradient(180deg, var(--color-blue-600), var(--color-blue-700));
    box-shadow: 0 10px 22px rgba(0, 68, 184, 0.18);
  }

  body[data-page="service-policy"] .service-category-card a.is-active::before {
    background-color: rgba(255, 255, 255, 0.16);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.5 2.8 7.7 7 10 4.2-2.3 7-5.5 7-10V6l-7-3z'/%3E%3Cpath d='M9.5 12.5 11 14l3.5-4'/%3E%3C/svg%3E");
  }

  body[data-page="service-policy"] .service-list-panel,
  body[data-page="service-policy"] .service-side-card,
  body[data-page="service-policy"] .service-help-card {
    padding: 16px;
    border-radius: 16px;
  }

  body[data-page="service-policy"] .service-list-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title button"
      "count button";
    gap: 4px 10px;
    margin-bottom: 14px;
    align-items: center;
  }

  body[data-page="service-policy"] .service-list-head h2 {
    grid-area: title;
    margin-bottom: 0;
    font-size: 22px;
    line-height: 1.25;
  }

  body[data-page="service-policy"] .service-list-head span {
    grid-area: count;
    margin-right: 0;
    color: var(--color-muted);
    font-size: 12px;
  }

  body[data-page="service-policy"] .service-list-head button {
    grid-area: button;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 12px;
  }

  body[data-page="service-policy"] .service-policy-list {
    gap: 8px;
  }

  body[data-page="service-policy"] .service-policy-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 10px 12px;
    border: 1px solid rgba(0, 68, 184, 0.12);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 20, 52, 0.06);
  }

  body[data-page="service-policy"] .service-policy-list span {
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(0, 70, 184, 0.14);
    border-radius: 10px;
    background: var(--color-blue-100);
    color: var(--color-blue-700);
    font-size: 0;
    font-weight: 900;
  }

  body[data-page="service-policy"] .service-policy-list a:nth-child(1) span { background: #e8f0ff; color: #0046b8; }
  body[data-page="service-policy"] .service-policy-list a:nth-child(2) span { background: #fff3e8; color: #ff6a1a; }
  body[data-page="service-policy"] .service-policy-list a:nth-child(3) span { background: #eaf8ee; color: #1f9d4c; }
  body[data-page="service-policy"] .service-policy-list a:nth-child(4) span { background: #f0eafe; color: #7c4dff; }
  body[data-page="service-policy"] .service-policy-list a:nth-child(5) span { background: #fff6e8; color: #f39b11; }
  body[data-page="service-policy"] .service-policy-list a:nth-child(6) span { background: #e9f3ff; color: #2a6dd2; }

  body[data-page="service-policy"] .service-policy-list span::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h7l4 4v12H7z'/%3E%3Cpath d='M14 4v4h4'/%3E%3Cpath d='M10 12h4M10 15h4'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h7l4 4v12H7z'/%3E%3Cpath d='M14 4v4h4'/%3E%3Cpath d='M10 12h4M10 15h4'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  body[data-page="service-policy"] .service-policy-list div {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
  }

  body[data-page="service-policy"] .service-policy-list h3 {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.3;
  }

  body[data-page="service-policy"] .service-policy-list p {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.4;
  }

  body[data-page="service-policy"] .service-policy-list small {
    display: block;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
  }

  body[data-page="service-policy"] .service-policy-list em {
    flex: 0 0 auto;
    align-self: center;
    color: var(--color-subtle);
    font-size: 18px;
    line-height: 1;
  }

  body[data-page="service-policy"] .service-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 16px;
  }

  body[data-page="service-policy"] .service-pagination a,
  body[data-page="service-policy"] .service-pagination span {
    min-width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 12px;
  }

  body[data-page="service-policy"] .service-sidebar {
    gap: 12px;
  }

  body[data-page="service-policy"] .service-side-card h2,
  body[data-page="service-policy"] .service-help-card h2 {
    margin-bottom: 12px;
    font-size: 20px;
  }

  body[data-page="service-policy"] .service-bullet-list {
    gap: 8px;
  }

  body[data-page="service-policy"] .service-bullet-list li {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="service-policy"] .service-side-card p,
  body[data-page="service-policy"] .service-help-card p {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="service-policy"] .service-side-card .btn,
  body[data-page="service-policy"] .service-help-card .btn {
    width: 100%;
  }

  body[data-page="service-policy"] .service-help-card strong {
    margin-top: 12px;
    font-size: 20px;
  }

  body[data-page="service-policy"] .service-help-card span {
    font-size: 12px;
  }

  body[data-page="service-policy"] .service-support-strip {
    padding-block: 12px 20px;
  }

  body[data-page="service-policy"] .service-support-strip .product-inquiry__inner {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 16px;
    text-align: center;
  }

  body[data-page="service-policy"] .service-support-strip .product-inquiry__copy h2 {
    font-size: 24px;
    line-height: 1.25;
  }

  body[data-page="service-policy"] .service-support-strip .product-inquiry__copy p {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="service-policy"] .service-support-strip .btn {
    width: 100%;
  }

  body[data-page="service-policy"] .service-hotline {
    text-align: center;
  }

  body[data-page="service-policy"] .service-hotline strong {
    font-size: 20px;
  }

  body[data-page="service-policy"] .service-hotline span {
    font-size: 12px;
  }

  body[data-page="service-policy"] .mobile-bottom-nav--cases,
  body[data-page="service-policy"] .mobile-bottom-nav--news,
  body[data-page="service-policy"] .mobile-bottom-nav--contact {
    display: none;
  }

  body[data-page="service-policy"] .mobile-bottom-nav--support {
    position: fixed;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 10px);
    left: 12px;
    z-index: 86;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 7px 2px 5px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(0, 20, 52, 0.14);
    backdrop-filter: blur(10px);
  }

  body[data-page="service-policy"] .mobile-bottom-nav--support a {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 50px;
    color: var(--color-muted);
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
  }

  body[data-page="service-policy"] .mobile-bottom-nav--support a.is-active {
    color: var(--color-blue-700);
  }

  body[data-page="service-policy"] .mobile-bottom-nav--support svg {
    width: 18px;
    height: 18px;
  }

  body[data-page="service-policy"] .floating-contact {
    position: fixed;
    top: 50%;
    right: 8px;
    z-index: 88;
    display: grid !important;
    width: 56px;
    gap: 1px;
    padding: 6px 0;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--color-navy-900), var(--color-blue-700));
    box-shadow: 0 14px 32px rgba(0, 20, 52, 0.22);
    transform: translateY(-50%);
  }

  body[data-page="service-policy"] .floating-contact a,
  body[data-page="service-policy"] .floating-contact button {
    display: grid;
    place-items: center;
    min-height: 52px;
    padding: 0 6px;
    color: var(--color-white);
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    background: transparent;
  }

  /* ===== Service policy mobile rebuild (2026-05-30) ===== */
  body[data-page="service-policy"] {
    overflow-x: hidden;
    padding-bottom: 0;
    background: #f4f7ff;
  }

  body[data-page="service-policy"] .site-header .topbar {
    display: none !important;
  }

  body[data-page="service-policy"] .site-header .navbar {
    min-height: 60px;
  }

  body[data-page="service-policy"] .site-header .navbar__inner {
    gap: 8px;
  }

  body[data-page="service-policy"] .site-header .navbar__inner::after {
    content: "☎ 400-690-7673";
    order: 2;
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    margin-right: 8px;
    color: var(--color-blue-700);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
  }

  body[data-page="service-policy"] .site-header .brand {
    order: 1;
  }

  body[data-page="service-policy"] .site-header .nav-toggle {
    order: 3;
    margin-left: 0;
  }

  body[data-page="service-policy"] .site-header .main-nav,
  body[data-page="service-policy"] .site-header .header-actions {
    display: none !important;
  }

  body[data-page="service-policy"] .service-page {
    background: #f4f7ff;
  }

  body[data-page="service-policy"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 16px;
  }

  body[data-page="service-policy"] .service-banner,
  body[data-page="service-policy"] .service-banner__inner,
  body[data-page="service-policy"] .banner-search {
    display: none !important;
  }

  body[data-page="service-policy"] .service-breadcrumb {
    padding-block: 10px 4px;
    border-bottom: 0;
    background: transparent;
  }

  body[data-page="service-policy"] .service-breadcrumb .breadcrumb__list {
    gap: 4px 6px;
    color: rgba(16, 24, 40, 0.55);
    font-size: 11px;
    line-height: 1.3;
  }

  body[data-page="service-policy"] .service-breadcrumb .breadcrumb__list a,
  body[data-page="service-policy"] .service-breadcrumb .breadcrumb__list li {
    color: inherit;
  }

  body[data-page="service-policy"] .policy-mobile-overview {
    display: block !important;
    padding-block: 6px 18px;
  }

  body[data-page="service-policy"] .policy-mobile-shell {
    display: grid;
    gap: 14px;
  }

  body[data-page="service-policy"] .policy-mobile-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 12px;
    align-items: center;
    padding: 18px 16px 16px;
    border-radius: 20px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #0a2e94 0%, #0b4dbf 48%, #1568f2 100%);
    box-shadow: 0 18px 42px rgba(0, 20, 52, 0.22);
  }

  body[data-page="service-policy"] .policy-mobile-hero::before {
    content: "";
    position: absolute;
    inset: -30px -20px auto auto;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 68%);
    pointer-events: none;
  }

  body[data-page="service-policy"] .policy-mobile-hero::after {
    content: "";
    position: absolute;
    inset: auto auto -42px -28px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 64%);
    pointer-events: none;
  }

  body[data-page="service-policy"] .policy-mobile-hero__copy {
    position: relative;
    z-index: 1;
  }

  body[data-page="service-policy"] .policy-mobile-hero__copy h1 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: 0.01em;
  }

  body[data-page="service-policy"] .policy-mobile-hero__subtitle {
    margin: 0 0 8px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
  }

  body[data-page="service-policy"] .policy-mobile-hero__copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    line-height: 1.6;
  }

  body[data-page="service-policy"] .policy-mobile-hero__art {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 120px;
    min-height: 120px;
  }

  body[data-page="service-policy"] .policy-mobile-hero__illustration {
    position: relative;
    width: 120px;
    height: 120px;
  }

  body[data-page="service-policy"] .policy-mobile-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    pointer-events: none;
  }

  body[data-page="service-policy"] .policy-mobile-hero__glow--one {
    inset: 12px 16px 16px 14px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 72%);
  }

  body[data-page="service-policy"] .policy-mobile-hero__glow--two {
    inset: 22px 22px 22px 22px;
    background: radial-gradient(circle, rgba(116, 178, 255, 0.34), transparent 62%);
  }

  body[data-page="service-policy"] .policy-mobile-hero__orbital {
    position: absolute;
    top: 57px;
    left: 10px;
    width: 100px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    transform: rotate(-9deg);
  }

  body[data-page="service-policy"] .policy-mobile-hero__pedestal {
    position: absolute;
    right: 12px;
    bottom: 5px;
    left: 12px;
    height: 32px;
    border-radius: 999px;
    background: linear-gradient(180deg, #90bbff 0%, #4d8cff 54%, #276ae6 100%);
    box-shadow: 0 18px 20px rgba(8, 32, 107, 0.32);
  }

  body[data-page="service-policy"] .policy-mobile-hero__pedestal::before {
    content: "";
    position: absolute;
    inset: 6px 12px auto;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
  }

  body[data-page="service-policy"] .policy-mobile-hero__pedestal::after {
    content: "";
    position: absolute;
    inset: auto 18px 5px;
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 19, 70, 0.12);
    filter: blur(1px);
  }

  body[data-page="service-policy"] .policy-mobile-hero__shield,
  body[data-page="service-policy"] .policy-mobile-hero__shield-inner {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    clip-path: polygon(50% 0%, 86% 12%, 86% 50%, 50% 100%, 14% 50%, 14% 12%);
  }

  body[data-page="service-policy"] .policy-mobile-hero__shield {
    top: 13px;
    width: 70px;
    height: 88px;
    background: linear-gradient(180deg, #dff1ff 0%, #74abff 46%, #1d64df 100%);
    box-shadow: 0 16px 28px rgba(2, 24, 90, 0.32);
  }

  body[data-page="service-policy"] .policy-mobile-hero__shield::before {
    content: "";
    position: absolute;
    inset: 9px 10px 10px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02));
  }

  body[data-page="service-policy"] .policy-mobile-hero__shield-inner {
    top: 22px;
    width: 52px;
    height: 64px;
    background: linear-gradient(180deg, #8fc0ff 0%, #5d93ff 50%, #1a5de0 100%);
    opacity: 0.72;
  }

  body[data-page="service-policy"] .policy-mobile-hero__check {
    position: absolute;
    top: 50px;
    left: 70px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 12px rgba(0, 18, 80, 0.2);
  }

  body[data-page="service-policy"] .policy-mobile-hero__check::before,
  body[data-page="service-policy"] .policy-mobile-hero__check::after {
    content: "";
    position: absolute;
    background: #1a5de0;
    border-radius: 999px;
  }

  body[data-page="service-policy"] .policy-mobile-hero__check::before {
    top: 11px;
    left: 5px;
    width: 5px;
    height: 2px;
    transform: rotate(45deg);
  }

  body[data-page="service-policy"] .policy-mobile-hero__check::after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 2px;
    transform: rotate(-45deg);
  }

  body[data-page="service-policy"] .policy-entry-rail {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    margin-top: -12px;
    padding: 16px 8px 12px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(0, 20, 52, 0.08);
  }

  body[data-page="service-policy"] .policy-entry-card {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 0;
    text-align: center;
  }

  body[data-page="service-policy"] .policy-entry-card__icon,
  body[data-page="service-policy"] .policy-commitment-grid__icon,
  body[data-page="service-policy"] .policy-return-grid__icon {
    display: grid;
    place-items: center;
    color: var(--color-blue-700);
    font-weight: 900;
    line-height: 1;
  }

  body[data-page="service-policy"] .policy-entry-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(11, 91, 211, 0.08);
    box-shadow: inset 0 0 0 1px rgba(11, 91, 211, 0.08);
    font-size: 13px;
  }

  body[data-page="service-policy"] .policy-entry-card strong {
    color: var(--color-text);
    font-size: 11px;
    line-height: 1.12;
  }

  body[data-page="service-policy"] .policy-entry-card small {
    color: rgba(16, 24, 40, 0.56);
    font-size: 9px;
    line-height: 1.22;
  }

  body[data-page="service-policy"] .policy-panel {
    margin-top: 14px;
    padding: 16px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(0, 20, 52, 0.08);
  }

  body[data-page="service-policy"] .policy-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
  }

  body[data-page="service-policy"] .policy-panel__head h2 {
    margin: 0;
    color: var(--color-navy-900);
    font-size: 22px;
    line-height: 1.15;
  }

  body[data-page="service-policy"] .policy-panel__head a {
    color: var(--color-blue-700);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="service-policy"] .policy-panel__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 14px;
    align-items: center;
  }

  body[data-page="service-policy"] .policy-panel__split--maintain {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  body[data-page="service-policy"] .policy-panel__split--privacy {
    grid-template-columns: minmax(0, 1fr) 92px;
  }

  body[data-page="service-policy"] .policy-commitment-grid,
  body[data-page="service-policy"] .policy-return-grid {
    display: grid;
  }

  body[data-page="service-policy"] .policy-commitment-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 6px;
  }

  body[data-page="service-policy"] .policy-commitment-grid article {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 0;
    padding: 0 2px;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
  }

  body[data-page="service-policy"] .policy-commitment-grid__icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(11, 91, 211, 0.08);
    font-size: 17px;
  }

  body[data-page="service-policy"] .policy-commitment-grid h3,
  body[data-page="service-policy"] .policy-return-grid h3 {
    margin: 0;
    color: var(--color-text);
    font-size: 12px;
    line-height: 1.18;
  }

  body[data-page="service-policy"] .policy-commitment-grid p,
  body[data-page="service-policy"] .policy-return-grid p {
    margin: 0;
    color: rgba(16, 24, 40, 0.56);
    font-size: 10px;
    line-height: 1.25;
  }

  body[data-page="service-policy"] .policy-return-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 8px;
  }

  body[data-page="service-policy"] .policy-return-grid article {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 0;
    padding: 8px 4px 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
    text-align: center;
  }

  body[data-page="service-policy"] .policy-return-grid__icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(11, 91, 211, 0.08);
    font-size: 15px;
  }

  body[data-page="service-policy"] .policy-bullet-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  body[data-page="service-policy"] .policy-bullet-list li {
    position: relative;
    padding-left: 18px;
    color: rgba(16, 24, 40, 0.88);
    font-size: 13px;
    line-height: 1.55;
  }

  body[data-page="service-policy"] .policy-bullet-list li::before {
    content: "";
    position: absolute;
    top: 0.76em;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-blue-700);
    transform: translateY(-50%);
  }

  body[data-page="service-policy"] .policy-bullet-list--tools li::before {
    width: 12px;
    height: 12px;
    border-radius: 0;
    background-color: var(--color-blue-700);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4.6 4.6 0 0 0-6.5 5.5L3 17l4 4 5.2-5.2a4.6 4.6 0 0 0 5.5-6.5l-3.3 3.3-2.8-2.8z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4.6 4.6 0 0 0-6.5 5.5L3 17l4 4 5.2-5.2a4.6 4.6 0 0 0 5.5-6.5l-3.3 3.3-2.8-2.8z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  body[data-page="service-policy"] .policy-bullet-list--check li::before {
    width: 11px;
    height: 11px;
    background: #19b46e;
    box-shadow: 0 0 0 2px rgba(25, 180, 110, 0.12);
  }

  body[data-page="service-policy"] .policy-panel__art {
    display: grid;
    place-items: center;
    min-width: 0;
  }

  body[data-page="service-policy"] .policy-shield-card {
    position: relative;
    width: 92px;
    height: 104px;
    display: grid;
    place-items: center;
    clip-path: polygon(50% 0%, 87% 12%, 87% 51%, 50% 100%, 13% 51%, 13% 12%);
    background: linear-gradient(180deg, #e8f2ff 0%, #7eb0ff 48%, #1d64df 100%);
    box-shadow: 0 18px 28px rgba(2, 24, 90, 0.2);
  }

  body[data-page="service-policy"] .policy-shield-card::before {
    content: "";
    position: absolute;
    inset: 9px 10px 10px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02));
  }

  body[data-page="service-policy"] .policy-shield-card span,
  body[data-page="service-policy"] .policy-shield-card small {
    position: relative;
    z-index: 1;
    color: #fff;
    text-align: center;
  }

  body[data-page="service-policy"] .policy-shield-card span {
    font-size: 16px;
    font-weight: 900;
    line-height: 1.05;
  }

  body[data-page="service-policy"] .policy-shield-card small {
    position: absolute;
    bottom: 11px;
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.94);
  }

  body[data-page="service-policy"] .policy-panel__art--image {
    align-self: stretch;
  }

  body[data-page="service-policy"] .policy-panel__art--image img {
    width: 100%;
    height: 100%;
    min-height: 104px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 10px 18px rgba(0, 20, 52, 0.08);
  }

  body[data-page="service-policy"] .policy-privacy-graphic {
    position: relative;
    width: 92px;
    height: 104px;
  }

  body[data-page="service-policy"] .policy-privacy-graphic::before {
    content: "";
    position: absolute;
    inset: 10px 11px 12px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(116, 178, 255, 0.2), rgba(116, 178, 255, 0.02) 70%);
  }

  body[data-page="service-policy"] .policy-privacy-graphic__shield {
    position: absolute;
    left: 50%;
    top: 13px;
    width: 64px;
    height: 80px;
    background: linear-gradient(180deg, #6ea0ff 0%, #1d64df 62%, #134cc3 100%);
    clip-path: polygon(50% 0%, 86% 12%, 86% 50%, 50% 100%, 14% 50%, 14% 12%);
    transform: translateX(-50%);
    box-shadow: 0 16px 26px rgba(2, 24, 90, 0.22);
  }

  body[data-page="service-policy"] .policy-privacy-graphic__shield::before {
    content: "";
    position: absolute;
    inset: 8px 10px 10px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02));
  }

  body[data-page="service-policy"] .policy-privacy-graphic__user {
    position: absolute;
    left: 50%;
    top: 34px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    transform: translateX(-50%);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
  }

  body[data-page="service-policy"] .policy-privacy-graphic__user::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(180deg, #8bb4ff, #5d93ff);
  }

  body[data-page="service-policy"] .policy-privacy-graphic__user::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 17px;
    width: 18px;
    height: 10px;
    border-radius: 10px 10px 8px 8px;
    background: linear-gradient(180deg, #8bb4ff, #5d93ff);
  }

  body[data-page="service-policy"] .policy-mobile-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
    padding: 16px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #0a2e94 0%, #0b4dbf 46%, #1568f2 100%);
    box-shadow: 0 18px 42px rgba(0, 20, 52, 0.22);
    overflow: hidden;
  }

  body[data-page="service-policy"] .policy-mobile-cta__copy h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 22px;
    line-height: 1.12;
  }

  body[data-page="service-policy"] .policy-mobile-cta__copy p {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    line-height: 1.45;
  }

  body[data-page="service-policy"] .policy-mobile-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  body[data-page="service-policy"] .policy-mobile-cta__actions .btn {
    height: 40px;
    padding-inline: 16px;
    border-radius: 12px;
  }

  body[data-page="service-policy"] .policy-mobile-cta__actions .btn.btn-accent {
    border-color: #ff7a1a;
    background: #ff7a1a;
    color: #fff;
  }

  body[data-page="service-policy"] .policy-mobile-cta__actions .btn.btn-outline {
    border-color: rgba(255, 255, 255, 0.55);
    background: transparent;
    color: #fff;
  }

  body[data-page="service-policy"] .policy-mobile-cta__media {
    width: 104px;
    height: 104px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 18px rgba(0, 20, 52, 0.18);
  }

  body[data-page="service-policy"] .policy-mobile-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  body[data-page="service-policy"] .service-main-section,
  body[data-page="service-policy"] .service-support-strip,
  body[data-page="service-policy"] .floating-contact,
  body[data-page="service-policy"] .mobile-bottom-nav {
    display: none !important;
  }

  body[data-page="service-policy"] .site-footer {
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.82);
    background: linear-gradient(180deg, #08224f 0%, #071c3f 100%);
  }

  body[data-page="service-policy"] .site-footer .footer-main {
    padding-block: 18px 16px;
  }

  body[data-page="service-policy"] .site-footer .footer-main__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 102px;
    gap: 14px;
    align-items: start;
  }

  body[data-page="service-policy"] .site-footer .footer-company h2 {
    margin-bottom: 8px;
    font-size: 18px;
  }

  body[data-page="service-policy"] .site-footer .footer-company p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    line-height: 1.6;
  }

  body[data-page="service-policy"] .site-footer .footer-contact {
    gap: 5px;
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.45;
  }

  body[data-page="service-policy"] .site-footer .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
  }

  body[data-page="service-policy"] .site-footer .footer-links h3 {
    margin-bottom: 8px;
    font-size: 12px;
  }

  body[data-page="service-policy"] .site-footer .footer-links a {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 11px;
    line-height: 1.35;
  }

  body[data-page="service-policy"] .site-footer .footer-qrcode {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 6px;
    padding-top: 2px;
    position: relative;
  }

  body[data-page="service-policy"] .site-footer .footer-qrcode img {
    display: none;
  }

  body[data-page="service-policy"] .site-footer .footer-qrcode::before {
    content: "";
    display: block;
    width: 92px;
    height: 92px;
    margin-bottom: 0;
    border: 4px solid #fff;
    border-radius: 10px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22white%22%2F%3E%3Cg%20fill%3D%22black%22%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%2228%22%20height%3D%2228%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%2284%22%20y%3D%228%22%20width%3D%2228%22%20height%3D%2228%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%2290%22%20y%3D%2214%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2284%22%20width%3D%2228%22%20height%3D%2228%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2290%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%2248%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2260%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2272%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2248%22%20y%3D%2222%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2260%22%20y%3D%2222%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2236%22%20y%3D%2236%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2248%22%20y%3D%2236%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2260%22%20y%3D%2236%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2272%22%20y%3D%2236%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2296%22%20y%3D%2236%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2236%22%20y%3D%2248%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2284%22%20y%3D%2248%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2296%22%20y%3D%2248%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2260%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2236%22%20y%3D%2260%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2260%22%20y%3D%2260%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2284%22%20y%3D%2260%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2296%22%20y%3D%2260%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2272%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2248%22%20y%3D%2272%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2272%22%20y%3D%2272%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2296%22%20y%3D%2272%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2236%22%20y%3D%2284%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2248%22%20y%3D%2284%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2260%22%20y%3D%2284%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2272%22%20y%3D%2284%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2284%22%20y%3D%2284%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2296%22%20y%3D%2284%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2236%22%20y%3D%2296%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2260%22%20y%3D%2296%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2284%22%20y%3D%2296%22%20width%3D%2210%22%20height%3D%2210%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-size: cover;
    box-shadow: 0 10px 18px rgba(0, 20, 52, 0.12);
  }

  body[data-page="service-policy"] .site-footer .footer-qrcode h3 {
    margin-bottom: 0;
    font-size: 12px;
  }

  body[data-page="service-policy"] .site-footer .footer-qrcode p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
  }

  body[data-page="service-policy"] .site-footer .social-links {
    gap: 6px;
  }

  body[data-page="service-policy"] .site-footer .social-links a {
    width: 26px;
    height: 26px;
  }

  body[data-page="service-policy"] .site-footer .footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  body[data-page="service-policy"] .site-footer .footer-bottom__inner {
    min-height: 42px;
    padding-block: 10px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 10px;
  }

  body[data-page="service-policy"] .site-footer .footer-bottom nav {
    gap: 12px;
  }

  body[data-page="service-policy"] .site-footer .footer-bottom nav a {
    color: rgba(255, 255, 255, 0.74);
  }

  @media (max-width: 380px) {
    body[data-page="service-policy"] .policy-mobile-hero {
      grid-template-columns: minmax(0, 1fr) 112px;
      gap: 10px;
      padding: 16px 14px 14px;
    }

    body[data-page="service-policy"] .policy-mobile-hero__art,
    body[data-page="service-policy"] .policy-mobile-hero__illustration {
      width: 112px;
      height: 112px;
    }

    body[data-page="service-policy"] .policy-mobile-hero__orbital {
      left: 8px;
      width: 92px;
    }

    body[data-page="service-policy"] .policy-mobile-hero__shield {
      top: 12px;
      width: 66px;
      height: 84px;
    }

    body[data-page="service-policy"] .policy-mobile-hero__shield-inner {
      top: 20px;
      width: 48px;
      height: 60px;
    }

    body[data-page="service-policy"] .policy-mobile-hero__check {
      top: 46px;
      left: 66px;
    }

    body[data-page="service-policy"] .policy-entry-rail {
      gap: 3px;
      padding-inline: 6px;
    }

    body[data-page="service-policy"] .policy-entry-card__icon {
      width: 32px;
      height: 32px;
      border-radius: 11px;
      font-size: 12px;
    }

    body[data-page="service-policy"] .policy-entry-card strong {
      font-size: 10px;
    }

    body[data-page="service-policy"] .policy-entry-card small {
      font-size: 8px;
      line-height: 1.18;
    }

    body[data-page="service-policy"] .policy-panel__split {
      grid-template-columns: minmax(0, 1fr) 86px;
      gap: 10px;
    }

    body[data-page="service-policy"] .policy-shield-card {
      width: 86px;
      height: 96px;
    }

    body[data-page="service-policy"] .policy-privacy-graphic {
      width: 86px;
      height: 96px;
    }

    body[data-page="service-policy"] .policy-mobile-cta {
      grid-template-columns: minmax(0, 1fr) 96px;
      gap: 10px;
    }

    body[data-page="service-policy"] .policy-mobile-cta__media {
      width: 96px;
      height: 96px;
    }

    body[data-page="service-policy"] .site-footer .footer-main__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 86px;
      gap: 10px;
    }

    body[data-page="service-policy"] .site-footer .footer-qrcode::before {
      width: 86px;
      height: 86px;
    }
  }

  /* Video detail page: mobile single-column layout only. */
  body[data-page="video-detail"] {
    padding-bottom: calc(env(safe-area-inset-bottom) + 92px);
    background: #f7faff;
  }

  body[data-page="video-detail"] .service-page {
    background: #f7faff;
  }

  body[data-page="video-detail"] .site-header .topbar,
  body[data-page="video-detail"] .topbar {
    display: none !important;
  }

  body[data-page="video-detail"] .site-header {
    box-shadow: 0 6px 18px rgba(0, 20, 52, 0.08);
  }

  body[data-page="video-detail"] .service-home-section,
  body[data-page="video-detail"] .service-main-section,
  body[data-page="video-detail"] .service-section {
    padding-block: 18px;
  }

  body[data-page="video-detail"] .service-banner {
    min-height: 224px;
  }

  body[data-page="video-detail"] .service-banner__inner {
    min-height: 224px;
    padding-block: 24px 18px;
    gap: 10px;
  }

  body[data-page="video-detail"] .service-banner h1 {
    margin-bottom: 2px;
    font-size: 28px;
    line-height: 1.18;
  }

  body[data-page="video-detail"] .service-banner p {
    max-width: 280px;
    font-size: 14px;
    line-height: 1.5;
  }

  body[data-page="video-detail"] .banner-search {
    display: flex;
    width: 100%;
    margin-top: 14px;
    overflow: hidden;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 24px rgba(0, 20, 52, 0.12);
  }

  body[data-page="video-detail"] .banner-search input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 13px;
  }

  body[data-page="video-detail"] .banner-search button {
    flex: 0 0 78px;
    min-height: 44px;
    min-width: 78px;
    padding-inline: 12px;
    border-radius: 0;
    font-size: 13px;
  }

  body[data-page="video-detail"] .service-breadcrumb {
    padding-block: 10px 0;
    background: #f7faff;
  }

  body[data-page="video-detail"] .service-breadcrumb .breadcrumb__list {
    gap: 6px;
    font-size: 11px;
    line-height: 1.35;
  }

  body[data-page="video-detail"] .service-main-section {
    padding-block: 16px 18px;
  }

  body[data-page="video-detail"] .service-detail-layout {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  body[data-page="video-detail"] .service-detail-layout > *,
  body[data-page="video-detail"] .service-video-detail,
  body[data-page="video-detail"] .service-sidebar,
  body[data-page="video-detail"] .service-support-strip .product-inquiry__inner {
    min-width: 0;
  }

  body[data-page="video-detail"] .service-video-detail {
    padding: 18px 16px 16px;
  }

  body[data-page="video-detail"] .service-video-player {
    aspect-ratio: 16 / 9;
    margin-bottom: 14px;
    border-radius: 14px;
  }

  body[data-page="video-detail"] .service-video-player img {
    height: 100%;
  }

  body[data-page="video-detail"] .service-video-player button {
    width: 62px;
    height: 62px;
    border-width: 2px;
    font-size: 28px;
  }

  body[data-page="video-detail"] .service-video-control {
    min-height: 34px;
    padding: 8px 10px;
    font-size: 10px;
    line-height: 1.2;
  }

  body[data-page="video-detail"] .service-video-detail h1 {
    margin-bottom: 8px;
    font-size: 22px;
    line-height: 1.28;
  }

  body[data-page="video-detail"] .news-meta {
    gap: 8px 10px;
    margin-bottom: 2px;
    font-size: 11px;
    line-height: 1.2;
  }

  body[data-page="video-detail"] .news-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 20px;
    white-space: nowrap;
  }

  body[data-page="video-detail"] .news-meta span::before {
    width: 5px;
    height: 5px;
    margin-right: 5px;
  }

  body[data-page="video-detail"] .news-meta span:nth-child(1)::before {
    width: 14px;
    height: 14px;
    margin-right: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%225%22%20width%3D%2217%22%20height%3D%2215.5%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M8%203.5v3M16%203.5v3M3.5%209h17%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex: 0 0 14px;
  }

  body[data-page="video-detail"] .news-meta span:nth-child(2)::before {
    width: 14px;
    height: 14px;
    margin-right: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.8%2012s3.7-6.5%209.2-6.5S21.2%2012%2021.2%2012s-3.7%206.5-9.2%206.5S2.8%2012%202.8%2012Z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223.1%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex: 0 0 14px;
  }

  body[data-page="video-detail"] .news-meta span:nth-child(3)::before {
    width: 14px;
    height: 14px;
    margin-right: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22/%3E%3Cpath%20d%3D%22M12%207.5v5l3.5%202.2%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex: 0 0 14px;
  }

  body[data-page="video-detail"] .news-meta span:nth-child(n + 4) {
    padding: 3px 10px;
    border: 1px solid rgba(0, 70, 184, 0.14);
    border-radius: 999px;
    color: var(--color-blue-700);
    background: #f6f9ff;
    font-weight: 700;
  }

  body[data-page="video-detail"] .news-meta span:nth-child(n + 4)::before {
    display: none;
  }

  body[data-page="video-detail"] .service-video-detail > section {
    margin-top: 20px;
  }

  body[data-page="video-detail"] .service-video-detail > section:nth-of-type(2) {
    margin-top: 24px;
  }

  body[data-page="video-detail"] .service-video-detail > section h2 {
    margin-bottom: 10px;
    color: var(--color-text);
    font-size: 19px;
    line-height: 1.3;
  }

  body[data-page="video-detail"] .service-video-detail > section p,
  body[data-page="video-detail"] .service-video-detail > section li {
    font-size: 14px;
    line-height: 1.75;
  }

  body[data-page="video-detail"] .service-chapter-row {
    grid-template-columns: 1fr;
    gap: 8px;
    overflow: hidden;
    border: 1px solid rgba(0, 68, 184, 0.1);
    border-radius: 14px;
    background: #fff;
  }

  body[data-page="video-detail"] .service-chapter-row a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
    padding: 9px 12px;
    border-bottom: 1px solid #edf2fa;
    border-radius: 0;
    background: transparent;
    font-size: 13px;
    line-height: 1.3;
    min-width: 0;
  }

  body[data-page="video-detail"] .service-chapter-row a:last-child {
    border-bottom: 0;
  }

  body[data-page="video-detail"] .service-chapter-row a::after {
    content: "›";
    color: var(--color-blue-700);
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1;
  }

  body[data-page="video-detail"] .service-chapter-row span {
    margin-left: auto;
    flex: 0 0 56px;
    width: 56px;
    min-width: 56px;
    color: var(--color-subtle);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    line-height: 1;
    white-space: nowrap;
  }

  body[data-page="video-detail"] .service-video-strip--compact {
    grid-template-columns: unset;
    grid-auto-flow: column;
    grid-auto-columns: 116px;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  body[data-page="video-detail"] .service-video-strip--compact::-webkit-scrollbar {
    display: none;
  }

  body[data-page="video-detail"] .service-video-card {
    width: 116px;
    scroll-snap-align: start;
    border-radius: 12px;
  }

  body[data-page="video-detail"] .service-video-card img {
    height: 78px;
  }

  body[data-page="video-detail"] .service-video-card > span {
    top: 31px;
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  body[data-page="video-detail"] .service-video-card strong,
  body[data-page="video-detail"] .service-video-card small {
    padding-inline: 10px;
  }

  body[data-page="video-detail"] .service-video-card strong {
    padding-top: 8px;
    font-size: 12px;
    line-height: 1.35;
  }

  body[data-page="video-detail"] .service-video-card small {
    padding-bottom: 10px;
    color: var(--color-muted);
    font-size: 10px;
  }

  body[data-page="video-detail"] .service-sidebar {
    grid-column: 1 / -1;
    gap: 12px;
    min-width: 0;
  }

  body[data-page="video-detail"] .service-sidebar > .service-side-card:first-child {
    display: none;
  }

  body[data-page="video-detail"] .service-side-card,
  body[data-page="video-detail"] .service-help-card {
    padding: 18px 16px;
  }

  body[data-page="video-detail"] .service-side-card h2,
  body[data-page="video-detail"] .service-help-card h2 {
    margin-bottom: 12px;
    font-size: 18px;
  }

  body[data-page="video-detail"] .service-file-list {
    gap: 0;
  }

  body[data-page="video-detail"] .service-file-list--compact a {
    grid-template-columns: 30px minmax(0, 1fr) 14px;
    gap: 8px;
    min-height: 52px;
    padding: 10px 0;
    border-bottom: 1px solid #edf2fa;
    width: 100%;
    min-width: 0;
  }

  body[data-page="video-detail"] .service-file-list--compact a:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  body[data-page="video-detail"] .service-file-list span {
    grid-column: 1;
    width: 30px;
    height: 34px;
    border-color: rgba(255, 106, 26, 0.2);
    border-radius: 8px;
    color: transparent;
    background-color: #fff4ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a1a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h5'/%3E%3Cpath d='M9 12h6'/%3E%3Cpath d='M9 16h6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    font-size: 0;
  }

  body[data-page="video-detail"] .service-file-list strong {
    grid-column: 2;
    min-width: 0;
    font-size: 13px;
    line-height: 1.35;
  }

  body[data-page="video-detail"] .service-file-list small {
    grid-column: 2;
    min-width: 0;
    font-size: 10px;
    line-height: 1.35;
  }

  body[data-page="video-detail"] .service-file-list--compact a::after {
    content: "›";
    grid-column: 3;
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    color: var(--color-blue-700);
    font-size: 18px;
    line-height: 1;
  }

  body[data-page="video-detail"] .service-card-link {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    font-size: 14px;
  }

  body[data-page="video-detail"] .service-support-strip {
    padding-block: 12px 20px;
  }

  body[data-page="video-detail"] .service-support-strip .product-inquiry__inner {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 16px 20px;
    border-radius: 18px;
    background: linear-gradient(180deg, var(--color-blue-800), var(--color-navy-900));
    text-align: center;
  }

  body[data-page="video-detail"] .service-support-strip .product-inquiry__copy h2 {
    font-size: 23px;
    line-height: 1.25;
  }

  body[data-page="video-detail"] .service-support-strip .product-inquiry__copy p {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="video-detail"] .service-support-strip .btn {
    width: 100%;
  }

  body[data-page="video-detail"] .service-support-strip {
    display: none;
  }

  body[data-page="video-detail"] .service-hotline {
    display: grid;
    justify-items: center;
    gap: 2px;
    text-align: center;
  }

  body[data-page="video-detail"] .service-hotline strong {
    color: var(--color-orange-500);
    font-size: 20px;
  }

  body[data-page="video-detail"] .service-hotline span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
  }

  body[data-page="video-detail"] .mobile-bottom-nav--cases,
  body[data-page="video-detail"] .mobile-bottom-nav--news,
  body[data-page="video-detail"] .mobile-bottom-nav--contact {
    display: none;
  }

  body[data-page="video-detail"] .mobile-bottom-nav--support {
    position: fixed;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 10px);
    left: 12px;
    z-index: 86;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 7px 2px 5px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(0, 20, 52, 0.14);
    backdrop-filter: blur(10px);
  }

  body[data-page="video-detail"] .mobile-bottom-nav--support a {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 50px;
    color: var(--color-muted);
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
  }

  body[data-page="video-detail"] .mobile-bottom-nav--support a.is-active {
    color: var(--color-blue-700);
  }

  body[data-page="video-detail"] .mobile-bottom-nav--support svg {
    width: 18px;
    height: 18px;
  }

  body[data-page="video-detail"] .floating-contact {
    position: fixed;
    top: 50%;
    right: 8px;
    z-index: 88;
    display: grid !important;
    width: 56px;
    gap: 1px;
    padding: 6px 0;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--color-navy-900), var(--color-blue-700));
    box-shadow: 0 14px 32px rgba(0, 20, 52, 0.22);
    transform: translateY(-50%);
  }

  body[data-page="video-detail"] .floating-contact a,
  body[data-page="video-detail"] .floating-contact button {
    display: grid;
    place-items: center;
    min-height: 52px;
    padding: 0 6px;
    color: var(--color-white);
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    background: transparent;
  }

  /* ===== Video detail page mobile rebuild (2026-05-22) ===== */
  body[data-page="video-detail"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 16px;
  }

  body[data-page="video-detail"] .service-banner,
  body[data-page="video-detail"] .service-banner__inner,
  body[data-page="video-detail"] .banner-search {
    display: none !important;
  }

  body[data-page="video-detail"] .service-breadcrumb {
    padding-block: 12px 6px;
  }

  body[data-page="video-detail"] .service-breadcrumb .breadcrumb__list {
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
  }

  body[data-page="video-detail"] .service-breadcrumb .breadcrumb__list li {
    min-width: 0;
  }

  body[data-page="video-detail"] .service-breadcrumb .breadcrumb__list a,
  body[data-page="video-detail"] .service-breadcrumb .breadcrumb__list li {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  body[data-page="video-detail"] .service-main-section {
    padding-block: 10px 18px;
  }

  body[data-page="video-detail"] .service-video-detail {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-page="video-detail"] .service-video-player {
    margin-bottom: 14px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 16px 42px rgba(0, 20, 52, 0.16);
  }

  body[data-page="video-detail"] .service-video-player button {
    width: 66px;
    height: 66px;
    font-size: 28px;
    border-width: 2px;
  }

  body[data-page="video-detail"] .service-video-control {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    font-variant-numeric: tabular-nums;
  }

  body[data-page="video-detail"] .service-video-detail h1 {
    margin-top: 6px;
    margin-bottom: 10px;
    color: var(--color-navy-900);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
  }

  body[data-page="video-detail"] .news-meta {
    margin-bottom: 10px;
    color: rgba(16, 24, 40, 0.7);
    font-size: 12px;
    line-height: 1.2;
  }

  body[data-page="video-detail"] .news-meta span:nth-child(n + 4) {
    border-color: rgba(11, 91, 211, 0.18);
    background: rgba(11, 91, 211, 0.06);
  }

  body[data-page="video-detail"] .service-video-detail > section {
    margin-top: 14px;
  }

  body[data-page="video-detail"] .service-video-detail > section h2 {
    font-size: 18px;
  }

  body[data-page="video-detail"] .service-video-detail > section p {
    color: rgba(16, 24, 40, 0.72);
    font-size: 14px;
    line-height: 1.7;
  }

  body[data-page="video-detail"] .video-detail-desc {
    display: block !important;
    margin-top: 8px;
    color: rgba(16, 24, 40, 0.68);
    font-size: 14px;
    line-height: 1.7;
  }

  body[data-page="video-detail"] .video-detail-actions {
    display: flex !important;
    gap: 10px;
    margin-top: 12px;
    padding-bottom: 2px;
  }

  body[data-page="video-detail"] .video-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 20, 52, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    color: rgba(16, 24, 40, 0.78);
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  body[data-page="video-detail"] .video-action strong {
    font-weight: 800;
  }

  body[data-page="video-detail"] .video-action em {
    font-style: normal;
    color: var(--color-blue-700);
    font-weight: 800;
  }

  body[data-page="video-detail"] .video-section-head {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 10px;
  }

  body[data-page="video-detail"] .video-section-head h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
  }

  body[data-page="video-detail"] .video-section-toggle,
  body[data-page="video-detail"] .video-section-more {
    color: var(--color-blue-700);
    font-size: 13px;
    font-weight: 800;
    background: transparent;
    border: 0;
    padding: 8px 0;
  }

  body[data-page="video-detail"] .service-chapter-row {
    display: none;
  }

  body[data-page="video-detail"] .video-chapter-card {
    display: grid !important;
    gap: 0;
    border: 1px solid rgba(11, 91, 211, 0.12);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08);
    overflow: hidden;
  }

  body[data-page="video-detail"] .video-chapter-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 56px;
    gap: 10px;
    align-items: center;
    padding: 12px 12px;
    border-bottom: 1px solid #edf2fa;
    color: var(--color-text);
    min-width: 0;
  }

  body[data-page="video-detail"] .video-chapter-item:last-child {
    border-bottom: 0;
  }

  body[data-page="video-detail"] .video-chapter-item.is-active {
    background: rgba(11, 91, 211, 0.06);
  }

  body[data-page="video-detail"] .video-chapter-no {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(11, 91, 211, 0.10);
    color: var(--color-blue-700);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
  }

  body[data-page="video-detail"] .video-chapter-main {
    min-width: 0;
  }

  body[data-page="video-detail"] .video-chapter-main strong {
    display: block;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
  }

  body[data-page="video-detail"] .video-chapter-main small {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 4px;
    color: rgba(16, 24, 40, 0.62);
    font-size: 12px;
    line-height: 1.25;
  }

  body[data-page="video-detail"] .video-chapter-time {
    justify-self: end;
    color: rgba(16, 24, 40, 0.55);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  body[data-page="video-detail"] .video-detail-related {
    display: block !important;
    margin-top: 18px;
  }

  body[data-page="video-detail"] .video-related-list {
    display: grid;
    gap: 10px;
  }

  body[data-page="video-detail"] .video-related-item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08);
    min-width: 0;
  }

  body[data-page="video-detail"] .video-related-item img {
    width: 96px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
  }

  body[data-page="video-detail"] .video-related-main {
    min-width: 0;
  }

  body[data-page="video-detail"] .video-related-item h3 {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.25;
  }

  body[data-page="video-detail"] .video-related-item h3 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--color-text);
  }

  body[data-page="video-detail"] .video-related-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    color: rgba(16, 24, 40, 0.62);
    font-size: 11px;
    line-height: 1.2;
  }

  body[data-page="video-detail"] .video-related-item .btn {
    height: 36px;
    padding-inline: 14px;
    border-radius: 12px;
    white-space: nowrap;
  }

  body[data-page="video-detail"] .service-sidebar {
    display: none;
  }

  body[data-page="video-detail"] .video-detail-cta {
    display: block !important;
    padding-block: 8px 22px;
  }

  body[data-page="video-detail"] .video-cta-card {
    display: grid;
    grid-template-columns: 1fr 124px;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0b3d91, #0b5bd3);
    color: #fff;
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22);
    overflow: hidden;
  }

  body[data-page="video-detail"] .video-cta-copy h2 {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.2;
    color: #fff;
  }

  body[data-page="video-detail"] .video-cta-copy p {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.45;
    opacity: 0.92;
  }

  body[data-page="video-detail"] .video-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  body[data-page="video-detail"] .video-cta-actions .btn {
    height: 40px;
    border-radius: 12px;
    padding-inline: 16px;
  }

  body[data-page="video-detail"] .video-cta-actions .btn.btn-accent {
    background: #ff7a1a;
    border-color: #ff7a1a;
    color: #fff;
  }

  body[data-page="video-detail"] .video-cta-actions .btn.btn-outline {
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    background: transparent;
  }

  body[data-page="video-detail"] .video-cta-media {
    width: 124px;
    height: 124px;
    border-radius: 14px;
    overflow: hidden;
    opacity: 0.96;
  }

body[data-page="video-detail"] .video-cta-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* News detail mobile v2 (2026-05-31)
   Mobile-only rebuild for news-detail.html; desktop markup remains untouched. */
@media (max-width: 768px) {
  body[data-page="news-detail"] {
    background: #f7faff;
    overflow-x: hidden;
    padding-bottom: 18px;
  }

  body[data-page="news-detail"] .site-header,
  body[data-page="news-detail"] .news-banner,
  body[data-page="news-detail"] .news-breadcrumb:not(.news-detail-mobile__breadcrumb),
  body[data-page="news-detail"] .news-detail-section,
  body[data-page="news-detail"] .news-subscribe,
  body[data-page="news-detail"] .mobile-bottom-nav--main,
  body[data-page="news-detail"] .mobile-bottom-nav--news,
  body[data-page="news-detail"] .floating-contact {
    display: none !important;
  }

  body[data-page="news-detail"] .news-detail-page {
    background: #f7faff;
  }

  body[data-page="news-detail"] .news-detail-mobile {
    display: block !important;
    padding-block: 0 10px;
  }

  body[data-page="news-detail"] .news-detail-mobile .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 10px;
  }

  body[data-page="news-detail"] .news-detail-mobile__topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) 30px;
    align-items: center;
    gap: 6px;
    min-height: 70px;
    padding-top: 4px;
  }

  body[data-page="news-detail"] .news-detail-mobile__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: calc(100% - 58px);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
  }

  body[data-page="news-detail"] .news-detail-mobile__brand-mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 2px solid #1f4bff;
    border-radius: 9px;
    color: #1f4bff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    flex: 0 0 auto;
    background: #fff;
  }

  body[data-page="news-detail"] .news-detail-mobile__brand-text {
    display: grid;
    min-width: 0;
  }

  body[data-page="news-detail"] .news-detail-mobile__brand-text strong {
    color: #0f2468;
    font-size: 13px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: 0.2px;
  }

  body[data-page="news-detail"] .news-detail-mobile__brand-text small {
    margin-top: 2px;
    color: rgba(15, 36, 104, 0.62);
    font-size: 7px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.3px;
  }

  body[data-page="news-detail"] .news-detail-mobile__phone {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #1f4bff;
    font-size: 7px;
    line-height: 1;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
    justify-self: end;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  body[data-page="news-detail"] .news-detail-mobile__phone svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
  }

  body[data-page="news-detail"] .news-detail-mobile__menu {
    justify-self: end;
    display: grid;
    place-items: center;
    gap: 4px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(31, 75, 255, 0.18);
    background: #fff;
    border-radius: 8px;
  }

  body[data-page="news-detail"] .news-detail-mobile__menu span {
    display: block;
    height: 2px;
    width: 14px;
    border-radius: 999px;
    background: #1f4bff;
  }

  body[data-page="news-detail"] .news-detail-mobile__breadcrumb {
    margin-top: 6px;
    padding-top: 2px;
  }

  body[data-page="news-detail"] .news-detail-mobile__breadcrumb .breadcrumb__list {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
    color: rgba(15, 36, 104, 0.58);
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
  }

  body[data-page="news-detail"] .news-detail-mobile__breadcrumb .breadcrumb__list li {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  body[data-page="news-detail"] .news-detail-mobile__breadcrumb .breadcrumb__list li:not(:last-child)::after {
    content: ">";
    color: rgba(15, 36, 104, 0.34);
    margin-left: 0;
  }

  body[data-page="news-detail"] .news-detail-mobile__breadcrumb .breadcrumb__list a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: none;
  }

  body[data-page="news-detail"] .news-detail-mobile__breadcrumb .breadcrumb__list svg {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    color: #0f2468;
  }

  body[data-page="news-detail"] .news-detail-mobile__head {
    margin-top: 16px;
  }

  body[data-page="news-detail"] .news-detail-mobile__head h1 {
    margin: 0;
    color: #0c163d;
    font-size: 28px;
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0.1px;
  }

  body[data-page="news-detail"] .news-detail-mobile__head > p {
    margin: 8px 0 0;
    color: rgba(15, 36, 104, 0.72);
    font-size: 14px;
    line-height: 1.55;
    font-weight: 600;
  }

  body[data-page="news-detail"] .news-detail-mobile__meta {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 14px;
    color: rgba(15, 36, 104, 0.56);
    font-size: 12px;
    line-height: 1.2;
    flex-wrap: wrap;
  }

  body[data-page="news-detail"] .news-detail-mobile__meta span,
  body[data-page="news-detail"] .news-detail-mobile__meta a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
  }

  body[data-page="news-detail"] .news-detail-mobile__meta svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: #7e88ac;
  }

  body[data-page="news-detail"] .news-detail-mobile__meta em {
    font-style: normal;
    font-weight: 700;
  }

  body[data-page="news-detail"] .news-detail-mobile__meta a {
    color: #1f4bff;
    font-weight: 800;
  }

  body[data-page="news-detail"] .news-detail-mobile__hero-image {
    margin: 16px 0 0;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #e9eefc;
  }

  body[data-page="news-detail"] .news-detail-mobile__hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="news-detail"] .news-detail-mobile__body {
    margin-top: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-page="news-detail"] .news-detail-mobile__summary {
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid #d7e1ff;
    border-radius: 12px;
    background: linear-gradient(180deg, #f2f6ff, #eef3ff);
    color: rgba(15, 36, 104, 0.74);
    font-size: 12px;
    line-height: 1.72;
    font-weight: 700;
  }

  body[data-page="news-detail"] .news-detail-mobile__body section + section {
    margin-top: 20px;
  }

  body[data-page="news-detail"] .news-detail-mobile__body h2 {
    position: relative;
    margin: 0 0 10px;
    padding-left: 12px;
    color: #0d163f;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 900;
  }

  body[data-page="news-detail"] .news-detail-mobile__body h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 4px;
    border-radius: 999px;
    background: #1f4bff;
  }

  body[data-page="news-detail"] .news-detail-mobile__body p {
    margin: 0;
    color: rgba(15, 36, 104, 0.74);
    font-size: 14px;
    line-height: 1.82;
  }

  body[data-page="news-detail"] .news-detail-mobile__event-card {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid #d7e1ff;
    border-radius: 14px;
    background: linear-gradient(180deg, #f7f9ff, #eef3ff);
    box-shadow: none;
  }

  body[data-page="news-detail"] .news-detail-mobile__event-card img {
    width: 120px;
    height: 84px;
    border-radius: 10px;
    object-fit: cover;
  }

  body[data-page="news-detail"] .news-detail-mobile__event-card h3 {
    margin: 0 0 6px;
    color: #0d163f;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 900;
  }

  body[data-page="news-detail"] .news-detail-mobile__event-card p {
    margin: 0 0 10px;
    color: rgba(15, 36, 104, 0.64);
    font-size: 12px;
    line-height: 1.45;
  }

  body[data-page="news-detail"] .news-detail-mobile__event-card .btn {
    min-height: 34px;
    padding-inline: 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
  }

  body[data-page="news-detail"] .news-detail-mobile__prev-next {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  body[data-page="news-detail"] .news-detail-mobile__prev,
  body[data-page="news-detail"] .news-detail-mobile__next {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #0d163f;
    text-decoration: none;
    min-width: 0;
  }

  body[data-page="news-detail"] .news-detail-mobile__next {
    justify-content: flex-end;
    text-align: right;
  }

  body[data-page="news-detail"] .news-detail-mobile__prev svg,
  body[data-page="news-detail"] .news-detail-mobile__next svg {
    width: 18px;
    height: 18px;
    margin-top: 11px;
    color: #1f4bff;
    flex: 0 0 auto;
  }

  body[data-page="news-detail"] .news-detail-mobile__prev span,
  body[data-page="news-detail"] .news-detail-mobile__next span {
    display: grid;
    min-width: 0;
  }

  body[data-page="news-detail"] .news-detail-mobile__prev em,
  body[data-page="news-detail"] .news-detail-mobile__next em {
    margin-bottom: 3px;
    color: rgba(15, 36, 104, 0.58);
    font-size: 11px;
    line-height: 1.2;
    font-style: normal;
    font-weight: 700;
  }

  body[data-page="news-detail"] .news-detail-mobile__prev strong,
  body[data-page="news-detail"] .news-detail-mobile__next strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: rgba(13, 22, 63, 0.94);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 900;
  }

  body[data-page="news-detail"] .news-detail-mobile__related {
    margin-top: 18px;
  }

  body[data-page="news-detail"] .news-detail-mobile__related header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
  }

  body[data-page="news-detail"] .news-detail-mobile__related h2 {
    margin: 0;
    color: #0d163f;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 900;
  }

  body[data-page="news-detail"] .news-detail-mobile__related header a {
    color: #1f4bff;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="news-detail"] .news-detail-mobile__related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="news-detail"] .news-detail-mobile__related-grid a {
    display: block;
    min-width: 0;
    color: inherit;
    text-decoration: none;
  }

  body[data-page="news-detail"] .news-detail-mobile__related-grid img {
    width: 100%;
    aspect-ratio: 1.38 / 1;
    object-fit: cover;
    border-radius: 10px;
    background: #e9eefc;
  }

  body[data-page="news-detail"] .news-detail-mobile__tag {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    margin-top: 8px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(31, 75, 255, 0.12);
    color: #1f4bff;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
  }

  body[data-page="news-detail"] .news-detail-mobile__tag.is-green {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
  }

  body[data-page="news-detail"] .news-detail-mobile__tag.is-orange {
    background: rgba(251, 146, 60, 0.16);
    color: #c2410c;
  }

  body[data-page="news-detail"] .news-detail-mobile__related-grid strong {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 6px;
    color: rgba(13, 22, 63, 0.92);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 900;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="news-detail"] .news-detail-mobile__related-grid small {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    color: rgba(15, 36, 104, 0.52);
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
  }

  body[data-page="news-detail"] .site-footer .footer-main {
    padding-block: 20px 18px;
  }

  body[data-page="news-detail"] .site-footer .footer-main__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body[data-page="news-detail"] .site-footer .footer-company h2 {
    font-size: 24px;
  }

  body[data-page="news-detail"] .site-footer .footer-company p,
  body[data-page="news-detail"] .site-footer .footer-contact,
  body[data-page="news-detail"] .site-footer .footer-links a,
  body[data-page="news-detail"] .site-footer .footer-qrcode p {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="news-detail"] .site-footer .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
  }

  body[data-page="news-detail"] .site-footer .footer-links h3 {
    margin-bottom: 8px;
    font-size: 14px;
  }

  body[data-page="news-detail"] .site-footer .footer-qrcode {
    display: grid;
    justify-items: center;
    gap: 8px;
  }

  body[data-page="news-detail"] .site-footer .footer-qrcode img {
    width: 120px;
    height: 120px;
    margin-bottom: 0;
  }

  body[data-page="news-detail"] .site-footer .social-links {
    justify-content: center;
  }

  body[data-page="news-detail"] .site-footer .footer-bottom__inner {
    min-height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-block: 14px 16px;
  }

  body[data-page="news-detail"] .site-footer .footer-bottom nav {
    gap: 12px;
    flex-wrap: wrap;
  }
}

@media (max-width: 430px) {
  body[data-page="news-detail"] .news-detail-mobile__head h1 {
    font-size: 26px;
  }

  body[data-page="news-detail"] .news-detail-mobile__related-grid {
    gap: 8px;
  }

  body[data-page="news-detail"] .news-detail-mobile__related-grid strong {
    font-size: 11px;
  }

  body[data-page="news-detail"] .news-detail-mobile__meta {
    gap: 14px;
  }

  body[data-page="news-detail"] .news-detail-mobile__event-card {
    grid-template-columns: 110px minmax(0, 1fr);
  }

  body[data-page="news-detail"] .news-detail-mobile__event-card img {
    width: 110px;
    height: 78px;
  }
}

@media (max-width: 390px) {
  body[data-page="news-detail"] .news-detail-mobile__brand {
    max-width: 100%;
  }

  body[data-page="news-detail"] .news-detail-mobile__brand-text small {
    display: none;
  }

  body[data-page="news-detail"] .news-detail-mobile__brand-mark {
    width: 34px;
    height: 34px;
  }

  body[data-page="news-detail"] .news-detail-mobile__brand-text strong {
    font-size: 12px;
  }

  body[data-page="news-detail"] .news-detail-mobile__phone {
    font-size: 7px;
  }

  body[data-page="news-detail"] .news-detail-mobile__menu {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 375px) {
  body[data-page="news-detail"] .news-detail-mobile .container {
    padding-inline: 12px;
  }

  body[data-page="news-detail"] .news-detail-mobile__topbar {
    gap: 6px;
  }

  body[data-page="news-detail"] .news-detail-mobile__brand-text strong {
    font-size: 12px;
  }

  body[data-page="news-detail"] .news-detail-mobile__breadcrumb .breadcrumb__list {
    font-size: 10px;
  }

  body[data-page="news-detail"] .news-detail-mobile__body p {
    font-size: 13px;
  }

  body[data-page="news-detail"] .news-detail-mobile__related-grid {
    gap: 7px;
  }
}

@media (max-width: 360px) {
  body[data-page="news-detail"] .news-detail-mobile__brand-mark {
    width: 34px;
    height: 34px;
  }

  body[data-page="news-detail"] .news-detail-mobile__brand-text strong {
    font-size: 11px;
  }

  body[data-page="news-detail"] .news-detail-mobile__phone {
    font-size: 6px;
  }

  body[data-page="news-detail"] .news-detail-mobile__head h1 {
    font-size: 24px;
  }

  body[data-page="news-detail"] .news-detail-mobile__related-grid strong {
    font-size: 10px;
  }
}

/* Case detail mobile final lockout.
   This sits after every other responsive block so it can suppress shared shell
   components that are re-enabled by the global harmonization pass. */
@media (max-width: 992px) {
  body[data-page="case-detail"] .site-header .topbar,
  body[data-page="case-detail"] .topbar,
  body[data-page="case-detail"] .mobile-bottom-nav,
  body[data-page="case-detail"] .mobile-bottom-nav--main,
  body[data-page="case-detail"] .mobile-bottom-nav--cases,
  body[data-page="case-detail"] .floating-contact {
    display: none !important;
  }
}

/* Case detail mobile final lockout.
   This sits at the very end so the case-detail page can suppress shared shell
   components that earlier harmonization passes turn back on. */
@media (max-width: 992px) {
  body[data-page="case-detail"] .site-header .topbar,
  body[data-page="case-detail"] .topbar,
  body[data-page="case-detail"] .mobile-bottom-nav,
  body[data-page="case-detail"] .mobile-bottom-nav--main,
  body[data-page="case-detail"] .mobile-bottom-nav--cases,
  body[data-page="case-detail"] .floating-contact {
    display: none !important;
  }
}

/* Download center mobile rebuild, tuned to the reference layout.
   This block is intentionally last so it wins over the shared 480px rules. */
@media (max-width: 768px) {
  body[data-page="download"] {
    padding-bottom: 0;
    background: #f7faff;
    overflow-x: hidden;
  }

  body[data-page="download"] .site-header,
  body[data-page="download"] .mobile-bottom-nav,
  body[data-page="download"] .floating-contact {
    display: none !important;
  }

  body[data-page="download"] .service-page {
    background: #f7faff;
  }

  body[data-page="download"] .container {
    width: calc(100% - 32px);
    max-width: none;
    padding-inline: 0;
  }

  body[data-page="download"] .service-banner,
  body[data-page="download"] .service-banner__inner,
  body[data-page="download"] .banner-search,
  body[data-page="download"] .service-breadcrumb,
  body[data-page="download"] .service-main-section,
  body[data-page="download"] .service-support-strip {
    display: none !important;
  }

  body[data-page="download"] .download-mobile-center {
    display: block !important;
    padding-block: 10px 18px;
  }

  body[data-page="download"] .download-mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 2px 14px;
  }

  body[data-page="download"] .download-mobile-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--color-navy-900);
  }

  body[data-page="download"] .download-mobile-topbar__mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-blue-700);
    border-radius: 10px;
    color: var(--color-blue-700);
    font-size: 20px;
    font-weight: 900;
    flex: 0 0 auto;
  }

  body[data-page="download"] .download-mobile-topbar__text {
    min-width: 0;
  }

  body[data-page="download"] .download-mobile-topbar__text strong,
  body[data-page="download"] .download-mobile-topbar__text small {
    display: block;
    line-height: 1.08;
  }

  body[data-page="download"] .download-mobile-topbar__text strong {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.01em;
  }

  body[data-page="download"] .download-mobile-topbar__text small {
    margin-top: 3px;
    color: rgba(16, 24, 40, 0.54);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  body[data-page="download"] .download-mobile-topbar__phone {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--color-blue-700);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
  }

  body[data-page="download"] .download-mobile-topbar__phone-icon {
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 5.5c0 7.2 6.8 14 14 14h0l1.5-3.2-4.3-2.2-1.9 1.7c-2.4-1.1-4.4-3.1-5.5-5.5l1.7-1.9L8.3 3 5.1 4.5z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 5.5c0 7.2 6.8 14 14 14h0l1.5-3.2-4.3-2.2-1.9 1.7c-2.4-1.1-4.4-3.1-5.5-5.5l1.7-1.9L8.3 3 5.1 4.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  body[data-page="download"] .download-mobile-topbar__menu {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    flex: 0 0 auto;
  }

  body[data-page="download"] .download-mobile-topbar__menu span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 2px 0;
    border-radius: 999px;
    background: var(--color-navy-900);
  }

  body[data-page="download"] .download-center-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 124px;
    gap: 12px;
    align-items: center;
    min-height: 165px;
    padding: 20px 18px 18px;
    border-radius: 20px;
    overflow: hidden;
    background:
      radial-gradient(circle at 82% 22%, rgba(255, 255, 255, 0.16), transparent 18%),
      radial-gradient(circle at 70% 68%, rgba(255, 255, 255, 0.12), transparent 24%),
      linear-gradient(135deg, #0b3d91 0%, #0b5bd3 100%);
    box-shadow: 0 18px 42px rgba(0, 20, 52, 0.22);
  }

  body[data-page="download"] .download-center-hero__copy {
    position: relative;
    z-index: 1;
    min-width: 0;
  }

  body[data-page="download"] .download-center-hero__copy h1 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 30px;
    line-height: 1.08;
    letter-spacing: 0.01em;
  }

  body[data-page="download"] .download-center-hero__subtitle {
    max-width: 194px;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    line-height: 1.55;
  }

  body[data-page="download"] .download-center-hero__art {
    position: relative;
    width: 124px;
    height: 124px;
    margin-left: auto;
    border-radius: 18px;
    overflow: hidden;
    background:
      radial-gradient(circle at 68% 24%, rgba(255, 255, 255, 0.36), transparent 18%),
      radial-gradient(circle at 22% 72%, rgba(255, 255, 255, 0.16), transparent 18%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0));
  }

  body[data-page="download"] .download-center-hero__art::before {
    content: "";
    position: absolute;
    left: 19px;
    right: 19px;
    top: 28px;
    height: 70px;
    border-radius: 18px;
    background: linear-gradient(180deg, #dff0ff 0%, #90c1ff 56%, #3e78e7 100%);
    box-shadow: 0 16px 22px rgba(0, 31, 82, 0.24);
    transform: perspective(320px) rotateX(10deg);
  }

  body[data-page="download"] .download-center-hero__art::after {
    content: "";
    position: absolute;
    left: 38px;
    right: 36px;
    top: 14px;
    height: 46px;
    border-radius: 12px 12px 14px 14px;
    background: linear-gradient(180deg, #f6fbff 0%, #c3dcff 100%);
    box-shadow: 0 8px 16px rgba(0, 31, 82, 0.16);
    transform: rotate(-7deg);
  }

  body[data-page="download"] .download-center-hero__art img {
    display: none;
  }

  body[data-page="download"] .download-center-search {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 78px !important;
    align-items: center !important;
    min-height: 48px;
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid rgba(0, 20, 52, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 24px rgba(0, 20, 52, 0.10);
  }

  body[data-page="download"] .download-center-search__icon {
    width: 42px;
    height: 48px;
    color: rgba(15, 27, 45, 0.42);
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  }

  body[data-page="download"] .download-center-search input {
    height: 48px;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0 8px 0 2px;
    color: var(--color-text);
    font-size: 13px;
    outline: none;
  }

  body[data-page="download"] .download-center-search .btn {
    height: 48px;
    min-width: 0;
    border-radius: 0 16px 16px 0;
    background: linear-gradient(180deg, #0b4fc4 0%, #083ea7 100%);
    font-size: 13px;
    font-weight: 800;
  }

  body[data-page="download"] .download-center-section {
    margin-top: 14px;
  }

  body[data-page="download"] .download-cat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }

  body[data-page="download"] .download-cat-card {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 4px;
    min-height: 96px;
    padding: 12px 4px 10px;
    border: 1px solid rgba(0, 68, 184, 0.10);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 20, 52, 0.06);
    text-align: center;
  }

  body[data-page="download"] .download-cat-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #edf4ff;
    color: var(--color-blue-700);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
  }

  body[data-page="download"] .download-cat-card strong {
    color: var(--color-text);
    font-size: 11px;
    line-height: 1.15;
  }

  body[data-page="download"] .download-cat-card small {
    color: rgba(16, 24, 40, 0.58);
    font-size: 10px;
    line-height: 1;
  }

  body[data-page="download"] .download-cat-card.is-active {
    border-color: transparent;
    background: linear-gradient(180deg, #0b4fc4 0%, #0b3f9d 100%);
    box-shadow: 0 12px 26px rgba(0, 68, 184, 0.18);
  }

  body[data-page="download"] .download-cat-card.is-active .download-cat-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
  }

  body[data-page="download"] .download-cat-card.is-active strong,
  body[data-page="download"] .download-cat-card.is-active small {
    color: rgba(255, 255, 255, 0.96);
  }

  body[data-page="download"] .download-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 2px 8px;
    border-bottom: 1px solid rgba(0, 20, 52, 0.08);
  }

  body[data-page="download"] .download-tabs {
    flex: 1 1 auto;
    display: flex;
    gap: 18px;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body[data-page="download"] .download-tabs::-webkit-scrollbar {
    display: none;
  }

  body[data-page="download"] .download-tabs button {
    position: relative;
    flex: 0 0 auto;
    padding: 10px 0 14px;
    border: 0;
    background: transparent;
    color: rgba(16, 24, 40, 0.72);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="download"] .download-tabs button.is-active {
    color: var(--color-blue-700);
  }

  body[data-page="download"] .download-tabs button.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 22px;
    height: 3px;
    border-radius: 999px;
    background: var(--color-blue-700);
    transform: translateX(-50%);
  }

  body[data-page="download"] .download-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-navy-900);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="download"] .download-filter-btn::after {
    content: "";
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6.5 7.5V19l-3 1v-7.5L4 5z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6.5 7.5V19l-3 1v-7.5L4 5z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  body[data-page="download"] .download-file-list {
    display: grid;
    gap: 10px;
  }

  body[data-page="download"] .download-file-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(0, 68, 184, 0.10);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 20, 52, 0.06);
    min-width: 0;
  }

  body[data-page="download"] .download-file-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.4px;
  }

  body[data-page="download"] .download-file-icon.is-pdf { background: #ef4444; }
  body[data-page="download"] .download-file-icon.is-doc { background: #2563eb; }
  body[data-page="download"] .download-file-icon.is-xls { background: #16a34a; }
  body[data-page="download"] .download-file-icon.is-zip { background: #0ea5e9; }
  body[data-page="download"] .download-file-icon.is-mp4 { background: #7c3aed; }

  body[data-page="download"] .download-file-main {
    min-width: 0;
  }

  body[data-page="download"] .download-file-main h3 {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.28;
  }

  body[data-page="download"] .download-file-main h3 a {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-text);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="download"] .download-file-main p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 8px;
    color: rgba(16, 24, 40, 0.62);
    font-size: 12px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  body[data-page="download"] .download-file-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    color: rgba(16, 24, 40, 0.58);
    font-size: 11px;
    line-height: 1.2;
  }

  body[data-page="download"] .download-file-actions {
    display: grid;
    justify-items: end;
    gap: 6px;
    text-align: right;
  }

  body[data-page="download"] .download-file-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    min-width: 72px;
    padding: 0 12px;
    border: 1px solid var(--color-blue-700);
    border-radius: 12px;
    background: #fff;
    color: var(--color-blue-700);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="download"] .download-file-actions .btn::before {
    content: "";
    width: 12px;
    height: 12px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
    flex: 0 0 12px;
  }

  body[data-page="download"] .download-file-actions small {
    color: rgba(16, 24, 40, 0.56);
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
  }

  body[data-page="download"] .download-center-pagination {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body[data-page="download"] .download-center-pagination::-webkit-scrollbar {
    display: none;
  }

  body[data-page="download"] .download-center-pagination a,
  body[data-page="download"] .download-center-pagination span {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid rgba(0, 20, 52, 0.12);
    border-radius: 10px;
    background: #fff;
    color: rgba(16, 24, 40, 0.78);
    font-size: 12px;
    font-weight: 700;
  }

  body[data-page="download"] .download-center-pagination a[aria-label="上一页"],
  body[data-page="download"] .download-center-pagination a[aria-label="下一页"] {
    position: relative;
    color: transparent;
  }

  body[data-page="download"] .download-center-pagination a[aria-label="上一页"]::before,
  body[data-page="download"] .download-center-pagination a[aria-label="下一页"]::before {
    color: rgba(16, 24, 40, 0.76);
    font-size: 18px;
    line-height: 1;
  }

  body[data-page="download"] .download-center-pagination a[aria-label="上一页"]::before {
    content: "‹";
  }

  body[data-page="download"] .download-center-pagination a[aria-label="下一页"]::before {
    content: "›";
  }

  body[data-page="download"] .download-center-pagination a.is-active {
    border-color: transparent;
    background: var(--color-blue-700);
    color: #fff;
  }

  body[data-page="download"] .download-center-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 12px;
    align-items: center;
    margin-top: 18px;
    padding: 18px 16px 16px;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #0b3d91 0%, #0b5bd3 100%);
    color: #fff;
    box-shadow: 0 18px 42px rgba(0, 20, 52, 0.22);
  }

  body[data-page="download"] .download-center-cta__copy {
    min-width: 0;
  }

  body[data-page="download"] .download-center-cta__copy h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 22px;
    line-height: 1.18;
  }

  body[data-page="download"] .download-center-cta__copy p {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    line-height: 1.45;
  }

  body[data-page="download"] .download-center-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  body[data-page="download"] .download-center-cta__actions .btn {
    height: 40px;
    padding-inline: 16px;
    border-radius: 12px;
  }

  body[data-page="download"] .download-center-cta__actions .btn.btn-accent {
    border-color: #ff7a1a;
    background: #ff7a1a;
    color: #fff;
  }

  body[data-page="download"] .download-center-cta__actions .btn.btn-outline {
    border-color: rgba(255, 255, 255, 0.54);
    background: transparent;
    color: #fff;
  }

  body[data-page="download"] .download-center-cta__media {
    width: 120px;
    height: 132px;
    border-radius: 16px;
    overflow: hidden;
    opacity: 0.96;
  }

  body[data-page="download"] .download-center-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  body[data-page="download"] .site-footer {
    margin-top: 16px;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
  }

  body[data-page="download"] .site-footer .footer-main {
    padding-block: 22px 18px;
    background: linear-gradient(180deg, #06142c 0%, #071f45 100%);
  }

  body[data-page="download"] .site-footer .footer-main__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 18px 16px;
    align-items: start;
  }

  body[data-page="download"] .site-footer .footer-company {
    grid-column: 1;
  }

  body[data-page="download"] .site-footer .footer-company h2 {
    margin-bottom: 10px;
    font-size: 22px;
  }

  body[data-page="download"] .site-footer .footer-company p,
  body[data-page="download"] .site-footer .footer-contact li {
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    line-height: 1.55;
  }

  body[data-page="download"] .site-footer .footer-contact li + li {
    margin-top: 6px;
  }

  body[data-page="download"] .site-footer .footer-links {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
  }

  body[data-page="download"] .site-footer .footer-links h3 {
    margin-bottom: 8px;
    font-size: 14px;
  }

  body[data-page="download"] .site-footer .footer-links a {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    line-height: 1.35;
  }

  body[data-page="download"] .site-footer .footer-qrcode {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    text-align: center;
  }

  body[data-page="download"] .site-footer .footer-qrcode img {
    width: 94px;
    height: 94px;
    margin-bottom: 8px;
    border: 4px solid var(--color-white);
    border-radius: 10px;
    object-fit: cover;
  }

  body[data-page="download"] .site-footer .footer-qrcode h3 {
    font-size: 13px;
  }

  body[data-page="download"] .site-footer .footer-qrcode p {
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    line-height: 1.35;
  }

  body[data-page="download"] .site-footer .social-links {
    justify-content: center;
  }

  body[data-page="download"] .site-footer .social-links a {
    width: 28px;
    height: 28px;
  }

  body[data-page="download"] .site-footer .social-links a svg {
    width: 13px;
    height: 13px;
  }

  body[data-page="download"] .site-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
  }

  body[data-page="download"] .site-footer .footer-bottom__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: auto;
    padding-block: 16px 18px;
    text-align: center;
  }

  body[data-page="download"] .site-footer .footer-bottom nav {
    justify-content: center;
    gap: 14px;
  }

  body[data-page="download"] .site-footer .footer-bottom p,
  body[data-page="download"] .site-footer .footer-bottom nav a {
    color: rgba(255, 255, 255, 0.72);
    font-size: 10px;
  }
}

/* Global mobile tap-target refinements.
   These apply across all pages and stay confined to small screens. */
@media (max-width: 768px) {
  .brand__text small {
    font-size: 10px;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
  }

  .btn-sm {
    min-height: 44px;
  }

  .mobile-bottom-nav a,
  .mobile-bottom-nav a small {
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  .mobile-bottom-nav a small {
    display: block;
    font-weight: 600;
  }

  body[data-page] .service-list-head button,
  body[data-page] .case-filter-bar > button {
    min-height: 42px;
    padding-inline: 12px;
  }

  body[data-page] .service-pagination a,
  body[data-page] .service-pagination span {
    min-width: 32px;
    height: 32px;
  }

  body[data-page] .service-card-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
  }
}

@media (max-width: 768px) {
  body.has-main-bottom-nav {
    padding-bottom: calc(env(safe-area-inset-bottom) + 92px);
  }

  body.has-main-bottom-nav .mobile-bottom-nav--main {
    position: fixed;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 10px);
    left: 12px;
    z-index: 86;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 7px 2px 5px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(0, 20, 52, 0.14);
    backdrop-filter: blur(10px);
  }

  body.has-main-bottom-nav .mobile-bottom-nav--main a {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 50px;
    color: var(--color-muted);
    font-size: 11px !important;
    line-height: 1.1 !important;
    text-align: center;
  }

  body.has-main-bottom-nav .mobile-bottom-nav--main a.is-active {
    color: var(--color-blue-700);
  }

  body.has-main-bottom-nav .mobile-bottom-nav--main a.is-cta {
    align-self: center;
    justify-self: center;
    width: calc(100% - 4px);
    min-height: 42px;
    padding-inline: 6px;
    border-radius: 12px;
    color: var(--color-white);
    background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-orange-600) 100%);
    box-shadow: 0 8px 18px rgba(255, 122, 36, 0.24);
  }

  body.has-main-bottom-nav .mobile-bottom-nav--main a.is-cta.is-active {
    color: var(--color-white);
    background: linear-gradient(180deg, #e66900 0%, var(--color-accent) 100%);
  }

  body.has-main-bottom-nav .mobile-bottom-nav--main a.is-cta svg {
    width: 17px;
    height: 17px;
  }

  body.has-main-bottom-nav .mobile-bottom-nav--main svg {
    width: 18px;
    height: 18px;
  }
}

/* Image ratio safeguards. */
.page-banner::before,
.home-hero::before,
.home-hero::after,
.product-banner::before,
.detail-hero::before,
.solution-hero::before,
.case-banner::before,
.news-banner::before,
.about-banner::before,
.service-banner::before,
.contact-hero::before {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.home-product-card img,
.zz-product-card img,
.zz-product-card--small img,
.gallery-main img,
.gallery-thumbs img,
.recommend-row img,
.related-product-grid .zz-product-card img,
.related-product-grid .zz-product-card--small img,
.case-related-strip a[href*="product-detail"] img {
  object-fit: contain !important;
  object-position: center;
  background-color: #fff;
}

.home-solution-card img,
.home-case-card img,
.home-news-list img,
.solution-card img,
.solution-case-grid img,
.case-card img,
.case-feature-cover img,
.case-detail-summary img,
.case-solution-card img,
.case-related-cards img,
.case-sidebar-card img,
.case-related-strip a[href*="solutions"] img,
.industry-grid img,
.related-solutions img,
.news-list-item img,
.news-rank-list img,
.news-feature-card > img,
.news-feature-card aside img,
.news-article__cover,
.news-related-grid img,
.service-video-card img,
.service-video-player img,
.service-play-list img,
.service-article img,
.about-video img,
.about-factory-grid img,
.about-team-grid img,
.contact-map-card img {
  object-fit: cover !important;
  object-position: center;
}

.footer-qrcode img,
.contact-info-card--qr img,
body[data-page="download-detail"] .service-download-hero > img {
  object-fit: contain !important;
  object-position: center;
  background-color: #fff;
}

img {
  max-width: 100%;
}

@media (max-width: 768px) {
  body[data-page] .js-form:not(.banner-search) {
    gap: 12px;
  }

  body[data-page] .js-form:not(.banner-search) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select),
  body[data-page] .banner-search input,
  body[data-page] .product-filters select {
    height: var(--form-control-height);
    min-height: var(--form-control-height);
    padding: 0 14px;
  }

  body[data-page] .banner-search button,
  body[data-page] .js-form:not(.banner-search) .btn,
  body[data-page] .js-form:not(.banner-search) button,
  body[data-page] .product-filters button {
    height: var(--form-control-height);
    min-height: var(--form-control-height);
  }

  body[data-page] .js-form:not(.banner-search) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea)::placeholder,
  body[data-page] .banner-search input::placeholder,
  body[data-page] .footer-cta__form input::placeholder {
    color: var(--form-placeholder);
    opacity: 1;
  }

  body[data-page] .js-form:not(.banner-search).is-submitted::after,
  body[data-page] .js-form.is-error::after {
    grid-column: 1 / -1;
    display: block;
    margin-top: 2px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: 12px;
    line-height: 1.5;
  }

  body[data-page] .js-form:not(.banner-search).is-submitted::after {
    content: "提交成功，我们会尽快与您联系。";
    border: 1px solid var(--form-success-border);
    color: var(--form-success-text);
    background: var(--form-success-bg);
  }

  body[data-page] .js-form.is-error::after {
    content: "提交未完成，请检查填写项后再试。";
    border: 1px solid var(--form-error-border);
    color: var(--form-error-text);
    background: var(--form-error-bg);
  }

  body[data-page] .form-message,
  body[data-page] .form-status,
  body[data-page] .form-alert {
    padding: 10px 12px;
    font-size: 12px;
  }

  body[data-page] :is(.banner-search, .search-form, .site-search, .header-search) {
    width: 100%;
    max-width: 100%;
    margin-top: 14px;
    height: calc(var(--form-control-height) + 2px);
    min-height: calc(var(--form-control-height) + 2px);
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
  }

  body[data-page] :is(.banner-search, .search-form, .site-search, .header-search):focus-within {
    border-color: var(--color-blue-700);
    box-shadow: 0 0 0 3px rgba(0, 70, 184, 0.12);
  }

  body[data-page] :is(.banner-search, .search-form, .site-search, .header-search) :is(input[type="search"], input:not([type="checkbox"]):not([type="radio"]):not([type="file"])) {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--form-control-height);
    min-height: var(--form-control-height);
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-page] :is(.banner-search, .search-form, .site-search, .header-search) button {
    flex: 0 0 auto;
    min-width: 82px;
    height: var(--form-control-height);
    min-height: var(--form-control-height);
    padding: 0 14px 0 34px;
    border: 0;
    border-left: 1px solid var(--color-border-strong);
    border-radius: 0;
    background-color: var(--color-blue-700);
    background-image: var(--search-icon);
    background-repeat: no-repeat;
    background-position: 14px 50%;
    background-size: 13px 13px;
    box-shadow: none;
    transform: none;
    font-size: 14px;
  }

  body[data-page] :is(.banner-search, .search-form, .site-search, .header-search) button:hover {
    background-color: var(--color-blue-600);
    transform: none;
  }

  body[data-page] :is(.banner-search, .search-form, .site-search, .header-search) input::placeholder {
    color: var(--form-placeholder);
    opacity: 1;
  }

  body[data-page] :is(.banner-search, .search-form, .site-search, .header-search) input[type="search"]::-webkit-search-decoration,
  body[data-page] :is(.banner-search, .search-form, .site-search, .header-search) input[type="search"]::-webkit-search-cancel-button,
  body[data-page] :is(.banner-search, .search-form, .site-search, .header-search) input[type="search"]::-webkit-search-results-button,
  body[data-page] :is(.banner-search, .search-form, .site-search, .header-search) input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
  }

  body[data-page] :is(
    .footer-cta__form,
    .product-inquiry-form,
    .product-inquiry-form--inline,
    .quick-plan-form,
    .solution-hero-form form,
    .about-contact-form,
    .contact-form,
    .home-quote-form,
    .news-subscribe form,
    .case-subscribe form,
    .banner-search,
    .search-form,
    .site-search,
    .header-search,
    .product-filters
  ) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
    font-size: 14px;
    line-height: 1.45;
  }

  body[data-page] :is(
    .footer-cta__form,
    .product-inquiry-form,
    .product-inquiry-form--inline,
    .quick-plan-form,
    .solution-hero-form form,
    .about-contact-form,
    .contact-form,
    .home-quote-form,
    .news-subscribe form,
    .case-subscribe form,
    .banner-search,
    .search-form,
    .site-search,
    .header-search,
    .product-filters
  ) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea)::placeholder {
    color: var(--form-placeholder);
    opacity: 1;
  }

  body[data-page] .footer-cta__form {
    gap: 10px;
  }

  body[data-page] .footer-cta__form .btn,
  body[data-page] .footer-cta__form button {
    width: 100%;
  }

  body[data-page="products"] .product-filters {
    gap: 10px;
    padding-bottom: 14px;
  }

  body[data-page="products"] .product-tabs a,
  body[data-page="products"] .product-filters label,
  body[data-page="products"] .product-filters button,
  body[data-page="products"] .product-result-bar button {
    min-height: 38px;
    font-size: 14px;
  }
}

@media (max-width: 992px) {
  body[data-page="solutions-s"] {
    padding-bottom: calc(env(safe-area-inset-bottom) + 92px);
    background: #f7faff;
  }

  body[data-page="solutions-s"] .page-banner,
  body[data-page="solutions-s"] .page-banner__inner {
    min-height: clamp(238px, 62vw, 268px);
  }

  body[data-page="solutions-s"] .page-banner__inner {
    padding-block: 24px 20px;
  }

  body[data-page="solutions-s"] .solutions-s-banner__content h1 {
    font-size: 28px;
    line-height: 1.18;
  }

  body[data-page="solutions-s"] .solutions-s-banner__content p {
    font-size: 15px;
    line-height: 1.45;
  }

  body[data-page="solutions-s"] .solutions-s-banner__content span {
    max-width: 320px;
    font-size: 13px;
    line-height: 1.55;
  }

  body[data-page="solutions-s"] .solution-hero__points {
    gap: 10px 16px;
    margin-top: 18px;
  }

  body[data-page="solutions-s"] .solution-hero__points strong {
    gap: 6px;
    font-size: 11px;
  }

  body[data-page="solutions-s"] .solution-hero__points strong::before {
    width: 26px;
    height: 26px;
    border-width: 1.5px;
  }

  body[data-page="solutions-s"] .solutions-s-breadcrumb {
    padding-top: 10px;
  }

  body[data-page="solutions-s"] .solutions-s-toolbar {
    padding-block: 12px 4px;
  }

  body[data-page="solutions-s"] .solutions-s-toolbar__inner {
    display: block;
  }

  body[data-page="solutions-s"] .solutions-s-toolbar__tabs {
    width: 100%;
    gap: 8px;
    padding: 10px 12px 8px;
    overflow-x: auto;
    border: 1px solid #dce6f3;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 22px rgba(0, 43, 102, 0.06);
  }

  body[data-page="solutions-s"] .solutions-s-toolbar__search {
    display: none;
  }

  body[data-page="solutions-s"] .solutions-s-stats {
    margin-top: 12px;
  }

  body[data-page="solutions-s"] .solutions-s-stats__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="solutions-s"] .solutions-s-stats__inner div {
    min-height: 78px;
    padding: 12px 12px 12px 14px;
    border-right: 0;
    border-bottom: 1px solid #e3edf8;
  }

  body[data-page="solutions-s"] .solutions-s-stats__inner div:nth-child(odd) {
    border-right: 1px solid #e3edf8;
  }

  body[data-page="solutions-s"] .solutions-s-stats__inner div:nth-child(n + 3) {
    border-bottom: 0;
  }

  body[data-page="solutions-s"] .solutions-s-stats__inner strong {
    font-size: 18px;
  }

  body[data-page="solutions-s"] .solutions-s-stats__inner span {
    font-size: 10px;
  }

  body[data-page="solutions-s"] .solutions-s-section {
    padding-block: 22px;
  }

  body[data-page="solutions-s"] .solutions-s-section .solution-section-title {
    margin-bottom: 16px;
  }

  body[data-page="solutions-s"] .solutions-s-section .solution-section-title h2 {
    font-size: 22px;
  }

  body[data-page="solutions-s"] .solutions-s-section .solution-section-title p {
    font-size: 12px;
  }

  body[data-page="solutions-s"] .solutions-s-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="solutions-s"] .solutions-s-card__media img {
    height: 116px;
  }

  body[data-page="solutions-s"] .solutions-s-card__icon {
    display: none;
  }

  body[data-page="solutions-s"] .solutions-s-card__body {
    gap: 6px;
    padding: 10px 10px 12px;
  }

  body[data-page="solutions-s"] .solutions-s-card h3 {
    font-size: 13px;
    line-height: 1.3;
  }

  body[data-page="solutions-s"] .solutions-s-card p {
    font-size: 11px;
    line-height: 1.45;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  body[data-page="solutions-s"] .solutions-s-card__tags {
    gap: 5px 8px;
  }

  body[data-page="solutions-s"] .solutions-s-card__tags li {
    padding-left: 12px;
    font-size: 9px;
  }

  body[data-page="solutions-s"] .solutions-s-card__tags li::before {
    top: 6px;
    width: 5px;
    height: 5px;
  }

  body[data-page="solutions-s"] .solutions-s-card__more {
    display: none;
  }

  body[data-page="solutions-s"] .solutions-s-pagination {
    margin-top: 18px;
  }

  body[data-page="solutions-s"] .solutions-s-inquiry {
    padding-block: 12px 20px;
  }

  body[data-page="solutions-s"] .solutions-s-inquiry .product-inquiry__inner {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px 14px 18px;
    border-radius: 18px;
    text-align: center;
  }

  body[data-page="solutions-s"] .solutions-s-inquiry .product-inquiry__copy h2 {
    font-size: 24px;
  }

  body[data-page="solutions-s"] .solutions-s-inquiry .product-inquiry__copy p {
    font-size: 12px;
  }

  body[data-page="solutions-s"] .solutions-s-inquiry .product-inquiry-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-page="solutions-s"] .solutions-s-inquiry .product-inquiry-form input,
  body[data-page="solutions-s"] .solutions-s-inquiry .product-inquiry-form select,
  body[data-page="solutions-s"] .solutions-s-inquiry .product-inquiry-form button {
    width: 100%;
    height: 44px;
  }

  body[data-page="solutions-s"] .solutions-s-inquiry .product-inquiry-form select,
  body[data-page="solutions-s"] .solutions-s-inquiry .product-inquiry-form input[name="message"] {
    grid-column: 1 / -1;
  }

  body[data-page="solutions-s"] .solutions-s-inquiry .product-inquiry-form input[name="message"] {
    height: 88px !important;
    min-height: 88px;
    padding-top: 12px;
    padding-bottom: 12px;
    align-self: stretch;
  }

  body[data-page="solutions-s"] .solutions-s-inquiry .product-inquiry-form button {
    grid-column: 1 / -1;
    width: 100%;
  }

  body[data-page="solutions-s"] .mobile-bottom-nav--cases,
  body[data-page="solutions-s"] .mobile-bottom-nav--news,
  body[data-page="solutions-s"] .mobile-bottom-nav--contact,
  body[data-page="solutions-s"] .mobile-bottom-nav--support {
    display: none;
  }

  body[data-page="solutions-s"] .floating-contact {
    display: none !important;
  }
}

@media (min-width: 381px) and (max-width: 768px) {
  body[data-page="solutions-s"] .solutions-s-stats__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body[data-page="solutions-s"] .solutions-s-stats__inner div {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    justify-items: center;
    gap: 6px;
    min-height: 96px;
    padding: 12px 8px;
    border-right: 1px solid #e3edf8;
    border-bottom: 0;
    text-align: center;
  }

  body[data-page="solutions-s"] .solutions-s-stats__inner div:last-child {
    border-right: 0;
  }

  body[data-page="solutions-s"] .solutions-s-stats__icon {
    grid-row: auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }

  body[data-page="solutions-s"] .solutions-s-stats__icon svg {
    width: 16px;
    height: 16px;
  }

  body[data-page="solutions-s"] .solutions-s-stats__inner strong {
    font-size: 16px;
  }

  body[data-page="solutions-s"] .solutions-s-stats__inner span {
    margin-top: 0;
    font-size: 9px;
    line-height: 1.35;
  }
}

@media (max-width: 380px) {
  body[data-page="solutions-s"] .page-banner,
  body[data-page="solutions-s"] .page-banner__inner {
    min-height: 224px;
  }

  body[data-page="solutions-s"] .page-banner__inner {
    padding-block: 20px 16px;
  }

  body[data-page="solutions-s"] .solutions-s-banner__content h1 {
    font-size: 26px;
  }

  body[data-page="solutions-s"] .solutions-s-banner__content p {
    font-size: 14px;
  }

  body[data-page="solutions-s"] .solutions-s-banner__content span {
    max-width: 260px;
    font-size: 12px;
  }

  body[data-page="solutions-s"] .solution-hero__points {
    gap: 8px 12px;
    margin-top: 14px;
  }

  body[data-page="solutions-s"] .solution-hero__points strong {
    font-size: 10px;
  }

  body[data-page="solutions-s"] .solutions-s-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="solutions-s"] .solutions-s-card__media img {
    height: 134px;
  }

  body[data-page="solutions-s"] .solutions-s-card h3 {
    font-size: 15px;
  }

  body[data-page="solutions-s"] .solutions-s-card p {
    font-size: 12px;
  }

  body[data-page="solutions-s"] .solutions-s-card__more {
    display: inline-flex;
  }

  body[data-page="solutions-s"] .solutions-s-inquiry .product-inquiry-form {
    grid-template-columns: 1fr;
  }

  body[data-page="solutions-s"] .solutions-s-inquiry .product-inquiry-form select,
  body[data-page="solutions-s"] .solutions-s-inquiry .product-inquiry-form input[name="message"] {
    grid-column: auto;
  }

  body[data-page="solutions-s"] .solutions-s-inquiry .product-inquiry-form button {
    grid-column: 1 / -1;
  }
}

/* Solutions-s mobile rebuild: reference-template alignment, mobile only. */
@media (max-width: 768px) {
  body[data-page="solutions-s"] {
    background: #f7faff;
    overflow-x: hidden;
    padding-bottom: 0;
  }

  body[data-page="solutions-s"].has-main-bottom-nav {
    padding-bottom: 0 !important;
  }

  body[data-page="solutions-s"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 12px;
  }

  body[data-page="solutions-s"] .solutions-s-page > .page-banner,
  body[data-page="solutions-s"] .solutions-s-page > .solutions-s-breadcrumb,
  body[data-page="solutions-s"] .solutions-s-page > .solutions-s-toolbar,
  body[data-page="solutions-s"] .solutions-s-page > .solutions-s-stats,
  body[data-page="solutions-s"] .solutions-s-page > .solutions-s-section,
  body[data-page="solutions-s"] .solutions-s-page > .solutions-s-inquiry {
    display: none !important;
  }

  body[data-page="solutions-s"] .solutions-s-mobile {
    display: block;
    padding: 12px 0 18px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 0 4px;
    color: #7f8ca4;
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__breadcrumb a,
  body[data-page="solutions-s"] .solutions-s-mobile__breadcrumb strong {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero {
    position: relative;
    min-height: clamp(220px, 58vw, 270px);
    margin-bottom: 12px;
    border-radius: 16px;
    overflow: hidden;
    background: #082153;
    box-shadow: 0 16px 36px rgba(3, 28, 72, 0.18);
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg, rgba(3, 20, 56, 0.94), rgba(3, 20, 56, 0.46) 54%, rgba(3, 20, 56, 0.14));
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero-content {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    padding: 20px 18px 18px;
    color: #fff;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(173, 202, 255, 0.58);
    background: rgba(71, 129, 255, 0.26);
    font-size: 12px;
    font-weight: 800;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero h1 {
    margin: 0;
    font-size: clamp(24px, 6.8vw, 28px);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0.2px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero p {
    margin: 0;
    max-width: 21em;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    line-height: 1.65;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__section {
    margin-bottom: 12px;
    padding: 18px 14px 16px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(7, 30, 80, 0.08);
  }

  body[data-page="solutions-s"] .solutions-s-mobile__section h2 {
    margin: 0 0 12px;
    color: #0c2348;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__overview-copy {
    margin-bottom: 14px;
    padding: 12px 12px;
    border-radius: 12px;
    background: #edf5ff;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__overview-copy p {
    margin: 0;
    color: #5a6781;
    font-size: 14px;
    line-height: 1.75;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__kpi {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__kpi article {
    display: grid;
    justify-items: center;
    gap: 5px;
    min-width: 0;
    padding: 4px 2px;
    text-align: center;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__metric-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(11, 91, 211, 0.10);
    color: #0a4dcd;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__metric-icon svg {
    width: 18px;
    height: 18px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__kpi strong {
    color: #0a4dcd;
    font-size: clamp(18px, 4.8vw, 22px);
    line-height: 1;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__kpi small {
    color: #60708c;
    font-size: 10px;
    line-height: 1.35;
    font-weight: 700;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__advantage-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__advantage-row article {
    display: grid;
    justify-items: center;
    gap: 5px;
    min-width: 0;
    padding: 4px 2px 2px;
    text-align: center;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__advantage-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(11, 91, 211, 0.10);
    color: #0a4dcd;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__advantage-icon svg {
    width: 17px;
    height: 17px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__advantage-row strong {
    color: #12396f;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__advantage-row p {
    margin: 0;
    color: #67748e;
    font-size: 9px;
    line-height: 1.45;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__process-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__process-row article {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 5px;
    min-width: 0;
    padding: 2px 2px 0;
    text-align: center;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__process-row article:not(:last-child)::after {
    content: "›";
    position: absolute;
    top: 12px;
    right: -8px;
    color: #7c95c5;
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__process-row span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    border-radius: 50%;
    background: #1454d0;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__process-row strong {
    color: #12396f;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__process-row small {
    color: #67748e;
    font-size: 9px;
    line-height: 1.35;
    font-weight: 700;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__section-head h2 {
    margin-bottom: 0;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__section-head a {
    color: #0f56d6;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__device-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__device-card {
    overflow: hidden;
    border: 1px solid #d9e7ff;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(7, 30, 80, 0.08);
  }

  body[data-page="solutions-s"] .solutions-s-mobile__device-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__device-card h3 {
    margin: 10px 10px 6px;
    color: #112f61;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 850;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__device-card p {
    margin: 0 10px 8px;
    color: #61708d;
    font-size: 11px;
    line-height: 1.55;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__device-card a {
    display: inline-flex;
    margin: 0 10px 12px;
    color: #0f56d6;
    font-size: 12px;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-card {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid #deebff;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(7, 30, 80, 0.08);
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-card img {
    width: 124px;
    height: 92px;
    border-radius: 10px;
    object-fit: cover;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-copy h3 {
    margin: 0 0 6px;
    color: #112f61;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-copy p {
    margin: 0;
    color: #5f6c87;
    font-size: 11px;
    line-height: 1.6;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #dbe8fb;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-metrics div {
    text-align: center;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-metrics strong {
    display: block;
    color: #0a4dcd;
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-metrics span {
    display: block;
    margin-top: 4px;
    color: #6a7690;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 700;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c9d8f3;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-dots span.is-active {
    width: 18px;
    border-radius: 999px;
    background: #0f56d6;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 116px;
    gap: 10px;
    margin-bottom: 12px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0f57d7 0%, #01339d 100%);
    color: #fff;
    box-shadow: 0 18px 42px rgba(0, 20, 52, 0.22);
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 6px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta-copy strong {
    font-size: clamp(20px, 5.6vw, 24px);
    line-height: 1.15;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    line-height: 1.45;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta-actions {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-self: end;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta-actions .btn {
    width: 100%;
    min-height: 42px;
    padding-inline: 8px;
    border-radius: 12px;
    justify-content: center;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta-media {
    position: absolute;
    right: -8px;
    bottom: -6px;
    width: 124px;
    height: 132px;
    border-radius: 22px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
      var(--banner-image, url("../images/banners/default-industrial-factory.png"));
    background-position: center;
    background-size: cover;
    opacity: 0.48;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer {
    overflow: hidden;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(180deg, #0a2152 0%, #03163a 100%);
    color: #fff;
    box-shadow: 0 18px 40px rgba(0, 20, 52, 0.18);
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 14px;
    padding: 18px 16px 12px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-company h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-company p {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-company ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, 0.88);
    font-size: 11px;
    line-height: 1.35;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-qr {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 8px;
    text-align: center;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-qr img {
    width: 84px;
    height: 84px;
    border-radius: 10px;
    object-fit: cover;
    border: 5px solid rgba(255, 255, 255, 0.9);
    background: #fff;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-qr strong {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-links {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 0 12px 12px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-links a {
    color: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    line-height: 1.35;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-bottom p {
    margin: 0;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-bottom nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-bottom a {
    color: rgba(255, 255, 255, 0.78);
  }
}

@media (max-width: 390px) {
  body[data-page="solutions-s"] .solutions-s-mobile__hero h1,
  body[data-page="solutions-s"] .solutions-s-mobile__cta-copy strong {
    font-size: 22px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero {
    min-height: 224px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero-content {
    padding: 18px 16px 16px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__advantage-row p,
  body[data-page="solutions-s"] .solutions-s-mobile__process-row small {
    font-size: 8px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-card {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-card img {
    width: 112px;
    height: 86px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta {
    grid-template-columns: minmax(0, 1fr) 104px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta-media {
    width: 110px;
    height: 124px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-main {
    grid-template-columns: minmax(0, 1fr) 84px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-qr img {
    width: 78px;
    height: 78px;
  }
}

/* Solutions-s final mobile override to outrank the older solutions-s block above. */
@media (max-width: 768px) {
  body[data-page="solutions-s"] {
    background: #f7faff;
    overflow-x: hidden;
    padding-bottom: 0;
  }

  body[data-page="solutions-s"].has-main-bottom-nav {
    padding-bottom: 0 !important;
  }

  body[data-page="solutions-s"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 12px;
  }

  body[data-page="solutions-s"] .solutions-s-page > .page-banner,
  body[data-page="solutions-s"] .solutions-s-page > .solutions-s-breadcrumb,
  body[data-page="solutions-s"] .solutions-s-page > .solutions-s-toolbar,
  body[data-page="solutions-s"] .solutions-s-page > .solutions-s-stats,
  body[data-page="solutions-s"] .solutions-s-page > .solutions-s-section,
  body[data-page="solutions-s"] .solutions-s-page > .solutions-s-inquiry {
    display: none !important;
  }

  body[data-page="solutions-s"] .solutions-s-mobile {
    display: block;
    padding: 12px 0 18px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 0 4px;
    color: #7f8ca4;
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__breadcrumb a,
  body[data-page="solutions-s"] .solutions-s-mobile__breadcrumb strong {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero {
    position: relative;
    min-height: clamp(220px, 58vw, 270px);
    margin-bottom: 12px;
    border-radius: 16px;
    overflow: hidden;
    background: #082153;
    box-shadow: 0 16px 36px rgba(3, 28, 72, 0.18);
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg, rgba(3, 20, 56, 0.94), rgba(3, 20, 56, 0.46) 54%, rgba(3, 20, 56, 0.14));
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero-content {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    padding: 20px 18px 18px;
    color: #fff;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(173, 202, 255, 0.58);
    background: rgba(71, 129, 255, 0.26);
    font-size: 12px;
    font-weight: 800;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero h1 {
    margin: 0;
    font-size: clamp(24px, 6.8vw, 28px);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0.2px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero p {
    margin: 0;
    max-width: 21em;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    line-height: 1.65;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__section {
    margin-bottom: 12px;
    padding: 18px 14px 16px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(7, 30, 80, 0.08);
  }

  body[data-page="solutions-s"] .solutions-s-mobile__section h2 {
    margin: 0 0 12px;
    color: #0c2348;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__overview-copy {
    margin-bottom: 14px;
    padding: 12px 12px;
    border-radius: 12px;
    background: #edf5ff;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__overview-copy p {
    margin: 0;
    color: #5a6781;
    font-size: 14px;
    line-height: 1.75;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__kpi {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__kpi article {
    display: grid;
    justify-items: center;
    gap: 5px;
    min-width: 0;
    padding: 4px 2px;
    text-align: center;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__metric-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(11, 91, 211, 0.10);
    color: #0a4dcd;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__metric-icon svg {
    width: 18px;
    height: 18px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__kpi strong {
    color: #0a4dcd;
    font-size: clamp(18px, 4.8vw, 22px);
    line-height: 1;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__kpi small {
    color: #60708c;
    font-size: 10px;
    line-height: 1.35;
    font-weight: 700;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__advantage-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__advantage-row article {
    display: grid;
    justify-items: center;
    gap: 5px;
    min-width: 0;
    padding: 4px 2px 2px;
    text-align: center;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__advantage-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(11, 91, 211, 0.10);
    color: #0a4dcd;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__advantage-icon svg {
    width: 17px;
    height: 17px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__advantage-row strong {
    color: #12396f;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__advantage-row p {
    margin: 0;
    color: #67748e;
    font-size: 9px;
    line-height: 1.45;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__process-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__process-row article {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 5px;
    min-width: 0;
    padding: 2px 2px 0;
    text-align: center;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__process-row article:not(:last-child)::after {
    content: "›";
    position: absolute;
    top: 12px;
    right: -8px;
    color: #7c95c5;
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__process-row span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    border-radius: 50%;
    background: #1454d0;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__process-row strong {
    color: #12396f;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__process-row small {
    color: #67748e;
    font-size: 9px;
    line-height: 1.35;
    font-weight: 700;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__section-head h2 {
    margin-bottom: 0;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__section-head a {
    color: #0f56d6;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__device-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__device-card {
    overflow: hidden;
    border: 1px solid #d9e7ff;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(7, 30, 80, 0.08);
  }

  body[data-page="solutions-s"] .solutions-s-mobile__device-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__device-card h3 {
    margin: 10px 10px 6px;
    color: #112f61;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 850;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__device-card p {
    margin: 0 10px 8px;
    color: #61708d;
    font-size: 11px;
    line-height: 1.55;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__device-card a {
    display: inline-flex;
    margin: 0 10px 12px;
    color: #0f56d6;
    font-size: 12px;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-card {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid #deebff;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(7, 30, 80, 0.08);
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-card img {
    width: 124px;
    height: 92px;
    border-radius: 10px;
    object-fit: cover;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-copy h3 {
    margin: 0 0 6px;
    color: #112f61;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-copy p {
    margin: 0;
    color: #5f6c87;
    font-size: 11px;
    line-height: 1.6;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #dbe8fb;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-metrics div {
    text-align: center;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-metrics strong {
    display: block;
    color: #0a4dcd;
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-metrics span {
    display: block;
    margin-top: 4px;
    color: #6a7690;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 700;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c9d8f3;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-dots span.is-active {
    width: 18px;
    border-radius: 999px;
    background: #0f56d6;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 116px;
    gap: 10px;
    margin-bottom: 12px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0f57d7 0%, #01339d 100%);
    color: #fff;
    box-shadow: 0 18px 42px rgba(0, 20, 52, 0.22);
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 6px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta-copy strong {
    font-size: clamp(20px, 5.6vw, 24px);
    line-height: 1.15;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    line-height: 1.45;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta-actions {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-self: end;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta-actions .btn {
    width: 100%;
    min-height: 42px;
    padding-inline: 8px;
    border-radius: 12px;
    justify-content: center;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta-media {
    position: absolute;
    right: -8px;
    bottom: -6px;
    width: 124px;
    height: 132px;
    border-radius: 22px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
      var(--banner-image, url("../images/banners/default-industrial-factory.png"));
    background-position: center;
    background-size: cover;
    opacity: 0.48;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer {
    overflow: hidden;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(180deg, #0a2152 0%, #03163a 100%);
    color: #fff;
    box-shadow: 0 18px 40px rgba(0, 20, 52, 0.18);
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 14px;
    padding: 18px 16px 12px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-company h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-company p {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-company ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, 0.88);
    font-size: 11px;
    line-height: 1.35;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-qr {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 8px;
    text-align: center;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-qr img {
    width: 84px;
    height: 84px;
    border-radius: 10px;
    object-fit: cover;
    border: 5px solid rgba(255, 255, 255, 0.9);
    background: #fff;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-qr strong {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-links {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 0 12px 12px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-links a {
    color: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    line-height: 1.35;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-bottom p {
    margin: 0;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-bottom nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-bottom a {
    color: rgba(255, 255, 255, 0.78);
  }
}

@media (max-width: 390px) {
  body[data-page="solutions-s"] .solutions-s-mobile__hero h1,
  body[data-page="solutions-s"] .solutions-s-mobile__cta-copy strong {
    font-size: 22px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero {
    min-height: 224px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero-content {
    padding: 18px 16px 16px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__advantage-row p,
  body[data-page="solutions-s"] .solutions-s-mobile__process-row small {
    font-size: 8px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-card {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-card img {
    width: 112px;
    height: 86px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta {
    grid-template-columns: minmax(0, 1fr) 104px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta-media {
    width: 110px;
    height: 124px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-main {
    grid-template-columns: minmax(0, 1fr) 84px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-qr img {
    width: 78px;
    height: 78px;
  }
}

@media (max-width: 768px) {
  body[data-page="solutions-y"] .page-banner,
  body[data-page="solutions-y"] .page-banner__inner {
    min-height: clamp(214px, 56vw, 228px);
  }

  body[data-page="solutions-y"] .page-banner__inner {
    padding-block: 20px 16px;
  }

  body[data-page="solutions-y"] .solutions-y-banner__content h1 {
    font-size: clamp(24px, 6.8vw, 30px);
    line-height: 1.18;
  }

  body[data-page="solutions-y"] .solutions-y-banner__content > p {
    max-width: 100%;
    font-size: clamp(14px, 3.9vw, 15px);
    line-height: 1.55;
  }

  body[data-page="solutions-y"] .solutions-y-banner__points {
    gap: 8px 12px;
    margin-top: 14px;
  }

  body[data-page="solutions-y"] .solutions-y-banner__points span {
    gap: 6px;
  }

  body[data-page="solutions-y"] .solutions-y-banner__points i {
    width: 22px;
    height: 22px;
  }

  body[data-page="solutions-y"] .solutions-y-banner__points small {
    font-size: 10px;
  }

  body[data-page="solutions-y"] .solutions-y-tabs {
    margin-top: -14px;
  }

  body[data-page="solutions-y"] .solutions-y-tabs__nav {
    gap: 8px;
    padding: 9px 10px;
  }

  body[data-page="solutions-y"] .solutions-y-tabs__nav a {
    min-height: 34px;
    padding: 0 12px;
    font-size: 11px;
  }

  body[data-page="solutions-y"] .solutions-y-section {
    padding-block: 20px;
  }

  body[data-page="solutions-y"] .solutions-y-section-heading {
    margin-bottom: 14px;
  }

  body[data-page="solutions-y"] .solutions-y-section-heading h2 {
    font-size: clamp(22px, 5.8vw, 24px);
  }

  body[data-page="solutions-y"] .solutions-y-section-heading p {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="solutions-y"] .solutions-y-overview__inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body[data-page="solutions-y"] .solutions-y-overview__media img {
    min-height: 220px;
  }

  body[data-page="solutions-y"] .solutions-y-metrics {
    max-width: none;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="solutions-y"] .solutions-y-metric {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    min-height: 82px;
    padding: 12px;
  }

  body[data-page="solutions-y"] .solutions-y-metric__icon {
    width: 36px;
    height: 36px;
  }

  body[data-page="solutions-y"] .solutions-y-metric__icon svg {
    width: 18px;
    height: 18px;
  }

  body[data-page="solutions-y"] .solutions-y-metric strong {
    font-size: clamp(18px, 4.8vw, 20px);
  }

  body[data-page="solutions-y"] .solutions-y-metric small {
    font-size: 10px;
  }

  body[data-page="solutions-y"] .solutions-y-scenario-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="solutions-y"] .solutions-y-scenario-card__icon {
    display: none;
  }

  body[data-page="solutions-y"] .solutions-y-scenario-card img {
    height: 112px;
  }

  body[data-page="solutions-y"] .solutions-y-scenario-card__body {
    gap: 6px;
    padding: 10px 10px 12px;
  }

  body[data-page="solutions-y"] .solutions-y-scenario-card h3 {
    font-size: 14px;
  }

  body[data-page="solutions-y"] .solutions-y-scenario-card p {
    font-size: 11px;
    line-height: 1.5;
  }

  body[data-page="solutions-y"] .solutions-y-scenario-card li {
    font-size: 10px;
  }

  body[data-page="solutions-y"] .solutions-y-scenario-card__more {
    display: none;
  }

  body[data-page="solutions-y"] .solutions-y-advantages__panel {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-page="solutions-y"] .solutions-y-advantages__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body[data-page="solutions-y"] .solutions-y-advantage {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 4px 12px;
    justify-items: stretch;
    align-items: center;
    padding: 14px 14px 14px 12px;
    border: 1px solid #dce6f3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(0, 43, 102, 0.06);
    text-align: left;
  }

  body[data-page="solutions-y"] .solutions-y-advantage + .solutions-y-advantage {
    border-left: 1px solid #dce6f3;
  }

  body[data-page="solutions-y"] .solutions-y-advantage__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 54px;
    height: 54px;
  }

  body[data-page="solutions-y"] .solutions-y-advantage__icon svg {
    width: 22px;
    height: 22px;
  }

  body[data-page="solutions-y"] .solutions-y-advantage strong {
    grid-column: 2;
    grid-row: 1;
    font-size: 15px;
  }

  body[data-page="solutions-y"] .solutions-y-advantage p {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    font-size: 11px;
    line-height: 1.5;
  }

  body[data-page="solutions-y"] .solutions-y-process__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 8px;
  }

  body[data-page="solutions-y"] .solutions-y-process__item::after {
    content: "→";
    position: absolute;
    top: 18px;
    right: -10px;
    color: #8daedc;
    font-size: 16px;
    line-height: 1;
    display: block;
  }

  body[data-page="solutions-y"] .solutions-y-process__item:nth-child(3n)::after {
    display: none;
  }

  body[data-page="solutions-y"] .solutions-y-process__item span {
    width: 46px;
    height: 46px;
    border: 1px solid #dce6f3;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 43, 102, 0.06);
  }

  body[data-page="solutions-y"] .solutions-y-process__item span svg {
    width: 20px;
    height: 20px;
  }

  body[data-page="solutions-y"] .solutions-y-process__item strong {
    font-size: 11px;
  }

  body[data-page="solutions-y"] .solutions-y-process__item small {
    font-size: 10px;
    line-height: 1.3;
  }

  body[data-page="solutions-y"] .solutions-y-inquiry {
    padding-block: 12px 16px;
  }

  body[data-page="solutions-y"] .solutions-y-inquiry .product-inquiry__inner {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px 16px 18px;
    text-align: center;
  }

  body[data-page="solutions-y"] .solutions-y-inquiry .product-inquiry__copy h2 {
    font-size: clamp(20px, 5.6vw, 24px);
  }

  body[data-page="solutions-y"] .solutions-y-inquiry .product-inquiry__copy p {
    font-size: 12px;
  }

  body[data-page="solutions-y"] .solutions-y-inquiry .product-inquiry-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="solutions-y"] .solutions-y-inquiry .product-inquiry-form input,
  body[data-page="solutions-y"] .solutions-y-inquiry .product-inquiry-form select,
  body[data-page="solutions-y"] .solutions-y-inquiry .product-inquiry-form textarea,
  body[data-page="solutions-y"] .solutions-y-inquiry .product-inquiry-form button {
    width: 100%;
  }

  body[data-page="solutions-y"] .solutions-y-inquiry .product-inquiry-form textarea {
    grid-column: 1 / -1;
  }

  body[data-page="solutions-y"] .solutions-y-inquiry .product-inquiry-form button {
    grid-column: 1 / -1;
    width: 100%;
  }

}

/* contact-a.html service network page */
body.contact-a-page .contact-a-mobile {
  display: none;
}

@media (max-width: 768px) {
  body.contact-a-page {
    overflow-x: hidden;
    background: #f3f6fb;
  }

  body.contact-a-page .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 14px;
  }

  body.contact-a-page .contact-a-mobile[hidden] {
    display: block !important;
  }

  body.contact-a-page .contact-a-mobile {
    padding: 10px 0 22px;
  }

  body.contact-a-page .contact-a-mobile__breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 11px;
    color: #7f8ba1;
    white-space: nowrap;
    overflow: hidden;
  }

  body.contact-a-page .contact-a-mobile__breadcrumb a,
  body.contact-a-page .contact-a-mobile__breadcrumb strong {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.contact-a-page .contact-a-mobile__hero {
    position: relative;
    min-height: 230px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 12px;
    background: #082153;
    box-shadow: 0 16px 34px rgba(7, 30, 80, 0.16);
  }

  body.contact-a-page .contact-a-mobile__hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body.contact-a-page .contact-a-mobile__hero-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(3, 24, 66, 0.9), rgba(3, 24, 66, 0.34));
  }

  body.contact-a-page .contact-a-mobile__hero-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    padding: 18px 16px;
    color: #fff;
  }

  body.contact-a-page .contact-a-mobile__hero-copy h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.18;
    font-weight: 900;
  }

  body.contact-a-page .contact-a-mobile__hero-subtitle {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 800;
  }

  body.contact-a-page .contact-a-mobile__hero-desc {
    margin: 0;
    max-width: 24em;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
  }

  body.contact-a-page .contact-a-mobile__search,
  body.contact-a-page .contact-a-mobile__tabs,
  body.contact-a-page .contact-a-mobile__list,
  body.contact-a-page .contact-a-mobile__map,
  body.contact-a-page .contact-a-mobile__coverage,
  body.contact-a-page .contact-a-mobile__cta {
    margin-bottom: 12px;
  }

  body.contact-a-page .contact-a-mobile__search,
  body.contact-a-page .contact-a-mobile__tabs,
  body.contact-a-page .contact-a-mobile__list,
  body.contact-a-page .contact-a-mobile__map,
  body.contact-a-page .contact-a-mobile__coverage {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(7, 30, 80, 0.08);
  }

  body.contact-a-page .contact-a-mobile__search {
    padding: 14px;
  }

  body.contact-a-page .contact-a-mobile .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  body.contact-a-page .contact-a-mobile__section-head {
    margin-bottom: 10px;
  }

  body.contact-a-page .contact-a-mobile__section-head h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
    color: #102e5c;
    font-weight: 900;
  }

  body.contact-a-page .contact-a-mobile__section-head p {
    margin: 4px 0 0;
    font-size: 11px;
    color: #6c7890;
  }

  body.contact-a-page .contact-a-mobile__search-form {
    display: grid;
    gap: 10px;
  }

  body.contact-a-page .contact-a-mobile__field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    border: 1px solid #dbe6fb;
    border-radius: 12px;
    background: #fff;
    padding: 0 12px;
  }

  body.contact-a-page .contact-a-mobile__field svg {
    width: 16px;
    height: 16px;
    color: #6b7e9f;
    flex: 0 0 auto;
  }

  body.contact-a-page .contact-a-mobile__field input,
  body.contact-a-page .contact-a-mobile__field select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    color: #0f1b2d;
  }

  body.contact-a-page .contact-a-mobile__field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 8px;
  }

  body.contact-a-page .contact-a-mobile__field--select::after {
    content: none;
  }

  body.contact-a-page .contact-a-mobile__field--select svg:last-child {
    margin-left: auto;
  }

  body.contact-a-page .contact-a-mobile__search-form .btn {
    width: 100%;
    min-height: 44px;
    border-radius: 12px;
  }

  body.contact-a-page .contact-a-mobile__tabs {
    padding: 12px 12px 10px;
  }

  body.contact-a-page .contact-a-mobile__tabs-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  body.contact-a-page .contact-a-mobile__tabs-scroll button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #dbe6fb;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    font-weight: 800;
    color: #28466f;
  }

  body.contact-a-page .contact-a-mobile__tabs-scroll button.is-active {
    background: #0f57d7;
    border-color: #0f57d7;
    color: #fff;
  }

  body.contact-a-page .contact-a-mobile__list {
    padding: 14px;
  }

  body.contact-a-page .contact-a-mobile__section-head--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  body.contact-a-page .contact-a-mobile__switch-map {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #cfdcff;
    background: #f6f9ff;
    color: #0f57d7;
    font-size: 12px;
    font-weight: 800;
  }

  body.contact-a-page .contact-a-mobile__item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 14px 12px;
    border: 1px solid #e1ecff;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(7, 30, 80, 0.06);
    margin-bottom: 10px;
    align-items: start;
  }

  body.contact-a-page .contact-a-mobile__item:last-child {
    margin-bottom: 0;
  }

  body.contact-a-page .contact-a-mobile__index {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0f57d7;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(15, 87, 215, 0.28);
  }

  body.contact-a-page .contact-a-mobile__item-body {
    display: grid;
    gap: 7px;
    min-width: 0;
  }

  body.contact-a-page .contact-a-mobile__item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }

  body.contact-a-page .contact-a-mobile__item-head h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
    color: #102e5c;
    font-weight: 900;
  }

  body.contact-a-page .contact-a-mobile__item-head span {
    flex: 0 0 auto;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #ebf3ff;
    color: #0f57d7;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }

  body.contact-a-page .contact-a-mobile__item-address {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: #5a6781;
  }

  body.contact-a-page .contact-a-mobile__item-meta {
    display: grid;
    gap: 6px;
  }

  body.contact-a-page .contact-a-mobile__item-meta li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    line-height: 1.45;
    color: #5a6781;
  }

  body.contact-a-page .contact-a-mobile__item-meta svg {
    width: 14px;
    height: 14px;
    color: #0f57d7;
    flex: 0 0 auto;
  }

  body.contact-a-page .contact-a-mobile__item-meta a {
    color: #0f57d7;
    font-weight: 800;
  }

  body.contact-a-page .contact-a-mobile__route {
    align-self: center;
    color: #0f57d7;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
  }

  body.contact-a-page .contact-a-mobile__map {
    padding: 14px;
  }

  body.contact-a-page .contact-a-mobile__map-stage {
    position: relative;
    overflow: hidden;
    min-height: 280px;
    border-radius: 16px;
    background:
      linear-gradient(180deg, rgba(237, 243, 252, 0.82), rgba(214, 231, 248, 0.92)),
      url("../images/placeholder.jpg") center/cover no-repeat;
  }

  body.contact-a-page .contact-a-mobile__map-stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.18;
  }

  body.contact-a-page .contact-a-mobile__map-overlay {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(120px 80px at 18% 28%, rgba(15, 87, 215, 0.18), transparent 60%),
      radial-gradient(130px 90px at 70% 52%, rgba(255, 122, 26, 0.14), transparent 60%);
  }

  body.contact-a-page .contact-a-mobile__map-pin {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #12396f;
    font-size: 11px;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(7, 30, 80, 0.16);
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }

  body.contact-a-page .contact-a-mobile__map-pin::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
    background: #0f57d7;
    box-shadow: 0 0 0 4px rgba(15, 87, 215, 0.18);
  }

  body.contact-a-page .contact-a-mobile__map-pin--main {
    background: #0f57d7;
    color: #fff;
  }

  body.contact-a-page .contact-a-mobile__map-pin--main::before {
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
  }

  body.contact-a-page .contact-a-mobile__map-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 11px;
    color: #60728f;
  }

  body.contact-a-page .contact-a-mobile__map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  body.contact-a-page .contact-a-mobile__map-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7a8ca8;
  }

  body.contact-a-page .contact-a-mobile__map-legend i.is-main {
    background: #0f57d7;
  }

  body.contact-a-page .contact-a-mobile__coverage {
    padding: 14px;
  }

  body.contact-a-page .contact-a-mobile__coverage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.contact-a-page .contact-a-mobile__coverage-grid article {
    border: 1px solid #e1ecff;
    border-radius: 16px;
    background: #f8fbff;
    padding: 14px 12px;
    text-align: center;
    display: grid;
    gap: 8px;
    min-height: 148px;
  }

  body.contact-a-page .contact-a-mobile__coverage-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    background: #eaf2ff;
    color: #0f57d7;
  }

  body.contact-a-page .contact-a-mobile__coverage-icon--green {
    background: #eaf8ef;
    color: #20a85d;
  }

  body.contact-a-page .contact-a-mobile__coverage-icon--orange {
    background: #fff2e6;
    color: #ff7a1a;
  }

  body.contact-a-page .contact-a-mobile__coverage-icon--purple {
    background: #f1ecff;
    color: #6b5df0;
  }

  body.contact-a-page .contact-a-mobile__coverage-icon svg {
    width: 22px;
    height: 22px;
  }

  body.contact-a-page .contact-a-mobile__coverage-grid strong {
    color: #12396f;
    font-size: 14px;
    font-weight: 900;
  }

  body.contact-a-page .contact-a-mobile__coverage-grid p {
    margin: 0;
    color: #5b6983;
    font-size: 12px;
    line-height: 1.55;
  }

  body.contact-a-page .contact-a-mobile__cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 16px;
    background: #eaf2ff;
    color: #14396b;
    box-shadow: 0 12px 28px rgba(7, 30, 80, 0.08);
  }

  body.contact-a-page .contact-a-mobile__cta-copy {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
  }

  body.contact-a-page .contact-a-mobile__cta-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #0f57d7;
    box-shadow: 0 8px 18px rgba(15, 87, 215, 0.12);
  }

  body.contact-a-page .contact-a-mobile__cta-icon svg {
    width: 18px;
    height: 18px;
  }

  body.contact-a-page .contact-a-mobile__cta-copy strong {
    display: block;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 900;
    color: #12396f;
  }

  body.contact-a-page .contact-a-mobile__cta-copy p {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: #5d6d85;
  }

  body.contact-a-page .contact-a-mobile__cta .btn {
    min-height: 42px;
    border-radius: 12px;
    padding-inline: 16px;
    white-space: nowrap;
  }

  body.contact-a-page .contact-hero,
  body.contact-a-page .contact-a-filter-shell,
  body.contact-a-page .contact-a-network,
  body.contact-a-page .contact-a-cta {
    display: none;
  }

  body.contact-a-page .contact-a-hero__stats,
  body.contact-a-page .contact-hotline-card {
    display: none;
  }

  body.contact-a-page .contact-a-page {
    padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
  }

  body.contact-a-page .mobile-bottom-nav,
  body.contact-a-page .floating-contact {
    display: none !important;
  }

  body.contact-a-page .contact-a-mobile__container {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    padding-inline: 0;
  }

  body.contact-a-page .contact-a-mobile__topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
  }

  body.contact-a-page .contact-a-mobile__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #12396f;
  }

  body.contact-a-page .contact-a-mobile__brand-mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border: 2px solid #1f48e5;
    border-radius: 12px;
    color: #1f48e5;
    background: #fff;
    box-shadow: 0 8px 20px rgba(31, 72, 229, 0.12);
    font-size: 18px;
    font-weight: 900;
  }

  body.contact-a-page .contact-a-mobile__brand-text {
    min-width: 0;
  }

  body.contact-a-page .contact-a-mobile__brand-text strong {
    display: block;
    font-size: 18px;
    line-height: 1.1;
    font-weight: 900;
    color: #12396f;
  }

  body.contact-a-page .contact-a-mobile__brand-text small {
    display: block;
    margin-top: 2px;
    color: #8d97ad;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
  }

  body.contact-a-page .contact-a-mobile__hotline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: #1f48e5;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
  }

  body.contact-a-page .contact-a-mobile__hotline svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }

  body.contact-a-page .contact-a-mobile__menu {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #13306f;
  }

  body.contact-a-page .contact-a-mobile__menu span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
  }

  body.contact-a-page .contact-a-mobile__menu span + span {
    margin-top: 4px;
  }

  body.contact-a-page .contact-a-mobile__breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: #7f8ba1;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
  }

  body.contact-a-page .contact-a-mobile__breadcrumb a,
  body.contact-a-page .contact-a-mobile__breadcrumb strong {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.contact-a-page .contact-a-mobile__breadcrumb svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
  }

  body.contact-a-page .contact-a-mobile__hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 126px;
    gap: 8px;
    align-items: center;
    min-height: 186px;
    margin-bottom: 12px;
    padding: 18px 16px;
    border-radius: 20px;
    overflow: hidden;
    background:
      radial-gradient(circle at 75% 22%, rgba(116, 142, 255, 0.22), transparent 24%),
      radial-gradient(circle at 88% 50%, rgba(255, 255, 255, 0.08), transparent 28%),
      linear-gradient(140deg, #0f2da6 0%, #08186f 58%, #07124f 100%);
    box-shadow: 0 18px 40px rgba(7, 30, 80, 0.16);
  }

  body.contact-a-page .contact-a-mobile__hero-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    min-width: 0;
    color: #fff;
  }

  body.contact-a-page .contact-a-mobile__hero-copy h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0.02em;
  }

  body.contact-a-page .contact-a-mobile__hero-subtitle {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 800;
  }

  body.contact-a-page .contact-a-mobile__hero-desc {
    margin: 0;
    max-width: 18em;
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    line-height: 1.65;
  }

  body.contact-a-page .contact-a-mobile__hero-art {
    position: relative;
    z-index: 1;
    align-self: stretch;
    min-height: 136px;
  }

  body.contact-a-page .contact-a-mobile__hero-map {
    position: absolute;
    inset: 24px 6px 28px 0;
    border-radius: 42% 58% 44% 56% / 50% 35% 65% 50%;
    background:
      radial-gradient(circle at 68% 24%, rgba(255, 255, 255, 0.14), transparent 24%),
      radial-gradient(circle at 32% 42%, rgba(255, 255, 255, 0.08), transparent 28%),
      linear-gradient(135deg, rgba(63, 102, 255, 0.34), rgba(13, 25, 102, 0.2));
    filter: blur(0.2px);
    opacity: 0.9;
  }

  body.contact-a-page .contact-a-mobile__hero-base {
    position: absolute;
    left: 50%;
    bottom: 7px;
    width: 98px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(180deg, #c8dbff 0%, #94b0ff 100%);
    box-shadow: 0 16px 28px rgba(0, 18, 84, 0.36);
    transform: translateX(-50%);
  }

  body.contact-a-page .contact-a-mobile__hero-base::before {
    content: "";
    position: absolute;
    inset: 4px 10px 8px;
    border-radius: 50%;
    background: linear-gradient(180deg, #f3f7ff 0%, #b3c9ff 100%);
  }

  body.contact-a-page .contact-a-mobile__hero-pin {
    position: absolute;
    left: 50%;
    top: 30px;
    width: 44px;
    height: 56px;
    border-radius: 50% 50% 50% 0;
    background: linear-gradient(180deg, #7fb5ff 0%, #235eff 78%);
    box-shadow: 0 0 0 10px rgba(122, 158, 255, 0.18), 0 20px 24px rgba(0, 10, 60, 0.35);
    transform: translateX(-50%) rotate(-45deg);
  }

  body.contact-a-page .contact-a-mobile__hero-pin::before {
    content: "";
    position: absolute;
    inset: 11px;
    border-radius: 50%;
    background: linear-gradient(180deg, #d9e6ff 0%, #7fa5ff 100%);
    box-shadow: inset 0 0 0 6px rgba(45, 92, 255, 0.18);
  }

  body.contact-a-page .contact-a-mobile__hero-glow {
    position: absolute;
    left: 50%;
    top: 48px;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(128, 166, 255, 0.34) 0%, rgba(128, 166, 255, 0) 68%);
    transform: translateX(-50%);
  }

  body.contact-a-page .contact-a-mobile__search,
  body.contact-a-page .contact-a-mobile__network,
  body.contact-a-page .contact-a-mobile__coverage,
  body.contact-a-page .contact-a-mobile__cta {
    margin-bottom: 12px;
  }

  body.contact-a-page .contact-a-mobile__search,
  body.contact-a-page .contact-a-mobile__network .contact-a-mobile__list,
  body.contact-a-page .contact-a-mobile__network .contact-a-mobile__map,
  body.contact-a-page .contact-a-mobile__coverage {
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(7, 30, 80, 0.08);
  }

  body.contact-a-page .contact-a-mobile__search {
    padding: 14px;
  }

  body.contact-a-page .contact-a-mobile__section-head {
    margin-bottom: 10px;
  }

  body.contact-a-page .contact-a-mobile__section-head h2 {
    margin: 0;
    color: #102e5c;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 900;
  }

  body.contact-a-page .contact-a-mobile__section-head p {
    margin: 4px 0 0;
    color: #6c7890;
    font-size: 11px;
    line-height: 1.4;
  }

  body.contact-a-page .contact-a-mobile__search-form {
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
    gap: 10px;
  }

  body.contact-a-page .contact-a-mobile__field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #dbe6fb;
    border-radius: 12px;
    background: #fff;
  }

  body.contact-a-page .contact-a-mobile__field svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: #6b7e9f;
  }

  body.contact-a-page .contact-a-mobile__field input,
  body.contact-a-page .contact-a-mobile__field select {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #0f1b2d;
    font-size: 13px;
  }

  body.contact-a-page .contact-a-mobile__field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 8px;
  }

  body.contact-a-page .contact-a-mobile__field--select svg:last-child {
    margin-left: auto;
  }

  body.contact-a-page .contact-a-mobile__tabs-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 12px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  body.contact-a-page .contact-a-mobile__tabs-scroll::-webkit-scrollbar {
    display: none;
  }

  body.contact-a-page .contact-a-mobile__tabs-scroll button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #dbe6fb;
    border-radius: 999px;
    background: #fff;
    color: #28466f;
    font-size: 12px;
    font-weight: 800;
  }

  body.contact-a-page .contact-a-mobile__tabs-scroll button.is-active {
    border-color: #0f57d7;
    background: #0f57d7;
    color: #fff;
  }

  body.contact-a-page .contact-a-mobile__network {
    display: grid;
    gap: 12px;
  }

  body.contact-a-page .contact-a-mobile__section-head--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  body.contact-a-page .contact-a-mobile__switch-map {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #cfdcff;
    border-radius: 999px;
    background: #f6f9ff;
    color: #0f57d7;
    font-size: 12px;
    font-weight: 800;
  }

  body.contact-a-page .contact-a-mobile__network-grid {
    display: grid;
    gap: 12px;
    min-width: 0;
  }

  body.contact-a-page .contact-a-mobile__list,
  body.contact-a-page .contact-a-mobile__map {
    padding: 14px;
    min-width: 0;
  }

  body.contact-a-page .contact-a-mobile__branch-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    gap: 10px;
    align-items: start;
    padding: 14px 12px;
    border: 1px solid #e1ecff;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(7, 30, 80, 0.06);
  }

  body.contact-a-page .contact-a-mobile__branch-item + .contact-a-mobile__branch-item {
    margin-top: 10px;
  }

  body.contact-a-page .contact-a-mobile__branch-index {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0f57d7;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(15, 87, 215, 0.28);
  }

  body.contact-a-page .contact-a-mobile__branch-body {
    min-width: 0;
  }

  body.contact-a-page .contact-a-mobile__branch-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding-right: 2px;
  }

  body.contact-a-page .contact-a-mobile__branch-head h3 {
    margin: 0;
    color: #102e5c;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 900;
  }

  body.contact-a-page .contact-a-mobile__branch-head span {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #ebf3ff;
    color: #0f57d7;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
  }

  body.contact-a-page .contact-a-mobile__branch-address {
    margin: 4px 0 0;
    color: #5a6781;
    font-size: 12px;
    line-height: 1.55;
  }

  body.contact-a-page .contact-a-mobile__branch-meta {
    display: grid;
    gap: 6px;
    margin-top: 6px;
  }

  body.contact-a-page .contact-a-mobile__branch-meta li {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: #5a6781;
    font-size: 12px;
    line-height: 1.45;
  }

  body.contact-a-page .contact-a-mobile__branch-meta svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: #0f57d7;
  }

  body.contact-a-page .contact-a-mobile__branch-meta a {
    color: #0f57d7;
    font-weight: 800;
  }

  body.contact-a-page .contact-a-mobile__route {
    display: inline-grid;
    place-items: center;
    align-self: center;
    width: 24px;
    height: 24px;
    color: #0f57d7;
  }

  body.contact-a-page .contact-a-mobile__route svg {
    width: 18px;
    height: 18px;
  }

  body.contact-a-page .contact-a-mobile__more {
    display: block;
    margin-top: 12px;
    color: #0f57d7;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
  }

  body.contact-a-page .contact-a-mobile__more::after {
    content: "⌄";
    margin-left: 4px;
    font-size: 13px;
  }

  body.contact-a-page .contact-a-mobile__map {
    position: relative;
    padding: 14px;
  }

  body.contact-a-page .contact-a-mobile__map-stage {
    position: relative;
    overflow: hidden;
    min-height: 286px;
    border-radius: 16px;
    background:
      linear-gradient(180deg, rgba(237, 243, 252, 0.84), rgba(214, 231, 248, 0.94)),
      url("../images/placeholder.jpg") center/cover no-repeat;
  }

  body.contact-a-page .contact-a-mobile__map-stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.18;
  }

  body.contact-a-page .contact-a-mobile__map-overlay {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(120px 80px at 18% 28%, rgba(15, 87, 215, 0.18), transparent 60%),
      radial-gradient(130px 90px at 70% 52%, rgba(255, 122, 26, 0.14), transparent 60%);
  }

  body.contact-a-page .contact-a-mobile__map-switch {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #cfdcff;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    color: #0f57d7;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(7, 30, 80, 0.12);
  }

  body.contact-a-page .contact-a-mobile__map-switch svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
  }

  body.contact-a-page .contact-a-mobile__map-pin {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    color: #12396f;
    font-size: 11px;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(7, 30, 80, 0.16);
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }

  body.contact-a-page .contact-a-mobile__map-pin::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
    background: #0f57d7;
    box-shadow: 0 0 0 4px rgba(15, 87, 215, 0.18);
  }

  body.contact-a-page .contact-a-mobile__map-pin--main {
    background: #0f57d7;
    color: #fff;
  }

  body.contact-a-page .contact-a-mobile__map-pin--main::before {
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
  }

  body.contact-a-page .contact-a-mobile__map-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 10px;
    color: #60728f;
    font-size: 11px;
  }

  body.contact-a-page .contact-a-mobile__map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  body.contact-a-page .contact-a-mobile__map-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7a8ca8;
  }

  body.contact-a-page .contact-a-mobile__map-legend i.is-main {
    background: #0f57d7;
  }

  body.contact-a-page .contact-a-mobile__coverage {
    padding: 14px;
  }

  body.contact-a-page .contact-a-mobile__coverage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.contact-a-page .contact-a-mobile__coverage-grid article {
    display: grid;
    gap: 8px;
    min-height: 148px;
    padding: 14px 12px;
    border: 1px solid #e1ecff;
    border-radius: 16px;
    background: #f8fbff;
    text-align: center;
  }

  body.contact-a-page .contact-a-mobile__coverage-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-inline: auto;
    border-radius: 50%;
    background: #eaf2ff;
    color: #0f57d7;
  }

  body.contact-a-page .contact-a-mobile__coverage-icon--green {
    background: #eaf8ef;
    color: #20a85d;
  }

  body.contact-a-page .contact-a-mobile__coverage-icon--orange {
    background: #fff2e6;
    color: #ff7a1a;
  }

  body.contact-a-page .contact-a-mobile__coverage-icon--purple {
    background: #f1ecff;
    color: #6b5df0;
  }

  body.contact-a-page .contact-a-mobile__coverage-icon svg {
    width: 22px;
    height: 22px;
  }

  body.contact-a-page .contact-a-mobile__coverage-grid strong {
    color: #12396f;
    font-size: 14px;
    font-weight: 900;
  }

  body.contact-a-page .contact-a-mobile__coverage-grid p {
    margin: 0;
    color: #5b6983;
    font-size: 12px;
    line-height: 1.55;
  }

  body.contact-a-page .contact-a-mobile__cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 16px;
    background: #eaf2ff;
    color: #14396b;
    box-shadow: 0 12px 28px rgba(7, 30, 80, 0.08);
  }

  body.contact-a-page .contact-a-mobile__cta-copy {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
  }

  body.contact-a-page .contact-a-mobile__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: #0f57d7;
    box-shadow: 0 8px 18px rgba(15, 87, 215, 0.12);
  }

  body.contact-a-page .contact-a-mobile__cta-icon svg {
    width: 18px;
    height: 18px;
  }

  body.contact-a-page .contact-a-mobile__cta-copy strong {
    display: block;
    color: #12396f;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 900;
  }

  body.contact-a-page .contact-a-mobile__cta-copy p {
    margin: 4px 0 0;
    color: #5d6d85;
    font-size: 12px;
    line-height: 1.55;
  }

  body.contact-a-page .contact-a-mobile__cta .btn {
    min-height: 42px;
    padding-inline: 16px;
    border-radius: 12px;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  body.contact-a-page .contact-a-mobile__topbar {
    gap: 8px;
  }

  body.contact-a-page .contact-a-mobile__brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 16px;
  }

  body.contact-a-page .contact-a-mobile__brand-text strong {
    font-size: 16px;
  }

  body.contact-a-page .contact-a-mobile__hotline {
    font-size: 11px;
  }

  body.contact-a-page .contact-a-mobile__menu {
    width: 36px;
    height: 36px;
  }

  body.contact-a-page .contact-a-mobile__hero {
    grid-template-columns: minmax(0, 1fr) 102px;
    min-height: 172px;
    padding: 16px 14px;
  }

  body.contact-a-page .contact-a-mobile__hero-copy h1 {
    font-size: 24px;
  }

  body.contact-a-page .contact-a-mobile__hero-subtitle {
    font-size: 16px;
  }

  body.contact-a-page .contact-a-mobile__hero-desc {
    max-width: 19em;
    font-size: 11px;
  }

  body.contact-a-page .contact-a-mobile__hero-art {
    min-height: 126px;
  }

  body.contact-a-page .contact-a-mobile__search-form {
    grid-template-columns: 1fr;
  }

  body.contact-a-page .contact-a-mobile__network-grid {
    gap: 10px;
  }

  body.contact-a-page .contact-a-mobile__branch-item {
    grid-template-columns: 30px minmax(0, 1fr) 16px;
    gap: 8px;
    padding: 13px 10px;
  }

  body.contact-a-page .contact-a-mobile__branch-index {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  body.contact-a-page .contact-a-mobile__branch-head h3 {
    font-size: 14px;
  }

  body.contact-a-page .contact-a-mobile__branch-head span {
    height: 20px;
    padding: 0 7px;
    font-size: 10px;
  }

  body.contact-a-page .contact-a-mobile__map-stage {
    min-height: 240px;
  }

  body.contact-a-page .contact-a-mobile__cta {
    grid-template-columns: 1fr;
  }

  body.contact-a-page .contact-a-mobile__cta .btn {
    width: 100%;
  }
}

@media (max-width: 768px) {
  body.site-floating-contact-hidden .floating-contact {
    display: none !important;
  }
}

/* Final mobile harmonization pass.
   These overrides sit after the page-specific mobile tweaks so the shared shell stays consistent. */
@media (max-width: 992px) {
  body[data-page] .site-header {
    position: sticky;
    top: 0;
    z-index: 80;
  }

  body[data-page] .site-header .topbar,
  body[data-page] .topbar {
    display: block !important;
    min-height: 28px;
    font-size: 11px;
  }

  body[data-page] .site-header .topbar__inner {
    justify-content: center;
    min-height: 28px;
  }

  body[data-page] .site-header .topbar__contact {
    justify-content: center;
  }

  body[data-page] .site-header .topbar__contact a:not(:first-child),
  body[data-page] .site-header .topbar__links {
    display: none !important;
  }

  body[data-page] .site-header .navbar,
  body[data-page] .site-header .navbar__inner {
    min-height: 64px;
  }

  body[data-page] .site-header .header-actions {
    display: none !important;
  }

  body[data-page] .site-footer .footer-cta {
    display: block !important;
  }

  body[data-page] .site-footer .footer-cta__inner {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-block: 18px;
  }

  body[data-page] .site-footer .footer-cta__form {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body[data-page] .site-footer .footer-cta__form .btn,
  body[data-page] .site-footer .footer-cta__form button {
    width: 100%;
  }

  body[data-page] .site-footer .footer-main {
    padding-block: 24px 20px;
  }

  body[data-page] .site-footer .footer-main__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  body[data-page] .site-footer .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
  }

  body[data-page] .site-footer .footer-qrcode img {
    width: var(--icon-qr);
    height: var(--icon-qr);
  }

  body[data-page] .site-footer .footer-bottom__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-height: auto;
    padding-block: 14px 18px;
  }

  body[data-page] .site-footer .footer-bottom nav {
    flex-wrap: wrap;
    gap: 12px;
  }

  body[data-page] .floating-contact {
    display: none !important;
  }

  body[data-page="case-detail"] .site-header .topbar,
  body[data-page="case-detail"] .topbar,
  body[data-page="case-detail"] .mobile-bottom-nav,
  body[data-page="case-detail"] .mobile-bottom-nav--main,
  body[data-page="case-detail"] .mobile-bottom-nav--cases,
  body[data-page="case-detail"] .floating-contact {
    display: none !important;
  }
}

@media (max-width: 768px) {
  body.has-main-bottom-nav .mobile-bottom-nav--main {
    left: 10px;
    right: 10px;
    bottom: calc(env(safe-area-inset-bottom) + 8px);
  }

  body.has-main-bottom-nav .mobile-bottom-nav--main a {
    min-height: 48px;
  }

  body.has-main-bottom-nav .mobile-bottom-nav--main svg {
    width: 18px;
    height: 18px;
  }
}

/* Final content rhythm pass.
   These overrides keep the inner-page shell aligned after page-specific mobile rules. */
@media (max-width: 992px) {
  body[data-page]:not([data-page="home"]) :is(
    .section,
    .product-list-section,
    .product-helper-section,
    .service-guarantee,
    .detail-summary,
    .detail-selling-points,
    .detail-content,
    .detail-section,
    .detail-download-faq,
    .detail-related,
    .solution-stats,
    .solution-section,
    .case-list-section,
    .case-detail-main,
    .news-list-section,
    .news-detail-section,
    .news-feature-section,
    .news-faq-strip,
    .about-intro-section,
    .about-timeline-section,
    .about-factory-section,
    .about-triple-section,
    .about-team-section,
    .about-values-section,
    .service-home-section,
    .service-main-section,
    .service-section,
    .contact-a-filter-shell,
    .contact-a-network,
    .contact-a-cta,
    .contact-main
  ) {
    padding-block: 40px;
  }

  body[data-page]:not([data-page="home"]) :is(
    .page-banner,
    .product-banner,
    .detail-hero,
    .case-banner,
    .news-banner,
    .about-banner,
    .service-banner,
    .contact-hero,
    .solution-hero
  ),
  body[data-page]:not([data-page="home"]) :is(
    .page-banner__inner,
    .product-banner__inner,
    .detail-hero__inner,
    .case-banner__inner,
    .news-banner__inner,
    .about-banner__inner,
    .service-banner__inner,
    .contact-hero__inner,
    .solution-hero__inner
  ) {
    min-height: 232px;
  }

  body[data-page]:not([data-page="home"]) :is(
    .page-banner__inner,
    .product-banner__inner,
    .detail-hero__inner,
    .case-banner__inner,
    .news-banner__inner,
    .about-banner__inner,
    .service-banner__inner,
    .contact-hero__inner,
    .solution-hero__inner
  ) {
    padding-block: 32px;
  }

  body[data-page]:not([data-page="home"]) :is(.banner-actions, .banner-stats, .banner-search) {
    margin-top: 18px;
  }
}

@media (max-width: 768px) {
  body[data-page]:not([data-page="home"]) :is(
    .section,
    .product-list-section,
    .product-helper-section,
    .service-guarantee,
    .detail-summary,
    .detail-selling-points,
    .detail-content,
    .detail-section,
    .detail-download-faq,
    .detail-related,
    .solution-stats,
    .solution-section,
    .case-list-section,
    .case-detail-main,
    .news-list-section,
    .news-detail-section,
    .news-feature-section,
    .news-faq-strip,
    .about-intro-section,
    .about-timeline-section,
    .about-factory-section,
    .about-triple-section,
    .about-team-section,
    .about-values-section,
    .service-home-section,
    .service-main-section,
    .service-section,
    .contact-a-filter-shell,
    .contact-a-network,
    .contact-a-cta,
    .contact-main
  ) {
    padding-block: 28px;
  }

  body[data-page]:not([data-page="home"]) :is(
    .page-banner,
    .product-banner,
    .detail-hero,
    .case-banner,
    .news-banner,
    .about-banner,
    .service-banner,
    .contact-hero,
    .solution-hero
  ),
  body[data-page]:not([data-page="home"]) :is(
    .page-banner__inner,
    .product-banner__inner,
    .detail-hero__inner,
    .case-banner__inner,
    .news-banner__inner,
    .about-banner__inner,
    .service-banner__inner,
    .contact-hero__inner,
    .solution-hero__inner
  ) {
    min-height: 214px;
  }

  body[data-page]:not([data-page="home"]) :is(
    .page-banner__inner,
    .product-banner__inner,
    .detail-hero__inner,
    .case-banner__inner,
    .news-banner__inner,
    .about-banner__inner,
    .service-banner__inner,
    .contact-hero__inner,
    .solution-hero__inner
  ) {
    padding-block: 26px;
  }

  body[data-page]:not([data-page="home"]) :is(.banner-actions, .banner-stats) {
    gap: 10px;
  }

  body[data-page]:not([data-page="home"]) .banner-search {
    margin-top: 16px;
  }
}

@media (max-width: 768px) {
  body[data-page="cases"] .case-feature-cover {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  body[data-page="cases"] .case-feature-cover img {
    object-fit: cover !important;
    object-position: center;
  }

  body[data-page="cases"] .news-pagination {
    margin-top: 14px;
    gap: 6px;
  }

  body[data-page="cases"] .news-pagination a,
  body[data-page="cases"] .news-pagination span {
    min-width: 28px;
    height: 28px;
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  body[data-page="solutions"] .solution-why-row div {
    grid-template-columns: 1fr !important;
    justify-items: center;
    row-gap: 4px;
    padding: 12px 8px;
    text-align: center;
  }

  body[data-page="solutions"] .solution-why-row div::before {
    content: none;
    display: none;
  }

  body[data-page="solutions"] .solution-why-row strong,
  body[data-page="solutions"] .solution-why-row span {
    display: block;
    width: 100%;
    margin-top: 0;
    text-align: center;
  }
}

@media (max-width: 768px) {
  body[data-page="solutions"] .solution-section > .container > .solution-more,
  body[data-page="solutions"] .solution-section > .container > .solution-more-wrap > .solution-more {
    display: flex;
    width: max-content;
    margin: 16px auto 0;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
  }

  body[data-page="solutions"] .solution-section > .container > .solution-more-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  body[data-page="solutions"] .solution-stats__inner div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 80px;
    padding: 12px 8px;
    text-align: center;
  }

  body[data-page="solutions"] .solution-stats__inner div::before {
    content: none;
    display: none;
  }

  body[data-page="solutions"] .solution-stats__inner strong,
  body[data-page="solutions"] .solution-stats__inner span {
    width: 100%;
    margin-top: 0;
    text-align: center;
  }
}

@media (min-width: 769px) {
  body[data-page="news"] .news-tabs.service-nav-card {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-page="news"] .news-tabs.service-nav-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 104px;
    min-height: 40px;
    padding: 0 22px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-muted);
    background: var(--color-white);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1;
    text-align: center;
  }

  body[data-page="news"] .news-tabs.service-nav-card a::before,
  body[data-page="news"] .news-tabs.service-nav-card a::after {
    content: none;
    display: none;
  }

  body[data-page="news"] .news-tabs.service-nav-card a span,
  body[data-page="news"] .news-tabs.service-nav-card a small {
    display: none;
  }

  body[data-page="news"] .news-tabs.service-nav-card a.is-active,
  body[data-page="news"] .news-tabs.service-nav-card a:hover {
    color: var(--color-white);
    border-color: var(--color-blue-700);
    background: var(--color-blue-700);
  }
}

@media (max-width: 768px) {
  body[data-page="news"] .news-tabs.service-nav-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    box-shadow: var(--shadow-card);
  }

  body[data-page="news"] .news-tabs.service-nav-card a {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    min-height: 92px;
    padding: 12px 8px 10px;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    background: transparent;
    min-width: 0;
    width: auto;
  }

  body[data-page="news"] .news-tabs.service-nav-card a:nth-child(3n) {
    border-right: 0;
  }

  body[data-page="news"] .news-tabs.service-nav-card a:nth-child(n + 4) {
    border-bottom: 0;
  }

  body[data-page="news"] .news-tabs.service-nav-card a::before {
    content: none;
    display: none;
  }

  body[data-page="news"] .news-tabs.service-nav-card a::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 60px;
    height: 3px;
    border-radius: 999px;
    background: var(--color-blue-700);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform var(--transition);
  }

  body[data-page="news"] .news-tabs.service-nav-card a span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--color-blue-700);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    font-size: 0;
    line-height: 0;
  }

  body[data-page="news"] .news-tabs.service-nav-card a:nth-child(1) span {
    background-image: var(--icon-home);
  }

  body[data-page="news"] .news-tabs.service-nav-card a:nth-child(2) span {
    background-image: var(--icon-factory);
  }

  body[data-page="news"] .news-tabs.service-nav-card a:nth-child(3) span {
    background-image: var(--icon-target);
  }

  body[data-page="news"] .news-tabs.service-nav-card a:nth-child(4) span {
    background-image: var(--icon-cpu);
  }

  body[data-page="news"] .news-tabs.service-nav-card a:nth-child(5) span {
    background-image: var(--icon-products);
  }

  body[data-page="news"] .news-tabs.service-nav-card a:nth-child(6) span {
    background-image: var(--icon-video);
  }

  body[data-page="news"] .news-tabs.service-nav-card a strong {
    display: block;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.2;
  }

  body[data-page="news"] .news-tabs.service-nav-card a small {
    display: block;
    color: var(--color-muted);
    font-size: 10px;
    line-height: 1.35;
  }

  body[data-page="news"] .news-tabs.service-nav-card a.is-active,
  body[data-page="news"] .news-tabs.service-nav-card a.active,
  body[data-page="news"] .news-tabs.service-nav-card a.current,
  body[data-page="news"] .news-tabs.service-nav-card a.selected,
  body[data-page="news"] .news-tabs.service-nav-card a.news-tab-active,
  body[data-page="news"] .news-tabs.service-nav-card a.category-active,
  body[data-page="news"] .news-tabs.service-nav-card a.is-active:hover,
  body[data-page="news"] .news-tabs.service-nav-card a.active:hover,
  body[data-page="news"] .news-tabs.service-nav-card a.current:hover,
  body[data-page="news"] .news-tabs.service-nav-card a.selected:hover,
  body[data-page="news"] .news-tabs.service-nav-card a.news-tab-active:hover,
  body[data-page="news"] .news-tabs.service-nav-card a.category-active:hover {
    color: inherit !important;
    background: transparent !important;
    border-color: var(--color-border) !important;
    box-shadow: none !important;
  }

  body[data-page="news"] .news-tabs.service-nav-card a.is-active::after,
  body[data-page="news"] .news-tabs.service-nav-card a.active::after,
  body[data-page="news"] .news-tabs.service-nav-card a.current::after,
  body[data-page="news"] .news-tabs.service-nav-card a.selected::after,
  body[data-page="news"] .news-tabs.service-nav-card a.news-tab-active::after,
  body[data-page="news"] .news-tabs.service-nav-card a.category-active::after,
  body[data-page="news"] .news-tabs.service-nav-card a.is-active:hover::after,
  body[data-page="news"] .news-tabs.service-nav-card a.active:hover::after,
  body[data-page="news"] .news-tabs.service-nav-card a.current:hover::after,
  body[data-page="news"] .news-tabs.service-nav-card a.selected:hover::after,
  body[data-page="news"] .news-tabs.service-nav-card a.news-tab-active:hover::after,
  body[data-page="news"] .news-tabs.service-nav-card a.category-active:hover::after {
    transform: translateX(-50%) scaleX(1);
  }

  body[data-page="news"] .news-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
  }
}

@media (max-width: 992px) {
  body[data-page]:not([data-page="home"]) .site-footer {
    margin: 16px;
    overflow: hidden;
    border-radius: 10px;
  }

  body[data-page]:not([data-page="home"]) .site-footer .footer-cta {
    display: none !important;
  }

  body[data-page]:not([data-page="home"]) .site-footer .footer-main {
    padding-block: 26px;
  }

  body[data-page]:not([data-page="home"]) .site-footer .footer-main__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 104px !important;
    gap: 20px 16px;
    align-items: start;
  }

  body[data-page]:not([data-page="home"]) .site-footer .footer-company h2 {
    font-size: 22px;
  }

  body[data-page]:not([data-page="home"]) .site-footer .footer-company p,
  body[data-page]:not([data-page="home"]) .site-footer .footer-contact {
    font-size: 12px;
    line-height: 1.65;
  }

  body[data-page]:not([data-page="home"]) .site-footer .footer-links {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px;
  }

  body[data-page]:not([data-page="home"]) .site-footer .footer-links h3 {
    margin-bottom: 8px;
    font-size: 13px;
  }

  body[data-page]:not([data-page="home"]) .site-footer .footer-links a {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.45;
  }

  body[data-page]:not([data-page="home"]) .site-footer .footer-qrcode {
    width: auto;
    display: block;
    justify-self: end;
  }

  body[data-page]:not([data-page="home"]) .site-footer .footer-qrcode img {
    width: var(--icon-qr);
    height: var(--icon-qr);
    margin-bottom: 10px;
    border-width: 4px;
  }

  body[data-page]:not([data-page="home"]) .site-footer .footer-qrcode h3,
  body[data-page]:not([data-page="home"]) .site-footer .footer-qrcode p {
    font-size: 12px;
  }

  body[data-page]:not([data-page="home"]) .site-footer .social-links a {
    width: var(--icon-social-btn);
    height: var(--icon-social-btn);
    font-size: 10px;
  }

  body[data-page]:not([data-page="home"]) .site-footer .footer-bottom__inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    min-height: 56px !important;
    text-align: center;
  }

  body[data-page]:not([data-page="home"]) .site-footer .footer-bottom nav {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 20px;
  }
}

@media (max-width: 480px) {
  body[data-page]:not([data-page="home"]) .site-footer {
    margin-inline: 12px;
  }

  body[data-page]:not([data-page="home"]) .site-footer .footer-main__grid {
    grid-template-columns: minmax(0, 1fr) 88px !important;
    gap: 16px 12px;
  }

  body[data-page]:not([data-page="home"]) .site-footer .footer-links {
    gap: 10px;
  }

  body[data-page]:not([data-page="home"]) .site-footer .footer-qrcode img {
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 768px) {
  body[data-page="support"] .service-flow-section,
  body[data-page="support"] .service-guarantee-section {
    display: none !important;
  }
}

@media (max-width: 768px) {
  body[data-page] .site-footer {
    margin: 0;
    overflow: hidden;
    border-radius: 0;
    padding-bottom: calc(114px + env(safe-area-inset-bottom));
  }

  body[data-page] .site-footer .footer-cta {
    display: block !important;
  }

  body[data-page] .site-footer .footer-cta__inner {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-block: 18px 16px;
  }

  body[data-page] .site-footer .footer-cta__inner h2 {
    font-size: 18px;
    line-height: 1.25;
  }

  body[data-page] .site-footer .footer-cta__inner p {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page] .site-footer .footer-cta__form {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body[data-page] .site-footer .footer-cta__form .btn,
  body[data-page] .site-footer .footer-cta__form button {
    width: 100%;
  }

  body[data-page] .site-footer .footer-main {
    padding: 22px 0 16px;
  }

  body[data-page] .site-footer .footer-main__grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
    align-items: start;
  }

  body[data-page] .site-footer .footer-company h2 {
    font-size: 20px;
    line-height: 1.2;
  }

  body[data-page] .site-footer .footer-company p,
  body[data-page] .site-footer .footer-contact {
    font-size: 12px;
    line-height: 1.6;
  }

  body[data-page] .site-footer .footer-contact {
    margin-top: 12px;
    gap: 4px;
  }

  body[data-page] .site-footer .footer-links {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 14px;
  }

  body[data-page] .site-footer .footer-links > div {
    min-width: 0;
  }

  body[data-page] .site-footer .footer-links h3 {
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.25;
  }

  body[data-page] .site-footer .footer-links a {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.45;
  }

  body[data-page] .site-footer .footer-qrcode {
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
  }

  body[data-page] .site-footer .footer-qrcode img {
    width: 88px;
    height: 88px;
    margin-bottom: 0;
    border-width: 4px;
  }

  body[data-page] .site-footer .footer-qrcode h3,
  body[data-page] .site-footer .footer-qrcode p {
    font-size: 12px;
    line-height: 1.4;
  }

  body[data-page] .site-footer .social-links {
    justify-content: center;
    gap: 10px;
  }

  body[data-page] .site-footer .social-links a {
    width: var(--icon-social-btn);
    height: var(--icon-social-btn);
  }

  body[data-page] .site-footer .footer-bottom {
    padding-bottom: 12px;
  }

  body[data-page] .site-footer .footer-bottom__inner {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: auto;
    padding-block: 12px 18px;
    text-align: center;
  }

  body[data-page] .site-footer .footer-bottom nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  body[data-page] .site-footer .footer-bottom p {
    margin-bottom: 0;
  }

  body[data-page="home"] .home-products .home-section-title {
    align-items: center;
    padding-right: 0;
  }

  body[data-page="home"] .home-products .home-section-title > p {
    display: none;
  }

  body[data-page="home"] .home-products .home-section-title > a {
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  body[data-page] .site-footer {
    padding-bottom: calc(122px + env(safe-area-inset-bottom));
  }

  body[data-page] .site-footer .footer-main {
    padding-block: 20px 14px;
  }

  body[data-page] .site-footer .footer-main__grid {
    gap: 16px;
  }

  body[data-page] .site-footer .footer-links {
    gap: 10px 12px;
  }

  body[data-page] .site-footer .footer-qrcode img {
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 768px) {
  body[data-page="video"] .service-video-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body[data-page="video"] .service-video-card {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
  }

  body[data-page="video"] .service-video-card img {
    flex: 0 0 118px;
    width: 118px;
    height: 78px;
    border-radius: 10px;
  }

  body[data-page="video"] .service-video-card > span {
    top: 34px;
    left: 69px;
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  body[data-page="video"] .service-video-card .video-card-content {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  body[data-page="video"] .service-video-card .video-card-content strong {
    padding: 2px 0 4px;
    font-size: 15px;
    line-height: 1.35;
  }

  body[data-page="video"] .service-video-card .video-card-content small {
    width: 100%;
    padding: 0;
    color: var(--color-muted);
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
  }

  body[data-page="video"] .service-video-card small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    font-size: 10px;
    line-height: 1.2;
  }
}

@media (max-width: 768px) {
  body[data-page="home"] .home-quote {
    display: none !important;
  }

  body[data-page="home"] .home-product-card {
    text-align: center;
  }

  body[data-page="home"] .home-outline-btn {
    margin-inline: auto;
  }
}

@media (min-width: 769px) {
  body[data-page="solutions"] .solution-section > .container > .solution-more-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 24px;
  }

  body[data-page="solutions"] .solution-section > .container > .solution-more-wrap > .solution-more {
    margin: 0;
  }

  body[data-page="solutions"] .solution-inquiry .product-inquiry__copy {
    text-align: center;
  }

  body[data-page="solutions"] .solution-inquiry h2 {
    padding-left: 0;
  }

  body[data-page="solutions"] .solution-inquiry h2::before {
    content: none;
    display: none;
  }
}

/* ================================
   99. Mobile Visual System Unification
   Final mobile token overrides for typography, icons, and buttons.
   ================================ */
@media (max-width: 768px) {
  :root {
    --font-h1: 30px;
    --font-section-title: 22px;
    --font-section-desc: 12px;
    --font-card-title: 15px;
    --font-card-desc: 12px;
    --font-body: 13px;
    --font-small: 11px;
    --font-hero-title: 30px;
    --font-hero-desc: 14px;
    --font-banner-title: 28px;
    --font-banner-desc: 13px;
    --font-quote-title: 24px;
    --font-stat-number: 20px;
    --font-brand-main: 17px;
    --font-brand-sub: 10px;
    --btn-height: 42px;
    --btn-height-sm: 34px;
    --icon-sm: 12px;
    --icon-md: 18px;
    --icon-card: 28px;
    --icon-lg: 40px;
    --icon-xl: 44px;
    --icon-brand-mark: 38px;
    --icon-qr: 88px;
  }

  body {
    font-size: var(--font-body);
    line-height: 1.65;
  }

  body[data-page] :is(
    .page-banner h1,
    .product-banner h1,
    .detail-hero h1,
    .case-banner h1,
    .news-banner h1,
    .about-banner h1,
    .service-banner h1,
    .contact-hero h1,
    .home-hero h1,
    .solution-hero h1
  ) {
    font-size: var(--font-h1);
    line-height: 1.22;
  }

  body[data-page] :is(
    .section-header h2,
    .home-section-title h2,
    .home-news-heading h2,
    .solution-section h2,
    .service-section-head h2,
    .service-list-head h2,
    .about-section-head h2,
    .service-flow-section h2,
    .footer-cta h2,
    .footer-company h2
  ) {
    font-size: var(--font-section-title);
    line-height: 1.25;
  }

  body[data-page] :is(
    .section-header p,
    .home-section-title p,
    .home-news-heading p,
    .solution-section p,
    .service-section-head p,
    .service-list-head p,
    .about-section-head p
  ) {
    font-size: var(--font-section-desc);
    line-height: 1.55;
  }

  body[data-page] :is(
    .card h3,
    .home-product-card h3,
    .home-case-card h3,
    .solution-card h3,
    .news-card h3,
    .news-list-item h2,
    .service-side-card h2,
    .contact-panel h2,
    .zz-product-card h3,
    .case-card h2,
    .helper-card h2,
    .product-side-card h2,
    .product-filter-card h2
  ) {
    font-size: var(--font-card-title);
    line-height: 1.35;
  }

  body[data-page] :is(
    .card p,
    .home-product-card p,
    .home-case-card p,
    .solution-card p,
    .news-card p,
    .news-list-item p,
    .service-side-card p,
    .contact-panel p,
    .zz-product-card p,
    .case-card p,
    .helper-card p,
    .product-side-card p,
    .product-filter-card p
  ) {
    font-size: var(--font-card-desc);
    line-height: 1.55;
  }

  body[data-page] :is(
    .btn,
    .banner-search button,
    .footer-cta .btn,
    .service-support-strip .btn,
    .contact-phone-cta .btn,
    .contact-bottom-prompt .btn,
    .news-contact-card .btn,
    .service-help-card .btn
  ) {
    min-height: var(--btn-height);
    font-size: var(--font-body);
  }

  body[data-page] .btn-sm {
    min-height: var(--btn-height-sm);
    font-size: var(--font-small);
  }

  body[data-page] .home-outline-btn {
    min-height: var(--btn-height-sm);
    font-size: var(--font-small);
  }

  body[data-page] :is(.feature-card__icon) {
    width: var(--icon-lg);
    height: var(--icon-lg);
  }

  body[data-page] .service-nav-card a::before,
  body[data-page] .service-category-card a::before,
  body[data-page] .product-category-list a::before {
    width: var(--icon-card);
    height: var(--icon-card);
  }

  body[data-page] :is(.home-hero-feature__icon, .home-advantage-item span) {
    width: var(--icon-xl);
    height: var(--icon-xl);
  }

  body[data-page] .social-links a svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
  }

  body[data-page] .mobile-bottom-nav svg {
    width: var(--icon-md);
    height: var(--icon-md);
  }

  body[data-page] .brand__text strong {
    font-size: var(--font-brand-main);
  }

  body[data-page] .brand__text small {
    font-size: var(--font-brand-sub);
  }

  body[data-page] .footer-qrcode img {
    width: var(--icon-qr);
    height: var(--icon-qr);
  }

  body[data-page] .site-header .brand__mark {
    width: var(--icon-brand-mark);
    height: var(--icon-brand-mark);
  }

  body[data-page] .home-hero h1 {
    font-size: var(--font-h1);
    line-height: 1.22;
  }

  body[data-page] .home-hero p {
    font-size: var(--font-hero-desc);
    line-height: 1.65;
  }

  body[data-page] .home-quote h2 {
    font-size: var(--font-quote-title);
    line-height: 1.22;
  }

  body[data-page] .home-quote p {
    font-size: var(--font-body);
    line-height: 1.65;
  }

  body[data-page] .product-banner h1 {
    font-size: var(--font-banner-title);
    line-height: 1.2;
  }

  body[data-page] .product-banner p {
    font-size: var(--font-banner-desc);
    line-height: 1.55;
  }

  body[data-page] .product-banner span {
    font-size: var(--font-small);
  }

  body[data-page] .home-solution-card span {
    font-size: var(--font-card-title);
  }

  body[data-page] .home-case-card h3,
  body[data-page] .home-news-list h3 {
    font-size: var(--font-card-title);
  }

  body[data-page] .home-case-card p,
  body[data-page] .home-news-list p,
  body[data-page] .home-support-download-body strong,
  body[data-page] .home-support-video-body strong {
    font-size: var(--font-body);
  }

  body[data-page] .home-about-stats strong {
    font-size: var(--font-stat-number);
  }

  body[data-page] .home-about-stats span,
  body[data-page] .home-news-list span,
  body[data-page] .home-support-download-body small,
  body[data-page] .home-support-video-body small {
    font-size: var(--font-small);
  }

  body[data-page] .home-support-download-icon {
    width: var(--icon-card);
    height: var(--icon-card);
    font-size: var(--font-small);
  }

  body[data-page] .home-quote-form input,
  body[data-page] .home-quote-form select,
  body[data-page] .home-quote-form button {
    height: var(--btn-height);
    min-height: var(--btn-height);
  }

  body[data-page] .home-support-tabs button,
  body[data-page] .product-tabs a,
  body[data-page] .product-filters select {
    min-height: var(--btn-height-sm);
    font-size: var(--font-body);
  }

  body[data-page] .product-category-list a {
    min-height: var(--btn-height);
    font-size: var(--font-body);
  }
}

@media (max-width: 480px) {
  :root {
    --icon-qr: 80px;
    --icon-social-btn: 28px;
    --icon-brand-mark: 36px;
  }
}

/* -------------------------------------------------------------------------- */
/* Mobile Home v2 (Reference-template rebuild, mobile-only, desktop untouched) */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body[data-page="home"] {
    --m2-gutter: 16px;
    --m2-section-y: 24px;
    --m2-radius: 18px;
    --m2-radius-sm: 14px;
    --m2-shadow-lg: 0 18px 46px rgba(0, 20, 52, 0.14);
    --m2-shadow-md: 0 12px 28px rgba(0, 20, 52, 0.12);
    --m2-shadow-sm: 0 8px 18px rgba(0, 20, 52, 0.10);
    --m2-card-border: rgba(14, 39, 88, 0.10);
  }

  body[data-page="home"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--m2-gutter);
  }

  body[data-page="home"] .home-desktop-only {
    display: none !important;
  }

  body[data-page="home"] .home-mobile-only {
    display: inline !important;
  }

  body[data-page="home"] .home-mobile-only[style*="display:none"] {
    display: unset !important;
  }

  /* Mobile header: compact, phone on top-right, menu on right. */
  body[data-page="home"] .site-header .topbar {
    display: block;
    padding: 6px 0;
    background: var(--color-white);
    border-bottom: 1px solid rgba(14, 39, 88, 0.08);
  }

  body[data-page="home"] .site-header .topbar__inner {
    justify-content: flex-end;
  }

  body[data-page="home"] .site-header .topbar__contact {
    justify-content: flex-end;
    gap: 0;
  }

  body[data-page="home"] .site-header .topbar__contact a:first-child {
    font-weight: 800;
    font-size: 12px;
    white-space: nowrap;
  }

  body[data-page="home"] .site-header .topbar__contact a:not(:first-child),
  body[data-page="home"] .site-header .topbar__links {
    display: none;
  }

  body[data-page="home"] .site-header .navbar {
    background: var(--color-white);
    box-shadow: 0 10px 30px rgba(0, 20, 52, 0.08);
  }

  body[data-page="home"] .site-header .navbar__inner {
    min-height: 56px;
    padding-block: 8px;
  }

  body[data-page="home"] .home-main {
    overflow: hidden;
    background: radial-gradient(900px 460px at 50% -220px, rgba(0, 90, 210, 0.14), transparent 62%),
      linear-gradient(180deg, #ffffff 0%, #f4f8ff 50%, #ffffff 100%);
  }

  /* Hero: full-bleed visual like the reference template. */
  body[data-page="home"] .home-hero {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body[data-page="home"] .home-hero::before {
    background-image:
      linear-gradient(90deg, rgba(0, 18, 48, 0.90) 0%, rgba(0, 43, 102, 0.62) 52%, rgba(0, 43, 102, 0.10) 100%),
      var(--home-hero-image, url("../images/banners/home-banner.jpg"));
    background-position: right center;
    background-size: cover;
  }

  body[data-page="home"] .home-hero::after {
    display: none;
  }

  body[data-page="home"] .home-hero__inner {
    width: 100%;
    min-height: 0;
    padding: 28px var(--m2-gutter) 150px;
  }

  body[data-page="home"] .home-hero__content {
    max-width: 340px;
  }

  body[data-page="home"] .home-hero h1 {
    max-width: 320px;
    margin: 0 0 10px;
    font-size: 30px;
    line-height: 1.25;
    letter-spacing: 0.2px;
  }

  body[data-page="home"] .home-hero p {
    max-width: 320px;
    margin: 0;
    font-size: 13px;
    line-height: 1.75;
  }

  /* Hero KPI row: match reference (10+ / 1500+ / 98% / 24h). */
  body[data-page="home"] .home-hero__features {
    display: none;
  }

  body[data-page="home"] .home-hero-kpis {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
    padding: 12px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(0, 20, 52, 0.18);
    backdrop-filter: blur(10px);
  }

  body[data-page="home"] .home-hero-kpi {
    display: grid;
    gap: 4px;
    justify-items: center;
    text-align: center;
    min-width: 0;
    color: rgba(255, 255, 255, 0.96);
  }

  body[data-page="home"] .home-hero-kpi strong {
    font-size: 14px;
    line-height: 1.05;
    letter-spacing: 0.2px;
  }

  body[data-page="home"] .home-hero-kpi small {
    font-size: 11px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.76);
    white-space: nowrap;
  }

  /* Controls: keep dots only (reference-style). */
  body[data-page="home"] .home-hero__controls {
    inset: auto 0 16px;
    display: flex;
    justify-content: center;
    gap: 10px;
    pointer-events: none;
  }

  body[data-page="home"] .home-hero__dots {
    pointer-events: auto;
  }

  body[data-page="home"] .home-hero__arrow {
    display: none;
  }

  /* Quick nav panel: floating white module overlapping hero bottom. */
  body[data-page="home"] .home-quick-nav {
    padding: 0;
    margin-top: -70px;
  }

  body[data-page="home"] .home-quick-nav .container {
    width: 100%;
    max-width: 100%;
  }

  body[data-page="home"] .home-quick-nav__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 10px;
    padding: 16px 14px;
    border: 1px solid var(--m2-card-border);
    border-radius: var(--m2-radius);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--m2-shadow-md);
    backdrop-filter: blur(10px);
  }

  body[data-page="home"] .home-quick-nav__item {
    min-height: 78px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 14px;
    color: var(--color-text);
    text-decoration: none;
  }

  body[data-page="home"] .home-quick-nav__icon {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: var(--color-blue-700);
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.10), rgba(255, 255, 255, 0.94));
    border: 1px solid rgba(0, 70, 184, 0.12);
    box-shadow: 0 10px 20px rgba(0, 43, 102, 0.08);
  }

  body[data-page="home"] .home-quick-nav__icon svg {
    width: 20px;
    height: 20px;
  }

  body[data-page="home"] .home-quick-nav__item > span:last-child {
    font-size: 12px;
    line-height: 1.1;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
  }

  /* Mobile CTA banner (reference-style strip card). */
  body[data-page="home"] .home-mobile-cta {
    display: block;
    padding: 0;
    margin-top: 12px;
  }

  body[data-page="home"] .home-mobile-cta .container {
    width: 100%;
    max-width: 100%;
  }

  body[data-page="home"] .home-mobile-cta__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 10px;
    align-items: center;
    padding: 16px 16px;
    border: 1px solid rgba(0, 70, 184, 0.14);
    border-radius: var(--m2-radius);
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.12), rgba(0, 43, 102, 0.92));
    box-shadow: var(--m2-shadow-md);
    overflow: hidden;
    color: var(--color-white);
    text-decoration: none;
  }

  body[data-page="home"] .home-mobile-cta__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(420px 220px at 18% 30%, rgba(255, 255, 255, 0.14), transparent 62%),
      radial-gradient(380px 200px at 86% 72%, rgba(0, 180, 255, 0.18), transparent 58%);
    pointer-events: none;
  }

  body[data-page="home"] .home-mobile-cta__body {
    position: relative;
    display: grid;
    gap: 6px;
    min-width: 0;
  }

  body[data-page="home"] .home-mobile-cta__title {
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0.2px;
  }

  body[data-page="home"] .home-mobile-cta__desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
  }

  body[data-page="home"] .home-mobile-cta__btn {
    justify-self: start;
    margin-top: 2px;
  }

  body[data-page="home"] .home-mobile-cta__media {
    position: relative;
    width: 120px;
    height: 74px;
    border-radius: 14px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
      var(--banner-image, url("../images/banners/default-industrial-factory.png"));
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 36px rgba(0, 18, 48, 0.22);
  }

  /* Section rhythm + unified mobile cards (products/solutions/cases/news). */
  body[data-page="home"] .home-section {
    padding-block: var(--m2-section-y);
  }

  body[data-page="home"] .home-products {
    padding-top: 18px;
  }

  body[data-page="home"] .home-section-title,
  body[data-page="home"] .home-news-heading {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
    align-items: baseline;
    margin-bottom: 14px;
    padding-right: 0;
    text-align: left;
  }

  body[data-page="home"] .home-section-title p {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
  }

  /* Horizontal card rail for products/solutions/cases (reference-like). */
  body[data-page="home"] .home-product-grid,
  body[data-page="home"] .home-solution-grid,
  body[data-page="home"] .home-case-grid {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 2px 0 10px;
    gap: 12px;
  }

  body[data-page="home"] .home-product-grid::-webkit-scrollbar,
  body[data-page="home"] .home-solution-grid::-webkit-scrollbar,
  body[data-page="home"] .home-case-grid::-webkit-scrollbar {
    display: none;
  }

  body[data-page="home"] .home-product-grid {
    grid-auto-columns: minmax(260px, 76vw);
  }

  body[data-page="home"] .home-product-card {
    scroll-snap-align: start;
    border: 1px solid var(--m2-card-border);
    border-radius: var(--m2-radius);
    box-shadow: var(--m2-shadow-sm);
  }

  body[data-page="home"] .home-product-card img {
    height: 130px;
    border-radius: 14px;
    object-fit: cover;
  }

  /* Stats strip (reference: dark KPI bar) */
  body[data-page="home"] .home-mobile-kpi {
    display: block;
    padding: 0;
    margin-top: -6px;
  }

  body[data-page="home"] .home-mobile-kpi .container {
    width: calc(100% - (var(--m2-gutter) * 2));
  }

  body[data-page="home"] .home-mobile-kpi__strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 12px;
    border-radius: var(--m2-radius);
    background: linear-gradient(135deg, #001c3f, #003a8c);
    box-shadow: var(--m2-shadow-md);
    color: var(--color-white);
  }

  body[data-page="home"] .home-mobile-kpi__item {
    display: grid;
    gap: 4px;
    justify-items: center;
    text-align: center;
    min-width: 0;
  }

  body[data-page="home"] .home-mobile-kpi__item strong {
    font-size: 16px;
    line-height: 1.1;
    letter-spacing: 0.2px;
  }

  body[data-page="home"] .home-mobile-kpi__item small {
    font-size: 11px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.78);
    white-space: nowrap;
  }

  body[data-page="home"] .home-outline-btn {
    min-height: 34px;
    font-size: 12px;
  }

  body[data-page="home"] .home-solution-grid {
    grid-auto-columns: minmax(172px, 56vw);
  }

  body[data-page="home"] .home-solution-card {
    height: 110px;
    scroll-snap-align: start;
    border-radius: var(--m2-radius);
    box-shadow: var(--m2-shadow-sm);
    position: relative;
    overflow: hidden;
  }

  body[data-page="home"] .home-solution-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 18, 48, 0.20) 0%, rgba(0, 18, 48, 0.88) 100%);
    pointer-events: none;
  }

  body[data-page="home"] .home-solution-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="home"] .home-solution-card span {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 1;
    display: block;
    font-weight: 900;
    font-size: 13px;
    color: var(--color-white);
    text-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  }

  body[data-page="home"] .home-case-grid {
    grid-auto-columns: minmax(260px, 76vw);
  }

  body[data-page="home"] .home-case-card {
    scroll-snap-align: start;
    border: 1px solid var(--m2-card-border);
    border-radius: var(--m2-radius);
    box-shadow: var(--m2-shadow-sm);
    overflow: hidden;
  }

  body[data-page="home"] .home-case-card img {
    height: 140px;
    object-fit: cover;
  }

  body[data-page="home"] .home-case-card > div {
    display: grid;
    gap: 8px;
    padding: 14px 14px 16px;
  }

  body[data-page="home"] .home-case-card p {
    margin: 0;
    color: rgba(14, 39, 88, 0.74);
    font-size: 12px;
    line-height: 1.6;
  }

  body[data-page="home"] .home-case-grid .home-case-card:nth-child(n + 4) {
    display: none;
  }

  /* Company advantages: convert to a compact, consistent grid cards. */
  body[data-page="home"] .home-advantage-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-page="home"] .home-advantage-item {
    min-height: 126px;
    padding: 16px 10px;
    border: 1px solid var(--m2-card-border);
    border-radius: var(--m2-radius-sm);
    background: var(--color-white);
    box-shadow: var(--m2-shadow-sm);
  }

  /* News: keep layout stable and avoid nth-child hacks. */
  body[data-page="home"] .home-news-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body[data-page="home"] .home-news-grid > div:nth-child(2) {
    display: none;
  }

  body[data-page="home"] .home-news-list article {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  body[data-page="home"] .home-news-list img {
    width: 96px;
    height: 72px;
    border-radius: 12px;
    object-fit: cover;
  }

  body[data-page="home"] .home-news-list article > div {
    display: grid;
    gap: 6px;
    min-width: 0;
  }

  body[data-page="home"] .home-news-list article > div > span {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(0, 70, 184, 0.10);
    color: #003a8c;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
  }

  body[data-page="home"] .home-news-list h3 {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 900;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="home"] .home-news-list p {
    margin: 0;
    font-size: 11px;
    color: rgba(14, 39, 88, 0.66);
    white-space: nowrap;
  }

  /* Trust logos (reference: compact, low-height). */
  body[data-page="home"] .home-trust {
    display: block !important;
    padding: 0 0 8px;
  }

  body[data-page="home"] .home-trust__title {
    margin: 0 0 12px;
    text-align: center;
    font-size: 16px;
    font-weight: 950;
    letter-spacing: 0.2px;
    color: rgba(14, 39, 88, 0.86);
  }

  body[data-page="home"] .home-trust__logos {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 18px;
    justify-content: center;
    align-items: center;
    overflow-x: auto;
    padding: 6px 2px 10px;
    scrollbar-width: none;
  }

  body[data-page="home"] .home-trust__logos::-webkit-scrollbar {
    display: none;
  }

  body[data-page="home"] .home-trust__logo {
    font-weight: 950;
    letter-spacing: 0.6px;
    font-size: 12px;
    color: rgba(14, 39, 88, 0.26);
    white-space: nowrap;
  }

  /* Bottom service CTA (reference: strong blue strip + person image). */
  body[data-page="home"] .home-service-cta {
    display: block !important;
    padding: 12px 0 4px;
  }

  body[data-page="home"] .home-service-cta__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 10px;
    align-items: center;
    border-radius: var(--m2-radius);
    padding: 18px 16px;
    background: linear-gradient(135deg, #001c3f 0%, #003a8c 100%);
    box-shadow: var(--m2-shadow-lg);
    overflow: hidden;
    color: var(--color-white);
  }

  body[data-page="home"] .home-service-cta__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(420px 220px at 18% 30%, rgba(255, 255, 255, 0.14), transparent 62%),
      radial-gradient(360px 200px at 86% 72%, rgba(0, 180, 255, 0.18), transparent 58%);
    pointer-events: none;
  }

  body[data-page="home"] .home-service-cta__body {
    position: relative;
    display: grid;
    gap: 8px;
    min-width: 0;
  }

  body[data-page="home"] .home-service-cta__body strong {
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0.2px;
  }

  body[data-page="home"] .home-service-cta__body p {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.82);
  }

  body[data-page="home"] .home-service-cta__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  body[data-page="home"] .home-service-cta__media {
    position: relative;
    width: 128px;
    height: 112px;
    border-radius: 16px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
      var(--banner-image, url("../images/banners/default-industrial-factory.png"));
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 36px rgba(0, 18, 48, 0.22);
  }

  /* Replace form CTA with banner CTA on mobile home. */
  body[data-page="home"] .home-quote {
    display: none;
  }

  /* Footer: rebuild layout on mobile home (keep desktop untouched). */
  body[data-page="home"] .site-footer {
    background: linear-gradient(135deg, #001c3f 0%, #003a8c 100%);
    color: rgba(255, 255, 255, 0.88);
    margin-top: 14px;
  }

  body[data-page="home"] .site-footer a {
    color: rgba(255, 255, 255, 0.88);
  }

  body[data-page="home"] .site-footer .footer-main {
    padding: 26px 0 12px;
  }

  body[data-page="home"] .site-footer .footer-main__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body[data-page="home"] .site-footer .footer-company h2 {
    color: var(--color-white);
    margin-bottom: 10px;
  }

  body[data-page="home"] .site-footer .footer-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  body[data-page="home"] .site-footer .footer-links h3 {
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    margin-bottom: 10px;
  }

  body[data-page="home"] .site-footer .footer-links a {
    font-size: 12px;
    opacity: 0.92;
  }

  body[data-page="home"] .site-footer .footer-qrcode {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  body[data-page="home"] .site-footer .footer-qrcode img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 16px;
  }

  body[data-page="home"] .site-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  body[data-page="home"] .site-footer .footer-bottom__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-bottom: 90px;
  }
}

@media (max-width: 480px) {
  body[data-page="home"] .home-hero__inner {
    min-height: 440px;
    padding-bottom: 172px;
  }

  body[data-page="home"] .home-hero h1 {
    font-size: 28px;
  }

  body[data-page="home"] .home-product-grid,
  body[data-page="home"] .home-case-grid {
    grid-auto-columns: minmax(240px, 82vw);
  }
}

/* -------------------------------------------------------------------------- */
/* Mobile Products v2 (Reference-template rebuild, mobile-only, desktop intact) */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body[data-page="products"] {
    --p2-gutter: 16px;
    --p2-radius: 18px;
    --p2-radius-sm: 14px;
    --p2-shadow-md: 0 12px 28px rgba(0, 20, 52, 0.12);
    --p2-shadow-sm: 0 8px 18px rgba(0, 20, 52, 0.10);
    --p2-card-border: rgba(14, 39, 88, 0.10);
  }

  body[data-page="products"] .product-page {
    background: radial-gradient(900px 460px at 50% -220px, rgba(0, 90, 210, 0.14), transparent 62%),
      linear-gradient(180deg, #ffffff 0%, #f4f8ff 50%, #ffffff 100%);
  }

  body[data-page="products"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--p2-gutter);
  }

  /* Mobile header: keep consistent with index/about mobile header. */
  body[data-page="products"] .site-header .topbar {
    display: block;
    padding: 6px 0;
    background: var(--color-white);
    border-bottom: 1px solid rgba(14, 39, 88, 0.08);
  }

  body[data-page="products"] .site-header .topbar__inner {
    justify-content: flex-end;
  }

  body[data-page="products"] .site-header .topbar__contact {
    justify-content: flex-end;
    gap: 0;
  }

  body[data-page="products"] .site-header .topbar__contact a:first-child {
    font-weight: 800;
    font-size: 12px;
    white-space: nowrap;
  }

  body[data-page="products"] .site-header .topbar__contact a:not(:first-child),
  body[data-page="products"] .site-header .topbar__links {
    display: none;
  }

  body[data-page="products"] .site-header .navbar {
    background: var(--color-white);
    box-shadow: 0 10px 30px rgba(0, 20, 52, 0.08);
  }

  body[data-page="products"] .site-header .navbar__inner {
    min-height: 56px;
    padding-block: 8px;
  }

  /* Banner: card-like, closer to the reference mobile template. */
  body[data-page="products"] .product-banner {
    min-height: 0;
    margin: 0 var(--p2-gutter) 12px;
    border-radius: var(--p2-radius);
    overflow: hidden;
    box-shadow: var(--p2-shadow-md);
  }

  body[data-page="products"] .product-banner::before {
    background-image:
      linear-gradient(90deg, rgba(0, 18, 48, 0.92) 0%, rgba(0, 43, 102, 0.66) 52%, rgba(0, 43, 102, 0.10) 100%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png"));
    background-position: right center;
  }

  body[data-page="products"] .product-banner__inner {
    min-height: 0;
    padding: 26px 18px 22px;
  }

  body[data-page="products"] .product-banner h1 {
    font-size: 28px;
    line-height: 1.22;
  }

  body[data-page="products"] .product-banner p {
    font-size: 13px;
    line-height: 1.65;
    font-weight: 600;
  }

  body[data-page="products"] .product-banner span {
    font-size: 12px;
  }

  /* Search bar: reference-style input + button row. */
  body[data-page="products"] .product-mobile-search {
    display: block;
    padding: 0;
    margin: 0 0 10px;
  }

  body[data-page="products"] .product-mobile-search__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 108px;
    gap: 10px;
    padding: 0;
  }

  body[data-page="products"] .product-mobile-search__input {
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--p2-card-border);
    border-radius: 14px;
    background: var(--color-white);
    box-shadow: var(--p2-shadow-sm);
    outline: none;
  }

  body[data-page="products"] .product-mobile-search__input:focus {
    border-color: rgba(0, 70, 184, 0.45);
    box-shadow: 0 0 0 3px rgba(0, 70, 184, 0.12);
  }

  body[data-page="products"] .product-mobile-search__btn {
    min-height: 46px;
    border-radius: 14px;
    box-shadow: var(--p2-shadow-sm);
  }

  /* Mobile categories: reference-like white card + 2x4 grid. */
  body[data-page="products"] .product-mobile-categories {
    display: block !important;
    margin: 0 0 12px;
  }

  body[data-page="products"] .product-mobile-categories__card {
    border: 1px solid var(--p2-card-border);
    border-radius: var(--p2-radius);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--p2-shadow-md);
    padding: 16px 14px 18px;
    backdrop-filter: blur(10px);
  }

  body[data-page="products"] .product-mobile-categories__title {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 950;
    color: var(--color-text);
  }

  body[data-page="products"] .product-mobile-categories__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 10px;
  }

  body[data-page="products"] .product-mobile-categories__grid a {
    min-height: 86px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 10px;
    padding: 10px 8px;
    border: 1px solid rgba(14, 39, 88, 0.08);
    border-radius: 14px;
    background: var(--color-white);
    color: var(--color-text);
    text-decoration: none;
    text-align: center;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
  }

  body[data-page="products"] .product-mobile-categories__grid a::before,
  body[data-page="products"] .product-mobile-categories__grid a.is-active::before {
    content: none;
    display: none;
  }

  body[data-page="products"] .product-mobile-categories__grid a.is-active {
    color: var(--color-white);
    border-color: rgba(0, 70, 184, 0.20);
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.92), rgba(0, 43, 102, 0.92));
    box-shadow: var(--p2-shadow-sm);
  }

  /* Layout: switch to single column, keep only category card from sidebar. */
  body[data-page="products"] .product-list-section {
    padding-block: 10px 26px;
  }

  body[data-page="products"] .product-list-layout {
    display: block;
  }

  body[data-page="products"] .product-sidebar {
    display: none;
  }

  body[data-page="products"] .product-sidebar .process-card,
  body[data-page="products"] .product-sidebar .help-card {
    display: none;
  }

  /* Mobile filter bar: reference-like pills row. */
  body[data-page="products"] .product-mobile-filterbar {
    display: block;
    margin: 0 0 12px;
  }

  body[data-page="products"] .product-mobile-filterbar__row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0 6px;
  }

  body[data-page="products"] .product-mobile-filterbar__row::-webkit-scrollbar {
    display: none;
  }

  body[data-page="products"] .product-mobile-filterbar__row > a,
  body[data-page="products"] .product-mobile-filterbar__row > button,
  body[data-page="products"] .product-mobile-filterbar__row > select {
    width: max-content;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(14, 39, 88, 0.10);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--p2-shadow-sm);
    color: var(--color-text);
    font-size: 12px;
    font-weight: 800;
    outline: none;
    white-space: nowrap;
  }

  body[data-page="products"] .product-mobile-filterbar__row > a {
    display: grid;
    place-items: center;
    text-decoration: none;
  }

  body[data-page="products"] .product-mobile-filterbar__row > a.is-active {
    color: var(--color-white);
    border-color: rgba(0, 70, 184, 0.22);
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.92), rgba(0, 43, 102, 0.92));
  }

  body[data-page="products"] .product-mobile-filterbar__row > button {
    cursor: pointer;
  }

  body[data-page="products"] .product-filter-card {
    display: none;
  }

  body[data-page="products"] .product-result-bar {
    margin-bottom: 12px;
  }

  body[data-page="products"] .product-result-bar p {
    font-size: 14px;
  }

  /* List: rebuild as single-column large cards (image left, content right). */
  body[data-page="products"] .product-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body[data-page="products"] .zz-product-card {
    padding: 14px 14px;
    border: 1px solid var(--p2-card-border);
    border-radius: var(--p2-radius);
    box-shadow: var(--p2-shadow-sm);
  }

  body[data-page="products"] .zz-product-card {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    gap: 6px 14px;
    align-items: start;
  }

  body[data-page="products"] .zz-product-card img {
    grid-row: 1 / -1;
    width: 132px;
    height: 96px;
    margin: 0;
    border-radius: 14px;
    object-fit: cover;
  }

  body[data-page="products"] .zz-product-card h3 {
    margin: 2px 0 0;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 950;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="products"] .zz-product-tag {
    display: inline-flex !important;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(0, 70, 184, 0.10);
    color: #003a8c;
    font-size: 11px;
    font-weight: 950;
    width: max-content;
  }

  body[data-page="products"] .zz-product-card p {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: rgba(14, 39, 88, 0.70);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="products"] .zz-product-card dl {
    margin: 6px 0 0;
    font-size: 12px;
    gap: 4px 6px;
  }

  body[data-page="products"] .zz-product-card a {
    justify-content: flex-start;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    color: var(--color-blue-700);
    font-weight: 800;
  }

  body[data-page="products"] .zz-product-card a::after {
    content: " →";
  }

  /* Pagination: reference-like center pager; hide legacy load more on mobile. */
  body[data-page="products"] .product-load-more {
    display: none;
  }

  body[data-page="products"] .product-mobile-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 0 8px;
  }

  body[data-page="products"] .product-mobile-pagination a,
  body[data-page="products"] .product-mobile-pagination span {
    min-width: 38px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(14, 39, 88, 0.10);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--p2-shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    font-weight: 800;
    font-size: 12px;
    text-decoration: none;
  }

  body[data-page="products"] .product-mobile-pagination a.is-active {
    color: var(--color-white);
    border-color: rgba(0, 70, 184, 0.22);
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.92), rgba(0, 43, 102, 0.92));
  }

  body[data-page="products"] .product-mobile-pagination span {
    border-style: dashed;
    box-shadow: none;
    background: transparent;
  }

  /* Mobile CTA banner after list. */
  body[data-page="products"] .product-mobile-cta {
    display: block;
    margin-top: 10px;
  }

  body[data-page="products"] .product-mobile-cta__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 124px;
    gap: 10px;
    align-items: center;
    padding: 16px 16px;
    border-radius: var(--p2-radius);
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.12), rgba(0, 43, 102, 0.92));
    box-shadow: var(--p2-shadow-md);
    overflow: hidden;
    color: var(--color-white);
  }

  body[data-page="products"] .product-mobile-cta__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(420px 220px at 18% 30%, rgba(255, 255, 255, 0.14), transparent 62%),
      radial-gradient(380px 200px at 86% 72%, rgba(0, 180, 255, 0.18), transparent 58%);
    pointer-events: none;
  }

  body[data-page="products"] .product-mobile-cta__body {
    position: relative;
    display: grid;
    gap: 6px;
  }

  body[data-page="products"] .product-mobile-cta__body strong {
    font-size: 16px;
    line-height: 1.25;
  }

  body[data-page="products"] .product-mobile-cta__body p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
  }

  body[data-page="products"] .product-mobile-cta__btn {
    justify-self: start;
    min-height: 40px;
    padding-inline: 16px;
    border-radius: 14px;
  }

  body[data-page="products"] .product-mobile-cta__media {
    position: relative;
    width: 124px;
    height: 96px;
    border-radius: 16px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
      var(--banner-image, url("../images/banners/default-industrial-factory.png"));
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 36px rgba(0, 18, 48, 0.22);
  }

  /* Hide old long modules on mobile (keep HTML for future). */
  body[data-page="products"] .recommend-products,
  body[data-page="products"] .product-helper-section,
  body[data-page="products"] .service-guarantee,
  body[data-page="products"] .product-inquiry {
    display: none;
  }

  /* Footer: align with new mobile footer style used on index/about. */
  body[data-page="products"] .site-footer {
    background: linear-gradient(135deg, #001c3f 0%, #003a8c 100%);
    color: rgba(255, 255, 255, 0.88);
  }

  body[data-page="products"] .site-footer a {
    color: rgba(255, 255, 255, 0.88);
  }

  body[data-page="products"] .site-footer .footer-main {
    padding: 26px 0 12px;
  }

  body[data-page="products"] .site-footer .footer-main__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body[data-page="products"] .site-footer .footer-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  body[data-page="products"] .site-footer .footer-qrcode {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  body[data-page="products"] .site-footer .footer-qrcode img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 16px;
  }

  body[data-page="products"] .site-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  body[data-page="products"] .site-footer .footer-bottom__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-bottom: 90px;
  }
}

@media (max-width: 480px) {
  body[data-page="products"] .product-banner {
    margin-inline: 12px;
  }

  body[data-page="products"] .product-category-list {
    gap: 10px 8px;
    padding: 14px 12px 16px;
  }

  body[data-page="products"] .zz-product-card {
    grid-template-columns: 124px minmax(0, 1fr);
  }

  body[data-page="products"] .zz-product-card img {
    width: 124px;
    height: 92px;
  }
}

/* -------------------------------------------------------------------------- */
/* Mobile Support v2 (Reference-template rebuild, mobile-only, desktop intact) */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body[data-page="support"] {
    --s2-gutter: 16px;
    --s2-radius: 20px;
    --s2-radius-sm: 14px;
    --s2-shadow-md: 0 12px 28px rgba(0, 20, 52, 0.12);
    --s2-shadow-sm: 0 8px 18px rgba(0, 20, 52, 0.10);
    --s2-card-border: rgba(14, 39, 88, 0.10);
  }

  body[data-page="support"] .service-page {
    background: radial-gradient(900px 460px at 50% -220px, rgba(0, 90, 210, 0.14), transparent 62%),
      linear-gradient(180deg, #ffffff 0%, #f4f8ff 50%, #ffffff 100%);
  }

  body[data-page="support"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
  }

  body[data-page="support"] .support-desktop-only {
    display: none !important;
  }

  body[data-page="support"] .support-mobile-only {
    display: inline !important;
  }

  body[data-page="support"] .support-mobile-only[style*="display:none"] {
    display: unset !important;
  }

  /* Mobile header: keep consistent with index/products/about mobile header. */
  body[data-page="support"] .site-header .topbar {
    display: block !important;
    padding: 6px 0;
    background: #0b2d67;
    border-bottom: 0;
  }

  body[data-page="support"] .site-header .topbar__inner {
    justify-content: flex-start;
  }

  body[data-page="support"] .site-header .topbar__contact {
    justify-content: flex-start;
    gap: 6px;
  }

  body[data-page="support"] .site-header .topbar__contact a:first-child {
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    white-space: nowrap;
  }

  body[data-page="support"] .site-header .topbar__contact a:not(:first-child),
  body[data-page="support"] .site-header .topbar__links {
    display: none;
  }

  body[data-page="support"] .site-header .navbar {
    background: var(--color-white);
    box-shadow: 0 10px 30px rgba(0, 20, 52, 0.08);
  }

  body[data-page="support"] .site-header .navbar__inner {
    min-height: 56px;
    padding-block: 8px;
  }

  body[data-page="support"] .service-breadcrumb {
    display: none;
  }

  /* Hero: full-bleed visual and a softer composition like the reference template. */
  body[data-page="support"] .service-banner {
    min-height: 228px;
    margin: 0 12px;
    border-radius: 0;
    overflow: hidden;
  }

  body[data-page="support"] .service-banner::before {
    background-image:
      linear-gradient(90deg, rgba(0, 18, 48, 0.90) 0%, rgba(0, 43, 102, 0.62) 52%, rgba(0, 43, 102, 0.10) 100%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png"));
    background-position: right center;
  }

  body[data-page="support"] .service-banner__inner {
    min-height: 0;
    padding: 26px var(--s2-gutter) 118px;
    gap: 10px;
  }

  body[data-page="support"] .service-banner h1 {
    font-size: 28px;
    line-height: 1.2;
  }

  body[data-page="support"] .service-banner p {
    max-width: 280px;
    font-size: 13px;
    line-height: 1.65;
  }

  body[data-page="support"] .service-banner-points {
    display: none;
  }

  body[data-page="support"] .banner-search {
    display: none;
  }

  body[data-page="support"] .banner-search input,
  body[data-page="support"] .banner-search button {
    min-height: 44px;
    border-radius: 14px;
  }

  /* Replace the old portal tiles with new modules on mobile. */
  body[data-page="support"] .service-nav-section {
    display: none;
  }

  /* Assurance 4-up module under hero. */
  body[data-page="support"] .support-mobile-assurance {
    display: block !important;
    margin-top: -40px;
    padding: 0 0 12px;
  }

  body[data-page="support"] .support-mobile-assurance__card {
    border: 1px solid var(--s2-card-border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--s2-shadow-md);
    backdrop-filter: blur(10px);
    padding: 16px 12px;
  }

  body[data-page="support"] .support-mobile-assurance__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 8px;
  }

  body[data-page="support"] .support-assurance-item {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 6px;
    padding: 10px 6px 12px;
    border: 1px solid rgba(14, 39, 88, 0.08);
    border-radius: 14px;
    background: var(--color-white);
    min-width: 0;
  }

  body[data-page="support"] .support-assurance-item__icon {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(0, 70, 184, 0.10);
    border: 1px solid rgba(0, 70, 184, 0.12);
    color: var(--color-blue-700);
  }

  body[data-page="support"] .support-assurance-item__icon svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  body[data-page="support"] .support-assurance-item strong {
    font-size: 12px;
    line-height: 1.1;
    font-weight: 950;
    white-space: nowrap;
  }

  body[data-page="support"] .support-assurance-item small {
    font-size: 10px;
    line-height: 1.35;
    color: var(--color-muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* Support services 2x2 cards: new module (mobile-only). */
  body[data-page="support"] .support-mobile-services {
    display: block;
    padding: 18px 0 8px;
  }

  body[data-page="support"] .support-mobile-services__head {
    margin-bottom: 12px;
  }

  body[data-page="support"] .support-mobile-services__head h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 900;
  }

  body[data-page="support"] .support-mobile-services__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body[data-page="support"] .support-mobile-service-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 18px;
    gap: 10px;
    align-items: center;
    padding: 14px 12px;
    border: 1px solid var(--s2-card-border);
    border-radius: var(--s2-radius-sm);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--s2-shadow-sm);
    text-decoration: none;
    color: var(--color-text);
  }

  body[data-page="support"] .support-mobile-service-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.10), rgba(255, 255, 255, 0.94));
    border: 1px solid rgba(0, 70, 184, 0.12);
    color: var(--color-blue-700);
  }

  body[data-page="support"] .support-mobile-service-card__icon svg {
    width: 22px;
    height: 22px;
  }

  body[data-page="support"] .support-mobile-service-card__body {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  body[data-page="support"] .support-mobile-service-card__body strong {
    font-size: 14px;
    line-height: 1.2;
  }

  body[data-page="support"] .support-mobile-service-card__body small {
    font-size: 11px;
    line-height: 1.35;
    color: var(--color-muted);
  }

  body[data-page="support"] .support-mobile-service-card__arrow {
    justify-self: end;
    color: rgba(15, 27, 45, 0.55);
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
  }

  /* FAQ: compact question list for mobile only. */
  body[data-page="support"] .support-mobile-faq {
    display: block !important;
    padding: 8px 0 4px;
  }

  body[data-page="support"] .support-mobile-faq .service-section-head {
    margin-bottom: 12px;
  }

  body[data-page="support"] .support-faq-list {
    display: grid;
    border: 1px solid var(--s2-card-border);
    border-radius: var(--s2-radius);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--s2-shadow-sm);
    overflow: hidden;
  }

  body[data-page="support"] .support-faq-list a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16px;
    gap: 10px;
    align-items: center;
    min-height: 48px;
    padding: 0 14px;
    border-top: 1px solid rgba(14, 39, 88, 0.08);
    text-decoration: none;
    color: var(--color-text);
  }

  body[data-page="support"] .support-faq-list a:first-child {
    border-top: 0;
  }

  body[data-page="support"] .support-faq-list strong {
    font-size: 13px;
    line-height: 1.35;
    font-weight: 850;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-page="support"] .support-faq-list span {
    color: rgba(15, 27, 45, 0.55);
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    justify-self: end;
  }

  /* Existing sections: rebuild spacing + card system for portal feel. */
  body[data-page="support"] .service-home-section {
    display: none;
  }

  body[data-page="support"] .service-home-section,
  body[data-page="support"] .service-section {
    padding-block: 18px;
  }

  body[data-page="support"] .service-card {
    border: 1px solid var(--s2-card-border);
    border-radius: var(--s2-radius);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--s2-shadow-md);
  }

  body[data-page="support"] .service-section-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: baseline;
    margin-bottom: 12px;
  }

  body[data-page="support"] .service-section-head h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 950;
  }

  body[data-page="support"] .service-section-head a {
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    color: var(--color-blue-700);
    white-space: nowrap;
  }

  body[data-page="support"] .service-home-grid {
    gap: 14px;
  }

  /* FAQ: compact accordion list with arrow. */
  body[data-page="support"] .service-accordion-list details {
    border-top: 1px solid rgba(14, 39, 88, 0.08);
    padding: 10px 0;
  }

  body[data-page="support"] .service-accordion-list details:first-child {
    border-top: 0;
  }

  body[data-page="support"] .service-accordion-list summary {
    list-style: none;
    cursor: pointer;
    font-weight: 900;
    font-size: 13px;
    color: rgba(14, 39, 88, 0.86);
    display: grid;
    grid-template-columns: 1fr 18px;
    align-items: center;
    gap: 10px;
  }

  body[data-page="support"] .service-accordion-list summary::-webkit-details-marker {
    display: none;
  }

  body[data-page="support"] .service-accordion-list summary::after {
    content: "⌄";
    justify-self: end;
    color: rgba(14, 39, 88, 0.55);
    font-weight: 950;
    transition: transform 150ms ease;
  }

  body[data-page="support"] .service-accordion-list details[open] summary::after {
    transform: rotate(180deg);
  }

  body[data-page="support"] .service-accordion-list p {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-muted);
  }

  /* Downloads: use the new horizontal file cards; hide old long list. */
  body[data-page="support"] .service-home-download {
    display: none;
  }

  body[data-page="support"] .support-mobile-download {
    display: block !important;
  }

  body[data-page="support"] .support-download-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 2px 0 10px;
  }

  body[data-page="support"] .support-download-card {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 8px;
    padding: 12px 6px 10px;
    border: 1px solid var(--s2-card-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--s2-shadow-sm);
    text-decoration: none;
    color: var(--color-text);
    min-width: 0;
  }

  body[data-page="support"] .support-download-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(0, 70, 184, 0.10);
    border: 1px solid rgba(0, 70, 184, 0.12);
    color: var(--color-blue-700);
    font-weight: 950;
    font-size: 11px;
  }

  body[data-page="support"] .support-download-card__body {
    display: grid;
    gap: 3px;
    min-width: 0;
    justify-items: center;
  }

  body[data-page="support"] .support-download-card__body strong {
    font-size: 11px;
    line-height: 1.18;
    font-weight: 950;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body[data-page="support"] .support-download-card__body small {
    font-size: 10px;
    color: var(--color-muted);
    white-space: normal;
    text-align: center;
  }

  /* Video: horizontal cards with play + duration badge + desc. */
  body[data-page="support"] .service-video-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    padding: 2px 0 8px;
    scrollbar-width: none;
  }

  body[data-page="support"] .service-video-strip::-webkit-scrollbar {
    display: none;
  }

  body[data-page="support"] .service-video-card {
    flex: 0 0 clamp(84px, 22vw, 98px);
    scroll-snap-align: start;
    position: relative;
    border: 1px solid var(--s2-card-border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--color-white);
    box-shadow: var(--s2-shadow-sm);
    text-decoration: none;
    color: var(--color-text);
    padding-bottom: 6px;
  }

  body[data-page="support"] .service-video-card img {
    width: 100%;
    height: 72px;
    border-radius: 0;
    object-fit: cover;
  }

  body[data-page="support"] .service-video-card > span {
    position: absolute;
    left: 50%;
    top: 43px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(0, 18, 48, 0.62);
    color: var(--color-white);
    font-weight: 950;
    transform: translate(-50%, -50%);
  }

  body[data-page="support"] .service-video-card__duration {
    position: absolute;
    right: 8px;
    bottom: 8px;
    top: auto;
    height: 20px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(0, 18, 48, 0.62);
    color: rgba(255, 255, 255, 0.92);
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 900;
  }

  body[data-page="support"] .service-video-card strong {
    display: block;
    margin: 8px 8px 0;
    font-size: 10px;
    line-height: 1.28;
    font-weight: 950;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="support"] .service-video-card__desc {
    display: block !important;
    margin: 4px 8px 0;
    font-size: 9px;
    line-height: 1.5;
    color: var(--color-muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* Hide old long sections on mobile (keep HTML for future). */
  body[data-page="support"] .service-flow-section,
  body[data-page="support"] .service-guarantee-section,
  body[data-page="support"] .service-support-strip {
    display: none;
  }

  /* Mobile bottom CTA: strong blue banner with person image. */
  body[data-page="support"] .support-mobile-cta {
    display: block !important;
    padding: 12px 0 6px;
  }

  body[data-page="support"] .support-mobile-cta__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 10px;
    align-items: center;
    border-radius: var(--s2-radius);
    padding: 18px 16px;
    background: linear-gradient(135deg, #001c3f 0%, #003a8c 100%);
    box-shadow: var(--s2-shadow-md);
    overflow: hidden;
    color: var(--color-white);
  }

  body[data-page="support"] .support-mobile-cta__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(420px 220px at 18% 30%, rgba(255, 255, 255, 0.14), transparent 62%),
      radial-gradient(360px 200px at 86% 72%, rgba(0, 180, 255, 0.18), transparent 58%);
    pointer-events: none;
  }

  body[data-page="support"] .support-mobile-cta__body {
    position: relative;
    display: grid;
    gap: 8px;
    min-width: 0;
  }

  body[data-page="support"] .support-mobile-cta__body strong {
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0.2px;
    font-weight: 950;
  }

  body[data-page="support"] .support-mobile-cta__body p {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.82);
  }

  body[data-page="support"] .support-mobile-cta__actions {
    display: grid;
    grid-template-columns: 160px;
    gap: 10px;
    justify-content: start;
    align-content: start;
    width: 160px;
  }

  body[data-page="support"] .support-mobile-cta__actions .btn {
    width: 160px;
    height: 56px;
    min-height: 56px;
    padding: 0 14px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
  }

  body[data-page="support"] .support-mobile-cta__media {
    position: relative;
    width: 128px;
    height: 112px;
    border-radius: 16px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
      var(--banner-image, url("../images/banners/default-industrial-factory.png"));
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 36px rgba(0, 18, 48, 0.22);
  }

  /* Footer: align with new mobile footer style used on index/products/about. */
  body[data-page="support"] .site-footer {
    background: linear-gradient(135deg, #001c3f 0%, #003a8c 100%);
    color: rgba(255, 255, 255, 0.88);
  }

  body[data-page="support"] .site-footer a {
    color: rgba(255, 255, 255, 0.88);
  }

  body[data-page="support"] .site-footer .footer-main {
    padding: 26px 0 12px;
  }

  body[data-page="support"] .site-footer .footer-main__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body[data-page="support"] .site-footer .footer-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  body[data-page="support"] .site-footer .footer-qrcode {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  body[data-page="support"] .site-footer .footer-qrcode img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 16px;
  }

  body[data-page="support"] .site-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  body[data-page="support"] .site-footer .footer-bottom__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-bottom: 90px;
  }
}

@media (max-width: 480px) {
  body[data-page="support"] .service-nav-section {
    margin-top: -34px;
  }

  body[data-page="support"] .service-banner__inner {
    padding-bottom: 110px;
  }

  body[data-page="support"] .support-mobile-cta__actions {
    width: 160px;
  }

  body[data-page="support"] .support-mobile-cta__actions .btn {
    width: 160px;
    height: 56px;
    min-height: 56px;
    font-size: 12px;
  }
}

/* -------------------------------------------------------------------------- */
/* Mobile About v2 (Reference-template rebuild, mobile-only, desktop intact)   */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body[data-page="about"] {
    --a2-gutter: 16px;
    --a2-radius: 20px;
    --a2-radius-sm: 14px;
    --a2-shadow-lg: 0 18px 46px rgba(0, 20, 52, 0.14);
    --a2-shadow-md: 0 12px 28px rgba(0, 20, 52, 0.12);
    --a2-shadow-sm: 0 8px 18px rgba(0, 20, 52, 0.10);
    --a2-card-border: rgba(14, 39, 88, 0.10);
  }

  body[data-page="about"] .about-page {
    background: radial-gradient(900px 460px at 50% -220px, rgba(0, 90, 210, 0.14), transparent 62%),
      linear-gradient(180deg, #ffffff 0%, #f4f8ff 50%, #ffffff 100%);
  }

  body[data-page="about"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--a2-gutter);
  }

  body[data-page="about"] .about-desktop-only {
    display: none !important;
  }

  body[data-page="about"] .about-mobile-only {
    display: inline !important;
  }

  body[data-page="about"] .about-mobile-only[style*="display:none"] {
    display: unset !important;
  }

  /* Hide tab-nav on mobile (reference page has a continuous narrative layout). */
  body[data-page="about"] .about-tabs {
    display: none;
  }

  /* Hero: product-style image banner + mobile breadcrumb. */
  body[data-page="about"] .about-banner {
    margin: 0 12px 10px;
    min-height: 254px !important;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 18px 38px rgba(0, 28, 78, 0.18);
    background: #082d74;
  }

  body[data-page="about"] .about-banner::before {
    background-image:
      linear-gradient(90deg, rgba(1, 21, 59, 0.94) 0%, rgba(0, 44, 103, 0.72) 54%, rgba(0, 44, 103, 0.22) 100%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png"));
    background-position: right center;
    background-size: cover;
  }

  body[data-page="about"] .about-banner__inner {
    display: grid !important;
    align-content: end;
    min-height: 254px !important;
    padding: 28px 18px 24px;
  }

  body[data-page="about"] .about-banner h1 {
    margin-bottom: 8px;
    font-size: 30px;
    line-height: 1.08;
    font-weight: 950;
    color: #fff !important;
  }

  body[data-page="about"] .about-banner p {
    max-width: 280px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.58;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92) !important;
  }

  body[data-page="about"] .about-banner-crumb {
    display: none;
  }

  body[data-page="about"] .about-breadcrumb {
    display: block !important;
    margin: 0 0 10px;
    border-bottom: 0;
  }

  body[data-page="about"] .about-breadcrumb .container {
    padding-inline: 12px;
  }

  body[data-page="about"] .about-breadcrumb .breadcrumb__list {
    padding-inline: 2px;
    gap: 6px;
    font-size: 12px;
  }

  body[data-page="about"] .about-hero-points {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
  }

  body[data-page="about"] .about-hero-point {
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
    padding: 10px 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: rgba(0, 20, 52, 0.18);
    backdrop-filter: blur(10px);
    min-width: 0;
  }

  body[data-page="about"] .about-hero-point span {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.10);
    font-size: 12px;
    font-weight: 900;
  }

  body[data-page="about"] .about-hero-point strong {
    font-size: 11px;
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Company intro: rebuild as a large white card (text + stats) like the reference. */
  body[data-page="about"] .about-intro-section {
    padding-block: 10px 18px;
    background: transparent;
  }

  body[data-page="about"] .about-intro {
    gap: 14px;
  }

  body[data-page="about"] .about-intro article {
    width: 100%;
    padding: 18px 16px;
    border: 1px solid var(--a2-card-border);
    border-radius: var(--a2-radius);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--a2-shadow-md);
  }

  body[data-page="about"] .about-intro h2 {
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 900;
  }

  body[data-page="about"] .about-intro p {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--color-muted);
  }

  body[data-page="about"] .about-intro-stats {
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px dashed rgba(14, 39, 88, 0.18);
    gap: 10px;
  }

  body[data-page="about"] .about-intro-stats div {
    min-height: 74px;
    padding: 8px 6px;
    border: 1px solid rgba(14, 39, 88, 0.08);
    border-radius: 14px;
    background: var(--color-white);
    box-shadow: var(--a2-shadow-sm);
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
  }

  body[data-page="about"] .about-intro-stats div::before {
    content: "";
    width: 38px;
    height: 38px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.10), rgba(255, 255, 255, 0.94));
    border: 1px solid rgba(0, 70, 184, 0.12);
    box-shadow: 0 10px 20px rgba(0, 43, 102, 0.08);
  }

  body[data-page="about"] .about-intro-stats strong {
    font-size: 14px;
    line-height: 1.1;
    font-weight: 950;
  }

  body[data-page="about"] .about-intro-stats span {
    font-size: 11px;
    color: var(--color-muted);
    white-space: nowrap;
  }

  body[data-page="about"] .about-intro .btn {
    display: none;
  }

  body[data-page="about"] .about-video {
    display: none;
  }

  /* Advantages: convert to 2x2 big cards like the reference template. */
  body[data-page="about"] .about-triple-section {
    padding-block: 10px 18px;
    background: transparent;
  }

  body[data-page="about"] .about-triple-grid {
    gap: 18px;
  }

  body[data-page="about"] .about-panel {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }

  body[data-page="about"] .about-advantages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body[data-page="about"] .about-advantages h2 {
    grid-column: 1 / -1;
    margin-bottom: 12px;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 900;
  }

  body[data-page="about"] .about-advantages div {
    min-height: 112px;
    padding: 14px 12px 12px;
    border: 1px solid var(--a2-card-border);
    border-radius: var(--a2-radius-sm);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--a2-shadow-sm);
    position: relative;
    overflow: hidden;
  }

  body[data-page="about"] .about-advantages div::before {
    content: "";
    width: 40px;
    height: 40px;
    border-radius: 16px;
    display: block;
    margin-bottom: 10px;
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.10), rgba(255, 255, 255, 0.94));
    border: 1px solid rgba(0, 70, 184, 0.12);
    box-shadow: 0 10px 20px rgba(0, 43, 102, 0.08);
  }

  body[data-page="about"] .about-advantages strong {
    font-size: 14px;
    line-height: 1.2;
  }

  body[data-page="about"] .about-advantages p {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--color-muted);
  }

  /* Hide factory + service理念 + desktop contact form on mobile to match reference density. */
  body[data-page="about"] .about-factory-section,
  body[data-page="about"] .about-values-section,
  body[data-page="about"] .about-contact-strip {
    display: none;
  }

  /* Timeline: compact left axis + optional media card. */
  body[data-page="about"] .about-timeline-section {
    padding-block: 6px 18px;
  }

  body[data-page="about"] .about-section-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
  }

  body[data-page="about"] .about-section-head h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 950;
  }

  body[data-page="about"] .about-section-head a {
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    color: var(--color-blue-700);
  }

  body[data-page="about"] .about-mobile-timeline-media {
    display: block;
    border: 1px solid var(--a2-card-border);
    border-radius: var(--a2-radius);
    overflow: hidden;
    box-shadow: var(--a2-shadow-md);
    background: var(--color-white);
    margin-bottom: 14px;
  }

  body[data-page="about"] .about-mobile-timeline-media img {
    width: 100%;
    height: 150px;
    object-fit: cover;
  }

  body[data-page="about"] .about-mobile-timeline-media__body {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px 14px 14px;
  }

  body[data-page="about"] .about-mobile-timeline-media__body span {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(0, 70, 184, 0.10);
    color: var(--color-blue-700);
    font-weight: 950;
  }

  body[data-page="about"] .about-mobile-timeline-media__body strong {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 950;
  }

  body[data-page="about"] .about-mobile-timeline-media__body small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--color-muted);
  }

  body[data-page="about"] .about-timeline {
    border: 1px solid var(--a2-card-border);
    border-radius: var(--a2-radius);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--a2-shadow-md);
    padding: 14px 14px 6px;
  }

  body[data-page="about"] .about-timeline > div {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px 0;
    position: relative;
  }

  body[data-page="about"] .about-timeline > div::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(0, 70, 184, 0.14);
  }

  body[data-page="about"] .about-timeline > div strong {
    position: relative;
    font-weight: 950;
    color: #003a8c;
    font-size: 13px;
    line-height: 1.2;
    padding-left: 18px;
  }

  body[data-page="about"] .about-timeline > div strong::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1e7bff;
    box-shadow: 0 0 0 4px rgba(30, 123, 255, 0.16);
  }

  body[data-page="about"] .about-timeline > div span {
    font-size: 12px;
    color: var(--color-muted);
    line-height: 1.6;
  }

  body[data-page="about"] .about-timeline > div:nth-child(6) {
    display: none;
  }

  /* Culture: 3 centered icon items. */
  body[data-page="about"] .about-culture div {
    border: 1px solid var(--a2-card-border);
    border-radius: var(--a2-radius-sm);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--a2-shadow-sm);
    padding: 14px 12px;
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 8px;
  }

  body[data-page="about"] .about-culture div::before {
    content: "";
    width: 40px;
    height: 40px;
    border-radius: 16px;
    background: rgba(0, 70, 184, 0.10);
    border: 1px solid rgba(0, 70, 184, 0.12);
    box-shadow: 0 10px 20px rgba(0, 43, 102, 0.08);
  }

  /* Team: horizontal rail. */
  body[data-page="about"] .about-team-section {
    padding-block: 6px 18px;
  }

  body[data-page="about"] .about-team-grid {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(220px, 70vw);
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    padding: 2px 0 10px;
    scrollbar-width: none;
  }

  body[data-page="about"] .about-team-grid::-webkit-scrollbar {
    display: none;
  }

  body[data-page="about"] .about-team-grid article {
    scroll-snap-align: start;
    border: 1px solid var(--a2-card-border);
    border-radius: var(--a2-radius);
    overflow: hidden;
    box-shadow: var(--a2-shadow-sm);
    background: var(--color-white);
  }

  body[data-page="about"] .about-team-grid img {
    width: 100%;
    height: 120px;
    object-fit: cover;
  }

  body[data-page="about"] .about-team-grid h3 {
    margin: 10px 12px 0;
    font-size: 14px;
    font-weight: 950;
  }

  body[data-page="about"] .about-team-grid p {
    margin: 6px 12px 12px;
    font-size: 11px;
    color: var(--color-muted);
    line-height: 1.5;
  }

  /* Honors: certificate horizontal rail. */
  body[data-page="about"] .about-honors .btn {
    display: none;
  }

  body[data-page="about"] .about-honor-grid {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(150px, 44vw);
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    padding: 2px 0 10px;
    scrollbar-width: none;
  }

  body[data-page="about"] .about-honor-grid::-webkit-scrollbar {
    display: none;
  }

  body[data-page="about"] .about-honor-grid a {
    scroll-snap-align: start;
    border: 1px solid var(--a2-card-border);
    border-radius: var(--a2-radius);
    overflow: hidden;
    box-shadow: var(--a2-shadow-sm);
    background: var(--color-white);
    text-decoration: none;
    color: var(--color-text);
  }

  body[data-page="about"] .about-honor-grid img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    background: #eef5ff;
  }

  body[data-page="about"] .about-honor-grid span {
    display: block;
    padding: 10px 12px 12px;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    color: rgba(14, 39, 88, 0.82);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Bottom CTA: strong blue banner with image. */
  body[data-page="about"] .about-mobile-cta {
    display: block;
    padding: 8px 0 6px;
  }

  body[data-page="about"] .about-mobile-cta__card {
    position: relative;
    border-radius: var(--a2-radius);
    padding: 18px 16px;
    background: linear-gradient(135deg, #001c3f 0%, #003a8c 100%);
    box-shadow: var(--a2-shadow-lg);
    overflow: hidden;
    color: var(--color-white);
  }

  body[data-page="about"] .about-mobile-cta__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(0, 18, 48, 0.60) 0%, rgba(0, 43, 102, 0.25) 70%, rgba(0, 43, 102, 0.08) 100%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png"));
    background-size: cover;
    background-position: right center;
    opacity: 0.9;
    pointer-events: none;
  }

  body[data-page="about"] .about-mobile-cta__copy,
  body[data-page="about"] .about-mobile-cta__actions {
    position: relative;
  }

  body[data-page="about"] .about-mobile-cta__copy strong {
    font-size: 16px;
    line-height: 1.25;
    font-weight: 950;
  }

  body[data-page="about"] .about-mobile-cta__copy p {
    margin: 6px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.82);
  }

  body[data-page="about"] .about-mobile-cta__actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* Footer: align with new mobile footer style used on index. */
  body[data-page="about"] .site-footer {
    background: linear-gradient(135deg, #001c3f 0%, #003a8c 100%);
    color: rgba(255, 255, 255, 0.88);
  }

  body[data-page="about"] .site-footer a {
    color: rgba(255, 255, 255, 0.88);
  }

  body[data-page="about"] .site-footer .footer-main {
    padding: 26px 0 12px;
  }

  body[data-page="about"] .site-footer .footer-main__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body[data-page="about"] .site-footer .footer-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  body[data-page="about"] .site-footer .footer-qrcode {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  body[data-page="about"] .site-footer .footer-qrcode img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 16px;
  }

  body[data-page="about"] .site-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  body[data-page="about"] .site-footer .footer-bottom__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-bottom: 90px;
  }

  /* Timeline: make it look like the reference (timeline + a media card). */
  body[data-page="about"] .about-timeline-section {
    padding-block: 10px 18px;
    background: transparent;
  }

  body[data-page="about"] .about-mobile-timeline-media {
    display: grid;
    grid-template-columns: 1fr;
    margin: 12px 0 14px;
    border: 1px solid var(--a2-card-border);
    border-radius: var(--a2-radius);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--a2-shadow-md);
    overflow: hidden;
  }

  body[data-page="about"] .about-mobile-timeline-media img {
    width: 100%;
    height: 176px;
    object-fit: cover;
  }

  body[data-page="about"] .about-mobile-timeline-media__body {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 14px 14px;
  }

  body[data-page="about"] .about-mobile-timeline-media__body > span {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(0, 70, 184, 0.10);
    border: 1px solid rgba(0, 70, 184, 0.14);
    color: var(--color-blue-700);
    font-weight: 900;
  }

  body[data-page="about"] .about-mobile-timeline-media__body strong {
    font-size: 13px;
    line-height: 1.25;
  }

  body[data-page="about"] .about-mobile-timeline-media__body small {
    font-size: 11px;
    line-height: 1.25;
    color: var(--color-muted);
  }

  body[data-page="about"] .about-timeline {
    display: grid;
    gap: 12px;
  }

  body[data-page="about"] .about-timeline div {
    border: 1px solid var(--a2-card-border);
    border-radius: var(--a2-radius-sm);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--a2-shadow-sm);
  }

  /* CTA: show the reference-like banner and hide the heavy form strip. */
  body[data-page="about"] .about-mobile-cta {
    display: block;
    padding-block: 6px 18px;
  }

  body[data-page="about"] .about-mobile-cta__card {
    padding: 16px 16px;
    border-radius: var(--a2-radius);
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.12), rgba(0, 43, 102, 0.92));
    box-shadow: var(--a2-shadow-md);
    color: var(--color-white);
    overflow: hidden;
  }

  body[data-page="about"] .about-mobile-cta__copy {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
  }

  body[data-page="about"] .about-mobile-cta__copy strong {
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0.2px;
  }

  body[data-page="about"] .about-mobile-cta__copy p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
  }

  body[data-page="about"] .about-mobile-cta__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  body[data-page="about"] .about-mobile-cta__actions .btn {
    width: 100%;
    border-radius: 14px;
  }

  body[data-page="about"] .about-contact-strip {
    display: none;
  }
}

@media (max-width: 480px) {
  body[data-page="about"] .about-banner {
    margin-inline: 12px;
  }

  body[data-page="about"] .about-mobile-timeline-media img {
    height: 166px;
  }
}

/* -------------------------------------------------------------------------- */
/* Mobile Solutions v2 (Reference-template rebuild, mobile-only, desktop intact) */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body[data-page="solutions"] {
    --sol2-gutter: 16px;
    --sol2-radius: 20px;
    --sol2-radius-sm: 14px;
    --sol2-shadow-lg: 0 18px 46px rgba(0, 20, 52, 0.14);
    --sol2-shadow-md: 0 12px 28px rgba(0, 20, 52, 0.12);
    --sol2-shadow-sm: 0 8px 18px rgba(0, 20, 52, 0.10);
    --sol2-card-border: rgba(14, 39, 88, 0.10);
    --sol2-section-y: 24px;
  }

  body[data-page="solutions"] .solution-page {
    background: radial-gradient(900px 460px at 50% -220px, rgba(0, 90, 210, 0.14), transparent 62%),
      linear-gradient(180deg, #ffffff 0%, #f4f8ff 50%, #ffffff 100%);
  }

  body[data-page="solutions"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--sol2-gutter);
  }

  body[data-page="solutions"] .solutions-desktop-only {
    display: none !important;
  }

  body[data-page="solutions"] .solutions-mobile-only {
    display: inline !important;
  }

  body[data-page="solutions"] .solutions-mobile-only[style*="display:none"] {
    display: unset !important;
  }

  /* Mobile header and page shell tuned to the reference frame. */
  body[data-page="solutions"],
  body[data-page="solutions"] .solution-page {
    overflow-x: clip;
  }

  body[data-page="solutions"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--sol2-gutter);
  }

  body[data-page="solutions"] .site-header .navbar {
    background: var(--color-white);
    box-shadow: 0 8px 24px rgba(0, 20, 52, 0.08);
  }

  body[data-page="solutions"] .site-header .navbar__inner {
    min-height: 64px;
    padding-block: 8px;
  }

  body[data-page="solutions"] .solution-hero {
    margin: 0;
    min-height: 236px;
    border-radius: 0;
    box-shadow: none;
  }

  body[data-page="solutions"] .solution-hero::before {
    background-image:
      linear-gradient(90deg, rgba(0, 18, 48, 0.94) 0%, rgba(0, 43, 102, 0.76) 54%, rgba(0, 43, 102, 0.14) 100%),
      var(--banner-image, url("../images/banners/solutions-industry.jpg"));
    background-position: center right;
    background-size: cover;
  }

  body[data-page="solutions"] .solution-hero__inner {
    min-height: 236px;
    padding: 22px var(--sol2-gutter) 18px;
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 0;
  }

  body[data-page="solutions"] .solution-hero__content {
    width: min(100%, 286px);
  }

  body[data-page="solutions"] .solution-hero-form,
  body[data-page="solutions"] .solution-stats {
    display: none;
  }

  body[data-page="solutions"] .solution-hero__content h1 {
    margin-bottom: 10px;
    font-size: 30px;
    line-height: 1.14;
    letter-spacing: 0;
  }

  body[data-page="solutions"] .solution-hero__content p {
    max-width: 260px;
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.45;
  }

  body[data-page="solutions"] .solution-hero__content span {
    max-width: 300px;
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="solutions"] .solution-hero__points {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 6px;
    margin-top: 14px;
  }

  body[data-page="solutions"] .solution-hero__points strong {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    backdrop-filter: none;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    color: rgba(255, 255, 255, 0.94);
  }

  body[data-page="solutions"] .solution-hero__points strong::before {
    content: "";
    width: 26px;
    height: 26px;
    border: 1.5px solid rgba(255, 255, 255, 0.84);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    box-shadow: none;
  }

  body[data-page="solutions"] .solution-hero__points strong:nth-child(1) {
    --solution-hero-icon: var(--icon-factory);
  }

  body[data-page="solutions"] .solution-hero__points strong:nth-child(2) {
    --solution-hero-icon: var(--icon-lightning);
  }

  body[data-page="solutions"] .solution-hero__points strong:nth-child(3) {
    --solution-hero-icon: var(--icon-shield);
  }

  body[data-page="solutions"] .solution-hero__points strong:nth-child(4) {
    --solution-hero-icon: var(--icon-support);
  }

  body[data-page="solutions"] .solution-hero__points strong::before {
    background-image: var(--solution-hero-icon);
  }

  body[data-page="solutions"] .solution-section,
  body[data-page="solutions"] .solution-inquiry {
    display: none;
  }

  body[data-page="solutions"] .solutions-mobile-industry,
  body[data-page="solutions"] .solutions-mobile-showcase,
  body[data-page="solutions"] .solutions-mobile-cta {
    display: block;
  }

  body[data-page="solutions"] .solutions-mobile-industry {
    margin-top: -22px;
    padding: 0 0 12px;
  }

  body[data-page="solutions"] .solutions-mobile-industry h2 {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 900;
    color: var(--color-text);
  }

  body[data-page="solutions"] .solutions-mobile-industry__grid {
    padding: 14px 12px;
    border: 1px solid var(--sol2-card-border);
    border-radius: var(--sol2-radius);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--sol2-shadow-md);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 8px;
  }

  body[data-page="solutions"] .solutions-mobile-industry__grid a {
    min-height: 74px;
    padding: 8px 4px 7px;
    border: 1px solid rgba(14, 39, 88, 0.08);
    border-radius: 14px;
    background: var(--color-white);
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    text-align: center;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.18;
    color: var(--color-text);
    text-decoration: none;
  }

  body[data-page="solutions"] .solutions-mobile-industry__grid a::before {
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background-color: rgba(0, 70, 184, 0.08);
    border: 1px solid rgba(0, 70, 184, 0.12);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
  }

  body[data-page="solutions"] .solutions-mobile-industry__grid a:nth-child(1) {
    --solution-industry-icon: var(--icon-target);
  }

  body[data-page="solutions"] .solutions-mobile-industry__grid a:nth-child(2) {
    --solution-industry-icon: var(--icon-factory);
  }

  body[data-page="solutions"] .solutions-mobile-industry__grid a:nth-child(3) {
    --solution-industry-icon: var(--icon-wrench);
  }

  body[data-page="solutions"] .solutions-mobile-industry__grid a:nth-child(4) {
    --solution-industry-icon: var(--icon-shield);
  }

  body[data-page="solutions"] .solutions-mobile-industry__grid a:nth-child(5) {
    --solution-industry-icon: var(--icon-support);
  }

  body[data-page="solutions"] .solutions-mobile-industry__grid a:nth-child(6) {
    --solution-industry-icon: var(--icon-cpu);
  }

  body[data-page="solutions"] .solutions-mobile-industry__grid a:nth-child(7) {
    --solution-industry-icon: var(--icon-lightning);
  }

  body[data-page="solutions"] .solutions-mobile-industry__grid a:nth-child(8) {
    --solution-industry-icon: var(--icon-home);
  }

  body[data-page="solutions"] .solutions-mobile-industry__grid a::before {
    background-image: var(--solution-industry-icon);
  }

  body[data-page="solutions"] .solutions-mobile-industry__grid a.is-active {
    color: var(--color-white);
    border-color: rgba(0, 70, 184, 0.18);
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.92), rgba(0, 43, 102, 0.92));
    box-shadow: var(--sol2-shadow-sm);
  }

  body[data-page="solutions"] .solutions-mobile-industry__grid a.is-active::before {
    background-color: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.26);
    background-image: var(--icon-home);
  }

  body[data-page="solutions"] .solutions-mobile-showcase {
    padding: 18px 0 16px;
  }

  body[data-page="solutions"] .solutions-mobile-showcase__head h2 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 900;
  }

  body[data-page="solutions"] .solutions-mobile-showcase__head p {
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--color-muted);
  }

  body[data-page="solutions"] .solutions-mobile-showcase__hero {
    margin-top: 14px;
    border: 1px solid var(--sol2-card-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--sol2-shadow-md);
    background: var(--color-white);
  }

  body[data-page="solutions"] .solutions-mobile-showcase__hero img {
    width: 100%;
    height: 160px;
    object-fit: cover;
  }

  body[data-page="solutions"] .solutions-mobile-showcase__benefits {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-page="solutions"] .solutions-mobile-showcase__benefits > div {
    min-height: 92px;
    padding: 12px 6px 10px;
    border: 1px solid var(--sol2-card-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--sol2-shadow-sm);
    display: grid;
    justify-items: center;
    gap: 4px;
    align-content: start;
    text-align: center;
  }

  body[data-page="solutions"] .solutions-mobile-showcase__benefits > div:nth-child(1) {
    --solution-benefit-icon: var(--icon-target);
  }

  body[data-page="solutions"] .solutions-mobile-showcase__benefits > div:nth-child(2) {
    --solution-benefit-icon: var(--icon-lightning);
  }

  body[data-page="solutions"] .solutions-mobile-showcase__benefits > div:nth-child(3) {
    --solution-benefit-icon: var(--icon-factory);
  }

  body[data-page="solutions"] .solutions-mobile-showcase__benefits > div:nth-child(4) {
    --solution-benefit-icon: var(--icon-shield);
  }

  body[data-page="solutions"] .solutions-mobile-showcase__benefits > div > span {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    display: block;
    background-color: rgba(0, 70, 184, 0.08);
    border: 1px solid rgba(0, 70, 184, 0.12);
    background-image: var(--solution-benefit-icon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    box-shadow: 0 8px 18px rgba(0, 43, 102, 0.08);
  }

  body[data-page="solutions"] .solutions-mobile-showcase__benefits strong {
    font-size: 11px;
    line-height: 1.25;
  }

  body[data-page="solutions"] .solutions-mobile-showcase__benefits small {
    font-size: 10px;
    line-height: 1.35;
    color: var(--color-muted);
  }

  body[data-page="solutions"] .solutions-mobile-showcase__scenes {
    margin-top: 16px;
  }

  body[data-page="solutions"] .solutions-mobile-showcase__scenes h3 {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 900;
  }

  body[data-page="solutions"] .solutions-mobile-scenes__track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    padding-bottom: 0;
  }

  body[data-page="solutions"] .solutions-mobile-scenes__track article {
    border: 1px solid var(--sol2-card-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--sol2-shadow-sm);
    overflow: hidden;
  }

  body[data-page="solutions"] .solutions-mobile-scenes__track img {
    width: 100%;
    height: 64px;
    object-fit: cover;
  }

  body[data-page="solutions"] .solutions-mobile-scenes__track span {
    display: block;
    padding: 8px 6px 9px;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
  }

  body[data-page="solutions"] .solutions-mobile-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 16px 0 10px;
  }

  body[data-page="solutions"] .solutions-mobile-section-head h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 900;
  }

  body[data-page="solutions"] .solutions-mobile-section-head a {
    font-size: 12px;
    font-weight: 900;
    color: var(--color-blue-700);
    text-decoration: none;
    white-space: nowrap;
  }

  body[data-page="solutions"] .solutions-mobile-equip__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
    padding-bottom: 0;
  }

  body[data-page="solutions"] .solutions-mobile-equip-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 10px;
    border: 1px solid var(--sol2-card-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--sol2-shadow-sm);
    color: var(--color-text);
    text-decoration: none;
  }

  body[data-page="solutions"] .solutions-mobile-equip-card img {
    width: 100%;
    height: 92px;
    border-radius: 12px;
    object-fit: cover;
  }

  body[data-page="solutions"] .solutions-mobile-equip-card div {
    padding-top: 8px;
    display: grid;
    gap: 4px;
  }

  body[data-page="solutions"] .solutions-mobile-equip-card strong {
    display: block;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 900;
    margin: 0;
  }

  body[data-page="solutions"] .solutions-mobile-equip-card small {
    display: block;
    font-size: 10px;
    line-height: 1.35;
    color: var(--color-muted);
    margin: 0;
  }

  body[data-page="solutions"] .solutions-mobile-equip-card span {
    color: var(--color-blue-700);
    font-size: 11px;
    font-weight: 900;
  }

  body[data-page="solutions"] .solutions-mobile-case-card {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border: 1px solid var(--sol2-card-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--sol2-shadow-md);
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text);
  }

  body[data-page="solutions"] .solutions-mobile-case-card img {
    width: 100%;
    height: 92px;
    object-fit: cover;
  }

  body[data-page="solutions"] .solutions-mobile-case-card div {
    padding: 10px 10px 10px 0;
  }

  body[data-page="solutions"] .solutions-mobile-case-card strong {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 900;
  }

  body[data-page="solutions"] .solutions-mobile-case-card p {
    margin: 0 0 10px;
    font-size: 11px;
    line-height: 1.55;
    color: var(--color-muted);
  }

  body[data-page="solutions"] .solutions-mobile-case-card span {
    display: inline-flex;
    min-height: 32px;
    padding: 0 12px;
    align-items: center;
    border-radius: 12px;
    background: var(--color-blue-700);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 900;
  }

  body[data-page="solutions"] .solutions-mobile-case-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
  }

  body[data-page="solutions"] .solutions-mobile-case-dots span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #d7e0ee;
  }

  body[data-page="solutions"] .solutions-mobile-case-dots .is-active {
    width: 18px;
    background: var(--color-blue-700);
  }

  body[data-page="solutions"] .solutions-mobile-cta {
    padding: 8px 0 16px;
  }

  body[data-page="solutions"] .solutions-mobile-cta__card {
    position: relative;
    min-height: 146px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0e5ad3 0%, #0046b8 58%, #003a8c 100%);
    box-shadow: var(--sol2-shadow-md);
    overflow: hidden;
    color: var(--color-white);
  }

  body[data-page="solutions"] .solutions-mobile-cta__copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 6px;
    max-width: 64%;
  }

  body[data-page="solutions"] .solutions-mobile-cta__copy strong {
    font-size: 17px;
    line-height: 1.25;
    letter-spacing: 0.2px;
  }

  body[data-page="solutions"] .solutions-mobile-cta__copy p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.84);
  }

  body[data-page="solutions"] .solutions-mobile-cta__actions {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 250px;
    margin-top: 14px;
  }

  body[data-page="solutions"] .solutions-mobile-cta__actions .btn {
    width: 100%;
    min-height: 40px;
    border-radius: 12px;
    font-size: 12px;
  }

  body[data-page="solutions"] .solutions-mobile-cta__media {
    position: absolute;
    right: -10px;
    bottom: 0;
    width: 148px;
    height: 158px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0)),
      url("../images/contact/contact-industrial-worker-01.jpg");
    background-position: center top;
    background-size: cover;
    border-radius: 22px 0 0 0;
    filter: saturate(1.02);
    opacity: 0.98;
  }

  body[data-page="solutions"] .site-footer {
    background: linear-gradient(135deg, #001c3f 0%, #003a8c 100%);
    color: rgba(255, 255, 255, 0.88);
  }

  body[data-page="solutions"] .site-footer a {
    color: rgba(255, 255, 255, 0.88);
  }

  body[data-page="solutions"] .site-footer .footer-main {
    padding: 22px 0 12px;
  }

  body[data-page="solutions"] .site-footer .footer-main__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 16px 14px;
    align-items: start;
  }

  body[data-page="solutions"] .site-footer .footer-company {
    grid-column: 1;
    grid-row: 1;
  }

  body[data-page="solutions"] .site-footer .footer-qrcode {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    display: grid;
    padding-top: 96px;
    justify-items: center;
    text-align: center;
    gap: 8px;
  }

  body[data-page="solutions"] .site-footer .footer-qrcode img {
    display: none;
  }

  body[data-page="solutions"] .site-footer .footer-qrcode::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 88px;
    height: 88px;
    border: 4px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background:
      radial-gradient(circle at 18% 18%, #10192b 0 9px, transparent 9px),
      radial-gradient(circle at 82% 18%, #10192b 0 9px, transparent 9px),
      radial-gradient(circle at 18% 82%, #10192b 0 9px, transparent 9px),
      radial-gradient(circle at 82% 82%, #10192b 0 9px, transparent 9px),
      linear-gradient(#10192b 0 0) 50% 50% / 16px 16px no-repeat,
      linear-gradient(#10192b 0 0) 50% 18% / 8px 8px no-repeat,
      linear-gradient(#10192b 0 0) 18% 50% / 8px 8px no-repeat,
      linear-gradient(#10192b 0 0) 82% 50% / 8px 8px no-repeat,
      linear-gradient(#10192b 0 0) 50% 82% / 8px 8px no-repeat,
      #ffffff;
    box-shadow: 0 12px 22px rgba(0, 10, 28, 0.18);
    transform: translateX(-50%);
  }

  body[data-page="solutions"] .site-footer .footer-links {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 12px;
  }

  body[data-page="solutions"] .site-footer .footer-links h3 {
    margin-bottom: 6px;
    font-size: 13px;
  }

  body[data-page="solutions"] .site-footer .footer-links a {
    font-size: 11px;
    line-height: 1.6;
  }

  body[data-page="solutions"] .site-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  body[data-page="solutions"] .site-footer .footer-bottom__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-bottom: 18px;
  }

  body[data-page="solutions"] .floating-contact,
  body[data-page="solutions"] .mobile-bottom-nav--main {
    display: none !important;
  }
}

@media (max-width: 480px) {
  body[data-page="solutions"] .solution-hero {
    min-height: 224px;
  }

  body[data-page="solutions"] .solution-hero__inner {
    min-height: 224px;
    padding: 20px var(--sol2-gutter) 16px;
  }

  body[data-page="solutions"] .solution-hero__content h1 {
    font-size: 27px;
  }

  body[data-page="solutions"] .solution-hero__content p {
    max-width: 240px;
    font-size: 14px;
  }

  body[data-page="solutions"] .solution-hero__content span {
    max-width: 260px;
    font-size: 11px;
  }

  body[data-page="solutions"] .solution-hero__points {
    gap: 6px 4px;
    margin-top: 12px;
  }

  body[data-page="solutions"] .solution-hero__points strong {
    gap: 5px;
    font-size: 9px;
  }

  body[data-page="solutions"] .solution-hero__points strong::before {
    width: 24px;
    height: 24px;
    background-size: 12px 12px;
  }

  body[data-page="solutions"] .solutions-mobile-industry {
    margin-top: -20px;
  }

  body[data-page="solutions"] .solutions-mobile-industry__grid {
    gap: 8px 6px;
    padding: 12px 10px;
  }

  body[data-page="solutions"] .solutions-mobile-industry__grid a {
    min-height: 68px;
    padding: 7px 2px 6px;
    font-size: 9px;
  }

  body[data-page="solutions"] .solutions-mobile-industry__grid a::before {
    width: 22px;
    height: 22px;
    background-size: 11px 11px;
  }

  body[data-page="solutions"] .solutions-mobile-showcase {
    padding-top: 16px;
  }

  body[data-page="solutions"] .solutions-mobile-showcase__hero img {
    height: 152px;
  }

  body[data-page="solutions"] .solutions-mobile-showcase__benefits {
    gap: 6px;
  }

  body[data-page="solutions"] .solutions-mobile-showcase__benefits > div {
    min-height: 86px;
    padding: 10px 4px 8px;
  }

  body[data-page="solutions"] .solutions-mobile-showcase__benefits > div > span {
    width: 28px;
    height: 28px;
    background-size: 13px 13px;
  }

  body[data-page="solutions"] .solutions-mobile-showcase__benefits strong {
    font-size: 10px;
  }

  body[data-page="solutions"] .solutions-mobile-showcase__benefits small {
    font-size: 9px;
  }

  body[data-page="solutions"] .solutions-mobile-showcase__scenes h3,
  body[data-page="solutions"] .solutions-mobile-section-head h3 {
    font-size: 15px;
  }

  body[data-page="solutions"] .solutions-mobile-scenes__track {
    gap: 6px;
  }

  body[data-page="solutions"] .solutions-mobile-scenes__track img {
    height: 58px;
  }

  body[data-page="solutions"] .solutions-mobile-scenes__track span {
    padding: 7px 4px 8px;
    font-size: 9px;
  }

  body[data-page="solutions"] .solutions-mobile-equip__grid {
    gap: 8px;
  }

  body[data-page="solutions"] .solutions-mobile-equip-card {
    padding: 8px;
  }

  body[data-page="solutions"] .solutions-mobile-equip-card img {
    height: 84px;
  }

  body[data-page="solutions"] .solutions-mobile-equip-card strong {
    font-size: 11px;
  }

  body[data-page="solutions"] .solutions-mobile-equip-card small {
    font-size: 9px;
  }

  body[data-page="solutions"] .solutions-mobile-equip-card span {
    font-size: 10px;
  }

  body[data-page="solutions"] .solutions-mobile-case-card {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 8px;
  }

  body[data-page="solutions"] .solutions-mobile-case-card img {
    height: 84px;
  }

  body[data-page="solutions"] .solutions-mobile-case-card div {
    padding: 8px 8px 8px 0;
  }

  body[data-page="solutions"] .solutions-mobile-case-card strong {
    font-size: 12px;
  }

  body[data-page="solutions"] .solutions-mobile-case-card p {
    margin-bottom: 8px;
    font-size: 10px;
  }

  body[data-page="solutions"] .solutions-mobile-case-card span {
    min-height: 30px;
    font-size: 10px;
  }

  body[data-page="solutions"] .solutions-mobile-cta__card {
    min-height: 140px;
    padding: 14px;
  }

  body[data-page="solutions"] .solutions-mobile-cta__copy {
    max-width: 62%;
  }

  body[data-page="solutions"] .solutions-mobile-cta__copy strong {
    font-size: 15px;
  }

  body[data-page="solutions"] .solutions-mobile-cta__copy p {
    font-size: 11px;
  }

  body[data-page="solutions"] .solutions-mobile-cta__actions {
    max-width: 100%;
    margin-top: 12px;
  }

  body[data-page="solutions"] .solutions-mobile-cta__actions .btn {
    min-height: 38px;
    font-size: 11px;
  }

  body[data-page="solutions"] .solutions-mobile-cta__media {
    width: 136px;
    height: 150px;
  }

  body[data-page="solutions"] .site-footer .footer-main__grid {
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 14px 12px;
  }

  body[data-page="solutions"] .site-footer .footer-qrcode img {
    width: 80px;
    height: 80px;
  }

  body[data-page="solutions"] .site-footer .footer-links {
    gap: 8px 10px;
  }

  body[data-page="solutions"] .site-footer .footer-links h3 {
    font-size: 12px;
  }

  body[data-page="solutions"] .site-footer .footer-links a {
    font-size: 10px;
  }
}

/* -------------------------------------------------------------------------- */
/* Mobile Cases v2 (Reference-template rebuild, mobile-only, desktop intact)   */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body[data-page="cases"] {
    --c2-gutter: 16px;
    --c2-radius: 20px;
    --c2-radius-sm: 14px;
    --c2-shadow-lg: 0 18px 46px rgba(0, 20, 52, 0.14);
    --c2-shadow-md: 0 12px 28px rgba(0, 20, 52, 0.12);
    --c2-shadow-sm: 0 8px 18px rgba(0, 20, 52, 0.10);
    --c2-card-border: rgba(14, 39, 88, 0.10);
  }

  body[data-page="cases"] .case-page {
    background: radial-gradient(900px 460px at 50% -220px, rgba(0, 90, 210, 0.14), transparent 62%),
      linear-gradient(180deg, #ffffff 0%, #f4f8ff 50%, #ffffff 100%);
  }

  body[data-page="cases"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--c2-gutter);
  }

  body[data-page="cases"] .case-desktop-only {
    display: none !important;
  }

  body[data-page="cases"] .case-mobile-only {
    display: inline !important;
  }

  body[data-page="cases"] .case-mobile-only[style*="display:none"] {
    display: unset !important;
  }

  /* Mobile header: keep consistent with other pages. */
  body[data-page="cases"] .site-header .topbar {
    display: block;
    padding: 6px 0;
    background: var(--color-white);
    border-bottom: 1px solid rgba(14, 39, 88, 0.08);
  }

  body[data-page="cases"] .site-header .topbar__inner {
    justify-content: flex-end;
  }

  body[data-page="cases"] .site-header .topbar__contact {
    justify-content: flex-end;
    gap: 0;
  }

  body[data-page="cases"] .site-header .topbar__contact a:first-child {
    font-weight: 800;
    font-size: 12px;
    white-space: nowrap;
  }

  body[data-page="cases"] .site-header .topbar__contact a:not(:first-child),
  body[data-page="cases"] .site-header .topbar__links {
    display: none;
  }

  body[data-page="cases"] .site-header .navbar {
    background: var(--color-white);
    box-shadow: 0 10px 30px rgba(0, 20, 52, 0.08);
  }

  body[data-page="cases"] .site-header .navbar__inner {
    min-height: 56px;
    padding-block: 8px;
  }

  /* Hero: card-like banner and floating filters like the reference. */
  body[data-page="cases"] .case-banner {
    min-height: 0;
    margin: 0 var(--c2-gutter) 12px;
    border-radius: var(--c2-radius);
    overflow: hidden;
    box-shadow: var(--c2-shadow-lg);
    background: var(--color-navy-900);
  }

  body[data-page="cases"] .case-banner::before {
    background-image:
      linear-gradient(90deg, rgba(0, 18, 48, 0.92) 0%, rgba(0, 43, 102, 0.62) 52%, rgba(0, 43, 102, 0.10) 100%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png"));
    background-position: right center;
    background-size: cover;
  }

  body[data-page="cases"] .case-banner__inner {
    min-height: 0;
    padding: 28px 18px 22px;
    gap: 10px;
  }

  body[data-page="cases"] .case-banner h1 {
    margin-bottom: 6px;
    font-size: 28px;
    line-height: 1.2;
  }

  body[data-page="cases"] .case-banner p {
    max-width: 280px;
    font-size: 13px;
    line-height: 1.65;
  }

  body[data-page="cases"] .case-banner-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
  }

  body[data-page="cases"] .case-banner-stats span {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 20, 52, 0.18);
    backdrop-filter: blur(10px);
    font-size: 10px;
  }

  body[data-page="cases"] .case-banner-stats strong {
    font-size: 14px;
    line-height: 1.1;
  }

  /* Hide old filter bar on mobile, use new mobile filters panel. */
  body[data-page="cases"] .case-filter-bar {
    display: none;
  }

  body[data-page="cases"] .cases-mobile-filters {
    display: block;
    margin-top: -38px;
    padding: 0 0 12px;
  }

  body[data-page="cases"] .cases-mobile-filters__panel {
    padding: 16px 14px 14px;
    border: 1px solid var(--c2-card-border);
    border-radius: var(--c2-radius);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--c2-shadow-md);
    backdrop-filter: blur(10px);
  }

  body[data-page="cases"] .cases-mobile-filters__industries {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="cases"] .cases-mobile-filters__industries a {
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid rgba(14, 39, 88, 0.10);
    border-radius: 12px;
    background: var(--color-white);
    box-shadow: var(--c2-shadow-sm);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 900;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="cases"] .cases-mobile-filters__industries a.is-active {
    color: var(--color-white);
    border-color: rgba(0, 70, 184, 0.22);
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.92), rgba(0, 43, 102, 0.92));
    box-shadow: var(--c2-shadow-sm);
  }

  body[data-page="cases"] .cases-mobile-filters__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
  }

  body[data-page="cases"] .cases-mobile-filters__row button {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(14, 39, 88, 0.10);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--c2-shadow-sm);
    color: var(--color-text);
    font-size: 12px;
    font-weight: 900;
    text-align: left;
  }

  /* List: 2-column reference-like cards. */
  body[data-page="cases"] .case-list-section {
    padding-block: 10px 18px;
  }

  body[data-page="cases"] .case-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body[data-page="cases"] .case-card {
    position: relative;
    border: 1px solid var(--c2-card-border);
    border-radius: var(--c2-radius);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--c2-shadow-sm);
    overflow: hidden;
  }

  body[data-page="cases"] .case-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  body[data-page="cases"] .case-card__tag {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 1;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex !important;
    align-items: center;
    background: rgba(0, 70, 184, 0.92);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 950;
    box-shadow: 0 10px 20px rgba(0, 18, 48, 0.22);
    max-width: calc(100% - 20px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="cases"] .case-card > div {
    padding: 12px 12px 12px;
  }

  /* Title: compact, 2 lines max. */
  body[data-page="cases"] .case-card h2 {
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 950;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  body[data-page="cases"] .case-card p {
    margin-bottom: 10px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--color-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Metrics row: make it 3 columns like the reference. */
  body[data-page="cases"] .case-card dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 10px;
    margin: 0 0 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(14, 39, 88, 0.16);
  }

  body[data-page="cases"] .case-card dt {
    display: none;
  }

  body[data-page="cases"] .case-card dd {
    margin: 0;
    font-size: 12px;
    font-weight: 900;
    color: var(--color-blue-700);
    text-align: center;
  }

  body[data-page="cases"] .case-card a {
    justify-content: flex-start;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-blue-700);
    font-weight: 900;
    font-size: 12px;
  }

  /* Hide non-list sections on mobile (they belong to detail page). */
  body[data-page="cases"] .case-feature,
  body[data-page="cases"] .case-related-strip,
  body[data-page="cases"] .case-inquiry {
    display: none;
  }

  /* Pagination: keep existing pager, tighten spacing. */
  body[data-page="cases"] .pagination {
    padding-top: 14px;
  }

  /* CTA banner after pager. */
  body[data-page="cases"] .cases-mobile-cta {
    display: block;
    margin-top: 10px;
  }

  body[data-page="cases"] .cases-mobile-cta__card {
    position: relative;
    padding: 16px 16px;
    border-radius: var(--c2-radius);
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.12), rgba(0, 43, 102, 0.92));
    box-shadow: var(--c2-shadow-md);
    overflow: hidden;
    color: var(--color-white);
  }

  body[data-page="cases"] .cases-mobile-cta__copy {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
  }

  body[data-page="cases"] .cases-mobile-cta__copy strong {
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0.2px;
  }

  body[data-page="cases"] .cases-mobile-cta__copy p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
  }

  body[data-page="cases"] .cases-mobile-cta__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: relative;
    z-index: 1;
  }

  body[data-page="cases"] .cases-mobile-cta__actions .btn {
    width: 100%;
    border-radius: 14px;
  }

  body[data-page="cases"] .cases-mobile-cta__media {
    position: absolute;
    right: -18px;
    bottom: -10px;
    width: 170px;
    height: 140px;
    opacity: 0.9;
    background:
      radial-gradient(120px 80px at 30% 40%, rgba(255, 255, 255, 0.16), transparent 60%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png"));
    background-size: cover;
    background-position: center;
    border-radius: 26px;
    filter: saturate(1.05);
  }

  /* Footer: keep new mobile footer style consistent across pages. */
  body[data-page="cases"] .site-footer {
    background: linear-gradient(135deg, #001c3f 0%, #003a8c 100%);
    color: rgba(255, 255, 255, 0.88);
  }

  body[data-page="cases"] .site-footer a {
    color: rgba(255, 255, 255, 0.88);
  }

  body[data-page="cases"] .site-footer .footer-main {
    padding: 26px 0 12px;
  }

  body[data-page="cases"] .site-footer .footer-main__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body[data-page="cases"] .site-footer .footer-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  body[data-page="cases"] .site-footer .footer-qrcode {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  body[data-page="cases"] .site-footer .footer-qrcode img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 16px;
  }

  body[data-page="cases"] .site-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  body[data-page="cases"] .site-footer .footer-bottom__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-bottom: 90px;
  }
}

@media (max-width: 480px) {
  body[data-page="cases"] .case-banner {
    margin-inline: 12px;
  }

  body[data-page="cases"] .cases-mobile-filters__industries {
    gap: 8px;
  }

  body[data-page="cases"] .case-card-grid {
    gap: 10px;
  }

  body[data-page="cases"] .case-card img {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 374px) {
  body[data-page="cases"] .case-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  body[data-page="solutions-s"] {
    background: #f7faff;
    overflow-x: hidden;
    padding-bottom: 0;
  }

  body[data-page="solutions-s"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 12px;
  }

  body[data-page="solutions-s"] .solutions-s-page > .page-banner,
  body[data-page="solutions-s"] .solutions-s-page > .solutions-s-breadcrumb,
  body[data-page="solutions-s"] .solutions-s-page > .solutions-s-toolbar,
  body[data-page="solutions-s"] .solutions-s-page > .solutions-s-stats,
  body[data-page="solutions-s"] .solutions-s-page > .solutions-s-section,
  body[data-page="solutions-s"] .solutions-s-page > .solutions-s-inquiry {
    display: none !important;
  }

  body[data-page="solutions-s"] .solutions-s-mobile {
    display: block;
    padding: 12px 0 18px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 0 4px;
    font-size: 11px;
    color: #7f8ca4;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__breadcrumb a,
  body[data-page="solutions-s"] .solutions-s-mobile__breadcrumb strong {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero {
    position: relative;
    min-height: clamp(220px, 58vw, 270px);
    margin-bottom: 12px;
    border-radius: 16px;
    overflow: hidden;
    background: #082153;
    box-shadow: 0 16px 36px rgba(3, 28, 72, 0.18);
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero img,
  body[data-page="solutions-s"] .solutions-s-mobile__case img,
  body[data-page="solutions-s"] .solutions-s-mobile__device-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero img {
    position: absolute;
    inset: 0;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg, rgba(3, 20, 56, 0.94), rgba(3, 20, 56, 0.46) 54%, rgba(3, 20, 56, 0.14));
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero-content {
    position: relative;
    z-index: 1;
    gap: 10px;
    padding: 20px 18px 18px;
    color: #fff;
    display: grid;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(173, 202, 255, 0.58);
    background: rgba(71, 129, 255, 0.26);
    font-size: 12px;
    font-weight: 800;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero h1 {
    margin: 0;
    font-size: clamp(24px, 6.8vw, 28px);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0.2px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero p {
    margin: 0;
    max-width: 21em;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
  }

  body[data-page="solutions-s"] .solutions-s-mobile__section {
    margin-bottom: 12px;
    padding: 18px 14px 16px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(7, 30, 80, 0.08);
  }

  body[data-page="solutions-s"] .solutions-s-mobile__section h2 {
    margin: 0 0 12px;
    color: #0c2348;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__overview p {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.75;
    color: #5a6781;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__kpi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__kpi div {
    border-radius: 14px;
    background: #f3f8ff;
    border: 1px solid #e1ecff;
    min-height: 82px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    text-align: center;
    padding: 8px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__kpi strong,
  body[data-page="solutions-s"] .solutions-s-mobile__case dd {
    margin: 0;
    font-size: 25px;
    line-height: 1;
    font-weight: 900;
    color: #0a4dcd;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__kpi span {
    font-size: 12px;
    color: #5a6781;
    font-weight: 700;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__advantage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__advantage-grid article {
    border: 1px solid #deebff;
    background: #f8fbff;
    border-radius: 14px;
    padding: 12px 10px;
    display: grid;
    gap: 6px;
    min-height: 98px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__advantage-grid article strong {
    color: #104ec9;
    font-size: 15px;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__advantage-grid article p {
    margin: 0;
    font-size: 12px;
    color: #5a6781;
    line-height: 1.55;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__process {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__process article {
    border-radius: 14px;
    border: 1px solid #dce9ff;
    background: #f8fbff;
    padding: 10px 8px;
    text-align: center;
    min-height: 106px;
    display: grid;
    align-content: start;
    gap: 5px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__process span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 0 auto;
    background: #1454d0;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__process h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    color: #12396f;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__process p {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: #67748e;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__section-head h2 {
    margin-bottom: 0;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__section-head a {
    font-size: 12px;
    color: #0f56d6;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__device-scroll {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 72%);
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__device-card {
    border-radius: 16px;
    border: 1px solid #d9e7ff;
    background: #fff;
    box-shadow: 0 12px 24px rgba(7, 30, 80, 0.08);
    overflow: hidden;
    padding-bottom: 12px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__device-card img {
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__device-card h3 {
    margin: 10px 10px 6px;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 850;
    color: #112f61;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__device-card p {
    margin: 0 10px 8px;
    font-size: 12px;
    line-height: 1.55;
    color: #61708d;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__device-card a {
    margin: 0 10px;
    color: #0f56d6;
    font-size: 12px;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case {
    border: 1px solid #deebff;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-body {
    padding: 12px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-body h3 {
    margin: 0 0 7px;
    font-size: 15px;
    line-height: 1.35;
    color: #112f61;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-body p {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.6;
    color: #5f6c87;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case dl {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding-top: 10px;
    border-top: 1px dashed #c9dafb;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case dl div {
    text-align: center;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case dt {
    margin-top: 4px;
    font-size: 11px;
    color: #6a7690;
    font-weight: 700;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 116px;
    gap: 10px;
    margin-bottom: 12px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0f57d7 0%, #01339d 100%);
    color: #fff;
    box-shadow: 0 18px 42px rgba(0, 20, 52, 0.22);
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 6px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta-copy strong {
    font-size: clamp(20px, 5.6vw, 24px);
    line-height: 1.15;
    font-weight: 900;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    line-height: 1.45;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta-actions {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-self: end;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta-actions .btn {
    width: 100%;
    min-height: 42px;
    padding-inline: 8px;
    border-radius: 12px;
    justify-content: center;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta-media {
    position: absolute;
    right: -8px;
    bottom: -6px;
    width: 124px;
    height: 132px;
    border-radius: 22px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
      var(--banner-image, url("../images/banners/default-industrial-factory.png"));
    background-size: cover;
    background-position: center;
    opacity: 0.48;
  }

  body[data-page="solutions-s"] .mobile-bottom-nav--cases,
  body[data-page="solutions-s"] .mobile-bottom-nav--news,
  body[data-page="solutions-s"] .mobile-bottom-nav--contact,
  body[data-page="solutions-s"] .mobile-bottom-nav--support {
    display: none !important;
  }
}

@media (max-width: 390px) {
  body[data-page="solutions-s"] .solutions-s-mobile__hero h1,
  body[data-page="solutions-s"] .solutions-s-mobile__cta-copy strong {
    font-size: 22px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  body[data-page="solutions-y"] {
    background: #f3f6fb;
    overflow-x: hidden;
  }

  body[data-page="solutions-y"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 14px;
  }

  body[data-page="solutions-y"] .solutions-y-page > .page-banner,
  body[data-page="solutions-y"] .solutions-y-page > .solutions-y-tabs,
  body[data-page="solutions-y"] .solutions-y-page > .solutions-y-section,
  body[data-page="solutions-y"] .solutions-y-page > .solutions-y-inquiry {
    display: none;
  }

  body[data-page="solutions-y"] .solutions-y-mobile {
    display: block;
    padding: 12px 0 22px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__hero {
    position: relative;
    min-height: 210px;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 10px;
    background: #082153;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__hero img,
  body[data-page="solutions-y"] .solutions-y-mobile__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__hero img {
    position: absolute;
    inset: 0;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__hero-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(3, 24, 66, 0.9), rgba(3, 24, 66, 0.28));
  }

  body[data-page="solutions-y"] .solutions-y-mobile__hero-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    padding: 18px 16px;
    color: #fff;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__hero-copy h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.18;
    font-weight: 900;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__hero-copy p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    max-width: 26em;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__breadcrumb {
    background: #fff;
    border-radius: 12px;
    min-height: 38px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #8593aa;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__breadcrumb a,
  body[data-page="solutions-y"] .solutions-y-mobile__breadcrumb strong {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__filters,
  body[data-page="solutions-y"] .solutions-y-mobile__list {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(7, 30, 80, 0.08);
    padding: 14px;
    margin-bottom: 12px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__pills button {
    border: 1px solid #dbe6fb;
    border-radius: 999px;
    background: #fff;
    min-height: 34px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 800;
    color: #28466f;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__pills button.is-active {
    background: #0f57d7;
    border-color: #0f57d7;
    color: #fff;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__select-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__select-row button {
    min-height: 42px;
    border: 1px solid #dbe6fb;
    border-radius: 12px;
    background: #fff;
    padding: 0 12px;
    font-size: 13px;
    color: #203f6b;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__select-row svg {
    width: 14px;
    height: 14px;
    color: #4d6485;
    flex: 0 0 auto;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__list h2 {
    margin: 0 0 10px;
    font-size: 17px;
    color: #102e5c;
    font-weight: 850;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__list h2 strong {
    color: #0f57d7;
    font-size: 22px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__item {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
    border: 1px solid #deebff;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(8, 36, 95, 0.06);
    overflow: hidden;
    margin-bottom: 10px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__item:last-of-type {
    margin-bottom: 12px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__item img {
    display: block;
    aspect-ratio: 4 / 3;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__item-body {
    padding: 10px 10px 10px 0;
    display: grid;
    gap: 7px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__item-head {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    justify-content: space-between;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__item-head h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 850;
    color: #112f60;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__item-head span {
    flex: 0 0 auto;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #ebf3ff;
    color: #0f57d7;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__item p {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: #5b6983;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__item a {
    font-size: 13px;
    font-weight: 900;
    color: #0f57d7;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__pagination a,
  body[data-page="solutions-y"] .solutions-y-mobile__pagination span {
    min-width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid #dbe6fb;
    background: #fff;
    color: #355077;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    padding: 0 8px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__pagination a.is-active {
    background: #0f57d7;
    border-color: #0f57d7;
    color: #fff;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__cta {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(135deg, #0f57d7 0%, #01339d 100%);
    color: #fff;
    padding: 16px;
    margin-bottom: 8px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__cta-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__cta-copy strong {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 900;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__cta-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 13px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__cta-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: relative;
    z-index: 1;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__cta-actions .btn {
    min-height: 42px;
    border-radius: 12px;
    width: 100%;
    padding-inline: 8px;
    justify-content: center;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__cta-media {
    position: absolute;
    right: -16px;
    bottom: -10px;
    width: 138px;
    height: 124px;
    border-radius: 24px;
    opacity: 0.34;
    background:
      radial-gradient(78px 55px at 20% 30%, rgba(255, 255, 255, 0.32), transparent 65%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png"));
    background-size: cover;
    background-position: center;
  }

  body[data-page="solutions-y"] .mobile-bottom-nav--cases,
  body[data-page="solutions-y"] .mobile-bottom-nav--news,
  body[data-page="solutions-y"] .mobile-bottom-nav--contact,
  body[data-page="solutions-y"] .mobile-bottom-nav--support {
    display: none !important;
  }
}

@media (max-width: 390px) {
  body[data-page="solutions-y"] .solutions-y-mobile__hero-copy h1,
  body[data-page="solutions-y"] .solutions-y-mobile__cta-copy strong {
    font-size: 20px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__item {
    grid-template-columns: 1fr;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__item img {
    aspect-ratio: 16 / 9;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__item-body {
    padding: 10px;
  }
}

@media (max-width: 768px) {
  body[data-page="solutions-y"] .solutions-y-mobile__hero {
    min-height: clamp(162px, 34vw, 190px);
    margin-bottom: 12px;
    background: linear-gradient(90deg, #081b49 0%, #0c2a64 55%, #122e72 100%);
    box-shadow: 0 14px 26px rgba(7, 27, 74, 0.16);
  }

  body[data-page="solutions-y"] .solutions-y-mobile__hero img {
    object-position: center right;
    transform: scale(1.02);
  }

  body[data-page="solutions-y"] .solutions-y-mobile__hero-mask {
    background: linear-gradient(92deg, rgba(5, 21, 58, 0.94) 0%, rgba(5, 21, 58, 0.82) 34%, rgba(5, 21, 58, 0.12) 74%, rgba(5, 21, 58, 0) 100%);
  }

  body[data-page="solutions-y"] .solutions-y-mobile__hero-copy {
    gap: 8px;
    padding: 22px 16px 18px;
    max-width: 68%;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__hero-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.96);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__hero-copy h1 {
    font-size: clamp(26px, 7.8vw, 31px);
    line-height: 1.06;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__hero-copy p {
    font-size: 13px;
    line-height: 1.55;
    max-width: 13em;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__breadcrumb {
    border: 1px solid #edf2fb;
    margin-bottom: 12px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__breadcrumb a {
    gap: 4px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__panel {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(7, 30, 80, 0.08);
    overflow: hidden;
    margin-bottom: 12px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__filters {
    padding: 14px 14px 12px;
    border-bottom: 1px solid #eef2fa;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 0;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__pills {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px 8px;
    margin-bottom: 12px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__pills button {
    min-height: 34px;
    padding: 0 6px;
    font-size: 11px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__select-row {
    padding-top: 10px;
    border-top: 1px solid #eef2fa;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__list {
    padding: 14px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 0;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__item {
    grid-template-columns: clamp(150px, 44vw, 190px) minmax(0, 1fr);
    gap: 12px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__item img {
    aspect-ratio: 16 / 10;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__item-body {
    padding: 11px 12px 11px 0;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__item-head {
    gap: 8px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__item-head h3 {
    font-size: 15px;
    line-height: 1.32;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__item p {
    line-height: 1.55;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__pagination {
    gap: 8px;
    padding-top: 2px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__pagination a,
  body[data-page="solutions-y"] .solutions-y-mobile__pagination span {
    min-width: 36px;
    height: 36px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 16px 132px 16px 16px;
    border-radius: 18px;
    margin-bottom: 14px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__cta-copy {
    gap: 6px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__cta-copy strong {
    font-size: clamp(20px, 5vw, 24px);
    line-height: 1.18;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__cta-copy p {
    font-size: 12px;
    line-height: 1.45;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__cta-actions {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__cta-actions .btn {
    min-height: 40px;
    border-radius: 12px;
    font-size: 12px;
    padding-inline: 10px;
    white-space: nowrap;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__cta-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 126px;
    border-radius: 0 18px 18px 0;
    opacity: 1;
    background: none;
    overflow: hidden;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__cta-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
  }

  body[data-page="solutions-y"] .site-footer {
    margin: 0;
    overflow: hidden;
    border-radius: 0;
    padding-bottom: 12px;
    background: linear-gradient(135deg, #001c3f 0%, #003a8c 100%);
    color: rgba(255, 255, 255, 0.88);
  }

  body[data-page="solutions-y"] .site-footer a {
    color: rgba(255, 255, 255, 0.88);
  }

  body[data-page="solutions-y"] .site-footer .footer-cta {
    display: none !important;
  }

  body[data-page="solutions-y"] .site-footer .footer-main {
    padding: 22px 0 16px;
  }

  body[data-page="solutions-y"] .site-footer .footer-main__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.05fr) minmax(0, 0.9fr);
    gap: 16px;
    align-items: start;
  }

  body[data-page="solutions-y"] .site-footer .footer-company h2 {
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 1.2;
  }

  body[data-page="solutions-y"] .site-footer .footer-company p,
  body[data-page="solutions-y"] .site-footer .footer-contact {
    font-size: 11px;
    line-height: 1.55;
  }

  body[data-page="solutions-y"] .site-footer .footer-contact {
    margin-top: 12px;
    gap: 4px;
  }

  body[data-page="solutions-y"] .site-footer .footer-links {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 12px;
  }

  body[data-page="solutions-y"] .site-footer .footer-links h3 {
    margin-bottom: 8px;
    font-size: 11px;
  }

  body[data-page="solutions-y"] .site-footer .footer-links a {
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  body[data-page="solutions-y"] .site-footer .footer-qrcode {
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
  }

  body[data-page="solutions-y"] .site-footer .footer-qrcode img {
    width: 92px;
    height: 92px;
    margin-bottom: 0;
    border-width: 4px;
    border-radius: 14px;
  }

  body[data-page="solutions-y"] .site-footer .footer-qrcode .social-links {
    display: none;
  }

  body[data-page="solutions-y"] .site-footer .footer-qrcode h3,
  body[data-page="solutions-y"] .site-footer .footer-qrcode p {
    font-size: 12px;
    line-height: 1.4;
  }

  body[data-page="solutions-y"] .site-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-bottom: 0;
  }

  body[data-page="solutions-y"] .site-footer .footer-bottom nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  body[data-page="solutions-y"] .site-footer .footer-bottom p {
    margin-bottom: 0;
  }

}

@media (max-width: 390px) {
  body[data-page="solutions-y"] .solutions-y-mobile__hero-copy {
    max-width: 70%;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__hero-copy h1 {
    font-size: 24px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__hero-copy p {
    font-size: 12px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__pills {
    gap: 7px 6px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__pills button {
    min-height: 32px;
    font-size: 10px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__item {
    grid-template-columns: 1fr;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__item img {
    aspect-ratio: 16 / 9;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__item-body {
    padding: 10px 12px 12px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__cta {
    padding-right: 110px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__cta-media {
    width: 110px;
  }
}

/* -------------------------------------------------------------------------- */
/* Mobile Home v3 (Strict index.html rebuild override, desktop untouched)     */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body[data-page="home"] {
    --home-v3-gutter: 16px;
    --home-v3-radius: 18px;
    --home-v3-radius-sm: 14px;
    --home-v3-shadow: 0 12px 30px rgba(5, 30, 76, 0.12);
    --home-v3-border: rgba(12, 44, 108, 0.1);
  }

  body[data-page="home"],
  body[data-page="home"] .home-main {
    overflow-x: clip;
  }

  body[data-page="home"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--home-v3-gutter);
  }

  /* Header: compact single-row with phone right + menu rightmost */
  body[data-page="home"] .site-header {
    position: sticky;
    top: 0;
    z-index: 70;
    background: #fff;
  }

  body[data-page="home"] .site-header .topbar {
    position: absolute;
    top: 0;
    right: 58px;
    z-index: 72;
    padding: 0;
    min-height: 0;
    background: transparent;
    border: 0;
    pointer-events: none;
  }

  body[data-page="home"] .site-header .topbar__inner,
  body[data-page="home"] .site-header .topbar__contact {
    width: auto;
    min-height: 64px;
    padding: 0;
    margin: 0;
    justify-content: flex-end;
  }

  body[data-page="home"] .site-header .topbar__contact a:first-child {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #1a57bb;
    pointer-events: auto;
    white-space: nowrap;
  }

  body[data-page="home"] .site-header .topbar__contact a:first-child::before {
    content: "☎";
    font-size: 12px;
    line-height: 1;
  }

  body[data-page="home"] .site-header .topbar__contact a:not(:first-child),
  body[data-page="home"] .site-header .topbar__links,
  body[data-page="home"] .site-header .header-actions {
    display: none !important;
  }

  body[data-page="home"] .site-header .navbar,
  body[data-page="home"] .site-header .navbar__inner {
    min-height: 64px;
  }

  body[data-page="home"] .site-header .navbar {
    box-shadow: 0 8px 24px rgba(5, 30, 76, 0.08);
  }

  body[data-page="home"] .site-header .navbar__inner {
    gap: 8px;
    padding-block: 8px;
  }

  body[data-page="home"] .site-header .brand {
    gap: 8px;
  }

  body[data-page="home"] .site-header .brand__mark {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 14px;
  }

  body[data-page="home"] .site-header .brand__text strong {
    font-size: 16px;
  }

  body[data-page="home"] .site-header .brand__text small {
    margin-top: 1px;
    font-size: 10px;
  }

  body[data-page="home"] .site-header .nav-toggle {
    width: 40px;
    height: 40px;
    margin-left: auto;
  }

  /* Hero */
  body[data-page="home"] .home-hero {
    margin: 12px var(--home-v3-gutter) 0;
    border-radius: var(--home-v3-radius);
    overflow: hidden;
    box-shadow: var(--home-v3-shadow);
  }

  body[data-page="home"] .home-hero::before {
    background-image:
      linear-gradient(90deg, rgba(0, 19, 53, 0.92) 0%, rgba(0, 43, 102, 0.7) 55%, rgba(0, 43, 102, 0.16) 100%),
      var(--home-hero-image, url("../images/banners/home-banner.jpg"));
    background-size: cover;
    background-position: center;
  }

  body[data-page="home"] .home-hero__inner {
    min-height: 320px;
    padding: 24px 16px 118px;
  }

  body[data-page="home"] .home-hero h1.home-desktop-only,
  body[data-page="home"] .home-hero p.home-desktop-only {
    display: none !important;
  }

  body[data-page="home"] .home-mobile-hero-title {
    display: block !important;
    margin: 0 0 10px;
    max-width: 270px;
    color: #fff;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: 0.2px;
  }

  body[data-page="home"] .home-mobile-hero-subtitle {
    display: block !important;
    margin: 0;
    max-width: 240px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.6;
  }

  body[data-page="home"] .home-hero__features {
    display: none !important;
  }

  body[data-page="home"] .home-hero-kpis {
    margin-top: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
  }

  body[data-page="home"] .home-hero-kpi {
    justify-items: start;
    text-align: left;
    gap: 3px;
  }

  body[data-page="home"] .home-hero-kpi strong {
    position: relative;
    padding-left: 18px;
    font-size: 15px;
    line-height: 1.1;
  }

  body[data-page="home"] .home-hero-kpi strong::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 12px;
    height: 12px;
    border: 1.2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    opacity: 0.95;
  }

  body[data-page="home"] .home-hero-kpi small {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.74);
  }

  body[data-page="home"] .home-hero__arrow {
    display: none !important;
  }

  body[data-page="home"] .home-hero__controls {
    inset: auto 0 10px;
  }

  body[data-page="home"] .home-hero__dots button {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.7);
  }

  body[data-page="home"] .home-hero__dots button.is-active {
    transform: scale(1.2);
    background: #fff;
  }

  /* Quick entry grid */
  body[data-page="home"] .home-quick-nav {
    margin-top: -46px;
    padding: 0;
  }

  body[data-page="home"] .home-quick-nav__grid {
    gap: 12px 10px;
    padding: 14px 12px;
    border: 1px solid var(--home-v3-border);
    border-radius: var(--home-v3-radius);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--home-v3-shadow);
  }

  body[data-page="home"] .home-quick-nav__item {
    gap: 8px;
    min-height: 72px;
    padding: 6px 4px;
  }

  body[data-page="home"] .home-quick-nav__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0, 70, 184, 0.14);
    background: rgba(0, 70, 184, 0.08);
    box-shadow: none;
  }

  body[data-page="home"] .home-quick-nav__icon svg {
    width: 16px;
    height: 16px;
  }

  body[data-page="home"] .home-quick-nav__item > span:last-child {
    font-size: 12px;
    font-weight: 700;
  }

  /* Top CTA banner */
  body[data-page="home"] .home-mobile-cta {
    display: block !important;
    margin-top: 10px;
  }

  body[data-page="home"] .home-mobile-cta__card {
    grid-template-columns: minmax(0, 1fr) 110px;
    padding: 14px 14px;
    border-radius: var(--home-v3-radius-sm);
    background: linear-gradient(120deg, #0056d8 0%, #003a8c 100%);
  }

  body[data-page="home"] .home-mobile-cta__title {
    font-size: 16px;
    font-weight: 800;
  }

  body[data-page="home"] .home-mobile-cta__desc {
    font-size: 12px;
  }

  body[data-page="home"] .home-mobile-cta__media {
    width: 110px;
    height: 66px;
    border-radius: 12px;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.02)), var(--banner-image, url("../images/banners/default-industrial-factory.png"));
  }

  /* Hide old non-reference sections */
  body[data-page="home"] .home-advantages,
  body[data-page="home"] .home-about-support,
  body[data-page="home"] .home-quote {
    display: none !important;
  }

  body[data-page="home"] .home-section {
    padding-block: 22px;
  }

  body[data-page="home"] .home-section-title,
  body[data-page="home"] .home-news-heading {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 12px;
  }

  body[data-page="home"] .home-section-title h2,
  body[data-page="home"] .home-news-heading h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: 0.2px;
  }

  body[data-page="home"] .home-section-title > p {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 12px;
    color: rgba(14, 39, 88, 0.68);
  }

  body[data-page="home"] .home-section-title > a,
  body[data-page="home"] .home-news-heading > a {
    position: static;
    font-size: 12px;
    color: #195ac0;
    font-weight: 700;
  }

  body[data-page="home"] .home-solutions .home-section-title,
  body[data-page="home"] .home-cases .home-section-title {
    align-items: center;
    padding-right: 0;
  }

  body[data-page="home"] .home-solutions .home-section-title > p,
  body[data-page="home"] .home-cases .home-section-title > p {
    display: none;
  }

  /* Products: 3 compact cards in one row */
  body[data-page="home"] .home-product-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px;
    overflow: visible !important;
    padding: 0;
  }

  body[data-page="home"] .home-product-card {
    min-height: 0;
    padding: 8px;
    border: 1px solid var(--home-v3-border);
    border-radius: 12px;
    box-shadow: none;
  }

  body[data-page="home"] .home-product-card img {
    width: 100%;
    height: 66px;
    margin-bottom: 8px;
    border-radius: 8px;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-product-card h3 {
    margin: 0 0 4px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 800;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body[data-page="home"] .home-product-card p {
    margin: 0 0 6px;
    font-size: 10px;
    color: rgba(14, 39, 88, 0.62);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 0;
  }

  body[data-page="home"] .home-products .home-outline-btn {
    border: 0;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #1a57bb;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
  }

  /* Data strip */
  body[data-page="home"] .home-mobile-kpi {
    display: block !important;
    margin-top: 6px;
  }

  body[data-page="home"] .home-mobile-kpi .container {
    width: 100%;
    max-width: 100%;
  }

  body[data-page="home"] .home-mobile-kpi__strip {
    gap: 6px;
    padding: 12px 10px;
    border-radius: var(--home-v3-radius-sm);
    background: linear-gradient(120deg, #00318a 0%, #00215f 100%);
  }

  body[data-page="home"] .home-mobile-kpi__item strong {
    font-size: 16px;
  }

  body[data-page="home"] .home-mobile-kpi__item small {
    font-size: 10px;
  }

  /* Solutions */
  body[data-page="home"] .home-solution-grid {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(145px, 42vw);
    gap: 10px;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    padding: 0 0 8px;
    scrollbar-width: none;
  }

  body[data-page="home"] .home-solution-grid::-webkit-scrollbar {
    display: none;
  }

  body[data-page="home"] .home-solution-card {
    height: 98px;
    border-radius: 12px;
    scroll-snap-align: start;
  }

  body[data-page="home"] .home-solution-card span {
    bottom: 10px;
    left: 10px;
    right: 10px;
    font-size: 13px;
    font-weight: 800;
  }

  /* Cases */
  body[data-page="home"] .home-case-wrap {
    overflow: visible;
  }

  body[data-page="home"] .home-slider-btn {
    display: none !important;
  }

  body[data-page="home"] .home-case-grid {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(230px, 68vw);
    gap: 10px;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    padding: 0 0 8px;
    scrollbar-width: none;
  }

  body[data-page="home"] .home-case-grid::-webkit-scrollbar {
    display: none;
  }

  body[data-page="home"] .home-case-card {
    scroll-snap-align: start;
    border: 1px solid var(--home-v3-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: none;
  }

  body[data-page="home"] .home-case-card img {
    width: 100%;
    height: 108px;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-case-card > div {
    display: grid;
    gap: 6px;
    padding: 10px 10px 12px;
  }

  body[data-page="home"] .home-case-card h3 {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
  }

  body[data-page="home"] .home-case-card p {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: rgba(14, 39, 88, 0.68);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body[data-page="home"] .home-case-card .home-outline-btn.home-mobile-only {
    display: inline !important;
    border: 0;
    min-height: 0;
    padding: 0;
    color: #1a57bb;
    font-size: 12px;
    font-weight: 700;
    background: transparent;
  }

  /* News list */
  body[data-page="home"] .home-news {
    padding-top: 18px;
  }

  body[data-page="home"] .home-news-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  body[data-page="home"] .home-news-grid > div:nth-child(2) {
    display: none !important;
  }

  body[data-page="home"] .home-news-list article {
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(12, 44, 108, 0.08);
  }

  body[data-page="home"] .home-news-list article:last-child {
    border-bottom: 0;
  }

  body[data-page="home"] .home-news-list img {
    width: 78px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-news-list article > div {
    position: relative;
    display: grid;
    gap: 4px;
    padding-right: 64px;
  }

  body[data-page="home"] .home-news-list span {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(0, 70, 184, 0.1);
    color: #1a57bb;
    font-size: 10px;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
  }

  body[data-page="home"] .home-news-list h3 {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body[data-page="home"] .home-news-list p {
    margin: 0;
    font-size: 11px;
    color: rgba(14, 39, 88, 0.58);
  }

  /* Solutions and cases: reuse the news list rhythm on mobile. */
  body[data-page="home"] .home-solutions .home-solution-grid,
  body[data-page="home"] .home-cases .home-case-wrap {
    display: none !important;
  }

  body[data-page="home"] .home-solution-list,
  body[data-page="home"] .home-case-list {
    display: grid !important;
    gap: 12px;
    margin-top: 14px;
  }

  body[data-page="home"] .home-solution-list.home-mobile-only[style*="display:none"],
  body[data-page="home"] .home-case-list.home-mobile-only[style*="display:none"] {
    display: grid !important;
  }

  body[data-page="home"] .home-solution-list article,
  body[data-page="home"] .home-case-list article {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(12, 44, 108, 0.08);
  }

  body[data-page="home"] .home-solution-list article:last-child,
  body[data-page="home"] .home-case-list article:last-child {
    border-bottom: 0;
  }

  body[data-page="home"] .home-solution-list img,
  body[data-page="home"] .home-case-list img {
    width: 96px;
    height: 72px;
    border-radius: 12px;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-solution-list article > div,
  body[data-page="home"] .home-case-list article > div {
    position: relative;
    display: grid;
    gap: 6px;
    min-width: 0;
    padding-right: 64px;
  }

  body[data-page="home"] .home-solution-list span,
  body[data-page="home"] .home-case-list span {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(0, 70, 184, 0.10);
    color: #003a8c;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    margin: 0;
  }

  body[data-page="home"] .home-solution-list h3,
  body[data-page="home"] .home-case-list h3 {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 900;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="home"] .home-solution-list p,
  body[data-page="home"] .home-case-list p {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: rgba(14, 39, 88, 0.66);
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* Trust logos */
  body[data-page="home"] .home-trust {
    display: block !important;
    padding: 6px 0 0;
  }

  body[data-page="home"] .home-trust__title {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 800;
    margin-bottom: 6px;
  }

  body[data-page="home"] .home-trust__logos {
    gap: 14px;
    padding-bottom: 6px;
  }

  body[data-page="home"] .home-trust__logo {
    font-size: 11px;
    color: rgba(14, 39, 88, 0.38);
  }

  /* Bottom CTA */
  body[data-page="home"] .home-service-cta {
    display: block !important;
    padding-top: 12px;
  }

  body[data-page="home"] .home-service-cta__card {
    grid-template-columns: minmax(0, 1fr) 118px;
    gap: 10px;
    padding: 14px;
    border-radius: var(--home-v3-radius);
    background: linear-gradient(120deg, #004fcd 0%, #00348f 100%);
  }

  body[data-page="home"] .home-service-cta__body strong {
    font-size: 28px;
    line-height: 1.1;
    font-weight: 800;
  }

  body[data-page="home"] .home-service-cta__body p {
    font-size: 12px;
  }

  body[data-page="home"] .home-service-cta__actions {
    gap: 8px;
  }

  body[data-page="home"] .home-service-cta__actions .btn {
    min-height: 36px;
    font-size: 12px;
    padding-inline: 12px;
  }

  body[data-page="home"] .home-service-cta__actions .btn-primary {
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
  }

  body[data-page="home"] .home-service-cta__media {
    width: 118px;
    height: 104px;
    border-radius: 14px;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.03)), var(--banner-image, url("../images/banners/default-industrial-factory.png"));
  }

  /* Footer */
  body[data-page="home"] .site-footer {
    margin-top: 12px;
    border-radius: 0;
    background: linear-gradient(120deg, #011a45 0%, #022f7e 100%);
    overflow: hidden;
  }

  body[data-page="home"] .site-footer .footer-main {
    padding: 18px 0 10px;
  }

  body[data-page="home"] .site-footer .footer-main__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 14px 12px;
    align-items: start;
  }

  body[data-page="home"] .site-footer .footer-company h2 {
    margin-bottom: 8px;
    font-size: 22px;
  }

  body[data-page="home"] .site-footer .footer-company p,
  body[data-page="home"] .site-footer .footer-contact {
    font-size: 11px;
    line-height: 1.5;
  }

  body[data-page="home"] .site-footer .footer-links {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="home"] .site-footer .footer-links h3 {
    margin-bottom: 8px;
    font-size: 12px;
  }

  body[data-page="home"] .site-footer .footer-links a {
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.35;
  }

  body[data-page="home"] .site-footer .footer-qrcode {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 6px;
  }

  body[data-page="home"] .site-footer .footer-qrcode img {
    width: 86px;
    height: 86px;
    border-radius: 10px;
    border: 3px solid rgba(255, 255, 255, 0.16);
    object-fit: cover;
  }

  body[data-page="home"] .site-footer .footer-bottom__inner {
    padding: 12px 0 84px;
    gap: 8px;
    text-align: center;
    justify-items: center;
  }

  body[data-page="home"] .floating-contact {
    display: none !important;
  }

  /* Bottom nav */
  body[data-page="home"].has-main-bottom-nav {
    padding-bottom: calc(env(safe-area-inset-bottom) + 78px);
  }

  body[data-page="home"].has-main-bottom-nav .mobile-bottom-nav--main {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid rgba(12, 44, 108, 0.1);
    border-radius: 14px 14px 0 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -8px 26px rgba(5, 30, 76, 0.12);
  }

  body[data-page="home"].has-main-bottom-nav .mobile-bottom-nav--main a {
    min-height: 46px;
    font-size: 11px !important;
    color: rgba(14, 39, 88, 0.68);
  }

  body[data-page="home"].has-main-bottom-nav .mobile-bottom-nav--main a.is-active {
    color: #1a57bb;
  }
}

@media (max-width: 480px) {
  body[data-page="home"] .site-header .topbar {
    right: 52px;
  }

  body[data-page="home"] .site-header .topbar__contact a:first-child {
    font-size: 12px;
  }

  body[data-page="home"] .home-mobile-hero-title {
    font-size: 37px;
    max-width: 236px;
  }

  body[data-page="home"] .home-mobile-hero-subtitle {
    font-size: 13px;
    max-width: 220px;
  }

  body[data-page="home"] .home-hero__inner {
    min-height: 306px;
    padding-bottom: 112px;
  }

  body[data-page="home"] .home-product-grid {
    gap: 7px;
  }

  body[data-page="home"] .home-product-card img {
    height: 62px;
  }

  body[data-page="home"] .home-product-card h3 {
    font-size: 11px;
  }

  body[data-page="home"] .home-mobile-kpi__item strong {
    font-size: 15px;
  }

  body[data-page="home"] .home-mobile-kpi__item small {
    font-size: 9px;
  }

  body[data-page="home"] .home-solution-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: unset;
    gap: 8px;
    overflow-x: hidden !important;
    padding: 0;
  }

  body[data-page="home"] .home-solutions .home-solution-card {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  body[data-page="home"] .home-case-grid {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-auto-columns: unset;
    gap: 10px;
    overflow-x: hidden !important;
    padding: 0;
  }

  body[data-page="home"] .home-cases .home-case-card {
    min-height: 248px;
  }

  body[data-page="home"] .home-cases .home-case-card img {
    height: 110px;
  }

  body[data-page="home"] .home-cases .home-case-card > div {
    gap: 5px;
    padding: 10px 10px 12px;
  }

  body[data-page="home"] .home-cases .home-case-card h3 {
    font-size: 13px;
    line-height: 1.35;
  }

  body[data-page="home"] .home-cases .home-case-card p {
    font-size: 11px;
    line-height: 1.45;
  }

  body[data-page="home"] .home-service-cta__card {
    grid-template-columns: minmax(0, 1fr) 102px;
  }

  body[data-page="home"] .home-service-cta__body strong,
  body[data-page="home"] .home-trust__title,
  body[data-page="home"] .home-section-title h2,
  body[data-page="home"] .home-news-heading h2 {
    font-size: 24px;
  }

  body[data-page="home"] .site-footer .footer-main__grid {
    grid-template-columns: minmax(0, 1fr) 84px;
  }

  body[data-page="home"] .site-footer .footer-qrcode img {
    width: 78px;
    height: 78px;
  }
}

/* -------------------------------------------------------------------------- */
/* About Mobile v3 (strict reference rebuild, mobile only, desktop untouched) */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body[data-page="about"] {
    --about3-gap: 16px;
    --about3-radius: 20px;
    --about3-radius-sm: 14px;
    --about3-shadow: 0 10px 26px rgba(9, 35, 89, 0.12);
    --about3-border: rgba(16, 45, 106, 0.1);
    overflow-x: hidden;
    padding-bottom: calc(env(safe-area-inset-bottom) + 80px);
    background: #f4f7fc;
  }

  body[data-page="about"] *,
  body[data-page="about"] *::before,
  body[data-page="about"] *::after {
    box-sizing: border-box;
  }

  body[data-page="about"] .about-page {
    display: flex;
    flex-direction: column;
    background: #f4f7fc;
  }

  body[data-page="about"] .about-tabs,
  body[data-page="about"] .about-intro-section,
  body[data-page="about"] .about-timeline-section,
  body[data-page="about"] .about-factory-section,
  body[data-page="about"] .about-triple-section,
  body[data-page="about"] .about-team-section,
  body[data-page="about"] .about-values-section,
  body[data-page="about"] .about-mobile-cta,
  body[data-page="about"] .about-contact-strip {
    display: none !important;
  }

  body[data-page="about"] .about-v3-mobile {
    display: block;
    padding: 12px 0 18px;
    order: 1;
  }

  body[data-page="about"] .about-banner {
    order: 0;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 12px 10px;
    min-height: 254px !important;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 18px 38px rgba(0, 28, 78, 0.18);
    background: #082d74;
  }

  body[data-page="about"] .about-banner::before {
    background-image:
      linear-gradient(90deg, rgba(1, 21, 59, 0.94) 0%, rgba(0, 44, 103, 0.72) 54%, rgba(0, 44, 103, 0.22) 100%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png"));
    background-position: right center;
    background-size: cover;
  }

  body[data-page="about"] .about-banner__inner {
    display: grid !important;
    align-content: end;
    min-height: 254px !important;
    padding: 28px 18px 24px;
  }

  body[data-page="about"] .about-banner h1 {
    display: block !important;
    color: #fff !important;
    font-size: 30px;
    line-height: 1.08;
    font-weight: 950;
    margin-bottom: 8px;
  }

  body[data-page="about"] .about-banner p {
    display: block !important;
    color: rgba(255, 255, 255, 0.92) !important;
    max-width: 280px;
    font-size: 14px;
    line-height: 1.58;
    font-weight: 600;
    margin-bottom: 8px;
  }

  body[data-page="about"] .about-mobile-only {
    display: inline !important;
  }

  body[data-page="about"] .about-mobile-only[style*="display:none"] {
    display: inline !important;
  }

  body[data-page="about"] .about-banner-crumb,
  body[data-page="about"] .about-desktop-only,
  body[data-page="about"] .about-hero-points {
    display: none !important;
  }

  body[data-page="about"] .about-v3-mobile__wrap {
    display: grid;
    gap: 16px;
    margin-top: 14px;
    min-width: 0;
  }

  body[data-page="about"] .about-v3-card,
  body[data-page="about"] .about-v3-block {
    border: 1px solid var(--about3-border);
    border-radius: var(--about3-radius);
    background: #fff;
    box-shadow: var(--about3-shadow);
    padding: 16px;
    min-width: 0;
  }

  body[data-page="about"] .about-v3-card h2,
  body[data-page="about"] .about-v3-block h2 {
    margin: 0 0 12px;
    font-size: 28px;
    line-height: 1.15;
  }

  body[data-page="about"] .about-v3-intro p {
    margin: 0 0 9px;
    font-size: 12px;
    line-height: 1.72;
    color: #51617b;
  }

  body[data-page="about"] .about-v3-intro__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
    min-width: 0;
  }

  body[data-page="about"] .about-v3-intro__stats div {
    min-height: 70px;
    border-radius: 12px;
    border: 1px solid var(--about3-border);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 8px 4px;
    background: #fbfdff;
    min-width: 0;
  }

  body[data-page="about"] .about-v3-intro__stats strong {
    font-size: 12px;
    color: #1250b4;
    line-height: 1.2;
  }

  body[data-page="about"] .about-v3-intro__stats span {
    font-size: 10px;
    color: #6c7b95;
    line-height: 1.2;
  }

  body[data-page="about"] .about-v3-adv-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
  }

  body[data-page="about"] .about-v3-adv-grid article {
    border: 1px solid var(--about3-border);
    border-radius: var(--about3-radius-sm);
    padding: 10px 8px;
    background: #fff;
    min-width: 0;
    min-height: 110px;
    display: flex;
    flex-direction: column;
  }

  body[data-page="about"] .about-v3-adv-grid strong {
    display: block;
    font-size: 12px;
    line-height: 1.2;
    margin-bottom: 4px;
  }

  body[data-page="about"] .about-v3-adv-grid p {
    margin: 0;
    font-size: 9px;
    line-height: 1.35;
    color: #62748e;
    overflow-wrap: anywhere;
  }

  body[data-page="about"] .about-v3-timeline-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    min-width: 0;
  }

  body[data-page="about"] .about-v3-timeline {
    border: 1px solid var(--about3-border);
    border-radius: var(--about3-radius-sm);
    padding: 10px 10px 6px;
    background: #fff;
    min-width: 0;
  }

  body[data-page="about"] .about-v3-timeline > div {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 6px;
    padding: 6px 0 8px;
    position: relative;
    min-width: 0;
  }

  body[data-page="about"] .about-v3-timeline > div::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(18, 80, 180, 0.18);
  }

  body[data-page="about"] .about-v3-timeline > div strong {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #1250b4;
    position: relative;
    min-height: 18px;
    padding-left: 18px;
    line-height: 1.1;
  }

  body[data-page="about"] .about-v3-timeline > div strong::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1f6de0;
    box-shadow: 0 0 0 4px rgba(31, 109, 224, 0.16);
    transform: translateY(-50%);
  }

  body[data-page="about"] .about-v3-timeline > div span {
    font-size: 11px;
    line-height: 1.45;
    color: #61728e;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body[data-page="about"] .about-v3-timeline-media {
    border: 1px solid var(--about3-border);
    border-radius: var(--about3-radius-sm);
    overflow: hidden;
    background: #fff;
  }

  body[data-page="about"] .about-v3-timeline-media img {
    width: 100%;
    height: 166px;
    object-fit: cover;
  }

  body[data-page="about"] .about-v3-timeline-media div {
    padding: 10px 12px 12px;
  }

  body[data-page="about"] .about-v3-timeline-media strong {
    font-size: 14px;
    display: block;
  }

  body[data-page="about"] .about-v3-timeline-media small {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: #6a7b95;
  }

  body[data-page="about"] .about-v3-culture {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
  }

  body[data-page="about"] .about-v3-culture article {
    border: 1px solid var(--about3-border);
    border-radius: 12px;
    padding: 8px 5px;
    text-align: center;
    background: #fff;
    min-height: 86px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  body[data-page="about"] .about-v3-culture strong {
    display: block;
    font-size: 10px;
    line-height: 1.15;
    margin-bottom: 2px;
  }

  body[data-page="about"] .about-v3-culture p {
    margin: 0;
    font-size: 8px;
    line-height: 1.3;
    color: #667892;
    overflow-wrap: anywhere;
  }

  body[data-page="about"] .about-v3-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
  }

  body[data-page="about"] .about-v3-rail::-webkit-scrollbar {
    display: none;
  }

  body[data-page="about"] .about-v3-team-rail article,
  body[data-page="about"] .about-v3-honor-rail article {
    border: 1px solid var(--about3-border);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    min-width: 0;
  }

  body[data-page="about"] .about-v3-team-rail img,
  body[data-page="about"] .about-v3-honor-rail img {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    display: block;
  }

  body[data-page="about"] .about-v3-honor-rail span {
    display: block;
    padding: 8px 6px;
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    color: #4d5d76;
  }

  body[data-page="about"] .about-v3-mobile-cta {
    position: relative;
    overflow: hidden;
    border-radius: var(--about3-radius);
    background: linear-gradient(135deg, #0053d4 0%, #003a96 100%);
    padding: 16px;
    box-shadow: 0 14px 32px rgba(7, 33, 88, 0.22);
    color: #fff;
  }

  body[data-page="about"] .about-v3-mobile-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(2, 27, 76, 0.7) 0%, rgba(2, 27, 76, 0.2) 70%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png")) right center/cover no-repeat;
    opacity: 0.7;
    pointer-events: none;
  }

  body[data-page="about"] .about-v3-mobile-cta__copy,
  body[data-page="about"] .about-v3-mobile-cta__actions {
    position: relative;
    z-index: 1;
  }

  body[data-page="about"] .about-v3-mobile-cta__copy strong {
    display: block;
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 6px;
  }

  body[data-page="about"] .about-v3-mobile-cta__copy p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.86);
  }

  body[data-page="about"] .about-v3-mobile-cta__actions {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  body[data-page="about"] .about-v3-mobile-cta__actions .btn {
    width: 100%;
    min-height: 40px;
    border-radius: 10px;
    font-size: 13px;
    padding-inline: 10px;
  }

  body[data-page="about"] .site-footer {
    background: linear-gradient(145deg, #001a43 0%, #002b73 100%);
    overflow: hidden;
  }

  body[data-page="about"] .site-footer .footer-main {
    padding-top: 20px;
  }

  body[data-page="about"] .site-footer .footer-main__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body[data-page="about"] .site-footer .footer-company h2 {
    font-size: 24px;
    margin-bottom: 8px;
  }

  body[data-page="about"] .site-footer .footer-company p,
  body[data-page="about"] .site-footer .footer-contact {
    font-size: 12px;
    line-height: 1.6;
  }

  body[data-page="about"] .site-footer .footer-qrcode {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
  }

  body[data-page="about"] .site-footer .footer-qrcode img {
    width: 86px;
    height: 86px;
    object-fit: cover;
  }

  body[data-page="about"] .site-footer .footer-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-page="about"] .site-footer .footer-links h3 {
    font-size: 13px;
    margin-bottom: 6px;
  }

  body[data-page="about"] .site-footer .footer-links a {
    font-size: 11px;
    line-height: 1.35;
    margin-top: 5px;
  }

  body[data-page="about"] .site-footer .footer-bottom__inner {
    gap: 8px;
    justify-items: center;
    text-align: center;
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }

  body[data-page="about"] .mobile-bottom-nav--main {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid rgba(10, 40, 98, 0.1);
    border-radius: 14px 14px 0 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -8px 24px rgba(8, 30, 77, 0.14);
  }

  body[data-page="about"] .mobile-bottom-nav--main a {
    min-height: 46px;
    font-size: 11px;
    color: rgba(14, 39, 88, 0.68);
  }

  body[data-page="about"] .mobile-bottom-nav--main a.is-active {
    color: #1a57bb;
  }

  body[data-page="about"] .floating-contact {
    display: none !important;
  }
}

@media (max-width: 480px) {
  body[data-page="about"] .about-banner {
    margin-inline: 12px;
    min-height: 240px !important;
  }

  body[data-page="about"] .about-banner h1 {
    font-size: 28px;
  }

  body[data-page="about"] .about-banner__inner {
    min-height: 240px !important;
    padding: 26px 16px 22px;
  }

  body[data-page="about"] .about-banner p {
    max-width: 250px;
    font-size: 13px;
  }

  body[data-page="about"] .about-v3-card h2,
  body[data-page="about"] .about-v3-block h2 {
    font-size: 24px;
  }

  body[data-page="about"] .about-v3-intro__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="about"] .about-v3-culture {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------------------- */
/* Products Mobile v3 (strict reference rebuild, mobile only, desktop intact) */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body[data-page="products"] {
    --p3-gutter: 12px;
    --p3-radius: 18px;
    --p3-radius-sm: 14px;
    --p3-border: rgba(14, 39, 88, 0.10);
    --p3-shadow: 0 12px 28px rgba(0, 32, 84, 0.10);
    overflow-x: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 58%, #ffffff 100%);
    padding-bottom: calc(env(safe-area-inset-bottom) + 84px);
  }

  body[data-page="products"] *,
  body[data-page="products"] *::before,
  body[data-page="products"] *::after {
    box-sizing: border-box;
  }

  body[data-page="products"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--p3-gutter);
  }

  body[data-page="products"] .topbar {
    display: none;
  }

  body[data-page="products"] .product-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body[data-page="products"] .product-banner {
    margin: 0 12px 10px;
    min-height: 254px;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 18px 38px rgba(0, 28, 78, 0.18);
    background: #082d74;
  }

  body[data-page="products"] .product-banner::before {
    background-image:
      linear-gradient(90deg, rgba(1, 21, 59, 0.94) 0%, rgba(0, 44, 103, 0.72) 54%, rgba(0, 44, 103, 0.22) 100%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png"));
    background-position: right center;
    background-size: cover;
  }

  body[data-page="products"] .product-banner__inner {
    display: grid;
    align-content: end;
    min-height: 254px;
    padding: 28px 18px 24px;
  }

  body[data-page="products"] .product-banner h1 {
    margin: 0 0 8px;
    font-size: 30px;
    line-height: 1.08;
    font-weight: 950;
    color: #fff;
  }

  body[data-page="products"] .product-banner p {
    max-width: 280px;
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.58;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
  }

  body[data-page="products"] .product-banner span {
    max-width: 260px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 0.02em;
  }

  body[data-page="products"] .product-breadcrumb {
    margin-bottom: 10px;
    border-bottom: 0;
  }

  body[data-page="products"] .product-breadcrumb .container {
    padding-inline: 12px;
  }

  body[data-page="products"] .product-breadcrumb .breadcrumb__list {
    padding-inline: 2px;
    gap: 6px;
    font-size: 12px;
  }

  body[data-page="products"] .product-mobile-search {
    display: block;
    padding: 0;
    margin: 0 0 12px;
  }

  body[data-page="products"] .product-mobile-search__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 86px;
    gap: 8px;
    padding: 0;
  }

  body[data-page="products"] .product-mobile-search__input {
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--p3-border);
    border-radius: 12px;
    background: var(--color-white);
    box-shadow: 0 8px 20px rgba(0, 43, 102, 0.06);
    outline: none;
    font-size: 13px;
  }

  body[data-page="products"] .product-mobile-search__input:focus {
    border-color: rgba(0, 70, 184, 0.45);
    box-shadow: 0 0 0 3px rgba(0, 70, 184, 0.12);
  }

  body[data-page="products"] .product-mobile-search__btn {
    min-height: 44px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 43, 102, 0.08);
    font-size: 13px;
  }

  body[data-page="products"] .product-mobile-categories {
    display: block !important;
    margin: 0 0 12px;
  }

  body[data-page="products"] .product-mobile-categories__card {
    border: 1px solid var(--p3-border);
    border-radius: var(--p3-radius);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--p3-shadow);
    padding: 16px 14px 18px;
  }

  body[data-page="products"] .product-mobile-categories__title {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 950;
    color: var(--color-text);
  }

  body[data-page="products"] .product-mobile-categories__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 8px;
  }

  body[data-page="products"] .product-mobile-categories__grid a {
    min-height: 84px;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 7px;
    padding: 10px 6px 8px;
    border: 1px solid rgba(14, 39, 88, 0.08);
    border-radius: 14px;
    background: #fff;
    color: #12469c;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 10px 24px rgba(0, 43, 102, 0.06);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.15;
  }

  body[data-page="products"] .product-mobile-categories__icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.10), rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(0, 70, 184, 0.10);
    box-shadow: 0 8px 18px rgba(0, 43, 102, 0.08);
    color: #1f5dcf;
  }

  body[data-page="products"] .product-mobile-categories__icon svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  body[data-page="products"] .product-mobile-categories__label {
    display: block;
    min-height: 2.4em;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body[data-page="products"] .product-mobile-categories__grid a.is-active {
    color: #fff;
    border-color: rgba(0, 70, 184, 0.18);
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.94), rgba(0, 43, 102, 0.94));
    box-shadow: 0 12px 24px rgba(0, 43, 102, 0.12);
  }

  body[data-page="products"] .product-mobile-categories__grid a.is-active .product-mobile-categories__icon {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
  }

  body[data-page="products"] .product-list-section {
    padding-block: 8px 26px;
  }

  body[data-page="products"] .product-list-layout {
    display: block;
  }

  body[data-page="products"] .product-sidebar {
    display: none;
  }

  body[data-page="products"] .product-list-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body[data-page="products"] .product-filter-card,
  body[data-page="products"] .product-helper-section,
  body[data-page="products"] .service-guarantee,
  body[data-page="products"] .product-inquiry,
  body[data-page="products"] .recommend-products {
    display: none !important;
  }

  body[data-page="products"] .product-mobile-filterbar {
    display: block;
    margin: 0 0 12px;
  }

  body[data-page="products"] .product-mobile-filterbar__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
  }

  body[data-page="products"] .product-mobile-filterbar__row > a,
  body[data-page="products"] .product-mobile-filterbar__row > button,
  body[data-page="products"] .product-mobile-filterbar__row > select {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid rgba(14, 39, 88, 0.10);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 20px rgba(0, 43, 102, 0.05);
    color: var(--color-text);
    font-size: 12px;
    font-weight: 800;
    outline: none;
    white-space: nowrap;
  }

  body[data-page="products"] .product-mobile-filterbar__row > a {
    display: grid;
    place-items: center;
    text-decoration: none;
  }

  body[data-page="products"] .product-mobile-filterbar__row > a.is-active {
    color: #fff;
    border-color: rgba(0, 70, 184, 0.22);
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.94), rgba(0, 43, 102, 0.94));
    box-shadow: none;
  }

  body[data-page="products"] .product-mobile-filterbar__row > button {
    cursor: pointer;
  }

  body[data-page="products"] .product-result-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 2px 0 12px;
  }

  body[data-page="products"] .product-result-bar p {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
  }

  body[data-page="products"] .product-result-bar strong {
    color: #1a57bb;
  }

  body[data-page="products"] .product-result-bar button {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(14, 39, 88, 0.10);
    box-shadow: 0 8px 20px rgba(0, 43, 102, 0.05);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="products"] .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    overflow-x: hidden !important;
    scroll-snap-type: none !important;
    scrollbar-width: auto;
    padding: 0;
  }

  body[data-page="products"] .zz-product-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(118px, 38%) minmax(0, 1fr);
    grid-template-areas:
      "image title"
      "image desc"
      "image meta"
      "image link";
    gap: 5px 10px;
    align-items: start;
    align-content: start;
    justify-content: start;
    padding: 10px;
    border: 1px solid var(--p3-border);
    border-radius: var(--p3-radius);
    background: #fff;
    box-shadow: var(--p3-shadow);
    min-width: 0;
    height: 100%;
  }

  body[data-page="products"] .zz-product-card img {
    grid-area: image;
    width: 100%;
    height: 100%;
    min-height: 118px;
    margin: 0;
    border-radius: 12px;
    object-fit: cover;
    object-position: center center;
    align-self: stretch;
  }

  body[data-page="products"] .zz-product-card h3 {
    grid-area: title;
    margin: 0;
    padding-right: 60px;
    font-size: 14px;
    line-height: 1.24;
    font-weight: 950;
    color: var(--color-text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-width: 0;
  }

  body[data-page="products"] .zz-product-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    display: inline-flex !important;
    align-items: center;
    min-height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(26, 87, 187, 0.10);
    color: #1a57bb;
    font-size: 11px;
    font-weight: 900;
    width: max-content;
    white-space: nowrap;
  }

  body[data-page="products"] .zz-product-card p {
    grid-area: desc;
    margin: 0;
    font-size: 12px;
    line-height: 1.38;
    color: rgba(14, 39, 88, 0.72);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-width: 0;
  }

  body[data-page="products"] .zz-product-card dl {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
    margin: 0;
    font-size: 10px;
    line-height: 1.35;
    color: rgba(14, 39, 88, 0.72);
    min-width: 0;
  }

  body[data-page="products"] .zz-product-card dl dt {
    font-weight: 700;
    color: rgba(14, 39, 88, 0.56);
  }

  body[data-page="products"] .zz-product-card dl dd {
    margin: 0;
    color: #143d8b;
    font-weight: 700;
  }

  body[data-page="products"] .zz-product-card a {
    grid-area: link;
    justify-self: start;
    margin-top: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    color: #1a57bb;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
  }

  body[data-page="products"] .zz-product-card a::after {
    content: " →";
  }

  body[data-page="products"] .product-load-more {
    display: none;
  }

  body[data-page="products"] .product-mobile-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 0 10px;
  }

  body[data-page="products"] .product-mobile-pagination a,
  body[data-page="products"] .product-mobile-pagination span {
    min-width: 36px;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(14, 39, 88, 0.10);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 20px rgba(0, 43, 102, 0.05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    font-weight: 800;
    font-size: 12px;
    text-decoration: none;
  }

  body[data-page="products"] .product-mobile-pagination a.is-active {
    color: #fff;
    border-color: rgba(0, 70, 184, 0.22);
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.94), rgba(0, 43, 102, 0.94));
    box-shadow: none;
  }

  body[data-page="products"] .product-mobile-pagination span {
    border-style: dashed;
    box-shadow: none;
    background: transparent;
  }

  body[data-page="products"] .product-mobile-cta {
    display: block;
    margin-top: 10px;
  }

  body[data-page="products"] .product-mobile-cta__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 116px;
    gap: 10px;
    align-items: center;
    padding: 16px;
    border-radius: var(--p3-radius);
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.12), rgba(0, 43, 102, 0.92));
    box-shadow: var(--p3-shadow);
    overflow: hidden;
    color: #fff;
  }

  body[data-page="products"] .product-mobile-cta__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(420px 220px at 18% 30%, rgba(255, 255, 255, 0.14), transparent 62%),
      radial-gradient(380px 200px at 86% 72%, rgba(0, 180, 255, 0.18), transparent 58%);
    pointer-events: none;
  }

  body[data-page="products"] .product-mobile-cta__body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 6px;
  }

  body[data-page="products"] .product-mobile-cta__body strong {
    font-size: 16px;
    line-height: 1.25;
  }

  body[data-page="products"] .product-mobile-cta__body p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
  }

  body[data-page="products"] .product-mobile-cta__btn {
    justify-self: start;
    min-height: 40px;
    padding-inline: 16px;
    border-radius: 14px;
  }

  body[data-page="products"] .product-mobile-cta__media {
    position: relative;
    width: 116px;
    height: 92px;
    border-radius: 16px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
      var(--banner-image, url("../images/banners/default-industrial-factory.png"));
    background-position: center;
    background-size: cover;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 36px rgba(0, 18, 48, 0.22);
  }

  body[data-page="products"] .site-footer {
    background: linear-gradient(135deg, #001c3f 0%, #003a8c 100%);
    color: rgba(255, 255, 255, 0.88);
  }

  body[data-page="products"] .site-footer a {
    color: rgba(255, 255, 255, 0.88);
  }

  body[data-page="products"] .site-footer .footer-main {
    padding: 26px 0 12px;
  }

  body[data-page="products"] .site-footer .footer-main__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body[data-page="products"] .site-footer .footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
  }

  body[data-page="products"] .site-footer .footer-links h3 {
    font-size: 13px;
    margin-bottom: 6px;
  }

  body[data-page="products"] .site-footer .footer-links a {
    font-size: 11px;
    line-height: 1.35;
    margin-top: 4px;
  }

  body[data-page="products"] .site-footer .footer-qrcode {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
  }

  body[data-page="products"] .site-footer .footer-qrcode img {
    width: 86px;
    height: 86px;
    object-fit: cover;
    border-radius: 14px;
  }

  body[data-page="products"] .site-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  body[data-page="products"] .site-footer .footer-bottom__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  body[data-page="products"] .mobile-bottom-nav--main {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid rgba(10, 40, 98, 0.1);
    border-radius: 14px 14px 0 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -8px 24px rgba(8, 30, 77, 0.14);
  }

  body[data-page="products"] .mobile-bottom-nav--main a {
    min-height: 46px;
    font-size: 11px;
    color: rgba(14, 39, 88, 0.68);
  }

  body[data-page="products"] .mobile-bottom-nav--main a.is-active {
    color: #1a57bb;
  }

  body[data-page="products"] .floating-contact {
    display: none !important;
  }
}

@media (max-width: 480px) {
  body[data-page="products"] .product-banner {
    margin-inline: 12px;
    min-height: 240px;
  }

  body[data-page="products"] .product-banner__inner {
    min-height: 240px;
    padding: 26px 16px 22px;
  }

  body[data-page="products"] .product-banner h1 {
    font-size: 28px;
  }

  body[data-page="products"] .product-banner p {
    max-width: 250px;
    font-size: 13px;
  }

  body[data-page="products"] .product-banner span {
    max-width: 220px;
    font-size: 11px;
  }

  body[data-page="products"] .product-mobile-search__form {
    grid-template-columns: minmax(0, 1fr) 80px;
  }

  body[data-page="products"] .product-mobile-categories__grid {
    gap: 8px 6px;
  }

  body[data-page="products"] .product-mobile-categories__grid a {
    min-height: 80px;
    padding: 9px 4px 7px;
    font-size: 10px;
  }

  body[data-page="products"] .product-mobile-categories__grid a::before,
  body[data-page="products"] .product-mobile-categories__grid a.is-active::before {
    content: none;
    display: none;
  }

  body[data-page="products"] .product-mobile-categories__icon {
    width: 32px;
    height: 32px;
  }

  body[data-page="products"] .product-mobile-categories__icon svg {
    width: 18px;
    height: 18px;
  }

  body[data-page="products"] .product-mobile-filterbar__row {
    gap: 6px;
  }

  body[data-page="products"] .product-mobile-filterbar__row > a,
  body[data-page="products"] .product-mobile-filterbar__row > button,
  body[data-page="products"] .product-mobile-filterbar__row > select {
    min-height: 38px;
    font-size: 11px;
    padding: 0 8px;
  }

  body[data-page="products"] .product-grid {
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    overflow-x: hidden !important;
    scroll-snap-type: none !important;
    scrollbar-width: auto;
    padding: 0;
  }

  body[data-page="products"] .zz-product-card {
    position: relative;
    grid-template-columns: minmax(108px, 37%) minmax(0, 1fr);
    grid-template-areas:
      "image title"
      "image desc"
      "image meta"
      "image link";
    gap: 4px 8px;
    align-content: start;
    justify-content: start;
    padding: 9px;
    min-height: 0;
  }

  body[data-page="products"] .zz-product-card img {
    min-height: 108px;
    border-radius: 10px;
  }

  body[data-page="products"] .zz-product-card h3 {
    padding-right: 52px;
    font-size: 13px;
    line-height: 1.22;
  }

  body[data-page="products"] .zz-product-card p {
    font-size: 11px;
    line-height: 1.34;
  }

  body[data-page="products"] .zz-product-card dl {
    font-size: 9px;
    gap: 2px 5px;
  }

  body[data-page="products"] .zz-product-tag {
    top: 9px;
    right: 9px;
    min-height: 20px;
    padding: 0 8px;
    font-size: 10px;
  }

  body[data-page="products"] .product-mobile-cta__card {
    grid-template-columns: minmax(0, 1fr) 96px;
    padding: 14px;
  }

  body[data-page="products"] .product-mobile-cta__media {
    width: 96px;
    height: 84px;
  }

body[data-page="products"] .site-footer .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
  }
}

/* -------------------------------------------------------------------------- */
/* Mobile Cases v3 (Reference-template rebuild, mobile-only, desktop intact)   */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body[data-page="cases"] {
    background: #f3f6fb;
    overflow-x: hidden;
  }

  body[data-page="cases"] .case-banner,
  body[data-page="cases"] .case-list-section,
  body[data-page="cases"] .case-feature,
  body[data-page="cases"] .case-related-strip,
  body[data-page="cases"] .case-inquiry {
    display: none;
  }

  body[data-page="cases"] .cases-mobile {
    display: block;
    padding: 12px 0 6px;
  }

  body[data-page="cases"] .cases-mobile .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 12px;
  }

  body[data-page="cases"] .cases-mobile__hero {
    position: relative;
    overflow: hidden;
    min-height: 248px;
    padding: 24px 18px 18px;
    border-radius: 18px 18px 0 0;
    background:
      linear-gradient(90deg, rgba(0, 18, 48, 0.96) 0%, rgba(0, 43, 102, 0.82) 54%, rgba(0, 43, 102, 0.16) 100%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png")) right center / cover no-repeat;
    box-shadow: 0 14px 34px rgba(0, 18, 48, 0.16);
  }

  body[data-page="cases"] .cases-mobile__hero-copy {
    position: relative;
    z-index: 1;
  }

  body[data-page="cases"] .cases-mobile__hero-copy h1 {
    margin-bottom: 8px;
    color: var(--color-white);
    font-size: 28px;
    line-height: 1.18;
    letter-spacing: 0;
  }

  body[data-page="cases"] .cases-mobile__hero-copy p {
    max-width: 262px;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    line-height: 1.65;
  }

  body[data-page="cases"] .cases-mobile__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-page="cases"] .cases-mobile__stat {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding-top: 4px;
    text-align: center;
    color: var(--color-white);
    min-width: 0;
  }

  body[data-page="cases"] .cases-mobile__stat-icon {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
  }

  body[data-page="cases"] .cases-mobile__stat-icon svg {
    width: 12px;
    height: 12px;
    color: var(--color-white);
  }

  body[data-page="cases"] .cases-mobile__stat strong {
    color: var(--color-white);
    font-size: 14px;
    line-height: 1;
  }

  body[data-page="cases"] .cases-mobile__stat small {
    color: rgba(255, 255, 255, 0.82);
    font-size: 10px;
    line-height: 1.2;
  }

  body[data-page="cases"] .cases-mobile__panel {
    margin-top: -1px;
    padding: 16px 14px 14px;
    border: 1px solid rgba(13, 36, 79, 0.08);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 28px rgba(0, 18, 48, 0.08);
  }

  body[data-page="cases"] .cases-mobile__industries {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="cases"] .cases-mobile__industries a {
    display: grid;
    place-items: center;
    min-height: 40px;
    padding: 0 8px;
    border: 1px solid rgba(13, 36, 79, 0.10);
    border-radius: 12px;
    background: var(--color-white);
    box-shadow: 0 6px 14px rgba(0, 18, 48, 0.06);
    color: #1b2d4c;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  body[data-page="cases"] .cases-mobile__industries a.is-active {
    color: var(--color-white);
    background: linear-gradient(135deg, #0059d2 0%, #0a46bd 100%);
    border-color: rgba(0, 70, 184, 0.22);
    box-shadow: 0 8px 18px rgba(0, 70, 184, 0.18);
  }

  body[data-page="cases"] .cases-mobile__toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
  }

  body[data-page="cases"] .cases-mobile__toolbar button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(13, 36, 79, 0.10);
    border-radius: 12px;
    background: var(--color-white);
    box-shadow: 0 6px 14px rgba(0, 18, 48, 0.06);
    color: #1b2d4c;
    font-size: 12px;
    font-weight: 800;
    min-width: 0;
  }

  body[data-page="cases"] .cases-mobile__toolbar button svg {
    width: 12px;
    height: 12px;
    color: var(--color-blue-700);
    flex: 0 0 auto;
  }

  body[data-page="cases"] .cases-mobile__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
  }

  body[data-page="cases"] .cases-mobile-card {
    overflow: hidden;
    border: 1px solid rgba(13, 36, 79, 0.08);
    border-radius: 16px;
    background: var(--color-white);
    box-shadow: 0 10px 22px rgba(0, 18, 48, 0.08);
    min-width: 0;
  }

  body[data-page="cases"] .cases-mobile-card__media {
    position: relative;
  }

  body[data-page="cases"] .cases-mobile-card__media img {
    display: block;
    width: 100%;
    aspect-ratio: 1.92 / 1;
    object-fit: cover;
  }

  body[data-page="cases"] .cases-mobile-card__media span {
    position: absolute;
    left: 8px;
    top: 8px;
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(84, 142, 255, 0.96);
    color: var(--color-white);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    box-shadow: 0 8px 16px rgba(0, 18, 48, 0.20);
  }

  body[data-page="cases"] .cases-mobile-card__body {
    padding: 12px 10px 12px;
    min-width: 0;
  }

  body[data-page="cases"] .cases-mobile-card__body h2 {
    margin-bottom: 6px;
    color: #091c3a;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 900;
    min-width: 0;
  }

  body[data-page="cases"] .cases-mobile-card__body p {
    min-height: 34px;
    margin-bottom: 10px;
    color: #6c7a92;
    font-size: 10.5px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  body[data-page="cases"] .cases-mobile-card__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding-top: 10px;
    border-top: 1px dashed rgba(13, 36, 79, 0.14);
  }

  body[data-page="cases"] .cases-mobile-card__stats div {
    display: grid;
    gap: 2px;
    text-align: center;
    min-width: 0;
  }

  body[data-page="cases"] .cases-mobile-card__stats strong {
    color: var(--color-blue-700);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    min-width: 0;
  }

  body[data-page="cases"] .cases-mobile-card__stats small {
    color: #78859b;
    font-size: 9px;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  body[data-page="cases"] .cases-mobile-card__body a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    color: var(--color-blue-700);
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
  }

  body[data-page="cases"] .cases-mobile__pagination {
    justify-content: center;
    gap: 6px;
    padding-top: 16px;
  }

  body[data-page="cases"] .cases-mobile__pagination a,
  body[data-page="cases"] .cases-mobile__pagination span {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 6px;
    border: 1px solid rgba(13, 36, 79, 0.10);
    background: var(--color-white);
    color: #1b2d4c;
    font-size: 12px;
    line-height: 26px;
  }

  body[data-page="cases"] .cases-mobile__pagination a.is-active {
    color: var(--color-white);
    border-color: rgba(0, 70, 184, 0.20);
    background: var(--color-blue-700);
  }

  body[data-page="cases"] .cases-mobile-cta {
    margin-top: 14px;
  }

  body[data-page="cases"] .cases-mobile-cta__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 126px;
    gap: 14px;
    align-items: end;
    padding: 16px 16px 14px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, #005ad3 0%, #0a46bd 72%, #0a73f0 100%);
    box-shadow: 0 16px 28px rgba(0, 18, 48, 0.14);
    color: var(--color-white);
    min-width: 0;
  }

  body[data-page="cases"] .cases-mobile-cta__copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 6px;
    min-width: 0;
  }

  body[data-page="cases"] .cases-mobile-cta__copy strong {
    font-size: 16px;
    line-height: 1.2;
    color: var(--color-white);
  }

  body[data-page="cases"] .cases-mobile-cta__copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 11px;
    line-height: 1.5;
  }

  body[data-page="cases"] .cases-mobile-cta__actions {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    min-width: 0;
  }

  body[data-page="cases"] .cases-mobile-cta__actions .btn {
    min-height: 36px;
    border-radius: 10px;
  }

  body[data-page="cases"] .cases-mobile-cta__media {
    position: absolute;
    right: -12px;
    bottom: -10px;
    width: 136px;
    height: 150px;
    border-radius: 24px;
    background: url("../images/support/support-engineer-factory-01.jpg") center / cover no-repeat;
    box-shadow: 0 16px 24px rgba(0, 0, 0, 0.08);
  }

  body[data-page="cases"] .floating-contact,
  body[data-page="cases"] .mobile-bottom-nav--main {
    display: none !important;
  }

  body[data-page="cases"] .site-footer {
    margin: 12px;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #001c3f 0%, #003a8c 100%);
    color: rgba(255, 255, 255, 0.88);
  }

  body[data-page="cases"] .site-footer a {
    color: rgba(255, 255, 255, 0.88);
  }

  body[data-page="cases"] .site-footer .footer-main {
    padding: 24px 0 14px;
  }

  body[data-page="cases"] .site-footer .footer-main__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr) minmax(0, 1.1fr);
    gap: 16px;
    align-items: start;
  }

  body[data-page="cases"] .site-footer .footer-main__grid > *,
  body[data-page="cases"] .site-footer .footer-links > div,
  body[data-page="cases"] .site-footer .footer-qrcode {
    min-width: 0;
  }

  body[data-page="cases"] .site-footer .footer-company h2 {
    margin-bottom: 8px;
    font-size: 18px;
  }

  body[data-page="cases"] .site-footer .footer-company p {
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 11px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }

  body[data-page="cases"] .site-footer .footer-contact {
    gap: 4px;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 11px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  body[data-page="cases"] .site-footer .footer-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
  }

  body[data-page="cases"] .site-footer .footer-links h3 {
    margin-bottom: 8px;
    font-size: 11px;
  }

  body[data-page="cases"] .site-footer .footer-links a {
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  body[data-page="cases"] .site-footer .footer-qrcode {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }

  body[data-page="cases"] .site-footer .footer-qrcode img {
    width: 88px;
    height: 88px;
    border-width: 4px;
    border-radius: 14px;
  }

  body[data-page="cases"] .site-footer .footer-qrcode .social-links {
    display: none;
  }

  body[data-page="cases"] .site-footer .footer-qrcode h3 {
    margin-bottom: 4px;
    font-size: 12px;
  }

  body[data-page="cases"] .site-footer .footer-qrcode p {
    margin-bottom: 0;
    font-size: 10px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  body[data-page="cases"] .site-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  body[data-page="cases"] .site-footer .footer-bottom__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 42px;
    padding: 12px 0 4px;
    font-size: 10px;
  }

  body[data-page="cases"] .site-footer .footer-bottom nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
  }

  body[data-page="cases"] .site-footer .footer-bottom p {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 480px) {
  body[data-page="cases"] .cases-mobile__panel {
    padding: 14px 12px 12px;
  }

  body[data-page="cases"] .cases-mobile__industries {
    gap: 8px;
  }

  body[data-page="cases"] .cases-mobile-card__body {
    padding: 10px 10px 11px;
  }

  body[data-page="cases"] .cases-mobile-cta__card {
    grid-template-columns: minmax(0, 1fr) 112px;
  }

  body[data-page="cases"] .site-footer {
    margin: 12px;
  }

  body[data-page="cases"] .site-footer .footer-main__grid {
    gap: 14px;
  }
}

@media (max-width: 374px) {
  body[data-page="cases"] .cases-mobile__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="cases"] .cases-mobile__industries {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body[data-page="cases"] .cases-mobile__grid {
    grid-template-columns: 1fr;
  }

  body[data-page="cases"] .cases-mobile-cta__card {
    grid-template-columns: 1fr;
  }

  body[data-page="cases"] .cases-mobile-cta__media {
    width: 112px;
    height: 126px;
  }

  body[data-page="cases"] .site-footer .footer-main__grid {
    grid-template-columns: 1fr;
  }

  body[data-page="cases"] .site-footer .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="cases"] .site-footer .footer-qrcode {
    grid-template-columns: 84px minmax(0, 1fr);
  }
}

/* News page final mobile overrides.
   This pass rebuilds only the mobile presentation so the desktop layout stays untouched. */
@media (max-width: 768px) {
  body[data-page="news"] .container,
  body[data-page="news"] .container--wide {
    width: min(100% - 32px, var(--container));
  }

  body[data-page="news"] .site-header .topbar {
    display: block;
    padding: 6px 0;
    color: var(--color-text);
    background: var(--color-white);
    border-bottom: 1px solid rgba(14, 39, 88, 0.08);
  }

  body[data-page="news"] .site-header .topbar__inner {
    justify-content: flex-end;
  }

  body[data-page="news"] .site-header .topbar__contact {
    justify-content: flex-end;
    gap: 0;
  }

  body[data-page="news"] .site-header .topbar__contact a:first-child {
    font-weight: 800;
    font-size: 12px;
    white-space: nowrap;
  }

  body[data-page="news"] .site-header .topbar a {
    color: var(--color-text);
  }

  body[data-page="news"] .site-header .topbar a:hover {
    color: var(--color-blue-700);
  }

  body[data-page="news"] .site-header .topbar__contact a:not(:first-child),
  body[data-page="news"] .site-header .topbar__links {
    display: none;
  }

  body[data-page="news"] .site-header .navbar {
    background: var(--color-white);
    box-shadow: 0 10px 30px rgba(0, 20, 52, 0.08);
  }

  body[data-page="news"] .site-header .navbar__inner {
    min-height: 56px;
    padding-block: 8px;
  }

  body[data-page="news"] .news-banner {
    min-height: 272px;
    overflow: hidden;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    box-shadow: 0 14px 34px rgba(0, 20, 52, 0.16);
  }

  body[data-page="news"] .news-banner::before {
    background-image:
      linear-gradient(135deg, #091d77 0%, #0b3faf 48%, #0b57d9 100%);
  }

  body[data-page="news"] .news-banner__inner {
    position: relative;
    min-height: 272px;
    padding: 24px 18px 20px;
    padding-right: clamp(118px, 34vw, 182px);
    align-content: center;
    justify-items: start;
  }

  body[data-page="news"] .news-banner h1 {
    margin-bottom: 12px;
    font-size: clamp(28px, 7.2vw, 32px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: 0;
  }

  body[data-page="news"] .news-banner .news-hero-subtitle {
    max-width: 13em;
    margin-top: 0;
    font-size: clamp(14px, 3.9vw, 16px);
    line-height: 1.45;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.96);
  }

  body[data-page="news"] .news-banner .news-hero-desc {
    max-width: 15em;
    margin-top: 10px;
    font-size: clamp(12px, 3.4vw, 13px);
    line-height: 1.55;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
  }

  body[data-page="news"] .news-banner .banner-search {
    display: none !important;
  }

  body[data-page="news"] .news-hero-media {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block !important;
    width: clamp(154px, 42vw, 214px);
    height: clamp(154px, 42vw, 214px);
    border-radius: 18px 18px 18px 0;
    overflow: hidden;
    box-shadow: 0 20px 42px rgba(0, 20, 52, 0.3);
    pointer-events: none;
  }

  body[data-page="news"] .news-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="news"] .news-breadcrumb {
    display: none;
  }

  body[data-page="news"] .news-mobile-tabs {
    display: block !important;
    padding-block: 14px 6px;
  }

  body[data-page="news"] .news-mobile-tabs__track {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
    padding-bottom: 0;
    scrollbar-width: none;
  }

  body[data-page="news"] .news-mobile-tabs__track a {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 42px;
    padding: 10px 2px 12px;
    color: rgba(16, 24, 40, 0.72);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.12;
    white-space: nowrap;
  }

  body[data-page="news"] .news-mobile-tabs__track a.is-active {
    color: var(--color-blue-700);
  }

  body[data-page="news"] .news-mobile-tabs__track a.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 28px;
    height: 2px;
    border-radius: 999px;
    background: var(--color-blue-700);
    transform: translateX(-50%);
  }

  body[data-page="news"] .news-tabs {
    display: none !important;
  }

  body[data-page="news"] .news-list-section {
    padding-block: 8px 18px;
  }

  body[data-page="news"] .news-main-card {
    padding: 12px 14px 14px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(0, 20, 52, 0.08);
    background: var(--color-white);
  }

  body[data-page="news"] .news-list {
    display: grid;
    gap: 0;
    margin-top: 0;
  }

  body[data-page="news"] .news-list-item {
    grid-template-columns: clamp(140px, 43vw, 188px) minmax(0, 1fr) 20px !important;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-page="news"] .news-list-item:last-child {
    border-bottom: 0;
  }

  body[data-page="news"] .news-list-item img {
    width: clamp(140px, 43vw, 188px);
    height: clamp(96px, 27vw, 118px);
    border-radius: 12px;
  }

  body[data-page="news"] .news-list-item > div {
    min-width: 0;
    padding-right: 4px;
  }

  body[data-page="news"] .news-tag {
    margin-bottom: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1;
  }

  body[data-page="news"] .news-list-item h2 {
    margin-bottom: 6px;
    font-size: clamp(14px, 3.9vw, 17px);
    line-height: 1.34;
  }

  body[data-page="news"] .news-list-item h2 a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  body[data-page="news"] .news-list-item p {
    margin-bottom: 8px;
    color: rgba(71, 84, 103, 0.88);
    font-size: clamp(11px, 3vw, 13px);
    line-height: 1.5;
  }

  body[data-page="news"] .news-meta {
    gap: 10px 12px;
    font-size: 11px;
    line-height: 1.2;
  }

  body[data-page="news"] .news-meta span {
    gap: 5px;
  }

  body[data-page="news"] .news-meta span::before {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
  }

  body[data-page="news"] .news-arrow {
    width: 20px;
    height: 20px;
    color: var(--color-blue-700);
    font-size: 24px;
    line-height: 1;
  }

  body[data-page="news"] .news-pagination {
    display: none !important;
  }

  body[data-page="news"] .news-mobile-loadmore {
    display: flex !important;
    justify-content: center;
    margin-top: 14px;
  }

  body[data-page="news"] .news-mobile-loadmore .btn {
    width: min(210px, 100%);
    height: 44px;
    border-radius: 12px;
    border-color: rgba(11, 91, 211, 0.45);
    color: var(--color-blue-700);
    background: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    font-weight: 700;
  }

  body[data-page="news"] .news-sidebar,
  body[data-page="news"] .news-feature-section,
  body[data-page="news"] .news-subscribe,
  body[data-page="news"] .news-faq-strip,
  body[data-page="news"] .news-quote {
    display: none !important;
  }

  body[data-page="news"] .news-mobile-hot {
    display: block !important;
    padding-block: 18px 0;
  }

  body[data-page="news"] .news-mobile-hot .section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  body[data-page="news"] .news-mobile-hot .section-head h2 {
    margin: 0;
    color: var(--color-text);
    font-size: 20px;
    line-height: 1.2;
  }

  body[data-page="news"] .news-mobile-hot .section-more {
    color: var(--color-blue-700);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
  }

  body[data-page="news"] .news-hot-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }

  body[data-page="news"] .news-hot-card {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-white);
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08);
    overflow: hidden;
  }

  body[data-page="news"] .news-hot-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  body[data-page="news"] .news-hot-card__body {
    display: grid;
    gap: 0;
    padding: 10px 10px 11px;
  }

  body[data-page="news"] .news-hot-card .news-tag {
    width: fit-content;
    margin-bottom: 6px;
  }

  body[data-page="news"] .news-hot-card h3 {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.35;
  }

  body[data-page="news"] .news-hot-card h3 a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--color-text);
  }

  body[data-page="news"] .news-hot-card .news-meta {
    gap: 8px;
    font-size: 10px;
  }

  body[data-page="news"] .news-hot-card .news-meta span::before {
    width: 11px;
    height: 11px;
  }

  body[data-page="news"] .news-mobile-cta {
    display: block !important;
    padding-block: 18px 24px;
  }

  body[data-page="news"] .news-cta-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(112px, 28vw, 136px);
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0a33a4 0%, #0b5bd3 55%, #0f49cf 100%);
    color: var(--color-white);
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22);
  }

  body[data-page="news"] .news-cta-card__copy h2 {
    margin: 0 0 8px;
    color: var(--color-white);
    font-size: clamp(20px, 5vw, 24px);
    line-height: 1.2;
  }

  body[data-page="news"] .news-cta-card__copy p {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.45;
    opacity: 0.92;
  }

  body[data-page="news"] .news-cta-card .btn.btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    height: 40px;
    padding-inline: 18px;
    border-radius: 12px;
    background: #ff7a1a;
    border-color: #ff7a1a;
    color: var(--color-white);
    font-size: 14px;
    font-weight: 700;
  }

  body[data-page="news"] .news-cta-card__media {
    width: auto;
    height: 120px;
    border-radius: 14px;
    overflow: hidden;
    align-self: end;
  }

  body[data-page="news"] .news-cta-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="news"] .site-footer {
    margin: 0;
    overflow: hidden;
    border-radius: 0;
    padding-bottom: 12px;
  }

  body[data-page="news"] .site-footer .footer-cta {
    display: none !important;
  }

  body[data-page="news"] .site-footer .footer-main {
    padding: 22px 0 16px;
  }

  body[data-page="news"] .site-footer .footer-main__grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
    align-items: start;
  }

  body[data-page="news"] .site-footer .footer-company h2 {
    font-size: 20px;
    line-height: 1.2;
  }

  body[data-page="news"] .site-footer .footer-company p,
  body[data-page="news"] .site-footer .footer-contact {
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-page="news"] .site-footer .footer-contact {
    margin-top: 12px;
    gap: 4px;
  }

  body[data-page="news"] .site-footer .footer-links {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 14px;
  }

  body[data-page="news"] .site-footer .footer-links > div {
    min-width: 0;
  }

  body[data-page="news"] .site-footer .footer-links h3 {
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.25;
  }

  body[data-page="news"] .site-footer .footer-links a {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.45;
  }

  body[data-page="news"] .site-footer .footer-qrcode {
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
  }

  body[data-page="news"] .site-footer .footer-qrcode img {
    width: 92px;
    height: 92px;
    margin-bottom: 0;
    border-width: 4px;
  }

  body[data-page="news"] .site-footer .footer-qrcode h3,
  body[data-page="news"] .site-footer .footer-qrcode p {
    font-size: 12px;
    line-height: 1.4;
  }

  body[data-page="news"] .site-footer .social-links {
    justify-content: center;
    gap: 10px;
  }

  body[data-page="news"] .site-footer .social-links a {
    width: var(--icon-social-btn);
    height: var(--icon-social-btn);
  }

  body[data-page="news"] .site-footer .footer-bottom {
    padding-bottom: 0;
  }

  body[data-page="news"] .site-footer .footer-bottom__inner {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: auto;
    padding-block: 12px 18px;
    text-align: center;
  }

  body[data-page="news"] .site-footer .footer-bottom nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  body[data-page="news"] .site-footer .footer-bottom p {
    margin-bottom: 0;
  }

  body[data-page="news"] .floating-contact,
  body[data-page="news"] .mobile-bottom-nav {
    display: none !important;
  }
}

@media (max-width: 430px) {
  body[data-page="news"] .news-banner {
    min-height: 262px;
  }

  body[data-page="news"] .news-banner__inner {
    min-height: 262px;
    padding-right: clamp(110px, 35vw, 166px);
  }

  body[data-page="news"] .news-list-item {
    grid-template-columns: clamp(128px, 40vw, 172px) minmax(0, 1fr) 18px !important;
    gap: 12px;
  }

  body[data-page="news"] .news-list-item img {
    width: clamp(128px, 40vw, 172px);
    height: clamp(92px, 25vw, 108px);
  }

  body[data-page="news"] .news-hot-rail {
    gap: 8px;
  }

  body[data-page="news"] .news-hot-card__body {
    padding: 9px 9px 10px;
  }

  body[data-page="news"] .news-cta-card {
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 10px;
    padding: 14px;
  }

  body[data-page="news"] .news-cta-card__media {
    height: 112px;
  }
}

@media (max-width: 390px) {
  body[data-page="news"] .news-mobile-tabs__track a {
    font-size: 11px;
  }

  body[data-page="news"] .news-hot-card h3 {
    font-size: 11px;
  }

  body[data-page="news"] .news-cta-card__copy h2 {
    font-size: 20px;
  }
}

@media (max-width: 374px) {
  body[data-page="news"] .news-banner__inner {
    padding-right: 108px;
  }

  body[data-page="news"] .news-mobile-tabs__track a {
    min-height: 40px;
    padding-inline: 0;
  }

  body[data-page="news"] .site-footer .footer-links {
    grid-template-columns: 1fr !important;
  }

  body[data-page="news"] .site-footer .footer-qrcode img {
    width: 84px;
    height: 84px;
  }
}

@media (max-width: 768px) {
  /* Final video detail mobile override: align the page to the reference image
     without touching desktop styling or other pages. */
  body[data-page="video-detail"] {
    padding-bottom: 0 !important;
    background: #ffffff;
  }

  body[data-page="video-detail"].has-main-bottom-nav {
    padding-bottom: 0 !important;
  }

  body[data-page="video-detail"] .service-page {
    background: #ffffff;
  }

  body[data-page="video-detail"] .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    padding: 10px 10px 8px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 20, 52, 0.06);
  }

  body[data-page="video-detail"] .site-header .topbar {
    display: block !important;
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    background: transparent;
  }

  body[data-page="video-detail"] .site-header .container {
    padding-inline: 0;
  }

  body[data-page="video-detail"] .site-header .topbar__inner {
    justify-content: flex-end;
    min-height: 0;
    padding: 0;
  }

  body[data-page="video-detail"] .site-header .topbar__contact {
    justify-content: flex-end;
    width: auto;
  }

  body[data-page="video-detail"] .site-header .topbar__contact a:first-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 0;
    color: transparent;
    font-size: 0;
    line-height: 1;
    white-space: nowrap;
  }

  body[data-page="video-detail"] .site-header .topbar__contact a:first-child::before {
    content: "";
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5bd3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 4.8c1.3-1.1 3.1-1 4 .2l1.4 1.9c.6.8.4 2-.4 2.7l-1.2 1c.9 1.7 2.4 3.2 4.1 4.1l1-1.2c.7-.8 1.9-1 2.7-.4l1.9 1.4c1.2.9 1.3 2.7.2 4l-.7.8c-.9 1-2.3 1.4-3.6 1-3.5-1.3-6.9-4.2-9.6-7.8S4.5 9.2 3.2 5.7c-.4-1.3 0-2.7 1-3.6l.8-.7Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex: 0 0 14px;
  }

  body[data-page="video-detail"] .site-header .topbar__contact a:first-child::after {
    content: "400-690-7673";
    color: var(--color-blue-700);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
  }

  body[data-page="video-detail"] .site-header .topbar__contact a:not(:first-child),
  body[data-page="video-detail"] .site-header .topbar__links,
  body[data-page="video-detail"] .header-actions {
    display: none !important;
  }

  body[data-page="video-detail"] .navbar {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    background: transparent;
  }

  body[data-page="video-detail"] .navbar__inner {
    justify-content: space-between;
    gap: 6px;
    min-height: 0;
    padding: 0;
  }

  body[data-page="video-detail"] .brand {
    min-width: 0;
    margin-right: 0;
  }

  body[data-page="video-detail"] .brand__mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  body[data-page="video-detail"] .brand__text strong {
    font-size: 14px;
  }

  body[data-page="video-detail"] .brand__text small {
    font-size: 7px;
  }

  body[data-page="video-detail"] .nav-toggle {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  body[data-page="video-detail"] .site-header .main-nav {
    display: none !important;
  }

  body[data-page="video-detail"] .service-banner,
  body[data-page="video-detail"] .service-banner__inner,
  body[data-page="video-detail"] .banner-search,
  body[data-page="video-detail"] .service-support-strip,
  body[data-page="video-detail"] .floating-contact,
  body[data-page="video-detail"] .mobile-bottom-nav,
  body[data-page="video-detail"] .mobile-bottom-nav--main {
    display: none !important;
  }

  body[data-page="video-detail"] .service-breadcrumb {
    padding-block: 10px 4px;
    background: #ffffff;
  }

  body[data-page="video-detail"] .service-breadcrumb .breadcrumb__list {
    gap: 5px;
    font-size: 11px;
    line-height: 1.3;
  }

  body[data-page="video-detail"] .service-main-section {
    padding-block: 10px 18px;
  }

  body[data-page="video-detail"] .service-detail-layout {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  body[data-page="video-detail"] .service-video-detail {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-page="video-detail"] .service-video-detail > section:first-of-type {
    display: none;
  }

  body[data-page="video-detail"] .service-video-player {
    margin-bottom: 14px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 16px 42px rgba(0, 20, 52, 0.16);
  }

  body[data-page="video-detail"] .service-video-player img {
    height: 100%;
  }

  body[data-page="video-detail"] .service-video-player button {
    width: 62px;
    height: 62px;
    border-width: 2px;
    font-size: 28px;
  }

  body[data-page="video-detail"] .service-video-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 36px;
    padding: 8px 10px;
    color: rgba(255, 255, 255, 0.96);
    background: rgba(5, 10, 22, 0.88);
    font-size: 10px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
  }

  body[data-page="video-detail"] .service-video-detail h1 {
    margin: 4px 0 8px;
    color: var(--color-navy-900);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.28;
  }

  body[data-page="video-detail"] .news-meta {
    gap: 8px 10px;
    margin-bottom: 2px;
    color: rgba(16, 24, 40, 0.7);
    font-size: 11px;
    line-height: 1.2;
  }

  body[data-page="video-detail"] .news-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 20px;
    white-space: nowrap;
  }

  body[data-page="video-detail"] .news-meta span::before {
    width: 5px;
    height: 5px;
    margin-right: 5px;
  }

  body[data-page="video-detail"] .news-meta span:nth-child(1)::before,
  body[data-page="video-detail"] .news-meta span:nth-child(2)::before,
  body[data-page="video-detail"] .news-meta span:nth-child(3)::before {
    width: 14px;
    height: 14px;
    margin-right: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex: 0 0 14px;
  }

  body[data-page="video-detail"] .news-meta span:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5bd3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M8 3.5v3M16 3.5v3M3.5 9h17'/%3E%3C/svg%3E");
  }

  body[data-page="video-detail"] .news-meta span:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5bd3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 12s3.7-6.5 9.2-6.5S21.2 12 21.2 12s-3.7 6.5-9.2 6.5S2.8 12 2.8 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.1'/%3E%3C/svg%3E");
  }

  body[data-page="video-detail"] .news-meta span:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5bd3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v5l3.5 2.2'/%3E%3C/svg%3E");
  }

  body[data-page="video-detail"] .news-meta span:nth-child(n + 4) {
    padding: 3px 10px;
    border: 1px solid rgba(0, 70, 184, 0.14);
    border-radius: 999px;
    color: var(--color-blue-700);
    background: #f6f9ff;
    font-weight: 700;
  }

  body[data-page="video-detail"] .news-meta span:nth-child(n + 4)::before {
    display: none;
  }

  body[data-page="video-detail"] .video-detail-desc {
    display: block !important;
    margin-top: 8px;
    color: rgba(16, 24, 40, 0.68);
    font-size: 14px;
    line-height: 1.7;
  }

  body[data-page="video-detail"] .service-video-detail > section + .video-detail-actions {
    margin-top: 12px;
  }

  body[data-page="video-detail"] .video-detail-actions {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    padding-bottom: 2px;
  }

  body[data-page="video-detail"] .video-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 20, 52, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    color: rgba(16, 24, 40, 0.78);
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  body[data-page="video-detail"] .video-action strong {
    font-weight: 800;
  }

  body[data-page="video-detail"] .video-action em {
    font-style: normal;
    color: var(--color-blue-700);
    font-weight: 800;
  }

  body[data-page="video-detail"] .video-section-head {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 10px;
  }

  body[data-page="video-detail"] .video-section-head h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
  }

  body[data-page="video-detail"] .video-section-toggle,
  body[data-page="video-detail"] .video-section-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-blue-700);
    font-size: 13px;
    font-weight: 800;
    background: transparent;
    border: 0;
    padding: 8px 0;
  }

  body[data-page="video-detail"] .video-section-toggle::after,
  body[data-page="video-detail"] .video-section-more::after {
    content: "›";
    font-size: 16px;
    line-height: 1;
  }

  body[data-page="video-detail"] .service-chapter-row {
    display: none;
  }

  body[data-page="video-detail"] .video-chapter-card {
    display: grid !important;
    gap: 0;
    border: 1px solid rgba(11, 91, 211, 0.12);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08);
    overflow: hidden;
  }

  body[data-page="video-detail"] .video-chapter-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 56px;
    gap: 10px;
    align-items: center;
    padding: 12px 12px;
    border-bottom: 1px solid #edf2fa;
    color: var(--color-text);
    min-width: 0;
  }

  body[data-page="video-detail"] .video-chapter-item:last-child {
    border-bottom: 0;
  }

  body[data-page="video-detail"] .video-chapter-item.is-active {
    background: rgba(11, 91, 211, 0.06);
  }

  body[data-page="video-detail"] .video-chapter-no {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(11, 91, 211, 0.10);
    color: var(--color-blue-700);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
  }

  body[data-page="video-detail"] .video-chapter-main {
    min-width: 0;
  }

  body[data-page="video-detail"] .video-chapter-main strong {
    display: block;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
  }

  body[data-page="video-detail"] .video-chapter-main small {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 4px;
    color: rgba(16, 24, 40, 0.62);
    font-size: 12px;
    line-height: 1.25;
  }

  body[data-page="video-detail"] .video-chapter-time {
    justify-self: end;
    color: rgba(16, 24, 40, 0.55);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  body[data-page="video-detail"] .video-detail-like {
    margin-top: 2px;
  }

  body[data-page="video-detail"] .service-video-strip--compact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
    padding-bottom: 0;
  }

  body[data-page="video-detail"] .service-video-strip--compact::-webkit-scrollbar {
    display: none;
  }

  body[data-page="video-detail"] .service-video-card:nth-child(n + 4) {
    display: none;
  }

  body[data-page="video-detail"] .service-video-card {
    width: auto;
    border-radius: 12px;
    overflow: hidden;
  }

  body[data-page="video-detail"] .service-video-card img {
    height: clamp(74px, 20vw, 94px);
  }

  body[data-page="video-detail"] .service-video-card > span {
    top: clamp(26px, 7vw, 34px);
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  body[data-page="video-detail"] .service-video-card strong,
  body[data-page="video-detail"] .service-video-card small {
    padding-inline: 10px;
  }

  body[data-page="video-detail"] .service-video-card strong {
    padding-top: 8px;
    font-size: 12px;
    line-height: 1.35;
  }

  body[data-page="video-detail"] .service-video-card small {
    padding-bottom: 10px;
    color: var(--color-muted);
    font-size: 10px;
  }

  body[data-page="video-detail"] .video-detail-related {
    display: block !important;
    margin-top: 18px;
  }

  body[data-page="video-detail"] .video-related-list {
    display: grid;
    gap: 10px;
  }

  body[data-page="video-detail"] .video-related-item {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08);
    min-width: 0;
  }

  body[data-page="video-detail"] .video-related-item img {
    width: 108px;
    height: 72px;
    border-radius: 12px;
    object-fit: cover;
  }

  body[data-page="video-detail"] .video-related-main {
    min-width: 0;
  }

  body[data-page="video-detail"] .video-related-item h3 {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.25;
  }

  body[data-page="video-detail"] .video-related-item h3 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--color-text);
  }

  body[data-page="video-detail"] .video-related-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    color: rgba(16, 24, 40, 0.62);
    font-size: 11px;
    line-height: 1.2;
  }

  body[data-page="video-detail"] .video-related-item .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding-inline: 14px;
    border-radius: 12px;
    white-space: nowrap;
  }

  body[data-page="video-detail"] .video-related-item .btn::before {
    content: "";
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5bd3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v10'/%3E%3Cpath d='m8 11 4 4 4-4'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex: 0 0 12px;
  }

  body[data-page="video-detail"] .service-sidebar {
    display: none;
  }

  body[data-page="video-detail"] .video-detail-cta {
    display: block !important;
    padding-block: 8px 18px;
  }

  body[data-page="video-detail"] .video-cta-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 116px;
    gap: 12px;
    align-items: center;
    padding: 18px 18px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #0b3d91, #0b5bd3);
    color: #fff;
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22);
    overflow: hidden;
  }

  body[data-page="video-detail"] .video-cta-copy h2 {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.18;
    color: #fff;
  }

  body[data-page="video-detail"] .video-cta-copy p {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.45;
    opacity: 0.92;
  }

  body[data-page="video-detail"] .video-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  body[data-page="video-detail"] .video-cta-actions .btn {
    height: 40px;
    border-radius: 12px;
    padding-inline: 16px;
  }

  body[data-page="video-detail"] .video-cta-actions .btn.btn-accent {
    background: #ff7a1a;
    border-color: #ff7a1a;
    color: #fff;
  }

  body[data-page="video-detail"] .video-cta-actions .btn.btn-outline {
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    background: transparent;
  }

  body[data-page="video-detail"] .video-cta-media {
    width: 116px;
    height: 132px;
    border-radius: 14px;
    overflow: hidden;
    opacity: 0.96;
  }

  body[data-page="video-detail"] .video-cta-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (min-width: 769px) {
  body[data-page="home"] .home-quick-nav__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    border-radius: 16px;
  }

  body[data-page="home"] .home-quick-nav__icon svg {
    width: 20px;
    height: 20px;
  }

  body[data-page="about"] .about-v3-mobile {
    display: none !important;
  }

  body[data-page] .icon img,
  body[data-page] .feature-icon img,
  body[data-page] .service-icon img,
  body[data-page] .advantage-icon img,
  body[data-page] .solution-icon img,
  body[data-page] .case-icon img,
  body[data-page] .feature-card__icon img,
  body[data-page] .home-hero-feature__icon img,
  body[data-page] .home-advantage-item span img,
  body[data-page] .contact-a-hero__stat-icon img,
  body[data-page] .contact-a-list__icon img,
  body[data-page] .contact-a-cta__meta-icon img,
  body[data-page] .support-assurance-item__icon img,
  body[data-page] .support-mobile-service-card__icon img,
  body[data-page] .solutions-s-card__icon img,
  body[data-page] .solutions-y-advantage__icon img,
  body[data-page] .case-detail-mobile__stat-icon img,
  body[data-page] .case-detail-mobile__feature-icon img,
  body[data-page] .case-detail-mobile__result-icon img,
  body[data-page] .faq-doc-icon img,
  body[data-page] .policy-commitment-icon img,
  body[data-page] .policy-standard-icon img,
  body[data-page] .policy-guarantee-icon img,
  body[data-page] .after-sale-type-item__icon img,
  body[data-page] .after-sale-flow-step__icon img,
  body[data-page] .after-sale-promise-icon img,
  body[data-page] .after-sale-contact-icon img,
  body[data-page] .download-mobile-topbar__phone-icon img,
  body[data-page] .product-mobile-categories__icon img,
  body[data-page] .video-cat-icon img,
  body[data-page] .video-browse-icon img {
    width: auto;
    max-width: 48px;
    max-height: 48px;
    height: auto;
    object-fit: contain;
  }

  body[data-page] .icon svg,
  body[data-page] .feature-icon svg,
  body[data-page] .service-icon svg,
  body[data-page] .advantage-icon svg,
  body[data-page] .solution-icon svg,
  body[data-page] .case-icon svg,
  body[data-page] .feature-card__icon svg,
  body[data-page] .home-hero-feature__icon svg,
  body[data-page] .home-advantage-item span svg,
  body[data-page] .contact-a-hero__stat-icon svg,
  body[data-page] .contact-a-list__icon svg,
  body[data-page] .contact-a-cta__meta-icon svg,
  body[data-page] .support-assurance-item__icon svg,
  body[data-page] .support-mobile-service-card__icon svg,
  body[data-page] .solutions-s-card__icon svg,
  body[data-page] .solutions-y-advantage__icon svg,
  body[data-page] .case-detail-mobile__stat-icon svg,
  body[data-page] .case-detail-mobile__feature-icon svg,
  body[data-page] .case-detail-mobile__result-icon svg,
  body[data-page] .faq-doc-icon svg,
  body[data-page] .policy-commitment-icon svg,
  body[data-page] .policy-standard-icon svg,
  body[data-page] .policy-guarantee-icon svg,
  body[data-page] .after-sale-type-item__icon svg,
  body[data-page] .after-sale-flow-step__icon svg,
  body[data-page] .after-sale-promise-icon svg,
  body[data-page] .after-sale-contact-icon svg,
  body[data-page] .download-mobile-topbar__phone-icon svg,
  body[data-page] .product-mobile-categories__icon svg,
  body[data-page] .video-cat-icon svg,
  body[data-page] .video-browse-icon svg {
    width: auto;
    max-width: 48px;
    max-height: 48px;
    height: auto;
  }

  body[data-page] .logo img,
  body[data-page] .brand img {
    width: auto;
    max-width: 180px;
    max-height: 180px;
    height: auto;
    object-fit: contain;
  }
}

@media (max-width: 768px) {
  /* Shared mobile shell: align every page to the index.html baseline. */
  body[data-page] .site-header {
    display: block !important;
    position: sticky;
    top: 0;
    z-index: 70;
    background: #fff;
  }

  body[data-page] .site-header .navbar,
  body[data-page] .site-header .navbar__inner {
    min-height: 64px;
  }

  body[data-page] .site-header .navbar {
    background: var(--color-white);
    box-shadow: 0 8px 24px rgba(5, 30, 76, 0.08);
  }

  body[data-page] .site-header .navbar__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-block: 8px;
  }

  body[data-page] .site-header .brand {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  body[data-page] .site-header .brand__mark {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 14px;
  }

  body[data-page] .site-header .brand__text strong {
    font-size: 16px;
  }

  body[data-page] .site-header .brand__text small {
    margin-top: 1px;
    font-size: 10px;
  }

  body[data-page] .site-header .nav-toggle {
    width: 40px;
    height: 40px;
    margin-left: auto;
    padding: 8px;
  }

  body[data-page] .site-header .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex !important;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: min(82vw, 330px);
    height: 100dvh;
    gap: 0;
    padding: 104px 20px 28px;
    overflow-y: auto;
    border-left: 1px solid var(--color-border);
    background: var(--color-white);
    box-shadow: -18px 0 40px rgba(0, 20, 52, 0.18);
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform 220ms ease, opacity 180ms ease, visibility 180ms ease;
    visibility: hidden;
  }

  body.nav-open .site-header .main-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
    animation: mobileDrawerIn 220ms ease both;
  }

  body[data-page] .site-header .main-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 8px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: var(--text-md);
    cursor: pointer;
    transition: color var(--transition), background-color var(--transition);
  }

  body[data-page] .site-header .main-nav a::after {
    display: none;
  }

  body[data-page] .site-header .main-nav a:hover {
    color: var(--color-blue-600);
    background: rgba(0, 70, 184, 0.04);
  }

  body[data-page] .site-header .main-nav a.is-active {
    color: var(--color-blue-700);
    font-weight: 700;
    background: rgba(0, 70, 184, 0.06);
  }

  body[data-page] .site-header .main-nav[aria-hidden="true"] {
    pointer-events: none;
  }

  body[data-page] .site-footer {
    margin: 12px 0 0 !important;
    overflow: hidden;
    border-radius: 0 !important;
    padding-bottom: calc(48px + env(safe-area-inset-bottom));
    background: linear-gradient(120deg, #011a45 0%, #022f7e 100%);
    color: rgba(255, 255, 255, 0.88);
  }

  body[data-page] .site-footer a {
    color: rgba(255, 255, 255, 0.88);
  }

  body[data-page] .site-footer .footer-main {
    padding: 18px 0 10px !important;
  }

  body[data-page] .site-footer .footer-main__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 96px !important;
    gap: 14px 12px;
    align-items: start;
  }

  body[data-page] .site-footer .footer-company h2 {
    margin-bottom: 8px;
    font-size: 22px;
  }

  body[data-page] .site-footer .footer-company p,
  body[data-page] .site-footer .footer-contact {
    font-size: 11px;
    line-height: 1.5;
  }

  body[data-page] .site-footer .footer-contact {
    margin-top: 12px;
    gap: 4px;
  }

  body[data-page] .site-footer .footer-links {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  body[data-page] .site-footer .footer-links h3 {
    margin-bottom: 8px;
    font-size: 12px;
  }

  body[data-page] .site-footer .footer-links a {
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.35;
  }

  body[data-page] .site-footer .footer-qrcode {
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
  }

  body[data-page] .site-footer .footer-qrcode img {
    width: 88px;
    height: 88px;
    border-radius: 10px;
    border: 3px solid rgba(255, 255, 255, 0.16);
    object-fit: cover;
  }

  body[data-page] .site-footer .footer-qrcode h3,
  body[data-page] .site-footer .footer-qrcode p {
    font-size: 12px;
    line-height: 1.4;
  }

  body[data-page] .site-footer .social-links {
    justify-content: center;
    gap: 10px;
  }

  body[data-page] .site-footer .social-links a {
    width: var(--icon-social-btn);
    height: var(--icon-social-btn);
  }

  body[data-page] .site-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-bottom: 4px;
  }

  body[data-page] .site-footer .footer-bottom__inner {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: auto;
    padding-block: 12px 22px;
    text-align: center;
  }

  body[data-page] .site-footer .footer-bottom nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
  }

  body[data-page] .site-footer .footer-bottom p {
    margin-bottom: 0;
  }

  body[data-page] .mobile-bottom-nav--cases,
  body[data-page] .mobile-bottom-nav--support,
  body[data-page] .mobile-bottom-nav--contact,
  body[data-page] .mobile-bottom-nav--news {
    display: none !important;
  }

  body[data-page] .mobile-bottom-nav--main {
    left: 0;
    right: 0;
    bottom: 0;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid rgba(12, 44, 108, 0.1);
    border-radius: 14px 14px 0 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -8px 26px rgba(5, 30, 76, 0.12);
    z-index: 86;
  }

  body[data-page] .mobile-bottom-nav--main a {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-height: 46px;
    color: rgba(14, 39, 88, 0.68);
    font-size: 11px;
    line-height: 1.15;
    text-align: center;
  }

  body[data-page] .mobile-bottom-nav--main a.is-active {
    color: #1a57bb;
  }

  body[data-page] .mobile-bottom-nav--main svg {
    width: 20px;
    height: 20px;
  }

  body[data-page] .floating-contact {
    display: none !important;
  }

  body[data-page] .contact-a-mobile__topbar,
  body[data-page] .download-mobile-topbar,
  body[data-page] .faq-mobile-topbar,
  body[data-page] .faq-detail-mobile-header,
  body[data-page] .after-sale-mobile__header,
  body[data-page] .news-detail-mobile__topbar,
  body[data-page] .video-mobile-header,
  body[data-page] .policy-mobile-header {
    display: none !important;
  }
}

/* Final mobile chrome harmonization.
   Keep the shared header/drawer/footer shell from index.html as the single source
   of truth, and suppress the last remaining page-specific mobile chrome wrappers. */
@media (max-width: 768px) {
  body[data-page="contact"] {
    display: flex;
    flex-direction: column;
  }

  body[data-page="contact"] .contact-mobile {
    display: block !important;
    order: 1;
  }

  body[data-page="contact"] main {
    order: 2;
  }

  body[data-page="contact"] .site-footer {
    order: 3;
  }

  body[data-page="contact"] .mobile-bottom-nav--contact {
    display: none !important;
  }

  body[data-page="contact"] .mobile-bottom-nav--main {
    display: grid !important;
  }

  body[data-page="solutions-y"] .solutions-y-mobile {
    padding-top: 0;
  }

  body[data-page="solutions-y"] .mobile-bottom-nav--main {
    display: grid !important;
  }

  body[data-page="solutions-s"] .mobile-bottom-nav--main {
    display: grid !important;
  }

  /* Shared header baseline: keep every mobile page aligned to index.html. */
  body[data-page] .site-header .container {
    width: 100% !important;
    max-width: none !important;
  }

  body[data-page] .site-header .topbar,
  body[data-page] .site-header .topbar__inner {
    min-height: 28px;
  }

  body[data-page] .site-header .topbar__inner {
    justify-content: space-between;
  }

  body[data-page] .site-header .topbar__contact,
  body[data-page] .site-header .topbar__links {
    gap: 24px;
  }

  body[data-page] .site-header .navbar,
  body[data-page] .site-header .navbar__inner {
    min-height: 64px !important;
  }

  body[data-page] .site-header .navbar {
    background: var(--color-white) !important;
    box-shadow: 0 8px 24px rgba(0, 20, 52, 0.08) !important;
  }

  body[data-page] .site-header .navbar__inner {
    box-sizing: border-box;
    width: 100% !important;
    padding-inline: 16px !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  body[data-page] .site-header .topbar__contact a:not(:first-child),
  body[data-page] .site-header .topbar__links,
  body[data-page] .site-header .header-actions {
    display: none !important;
  }

  body[data-page] .site-header .brand {
    margin-right: auto;
  }

  body[data-page] .site-header .brand__mark {
    width: 38px;
    height: 38px;
    border-radius: 9px;
  }

  body[data-page] .site-header .nav-toggle {
    position: relative;
    z-index: 95;
    display: inline-grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin-left: auto;
    padding: 8px;
    border: 0;
    background: transparent;
  }

  body[data-page="video-detail"] .site-header {
    display: block !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    background: var(--color-white) !important;
    box-shadow: 0 8px 24px rgba(0, 20, 52, 0.08) !important;
  }

  body[data-page="video-detail"] .site-header .container {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 16px !important;
  }

  body[data-page="video-detail"] .site-header .topbar,
  body[data-page="video-detail"] .site-header .topbar__inner {
    display: block !important;
    min-height: 28px !important;
  }

  body[data-page="video-detail"] .site-header .topbar {
    grid-column: auto !important;
    grid-row: auto !important;
    background: var(--color-navy-950) !important;
  }

  body[data-page="video-detail"] .site-header .topbar__inner {
    justify-content: space-between !important;
    padding: 0 !important;
  }

  body[data-page="video-detail"] .site-header .topbar__contact {
    justify-content: center !important;
    width: 100% !important;
  }

  body[data-page="video-detail"] .site-header .topbar__contact a:first-child {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: inherit !important;
  }

  body[data-page="video-detail"] .site-header .topbar__contact a:first-child::after {
    content: none !important;
  }

  body[data-page="video-detail"] .navbar {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 64px !important;
    background: var(--color-white) !important;
  }

  body[data-page="video-detail"] .navbar__inner {
    min-height: 64px !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-inline: 16px !important;
  }

  body[data-page="video-detail"] .brand {
    margin-right: auto !important;
  }

  body[data-page="video-detail"] .brand__mark {
    width: 38px;
    height: 38px;
    border-radius: 9px;
  }

  body[data-page="video-detail"] .brand__text strong {
    font-size: 20px;
  }

  body[data-page="video-detail"] .brand__text small {
    font-size: 10px;
  }
}

/* Final mobile hotline removal.
   Keep the shared navbar/logo/drawer layout intact, but hide the hotline row on phones. */
@media (max-width: 768px) {
  body[data-page] .site-header .topbar,
  body[data-page] .site-header .topbar__inner,
  body[data-page] .site-header .topbar__contact,
  body[data-page] .site-header .topbar__links {
    display: none !important;
  }

  body[data-page] .site-header .navbar {
    min-height: 64px !important;
    background: var(--color-white) !important;
    box-shadow: 0 8px 24px rgba(0, 20, 52, 0.08) !important;
  }

  body[data-page] .site-header .navbar__inner {
    min-height: 64px !important;
    width: 100% !important;
    box-sizing: border-box;
    padding-inline: 16px !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  body[data-page] .site-header .brand {
    margin-right: auto !important;
  }

  body[data-page] .site-header .nav-toggle {
    position: relative;
    z-index: 95;
    display: inline-grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin-left: auto;
    padding: 8px;
    border: 0;
    background: transparent;
  }
}

/* Cases mobile final hero override: mirror the solutions mobile banner rhythm. */
@media (max-width: 768px) {
  body[data-page="cases"] .cases-mobile {
    padding-top: 0;
  }

  body[data-page="cases"] .cases-mobile .container {
    padding-inline: 12px;
  }

  body[data-page="cases"] .cases-mobile__hero {
    position: relative;
    overflow: hidden;
    width: calc(100% + 24px);
    margin: 0 -12px;
    min-height: 214px;
    padding: 22px 16px 18px;
    border-radius: 0;
    box-shadow: none;
    background:
      linear-gradient(90deg, rgba(0, 18, 48, 0.94) 0%, rgba(0, 43, 102, 0.76) 54%, rgba(0, 43, 102, 0.14) 100%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png")) right center / cover no-repeat;
  }

  body[data-page="cases"] .cases-mobile__hero-copy {
    position: relative;
    z-index: 1;
    width: min(100%, 286px);
  }

  body[data-page="cases"] .cases-mobile__hero-copy h1 {
    margin: 0 0 10px;
    color: var(--color-white);
    font-size: 30px;
    line-height: 1.14;
    letter-spacing: 0;
  }

  body[data-page="cases"] .cases-mobile__hero-copy p {
    max-width: 260px;
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    line-height: 1.5;
  }

  body[data-page="cases"] .cases-mobile__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 6px;
    margin-top: 14px;
  }

  body[data-page="cases"] .cases-mobile__stat {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding-top: 0;
    text-align: center;
    color: var(--color-white);
    min-width: 0;
  }

  body[data-page="cases"] .cases-mobile__stat-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1.5px solid rgba(255, 255, 255, 0.84);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
  }

  body[data-page="cases"] .cases-mobile__stat-icon svg {
    width: 14px;
    height: 14px;
    color: var(--color-white);
  }

  body[data-page="cases"] .cases-mobile__stat strong {
    color: var(--color-white);
    font-size: 14px;
    line-height: 1;
  }

  body[data-page="cases"] .cases-mobile__stat small {
    color: rgba(255, 255, 255, 0.84);
    font-size: 10px;
    line-height: 1.2;
  }

  body[data-page="cases"] .cases-mobile-cta__card {
    align-items: start;
  }

  body[data-page="cases"] .cases-mobile-cta__actions {
    grid-template-columns: 1fr;
    gap: 8px;
    width: min(100%, 212px);
  }

  body[data-page="cases"] .cases-mobile-cta__actions .btn {
    width: 100%;
    min-height: 40px;
    height: auto;
    padding: 8px 14px;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
    align-items: center;
    justify-content: center;
  }
}

/* Products mobile final override: lock the product card image box and align the text to the top. */
@media (max-width: 768px) {
  body[data-page="products"] .product-grid .zz-product-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 37%) minmax(0, 1fr) !important;
    grid-template-areas:
      "image title"
      "image desc"
      "image meta"
      "image link" !important;
    column-gap: 14px !important;
    row-gap: 4px !important;
    align-items: start !important;
    align-content: start !important;
    justify-content: start !important;
    padding: 10px !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  body[data-page="products"] .product-grid .zz-product-card > img {
    grid-area: image !important;
    width: 100% !important;
    height: 116px !important;
    max-height: 116px !important;
    min-height: 116px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    align-self: start !important;
    aspect-ratio: auto !important;
  }

  body[data-page="products"] .product-grid .zz-product-card > h3 {
    grid-area: title !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    align-self: start !important;
    line-height: 1.25 !important;
  }

  body[data-page="products"] .product-grid .zz-product-card > p {
    grid-area: desc !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    align-self: start !important;
  }

  body[data-page="products"] .product-grid .zz-product-card > dl {
    grid-area: meta !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    align-self: start !important;
  }

  body[data-page="products"] .product-grid .zz-product-card > a {
    grid-area: link !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    align-self: start !important;
  }

  body[data-page="products"] .product-grid .zz-product-tag {
    top: 10px !important;
    right: 10px !important;
  }

  body[data-page="products"] .product-grid .zz-product-card h3 {
    font-size: 14px !important;
    font-weight: 950 !important;
  }

  body[data-page="products"] .product-grid .zz-product-card p {
    line-height: 1.35 !important;
  }

  body[data-page="products"] .product-grid .zz-product-card dl {
    gap: 2px 6px !important;
    line-height: 1.35 !important;
  }

  body[data-page="products"] .product-result-bar button {
    display: none !important;
  }
}

/* Cases mobile final override: align the CTA card with the solutions mobile CTA. */
@media (max-width: 768px) {
  body[data-page="cases"] .cases-mobile-cta {
    padding: 8px 0 16px;
  }

  body[data-page="cases"] .cases-mobile-cta__card {
    position: relative;
    min-height: 146px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0e5ad3 0%, #0046b8 58%, #003a8c 100%);
    box-shadow: var(--sol2-shadow-md);
    overflow: hidden;
    color: var(--color-white);
  }

  body[data-page="cases"] .cases-mobile-cta__copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 6px;
    max-width: 64%;
  }

  body[data-page="cases"] .cases-mobile-cta__copy strong {
    font-size: 17px;
    line-height: 1.25;
    letter-spacing: 0.2px;
  }

  body[data-page="cases"] .cases-mobile-cta__copy p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.84);
  }

  body[data-page="cases"] .cases-mobile-cta__actions {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 250px;
    margin-top: 14px;
  }

  body[data-page="cases"] .cases-mobile-cta__actions .btn {
    width: 100%;
    min-height: 40px;
    border-radius: 12px;
    font-size: 12px;
  }

  body[data-page="cases"] .cases-mobile-cta__media {
    position: absolute;
    right: -10px;
    bottom: 0;
    width: 148px;
    height: 158px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0)),
      url("../images/contact/contact-industrial-worker-01.jpg");
    background-position: center top;
    background-size: cover;
    border-radius: 22px 0 0 0;
    filter: saturate(1.02);
    opacity: 0.98;
  }
}

@media (max-width: 480px) {
  body[data-page="cases"] .cases-mobile-cta {
    padding: 8px 0 16px;
  }

  body[data-page="cases"] .cases-mobile-cta__card {
    min-height: 140px;
    padding: 14px;
  }

  body[data-page="cases"] .cases-mobile-cta__copy {
    max-width: 62%;
  }

  body[data-page="cases"] .cases-mobile-cta__copy strong {
    font-size: 15px;
  }

  body[data-page="cases"] .cases-mobile-cta__copy p {
    font-size: 11px;
  }

  body[data-page="cases"] .cases-mobile-cta__actions {
    max-width: 100%;
    margin-top: 12px;
  }

  body[data-page="cases"] .cases-mobile-cta__actions .btn {
    min-height: 38px;
    font-size: 11px;
  }

  body[data-page="cases"] .cases-mobile-cta__media {
    width: 136px;
    height: 150px;
  }
}

body[data-page="support"] .service-video-card__desc {
  display: none;
}

/* Support mobile final override: rebuild download and video sections into clean 2x2 grids. */
@media (max-width: 768px) {
  body[data-page="support"] .support-mobile-download {
    display: block !important;
    padding: 8px 0 4px;
  }

  body[data-page="support"] .support-mobile-download .service-section-head,
  body[data-page="support"] .support-video-section .service-section-head {
    margin-bottom: 12px;
  }

  body[data-page="support"] .support-download-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  body[data-page="support"] .support-download-card:nth-child(n + 5),
  body[data-page="support"] .support-video-section .service-video-card:nth-child(n + 5) {
    display: none !important;
  }

  body[data-page="support"] .support-download-card {
    min-height: 102px;
    padding: 12px 8px 10px;
    border-radius: 14px;
  }

  body[data-page="support"] .support-download-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  body[data-page="support"] .support-download-card__body strong {
    font-size: 12px;
    line-height: 1.2;
  }

  body[data-page="support"] .support-download-card__body small {
    font-size: 10px;
  }

  body[data-page="support"] .support-video-section {
    padding-block: 18px 14px;
    background: linear-gradient(180deg, rgba(247, 250, 255, 0), rgba(247, 250, 255, 1) 20%);
  }

  body[data-page="support"] .support-video-section .service-video-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  body[data-page="support"] .support-video-section .service-video-card {
    position: relative;
    display: grid;
    grid-template-rows: auto auto;
    min-width: 0;
    padding: 0 0 8px;
    border: 1px solid rgba(0, 68, 184, 0.10);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 18px rgba(0, 20, 52, 0.06);
    color: var(--color-text);
    text-decoration: none;
  }

  body[data-page="support"] .support-video-section .service-video-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  body[data-page="support"] .support-video-section .service-video-card > span {
    display: none;
  }

  body[data-page="support"] .support-video-section .service-video-card__duration {
    position: absolute;
    left: 8px;
    right: auto;
    bottom: 8px;
    top: auto;
    height: auto;
    min-height: 20px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(0, 18, 48, 0.62);
    color: rgba(255, 255, 255, 0.92);
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
  }

  body[data-page="support"] .support-video-section .service-video-card__duration,
  body[data-page="support"] .support-video-section .service-video-card__desc {
    display: none !important;
  }

  body[data-page="support"] .support-video-section .service-video-card strong {
    display: -webkit-box;
    margin: 8px 8px 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 950;
    text-align: center;
    white-space: normal;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 480px) {
  body[data-page="support"] .support-mobile-download {
    padding-top: 6px;
  }

  body[data-page="support"] .support-download-strip {
    gap: 8px !important;
  }

  body[data-page="support"] .support-download-card {
    min-height: 96px;
    padding: 10px 6px 8px;
  }

  body[data-page="support"] .support-download-card__icon {
    width: 40px;
    height: 40px;
    font-size: 11px;
  }

  body[data-page="support"] .support-download-card__body strong {
    font-size: 11px;
  }

  body[data-page="support"] .support-download-card__body small {
    font-size: 9px;
  }

  body[data-page="support"] .support-video-section {
    padding-block: 16px;
  }

  body[data-page="support"] .support-video-section .service-video-strip {
    gap: 8px !important;
  }

  body[data-page="support"] .support-video-section .service-video-card {
    padding-bottom: 8px;
  }

  body[data-page="support"] .support-video-section .service-video-card img {
    aspect-ratio: 4 / 3;
  }

  body[data-page="support"] .support-video-section .service-video-card strong {
    margin-top: 7px;
    font-size: 11px;
  }
}

/* Video mobile final banner override: mirror the cases mobile banner rhythm. */
@media (max-width: 768px) {
  body[data-page="video"] .video-mobile-portal {
    padding-top: 0;
  }

  body[data-page="video"] .video-mobile-portal .container {
    padding-inline: 12px;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    margin: 0 0 14px;
    min-height: 214px;
    padding: 22px 16px 18px;
    border-radius: 0;
    box-shadow: none;
    background:
      linear-gradient(90deg, rgba(0, 18, 48, 0.94) 0%, rgba(0, 43, 102, 0.76) 54%, rgba(0, 43, 102, 0.14) 100%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png")) right center / cover no-repeat;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__copy {
    position: relative;
    z-index: 1;
    width: min(100%, 286px);
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__copy h1 {
    margin: 0 0 10px;
    color: var(--color-white);
    font-size: 30px;
    line-height: 1.14;
    letter-spacing: 0;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__subtitle {
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    line-height: 1.5;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__desc {
    max-width: 260px;
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 13px;
    line-height: 1.5;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__art {
    display: none;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-search {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 84px;
    gap: 0;
    align-items: center;
    height: 46px;
    margin-top: -1px;
    overflow: hidden;
    border: 1px solid rgba(13, 36, 79, 0.08);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 28px rgba(0, 18, 48, 0.08);
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-search__icon {
    width: 38px;
    height: 46px;
    background: rgba(11, 91, 211, 0.08);
    -webkit-mask: var(--icon-search) center / 18px 18px no-repeat;
            mask: var(--icon-search) center / 18px 18px no-repeat;
    background-color: var(--color-blue-700);
    opacity: 0.84;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-search input {
    height: 46px;
    border: 0;
    background: transparent;
    padding: 0 10px 0 8px;
    min-width: 0;
    font-size: 13px;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-search .btn {
    height: 46px;
    min-width: 84px;
    padding-inline: 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
  }
}

@media (max-width: 480px) {
  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero {
    min-height: 214px;
    padding: 20px 14px 16px;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__copy {
    width: min(100%, 278px);
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__copy h1 {
    margin-bottom: 8px;
    font-size: 28px;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__subtitle,
  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__desc {
    font-size: 12px;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-search {
    grid-template-columns: 34px minmax(0, 1fr) 78px;
    height: 44px;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-search__icon {
    width: 34px;
    height: 44px;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-search input {
    height: 44px;
    font-size: 12px;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-search .btn {
    height: 44px;
    min-width: 78px;
    padding-inline: 12px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-search {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin-top: 18px !important;
    width: 100%;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-search::before,
  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-search::after {
    content: none !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero {
    margin-bottom: 0 !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-browse {
    display: none !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hot .video-hot-item {
    display: grid !important;
    grid-template-columns: 110px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 12px;
    row-gap: 6px;
    align-items: start;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hot .video-hot-thumb {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hot .video-hot-main {
    grid-column: 2;
    grid-row: 1 / span 3;
    min-width: 0;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hot .video-hot-main h3 {
    margin: 0 12px 6px 0 !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hot .video-hot-main h3 a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hot .video-hot-main p {
    margin-bottom: 8px;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hot .video-hot-meta {
    min-width: 0;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hot .video-hot-badge {
    position: static;
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    flex-shrink: 0;
    display: inline-flex;
    min-width: 46px;
    min-height: 22px;
    margin: 0;
    padding: 0 10px;
    white-space: nowrap;
  }
}

/* News mobile final banner and category pills override: match the solutions phone rhythm. */
@media (max-width: 768px) {
  body[data-page="news"] .news-banner {
    position: relative;
    overflow: hidden;
    width: calc(100% - 24px);
    margin: 0 12px 12px;
    min-height: 252px;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(0, 20, 52, 0.16);
  }

  body[data-page="news"] .news-banner::before {
    background-image:
      linear-gradient(90deg, rgba(0, 18, 48, 0.94) 0%, rgba(0, 43, 102, 0.78) 54%, rgba(0, 43, 102, 0.16) 100%),
      var(--banner-image, url("../images/banners/news-industrial-production.jpg"));
    background-position: center right, center right;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
  }

  body[data-page="news"] .news-banner__inner {
    position: relative;
    z-index: 1;
    min-height: 252px;
    padding: 26px 16px 20px;
    align-content: center;
    justify-items: start;
    gap: 0;
  }

  body[data-page="news"] .news-banner h1 {
    margin-bottom: 10px;
    color: var(--color-white);
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: 0;
  }

  body[data-page="news"] .news-banner .news-hero-subtitle {
    max-width: 280px;
    margin: 0;
    color: rgba(255, 255, 255, 0.96);
    font-size: 15px;
    line-height: 1.45;
    font-weight: 700;
  }

  body[data-page="news"] .news-banner .news-hero-desc {
    max-width: 300px;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 13px;
    line-height: 1.55;
  }

  body[data-page="news"] .news-banner .banner-search,
  body[data-page="news"] .news-hero-media {
    display: none !important;
  }

  body[data-page="news"] .news-breadcrumb {
    display: none;
  }

  body[data-page="news"] .news-mobile-tabs {
    display: block !important;
    padding: 0 0 6px;
  }

  body[data-page="news"] .news-mobile-tabs__track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 28px rgba(7, 30, 80, 0.08);
    overflow: visible;
    scrollbar-width: none;
  }

  body[data-page="news"] .news-mobile-tabs__track a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid #dbe6fb;
    border-radius: 999px;
    background: #fff;
    color: #28466f;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="news"] .news-mobile-tabs__track a.is-active {
    color: #fff;
    background: #0f57d7;
    border-color: #0f57d7;
    box-shadow: 0 8px 18px rgba(0, 70, 184, 0.18);
  }

  body[data-page="news"] .news-mobile-tabs__track a.is-active::after {
    content: none !important;
  }

  body[data-page="news"] .news-tabs {
    display: none !important;
  }

  body[data-page="news"] .news-list-section {
    padding-block: 8px 18px;
  }
}

@media (max-width: 480px) {
  body[data-page="news"] .news-banner {
    min-height: 224px;
  }

  body[data-page="news"] .news-banner__inner {
    min-height: 224px;
    padding: 20px 14px 16px;
  }

  body[data-page="news"] .news-banner h1 {
    font-size: 27px;
  }

  body[data-page="news"] .news-banner .news-hero-subtitle {
    font-size: 14px;
  }

  body[data-page="news"] .news-banner .news-hero-desc {
    font-size: 12px;
  }

  body[data-page="news"] .news-mobile-tabs__track {
    gap: 7px;
    padding: 11px;
  }

  body[data-page="news"] .news-mobile-tabs__track a {
    min-height: 32px;
    padding: 0 7px;
    font-size: 11px;
  }
}

body[data-page="news"] .news-mobile-categories {
  display: none;
}

@media (max-width: 768px) {
  body[data-page="news"] .news-page {
    overflow-x: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 58%, #ffffff 100%);
  }

  body[data-page="news"] .news-banner {
    min-height: 254px;
    margin: 0 var(--p2-gutter) 12px;
    border-radius: var(--p2-radius);
    overflow: hidden;
    box-shadow: var(--p2-shadow-md);
  }

  body[data-page="news"] .news-banner::before {
    background-image:
      linear-gradient(90deg, rgba(0, 18, 48, 0.92) 0%, rgba(0, 43, 102, 0.66) 52%, rgba(0, 43, 102, 0.10) 100%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png"));
    background-position: right center;
    background-size: cover;
  }

  body[data-page="news"] .news-banner__inner {
    display: grid;
    align-content: end;
    min-height: 254px;
    padding: 28px 18px 24px;
  }

  body[data-page="news"] .news-banner h1 {
    margin: 0 0 8px;
    font-size: 30px;
    line-height: 1.08;
    font-weight: 950;
    color: #fff;
  }

  body[data-page="news"] .news-banner .news-hero-subtitle {
    max-width: 280px;
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    line-height: 1.58;
    font-weight: 600;
  }

  body[data-page="news"] .news-banner .news-hero-desc {
    max-width: 260px;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  body[data-page="news"] .news-banner .banner-search,
  body[data-page="news"] .news-hero-media,
  body[data-page="news"] .news-breadcrumb,
  body[data-page="news"] .news-mobile-tabs,
  body[data-page="news"] .news-tabs {
    display: none !important;
  }

  body[data-page="news"] .news-mobile-categories {
    display: block !important;
    margin: 0 0 12px;
  }

  body[data-page="news"] .news-mobile-categories__card {
    border: 1px solid var(--p2-card-border);
    border-radius: var(--p2-radius);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--p2-shadow-md);
    padding: 16px 14px 18px;
    backdrop-filter: blur(10px);
  }

  body[data-page="news"] .news-mobile-categories__title {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 950;
    color: var(--color-text);
  }

  body[data-page="news"] .news-mobile-categories__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 10px;
  }

  body[data-page="news"] .news-mobile-categories__grid a {
    min-height: 86px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 10px;
    padding: 10px 8px;
    border: 1px solid rgba(14, 39, 88, 0.08);
    border-radius: 14px;
    background: var(--color-white);
    color: var(--color-text);
    text-decoration: none;
    text-align: center;
    box-shadow: 0 10px 24px rgba(0, 43, 102, 0.06);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="news"] .news-mobile-categories__icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.10), rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(0, 70, 184, 0.10);
    box-shadow: 0 8px 18px rgba(0, 43, 102, 0.08);
    color: #1f5dcf;
  }

  body[data-page="news"] .news-mobile-categories__icon svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  body[data-page="news"] .news-mobile-categories__label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-page="news"] .news-mobile-categories__grid a.is-active {
    color: #fff;
    border-color: rgba(0, 70, 184, 0.18);
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.94), rgba(0, 43, 102, 0.94));
    box-shadow: var(--p2-shadow-sm);
  }

  body[data-page="news"] .news-mobile-categories__grid a.is-active .news-mobile-categories__icon {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
  }

  body[data-page="news"] .news-list-section {
    padding-block: 8px 26px;
  }
}

@media (max-width: 480px) {
  body[data-page="news"] .news-banner {
    min-height: 240px;
  }

  body[data-page="news"] .news-banner__inner {
    min-height: 240px;
    padding: 26px 16px 22px;
  }

  body[data-page="news"] .news-banner h1 {
    font-size: 28px;
  }

  body[data-page="news"] .news-banner .news-hero-subtitle {
    font-size: 13px;
  }

  body[data-page="news"] .news-banner .news-hero-desc {
    font-size: 12px;
  }

  body[data-page="news"] .news-mobile-categories__grid {
    gap: 10px 8px;
  }

  body[data-page="news"] .news-mobile-categories__card {
    border: 1px solid var(--p3-border);
    border-radius: var(--p3-radius);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--p3-shadow);
    padding: 16px 14px 18px;
  }

  body[data-page="news"] .news-mobile-categories__grid a {
    min-height: 84px;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 7px;
    padding: 10px 6px 8px;
    border: 1px solid rgba(14, 39, 88, 0.08);
    border-radius: 14px;
    background: #fff;
    color: #12469c;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 10px 24px rgba(0, 43, 102, 0.06);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body[data-page="news"] .news-mobile-categories__icon {
    width: 34px;
    height: 34px;
  }

  body[data-page="news"] .news-mobile-categories__icon svg {
    width: 20px;
    height: 20px;
  }

  body[data-page="news"] .news-mobile-categories__label {
    display: block;
    min-height: 2.4em;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body[data-page="news"] .news-mobile-categories__grid a.is-active {
    color: #fff;
    border-color: rgba(0, 70, 184, 0.18);
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.94), rgba(0, 43, 102, 0.94));
    box-shadow: 0 12px 24px rgba(0, 43, 102, 0.12);
  }

  body[data-page="news"] .news-mobile-categories__grid a.is-active .news-mobile-categories__icon {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
  }
}

/* News mobile final layout override: align all sections to the same gutter and compact the article cards. */
@media (max-width: 768px) {
  body[data-page="news"] .news-page {
    overflow-x: hidden;
  }

  body[data-page="news"] .news-mobile-categories .container,
  body[data-page="news"] .news-list-section .container,
  body[data-page="news"] .news-mobile-cta .container {
    width: calc(100% - (var(--p2-gutter) * 2)) !important;
    margin-inline: var(--p2-gutter) !important;
    padding-inline: 0 !important;
  }

  body[data-page="news"] .news-mobile-categories {
    margin: 0 0 12px !important;
  }

  body[data-page="news"] .news-mobile-categories__card {
    border: 1px solid var(--p3-border);
    border-radius: var(--p3-radius);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--p3-shadow);
    padding: 16px 14px 18px;
  }

  body[data-page="news"] .news-mobile-categories__title {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 950;
    color: var(--color-text);
  }

  body[data-page="news"] .news-mobile-categories__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 8px;
  }

  body[data-page="news"] .news-mobile-categories__grid a {
    min-height: 84px;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 7px;
    padding: 10px 6px 8px;
    border: 1px solid rgba(14, 39, 88, 0.08);
    border-radius: 14px;
    background: #fff;
    color: #12469c;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 10px 24px rgba(0, 43, 102, 0.06);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.15;
  }

  body[data-page="news"] .news-mobile-categories__icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.10), rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(0, 70, 184, 0.10);
    box-shadow: 0 8px 18px rgba(0, 43, 102, 0.08);
    color: #1f5dcf;
  }

  body[data-page="news"] .news-mobile-categories__icon svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  body[data-page="news"] .news-mobile-categories__label {
    display: block;
    min-height: 2.4em;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body[data-page="news"] .news-mobile-categories__grid a.is-active {
    color: #fff;
    border-color: rgba(0, 70, 184, 0.18);
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.94), rgba(0, 43, 102, 0.94));
    box-shadow: 0 12px 24px rgba(0, 43, 102, 0.12);
  }

  body[data-page="news"] .news-mobile-categories__grid a.is-active .news-mobile-categories__icon {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
  }

  body[data-page="news"] .news-list-section {
    padding-block: 8px 18px !important;
  }

  body[data-page="news"] .news-main-card {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-page="news"] .news-list {
    display: grid !important;
    gap: 12px !important;
    margin-top: 0 !important;
  }

  body[data-page="news"] .news-list-item {
    display: grid !important;
    grid-template-columns: clamp(132px, 40%, 172px) minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 12px !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 16px !important;
    background: var(--color-white) !important;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08) !important;
  }

  body[data-page="news"] .news-list-item img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover !important;
    border-radius: 12px !important;
    flex-shrink: 0;
  }

  body[data-page="news"] .news-list-item > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  body[data-page="news"] .news-tag {
    margin-bottom: 6px !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  body[data-page="news"] .news-list-item h2 {
    margin-bottom: 6px !important;
    font-size: clamp(14px, 3.9vw, 16px) !important;
    line-height: 1.35 !important;
  }

  body[data-page="news"] .news-list-item h2 a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  body[data-page="news"] .news-list-item p {
    margin-bottom: 10px !important;
    color: rgba(71, 84, 103, 0.88);
    font-size: clamp(11px, 3vw, 13px) !important;
    line-height: 1.5 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  body[data-page="news"] .news-meta {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  body[data-page="news"] .news-meta span {
    gap: 5px;
    white-space: nowrap;
  }

  body[data-page="news"] .news-meta span:nth-child(3) {
    display: none !important;
  }

  body[data-page="news"] .news-arrow {
    display: none !important;
  }

  body[data-page="news"] .news-mobile-cta {
    display: block !important;
    padding-block: 18px 24px !important;
  }

  body[data-page="news"] .news-cta-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(112px, 28vw, 136px);
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0a33a4 0%, #0b5bd3 55%, #0f49cf 100%);
    color: var(--color-white);
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22);
  }
}

/* News mobile final balance override: fill hero right side, align sibling modules, and shrink article tags. */
@media (max-width: 768px) {
  body[data-page="news"] .news-banner__inner {
    position: relative;
    padding-right: clamp(114px, 30vw, 180px) !important;
  }

  body[data-page="news"] .news-hero-media {
    display: block !important;
    position: absolute;
    right: 14px;
    bottom: 12px;
    width: clamp(114px, 30vw, 180px);
    height: clamp(114px, 30vw, 180px);
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    opacity: 0.98;
    box-shadow: 0 18px 40px rgba(0, 20, 52, 0.28);
    pointer-events: none;
  }

  body[data-page="news"] .news-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="news"] .news-mobile-hot .container,
  body[data-page="news"] .news-mobile-cta .container {
    width: calc(100% - (var(--p2-gutter) * 2)) !important;
    margin-inline: var(--p2-gutter) !important;
    padding-inline: 0 !important;
  }

  body[data-page="news"] .news-mobile-hot {
    padding-block: 4px 14px;
  }

  body[data-page="news"] .news-hot-rail {
    gap: 10px;
  }

  body[data-page="news"] .news-hot-card__body {
    padding: 10px 10px 11px;
  }

  body[data-page="news"] .news-hot-card .news-tag {
    width: fit-content;
    min-height: 18px;
    margin: 0 0 6px auto;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 9px;
    line-height: 18px;
  }

  body[data-page="news"] .news-hot-card h3 {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.35;
  }

  body[data-page="news"] .news-hot-card .news-meta {
    gap: 8px;
    font-size: 10px;
  }

  body[data-page="news"] .news-cta-card {
    grid-template-columns: minmax(0, 1fr) clamp(108px, 27vw, 132px);
    gap: 10px;
    padding: 14px;
  }

  body[data-page="news"] .news-cta-card__media {
    height: clamp(108px, 27vw, 132px);
  }
}

@media (max-width: 480px) {
  body[data-page="news"] .news-banner__inner {
    padding-right: clamp(98px, 28vw, 148px) !important;
  }

  body[data-page="news"] .news-hero-media {
    right: 10px;
    bottom: 10px;
    width: clamp(96px, 28vw, 148px);
    height: clamp(96px, 28vw, 148px);
    border-radius: 16px;
  }

  body[data-page="news"] .news-mobile-hot .section-head h2,
  body[data-page="news"] .news-mobile-hot .section-more {
    font-size: 13px;
  }

  body[data-page="news"] .news-hot-rail {
    gap: 8px;
  }

  body[data-page="news"] .news-hot-card__body {
    padding: 9px 9px 10px;
  }

  body[data-page="news"] .news-hot-card .news-tag {
    min-height: 16px;
    padding: 0 7px;
    font-size: 8px;
    line-height: 16px;
  }

  body[data-page="news"] .news-hot-card h3 {
    font-size: 11px;
  }

  body[data-page="news"] .news-cta-card {
    grid-template-columns: minmax(0, 1fr) clamp(100px, 26vw, 120px);
    gap: 8px;
    padding: 14px;
  }

  body[data-page="news"] .news-cta-card__media {
    height: clamp(100px, 26vw, 120px);
  }
}

@media (max-width: 768px) {
  body[data-page="news"] .news-list-item > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title tag"
      "desc desc"
      "meta meta";
    column-gap: 8px;
    row-gap: 6px;
    align-content: start;
  }

  body[data-page="news"] .news-tag {
    grid-area: tag;
    justify-self: end;
    align-self: start;
    margin: 0 !important;
    min-height: 18px;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    line-height: 18px !important;
  }

  body[data-page="news"] .news-list-item h2 {
    grid-area: title;
    margin: 0 !important;
    padding: 0;
  }

  body[data-page="news"] .news-list-item p {
    grid-area: desc;
    margin: 0 !important;
  }

  body[data-page="news"] .news-meta {
    grid-area: meta;
    margin-top: 2px;
  }
}

/* News mobile final fine-tune override: tighter tags, narrower cards, and a filled hero right side. */
@media (max-width: 768px) {
  body[data-page="news"] .news-banner__inner {
    padding-right: clamp(126px, 32vw, 192px) !important;
  }

  body[data-page="news"] .news-hero-media {
    width: clamp(120px, 32vw, 184px) !important;
    height: clamp(120px, 32vw, 184px) !important;
  }

  body[data-page="news"] .news-mobile-categories__card {
    padding: 14px 12px 16px !important;
  }

  body[data-page="news"] .news-mobile-categories__title {
    margin-bottom: 10px !important;
    font-size: 16px !important;
  }

  body[data-page="news"] .news-mobile-categories__grid {
    gap: 8px 6px !important;
  }

  body[data-page="news"] .news-mobile-categories__grid a {
    min-height: 76px !important;
    gap: 5px !important;
    padding: 7px 4px 6px !important;
    font-size: 10px !important;
  }

  body[data-page="news"] .news-mobile-categories__icon {
    width: 28px !important;
    height: 28px !important;
  }

  body[data-page="news"] .news-mobile-categories__icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  body[data-page="news"] .news-mobile-categories__label {
    min-height: 2em !important;
    line-height: 1.08 !important;
  }

  body[data-page="news"] .news-mobile-hot .container,
  body[data-page="news"] .news-mobile-cta .container,
  body[data-page="news"] .news-mobile-categories .container,
  body[data-page="news"] .news-list-section .container {
    width: calc(100% - 24px) !important;
    margin-inline: 12px !important;
  }

  body[data-page="news"] .news-list-item {
    grid-template-columns: clamp(108px, 37%, 148px) minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  body[data-page="news"] .news-list-item img {
    border-radius: 12px !important;
  }

  body[data-page="news"] .news-tag {
    min-height: 16px !important;
    padding: 0 7px !important;
    font-size: 8px !important;
    line-height: 16px !important;
  }

  body[data-page="news"] .news-list-item h2 {
    font-size: clamp(13px, 3.5vw, 15px) !important;
  }

  body[data-page="news"] .news-list-item p {
    font-size: clamp(10px, 2.7vw, 12px) !important;
  }

  body[data-page="news"] .news-meta {
    gap: 6px 8px !important;
    font-size: 10px !important;
  }

  body[data-page="news"] .news-mobile-hot {
    padding-block: 4px 12px !important;
  }

  body[data-page="news"] .news-hot-rail {
    gap: 8px !important;
  }

  body[data-page="news"] .news-hot-card__body {
    padding: 9px 9px 10px !important;
  }

  body[data-page="news"] .news-hot-card .news-tag {
    margin: 0 0 6px auto !important;
    min-height: 16px !important;
    padding: 0 7px !important;
    font-size: 8px !important;
    line-height: 16px !important;
  }

  body[data-page="news"] .news-cta-card {
    grid-template-columns: minmax(0, 1fr) clamp(100px, 26vw, 124px) !important;
    gap: 8px !important;
    padding: 14px !important;
  }

  body[data-page="news"] .news-cta-card__media {
    height: clamp(100px, 26vw, 124px) !important;
  }
}

@media (max-width: 480px) {
  body[data-page="news"] .news-banner__inner {
    padding-right: clamp(108px, 30vw, 156px) !important;
  }

  body[data-page="news"] .news-hero-media {
    right: 10px !important;
    bottom: 10px !important;
    width: clamp(104px, 30vw, 156px) !important;
    height: clamp(104px, 30vw, 156px) !important;
    border-radius: 16px !important;
  }

  body[data-page="news"] .news-mobile-categories__card {
    padding: 13px 11px 15px !important;
  }

  body[data-page="news"] .news-mobile-categories__title {
    margin-bottom: 10px !important;
    font-size: 15px !important;
  }

  body[data-page="news"] .news-mobile-categories__grid {
    gap: 7px 5px !important;
  }

  body[data-page="news"] .news-mobile-categories__grid a {
    min-height: 72px !important;
    gap: 4px !important;
    padding: 6px 3px 5px !important;
    font-size: 9px !important;
  }

  body[data-page="news"] .news-mobile-categories__icon {
    width: 26px !important;
    height: 26px !important;
  }

  body[data-page="news"] .news-mobile-categories__icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  body[data-page="news"] .news-mobile-categories__label {
    min-height: 1.9em !important;
  }

  body[data-page="news"] .news-list-item {
    grid-template-columns: clamp(100px, 36%, 136px) minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 9px !important;
  }

  body[data-page="news"] .news-tag {
    min-height: 14px !important;
    padding: 0 6px !important;
    font-size: 7px !important;
    line-height: 14px !important;
  }

  body[data-page="news"] .news-list-item h2 {
    font-size: clamp(12px, 3.4vw, 14px) !important;
  }

  body[data-page="news"] .news-list-item p {
    font-size: clamp(10px, 2.6vw, 11px) !important;
  }

  body[data-page="news"] .news-meta {
    gap: 6px 7px !important;
    font-size: 9px !important;
  }

  body[data-page="news"] .news-mobile-hot {
    padding-block: 4px 10px !important;
  }

  body[data-page="news"] .news-hot-card__body {
    padding: 8px 8px 9px !important;
  }

  body[data-page="news"] .news-hot-card .news-tag {
    margin: 0 0 5px auto !important;
    min-height: 14px !important;
    padding: 0 6px !important;
    font-size: 7px !important;
    line-height: 14px !important;
  }

  body[data-page="news"] .news-cta-card {
    grid-template-columns: minmax(0, 1fr) clamp(92px, 24vw, 116px) !important;
    gap: 8px !important;
    padding: 13px !important;
  }

  body[data-page="news"] .news-cta-card__media {
    height: clamp(92px, 24vw, 116px) !important;
  }
}

/* News mobile hot module final override: align with banner/categories gutters and use fixed media cards. */
@media (max-width: 768px) {
  body[data-page="news"] .news-mobile-hot .container {
    width: calc(100% - 24px) !important;
    margin-inline: 12px !important;
    padding-inline: 0 !important;
  }

  body[data-page="news"] .news-mobile-hot {
    padding-block: 4px 12px !important;
  }

  body[data-page="news"] .news-mobile-hot .section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }

  body[data-page="news"] .news-mobile-hot .section-head h2 {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="news"] .news-mobile-hot .section-more {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.2;
  }

  body[data-page="news"] .news-hot-rail {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  body[data-page="news"] .news-hot-card {
    display: grid !important;
    grid-template-columns: 120px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    min-width: 0;
    padding: 10px !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 16px !important;
    background: var(--color-white) !important;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08) !important;
    overflow: hidden;
  }

  body[data-page="news"] .news-hot-card img {
    width: 120px !important;
    height: 80px !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    flex-shrink: 0;
  }

  body[data-page="news"] .news-hot-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title tag"
      "meta meta";
    column-gap: 8px;
    row-gap: 6px;
    padding: 0 !important;
    min-width: 0;
    align-content: start;
  }

  body[data-page="news"] .news-hot-card .news-tag {
    grid-area: tag;
    justify-self: end;
    align-self: start;
    width: fit-content;
    margin: 0 !important;
    min-height: 16px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    font-size: 8px !important;
    line-height: 16px !important;
  }

  body[data-page="news"] .news-hot-card h3 {
    grid-area: title;
    margin: 0 !important;
    font-size: 13px;
    line-height: 1.35;
  }

  body[data-page="news"] .news-hot-card h3 a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--color-text);
  }

  body[data-page="news"] .news-hot-card .news-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0;
    font-size: 10px;
    line-height: 1.2;
  }

  body[data-page="news"] .news-hot-card .news-meta span {
    white-space: nowrap;
  }

  body[data-page="news"] .news-hot-card .news-meta span::before {
    width: 11px;
    height: 11px;
  }

  body[data-page="news"] .news-mobile-cta .container {
    width: calc(100% - 24px) !important;
    margin-inline: 12px !important;
    padding-inline: 0 !important;
  }
}

@media (max-width: 480px) {
  body[data-page="news"] .news-mobile-hot .section-head h2 {
    font-size: 15px;
  }

  body[data-page="news"] .news-mobile-hot .section-more {
    font-size: 11px;
  }

  body[data-page="news"] .news-hot-card {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 9px !important;
  }

  body[data-page="news"] .news-hot-card img {
    width: 112px !important;
    height: 76px !important;
    border-radius: 11px !important;
  }

  body[data-page="news"] .news-hot-card h3 {
    font-size: 12px;
  }

  body[data-page="news"] .news-hot-card .news-tag {
    min-height: 14px !important;
    padding: 0 6px !important;
    font-size: 7px !important;
    line-height: 14px !important;
  }

  body[data-page="news"] .news-hot-card .news-meta {
    gap: 5px 7px;
    font-size: 9px;
  }
}

/* News mobile hot final alignment override: make hot cards match the news list rhythm. */
@media (max-width: 768px) {
  body[data-page="news"] .news-mobile-hot .container,
  body[data-page="news"] .news-mobile-cta .container {
    width: calc(100% - 24px) !important;
    margin-inline: 12px !important;
    padding-inline: 0 !important;
  }

  body[data-page="news"] .news-mobile-hot {
    padding-block: 4px 12px !important;
  }

  body[data-page="news"] .news-mobile-hot .section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
  }

  body[data-page="news"] .news-mobile-hot .section-head h2 {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="news"] .news-mobile-hot .section-more {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  body[data-page="news"] .news-hot-rail {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  body[data-page="news"] .news-hot-card {
    display: grid !important;
    grid-template-columns: clamp(112px, 36vw, 120px) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    min-width: 0;
    padding: 10px !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 16px !important;
    background: var(--color-white) !important;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08) !important;
    overflow: hidden;
  }

  body[data-page="news"] .news-hot-card img {
    width: 100% !important;
    height: 80px !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    flex-shrink: 0;
  }

  body[data-page="news"] .news-hot-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title tag"
      "meta meta";
    column-gap: 8px;
    row-gap: 6px;
    padding: 0 !important;
    min-width: 0;
    align-content: start;
  }

  body[data-page="news"] .news-hot-card .news-tag {
    grid-area: tag;
    justify-self: end;
    align-self: start;
    width: fit-content;
    margin: 0 !important;
    min-height: 16px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    font-size: 8px !important;
    line-height: 16px !important;
  }

  body[data-page="news"] .news-hot-card h3 {
    grid-area: title;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  body[data-page="news"] .news-hot-card h3 a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--color-text);
  }

  body[data-page="news"] .news-hot-card .news-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px !important;
    margin: 0;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  body[data-page="news"] .news-hot-card .news-meta span {
    white-space: nowrap;
  }

  body[data-page="news"] .news-hot-card .news-meta span::before {
    width: 11px;
    height: 11px;
  }

  body[data-page="news"] .news-mobile-cta {
    display: block !important;
    padding-block: 18px 24px !important;
  }

  body[data-page="news"] .news-cta-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(100px, 26vw, 124px) !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 14px !important;
    border-radius: 16px !important;
  }

  body[data-page="news"] .news-cta-card__copy h2 {
    font-size: clamp(20px, 5vw, 24px) !important;
  }

  body[data-page="news"] .news-cta-card__media {
    height: clamp(100px, 26vw, 124px) !important;
  }
}

@media (max-width: 480px) {
  body[data-page="news"] .news-mobile-hot .section-head h2 {
    font-size: 15px !important;
  }

  body[data-page="news"] .news-mobile-hot .section-more {
    font-size: 11px !important;
  }

  body[data-page="news"] .news-hot-card {
    grid-template-columns: clamp(100px, 34vw, 112px) minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 9px !important;
  }

  body[data-page="news"] .news-hot-card img {
    height: 76px !important;
    border-radius: 11px !important;
  }

  body[data-page="news"] .news-hot-card h3 {
    font-size: 12px !important;
  }

  body[data-page="news"] .news-hot-card .news-tag {
    min-height: 14px !important;
    padding: 0 6px !important;
    font-size: 7px !important;
    line-height: 14px !important;
  }

  body[data-page="news"] .news-hot-card .news-meta {
    gap: 5px 7px !important;
    font-size: 9px !important;
  }
}

/* EOF banner content alignment override: keep video/contact hero text positioned like news. */
@media (max-width: 768px) {
  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm {
    align-content: center !important;
    justify-items: start !important;
    padding: 28px 16px 24px !important;
    background-position: right center !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__copy,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-copy {
    width: min(100%, 280px) !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__copy h1,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-copy h1 {
    margin: 0 0 8px !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__subtitle,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-subtitle {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__desc,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-desc {
    margin: 10px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 480px) {
  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm {
    padding: 20px 14px 16px !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__copy h1,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-copy h1 {
    font-size: 27px !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__subtitle,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-subtitle {
    font-size: 13px !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__desc,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-desc {
    font-size: 11px !important;
  }
}

/* Video/contact hero copy alignment: match the news mobile banner rhythm. */
@media (max-width: 768px) {
  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm {
    align-content: center !important;
    justify-items: start !important;
    min-height: 254px !important;
    padding: 28px 16px 24px !important;
    background-position: right center !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__copy,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-copy {
    width: min(100%, 280px) !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__copy h1,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-copy h1 {
    margin: 0 0 8px !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__subtitle,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-subtitle {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__desc,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-desc {
    margin: 10px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 480px) {
  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm {
    min-height: 224px !important;
    padding: 20px 14px 16px !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__copy h1,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-copy h1 {
    font-size: 27px !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__subtitle,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-subtitle {
    font-size: 13px !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__desc,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-desc {
    font-size: 11px !important;
  }
}

/* Contact mobile final top spacing override: remove breadcrumb and pull the banner up. */
@media (max-width: 768px) {
  body[data-page="contact"] .contact-mobile {
    padding-top: 0 !important;
  }

  body[data-page="contact"] .contact-mobile__breadcrumb {
    display: none !important;
  }

  body[data-page="contact"] .contact-mobile__hero--cases-rhythm {
    margin-top: 0 !important;
    background-position: right top !important;
  }
}

@media (max-width: 480px) {
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm {
    background-position: right top !important;
  }
}

/* Full-bleed mobile banner alignment for about/products/support/news. */
@media (max-width: 768px) {
  body[data-page="about"] .about-banner,
  body[data-page="products"] .product-banner,
  body[data-page="support"] .service-banner,
  body[data-page="news"] .news-banner {
    width: 100% !important;
    margin-inline: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  body[data-page="about"] .about-banner::before,
  body[data-page="products"] .product-banner::before,
  body[data-page="support"] .service-banner::before,
  body[data-page="news"] .news-banner::before {
    background-position: right center !important;
    background-size: cover !important;
  }
}

@media (max-width: 480px) {
  body[data-page="about"] .about-banner,
  body[data-page="products"] .product-banner,
  body[data-page="support"] .service-banner,
  body[data-page="news"] .news-banner {
    width: 100% !important;
    margin-inline: 0 !important;
  }
}

/* Contact mobile final hero override append: keep the banner identical to cases on phones. */
@media (max-width: 768px) {
  body[data-page="contact"] .contact-mobile {
    padding-top: 0 !important;
  }

  body[data-page="contact"] .contact-mobile .container {
    width: calc(100% - 24px) !important;
    margin-inline: 12px !important;
    padding-inline: 0 !important;
  }

  body[data-page="contact"] .contact-mobile__hero--cases-rhythm {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    width: calc(100% + 24px) !important;
    min-height: 214px !important;
    margin: 0 -12px 14px !important;
    padding: 22px 16px 18px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background:
      linear-gradient(90deg, rgba(0, 18, 48, 0.94) 0%, rgba(0, 43, 102, 0.76) 54%, rgba(0, 43, 102, 0.14) 100%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png")) right center / cover no-repeat !important;
  }

  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-copy {
    position: relative;
    z-index: 1;
    width: min(100%, 286px);
    gap: 0 !important;
    color: #fff;
  }

  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-copy h1 {
    margin: 0 0 10px !important;
    color: var(--color-white) !important;
    font-size: 30px !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
    font-weight: 900 !important;
  }

  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-subtitle {
    margin: 0 0 8px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 800 !important;
  }

  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-desc {
    margin: 0 !important;
    max-width: 260px;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-art {
    display: none !important;
  }
}

@media (max-width: 480px) {
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm {
    min-height: 206px !important;
    padding: 20px 14px 16px !important;
  }

  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-copy h1 {
    font-size: 28px !important;
  }

  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-subtitle,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-desc {
    font-size: 12px !important;
  }
}

/* Contact mobile final hero override: mirror the cases mobile banner rhythm. */
@media (max-width: 768px) {
  body[data-page="contact"] .contact-mobile {
    padding-top: 0 !important;
  }

  body[data-page="contact"] .contact-mobile .container {
    width: calc(100% - 24px) !important;
    margin-inline: 12px !important;
    padding-inline: 0 !important;
  }

  body[data-page="contact"] .contact-mobile__hero--cases-rhythm {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    width: calc(100% + 24px) !important;
    min-height: 214px !important;
    margin: 0 -12px 14px !important;
    padding: 22px 16px 18px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background:
      linear-gradient(90deg, rgba(0, 18, 48, 0.94) 0%, rgba(0, 43, 102, 0.76) 54%, rgba(0, 43, 102, 0.14) 100%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png")) right center / cover no-repeat !important;
  }

  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-copy {
    position: relative;
    z-index: 1;
    width: min(100%, 286px);
    gap: 0 !important;
    color: #fff;
  }

  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-copy h1 {
    margin: 0 0 10px !important;
    color: var(--color-white) !important;
    font-size: 30px !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
    font-weight: 900 !important;
  }

  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-subtitle {
    margin: 0 0 8px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 800 !important;
  }

  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-desc {
    margin: 0 !important;
    max-width: 260px;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-art {
    display: none !important;
  }
}

@media (max-width: 480px) {
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm {
    min-height: 206px !important;
    padding: 20px 14px 16px !important;
  }

  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-copy h1 {
    font-size: 28px !important;
  }

  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-subtitle,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-desc {
    font-size: 12px !important;
  }
}

/* News mobile hot final row override: make hot cards match the main news list and kill horizontal rails. */
@media (max-width: 768px) {
  body[data-page="news"] .news-mobile-hot {
    display: block !important;
    overflow: hidden !important;
    padding-block: 4px 12px !important;
  }

  body[data-page="news"] .news-mobile-hot .container {
    width: calc(100% - 24px) !important;
    margin-inline: 12px !important;
    padding-inline: 0 !important;
  }

  body[data-page="news"] .news-mobile-hot .section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
  }

  body[data-page="news"] .news-mobile-hot .section-head h2 {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="news"] .news-mobile-hot .section-more {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  body[data-page="news"] .news-hot-rail {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
  }

  body[data-page="news"] .news-hot-card {
    display: grid !important;
    grid-template-columns: clamp(108px, 37%, 148px) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 16px !important;
    background: var(--color-white) !important;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08) !important;
    overflow: hidden !important;
  }

  body[data-page="news"] .news-hot-card img {
    width: 100% !important;
    height: clamp(80px, 27vw, 118px) !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    flex-shrink: 0;
  }

  body[data-page="news"] .news-hot-card__body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title tag"
      "desc desc"
      "meta meta" !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
    min-width: 0 !important;
    padding: 0 !important;
    align-content: start !important;
  }

  body[data-page="news"] .news-hot-card .news-tag {
    grid-area: tag;
    justify-self: end;
    align-self: start;
    width: fit-content;
    margin: 0 !important;
    min-height: 16px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    font-size: 8px !important;
    line-height: 16px !important;
  }

  body[data-page="news"] .news-hot-card h3 {
    grid-area: title;
    margin: 0 !important;
    font-size: clamp(13px, 3.5vw, 15px) !important;
    line-height: 1.35 !important;
  }

  body[data-page="news"] .news-hot-card h3 a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--color-text);
  }

  body[data-page="news"] .news-hot-card__body p {
    grid-area: desc;
    display: -webkit-box;
    margin: 0 !important;
    color: rgba(71, 84, 103, 0.88);
    font-size: clamp(10px, 2.7vw, 12px) !important;
    line-height: 1.5 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  body[data-page="news"] .news-hot-card .news-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  body[data-page="news"] .news-hot-card .news-meta span {
    white-space: nowrap;
  }

  body[data-page="news"] .news-hot-card .news-meta span::before {
    width: 11px;
    height: 11px;
  }

  body[data-page="news"] .news-mobile-cta .container {
    width: calc(100% - 24px) !important;
    margin-inline: 12px !important;
    padding-inline: 0 !important;
  }
}

@media (max-width: 480px) {
  body[data-page="news"] .news-mobile-hot .section-head h2 {
    font-size: 15px !important;
  }

  body[data-page="news"] .news-mobile-hot .section-more {
    font-size: 11px !important;
  }

  body[data-page="news"] .news-hot-rail {
    gap: 8px !important;
  }

  body[data-page="news"] .news-hot-card {
    grid-template-columns: clamp(100px, 34%, 112px) minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 9px !important;
  }

  body[data-page="news"] .news-hot-card img {
    height: 76px !important;
    border-radius: 11px !important;
  }

  body[data-page="news"] .news-hot-card h3 {
    font-size: 12px !important;
  }

  body[data-page="news"] .news-hot-card__body p {
    font-size: clamp(10px, 2.6vw, 11px) !important;
  }

  body[data-page="news"] .news-hot-card .news-tag {
    min-height: 14px !important;
    padding: 0 6px !important;
    font-size: 7px !important;
    line-height: 14px !important;
  }

  body[data-page="news"] .news-hot-card .news-meta {
    gap: 5px 7px !important;
    font-size: 9px !important;
  }
}

/* EOF banner content alignment override 2: last-write wins for video/contact hero copy. */
@media (max-width: 768px) {
  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm {
    align-content: center !important;
    justify-items: start !important;
    padding: 28px 16px 24px !important;
    background-position: right center !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__copy,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-copy {
    width: min(100%, 280px) !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__copy h1,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-copy h1 {
    margin: 0 0 8px !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__subtitle,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-subtitle {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__desc,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-desc {
    margin: 10px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 480px) {
  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm {
    padding: 20px 14px 16px !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__copy h1,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-copy h1 {
    font-size: 27px !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__subtitle,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-subtitle {
    font-size: 13px !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__desc,
  body[data-page="contact"] .contact-mobile__hero--cases-rhythm .contact-mobile__hero-desc {
    font-size: 11px !important;
  }
}

/* Solutions hero mobile cleanup: remove the four bottom tags and let the banner shrink naturally. */
@media (max-width: 768px) {
  body[data-page="solutions"] .solution-hero {
    min-height: auto !important;
  }

  body[data-page="solutions"] .solution-hero__inner {
    min-height: auto !important;
    padding: 22px var(--sol2-gutter) 18px !important;
    align-content: center !important;
    justify-items: start !important;
    gap: 0 !important;
  }

  body[data-page="solutions"] .solution-hero__content {
    width: min(100%, 286px) !important;
  }

  body[data-page="solutions"] .solution-hero__content h1 {
    margin-bottom: 10px !important;
  }

  body[data-page="solutions"] .solution-hero__content p {
    margin-bottom: 8px !important;
  }

  body[data-page="solutions"] .solution-hero__content span {
    margin-bottom: 0 !important;
  }

  body[data-page="solutions"] .solution-hero__points {
    display: none !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 480px) {
  body[data-page="solutions"] .solution-hero__inner {
    padding: 18px var(--sol2-gutter) 16px !important;
  }

  body[data-page="solutions"] .solution-hero__content {
    width: min(100%, 270px) !important;
  }

  body[data-page="solutions"] .solution-hero__content h1 {
    margin-bottom: 8px !important;
    font-size: 26px !important;
  }

  body[data-page="solutions"] .solution-hero__content p {
    margin-bottom: 6px !important;
    font-size: 15px !important;
  }

  body[data-page="solutions"] .solution-hero__content span {
    font-size: 12px !important;
  }
}

/* About mobile banner final override: mirror the contact mobile hero rhythm with the about artwork. */
@media (max-width: 768px) {
  body[data-page="about"] .about-banner {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-height: 214px !important;
    margin: 0 0 14px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
    background: #082d74 !important;
  }

  body[data-page="about"] .about-banner::before {
    background-image:
      linear-gradient(90deg, rgba(0, 18, 48, 0.94) 0%, rgba(0, 43, 102, 0.76) 54%, rgba(0, 43, 102, 0.14) 100%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png")) !important;
    background-position: right center !important;
    background-size: cover !important;
  }

  body[data-page="about"] .about-banner__inner {
    display: grid !important;
    align-content: center !important;
    justify-items: start !important;
    min-height: 214px !important;
    padding: 22px 28px 18px !important;
  }

  body[data-page="about"] .about-banner h1 {
    margin: 0 0 10px !important;
    color: var(--color-white) !important;
    font-size: 30px !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
    font-weight: 900 !important;
  }

  body[data-page="about"] .about-banner p {
    margin: 0 0 8px !important;
    max-width: calc(100% - 28px) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
  }

  body[data-page="about"] .about-mobile-desc {
    display: block !important;
    max-width: calc(100% - 28px) !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
  }

  body[data-page="about"] .about-mobile-only {
    display: inline !important;
  }

  body[data-page="about"] .about-mobile-only[style*="display:none"] {
    display: inline !important;
  }

  body[data-page="about"] .about-desktop-only,
  body[data-page="about"] .about-banner-crumb,
  body[data-page="about"] .about-breadcrumb,
  body[data-page="about"] .about-hero-points {
    display: none !important;
  }
}

@media (max-width: 480px) {
  body[data-page="about"] .about-banner {
    min-height: 206px !important;
    margin-bottom: 12px !important;
  }

  body[data-page="about"] .about-banner__inner {
    min-height: 206px !important;
    padding: 20px 24px 16px !important;
  }

  body[data-page="about"] .about-banner h1 {
    margin-bottom: 10px !important;
    font-size: 28px !important;
  }

  body[data-page="about"] .about-banner p {
    font-size: 12px !important;
  }

  body[data-page="about"] .about-mobile-desc {
    font-size: 12px !important;
  }
}

/* About mobile team/honor final grid override: keep both modules compact and aligned on phones. */
@media (max-width: 768px) {
  body[data-page="about"] .about-v3-mobile__wrap {
    gap: 14px !important;
  }

  body[data-page="about"] .about-v3-block h2 {
    margin-bottom: 12px !important;
  }

  body[data-page="about"] .about-v3-team-rail,
  body[data-page="about"] .about-v3-honor-rail {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: start !important;
    overflow: visible !important;
  }

  body[data-page="about"] .about-v3-team-rail article,
  body[data-page="about"] .about-v3-honor-rail article {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  body[data-page="about"] .about-v3-team-rail article:nth-child(n + 5),
  body[data-page="about"] .about-v3-honor-rail article:nth-child(n + 5) {
    display: none !important;
  }

  body[data-page="about"] .about-v3-team-rail img,
  body[data-page="about"] .about-v3-honor-rail img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
  }

  body[data-page="about"] .about-v3-team-rail article,
  body[data-page="about"] .about-v3-honor-rail article {
    border-radius: 12px !important;
  }

  body[data-page="about"] .about-v3-team-rail article {
    border: 1px solid rgba(18, 80, 180, 0.08) !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  body[data-page="about"] .about-v3-team-rail img {
    aspect-ratio: 1 / 1 !important;
  }

  body[data-page="about"] .about-v3-honor-rail article {
    border: 1px solid rgba(18, 80, 180, 0.08) !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  body[data-page="about"] .about-v3-honor-rail article::before,
  body[data-page="about"] .about-v3-honor-rail article::after {
    display: none !important;
  }

  body[data-page="about"] .about-v3-honor-rail img {
    display: block !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 10px !important;
  }

  body[data-page="about"] .about-v3-honor-rail span {
    padding: 6px 2px 0 !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
  }
}

@media (max-width: 480px) {
  body[data-page="about"] .about-v3-mobile__wrap {
    gap: 12px !important;
  }

  body[data-page="about"] .about-v3-team-rail,
  body[data-page="about"] .about-v3-honor-rail {
    gap: 8px !important;
  }

  body[data-page="about"] .about-v3-honor-rail span {
    font-size: 9px !important;
  }
}

@media (max-width: 992px) {
  body[data-page="about"] {
    --about-mobile-safe: 0px;
    --about3-icon-building: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231250b4%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2020V6a1%201%200%200%201%201-1h7v15%22%2F%3E%3Cpath%20d%3D%22M13%2020V10h5a1%201%200%200%201%201%201v9%22%2F%3E%3Cpath%20d%3D%22M8%208h2M8%2012h2M8%2016h2M16%2013h1M16%2017h1%22%2F%3E%3C%2Fsvg%3E");
    --about3-icon-factory: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231250b4%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020V9l4%202V9l4%202V9l4%202V8h4v12z%22%2F%3E%3Cpath%20d%3D%22M7%2020v-4M11%2020v-4M15%2020v-4%22%2F%3E%3C%2Fsvg%3E");
    --about3-icon-users: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231250b4%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2011a3%203%200%201%200%200-6%203%203%200%200%200%200%206Z%22%2F%3E%3Cpath%20d%3D%22M16.5%2012a2.5%202.5%200%201%200%200-5%202.5%202.5%200%200%200%200%205Z%22%2F%3E%3Cpath%20d%3D%22M3.5%2020a4.5%204.5%200%200%201%209%200%22%2F%3E%3Cpath%20d%3D%22M13.5%2020a3.5%203.5%200%200%201%207%200%22%2F%3E%3C%2Fsvg%3E");
    --about3-icon-globe: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231250b4%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22M4%2012h16%22%2F%3E%3Cpath%20d%3D%22M12%204c2.4%202.2%203.8%205%203.8%208S14.4%2017.8%2012%2020c-2.4-2.2-3.8-5-3.8-8S9.6%206.2%2012%204Z%22%2F%3E%3C%2Fsvg%3E");
    --about3-icon-spark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231250b4%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l1.7%204.8L18%209.5l-4.3%201.7L12%2016l-1.7-4.8L6%209.5l4.3-1.7L12%203Z%22%2F%3E%3Cpath%20d%3D%22M5%2016l.7%202.1L8%2019l-2.3.9L5%2022l-.7-2.1L2%2019l2.3-.9L5%2016Z%22%2F%3E%3C%2Fsvg%3E");
    --about3-icon-shield: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231250b4%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l7%203v5c0%204.8-3%208.8-7%2010-4-1.2-7-5.2-7-10V6l7-3Z%22%2F%3E%3Cpath%20d%3D%22m9.5%2012%202%202%203.5-4%22%2F%3E%3C%2Fsvg%3E");
    --about3-icon-chip: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231250b4%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%2210%22%20height%3D%2210%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%203v3M15%203v3M9%2018v3M15%2018v3M3%209h3M3%2015h3M18%209h3M18%2015h3%22%2F%3E%3C%2Fsvg%3E");
    --about3-icon-headset: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231250b4%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2013a8%208%200%200%201%2016%200%22%2F%3E%3Cpath%20d%3D%22M4%2013v4a2%202%200%200%200%202%202h2v-7H6a2%202%200%200%200-2%202Zm16%200v4a2%202%200%200%201-2%202h-2v-7h2a2%202%200%200%201%202%202Z%22%2F%3E%3C%2Fsvg%3E");
    --about3-icon-flag: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231250b4%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2021V4%22%2F%3E%3Cpath%20d%3D%22M6%205c2.2-1.3%204.4-1.3%206.6%200S17%206.3%2019%205v8c-2%201.3-4.4%201.3-6.6%200S8.2%2011.7%206%2013V5Z%22%2F%3E%3C%2Fsvg%3E");
    --about3-icon-compass: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231250b4%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22m14.8%209.2-1.3%204.1-4.1%201.3%201.3-4.1%204.1-1.3Z%22%2F%3E%3C%2Fsvg%3E");
    --about3-icon-value: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231250b4%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2011c0-2.2%201.7-4%203.8-4%201.7%200%203.2%201%204.2%202.6C13%208%2014.5%207%2016.2%207%2018.3%207%2020%208.8%2020%2011c0%205-8%209-8%209s-8-4-8-9Z%22%2F%3E%3C%2Fsvg%3E");
  }

  body[data-page="about"] .about-banner {
    margin: 0 !important;
    min-height: 286px !important;
    border-radius: 0;
    box-shadow: none !important;
  }

  body[data-page="about"] .about-banner::before {
    background-image:
      linear-gradient(90deg, rgba(1, 30, 87, 0.94) 0%, rgba(5, 64, 160, 0.76) 54%, rgba(5, 64, 160, 0.18) 100%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png")) !important;
    background-position: right center;
    background-size: cover;
  }

  body[data-page="about"] .about-banner__inner {
    min-height: 286px !important;
    padding: 34px 18px 42px !important;
    align-content: center !important;
  }

  body[data-page="about"] .about-banner h1 {
    margin-bottom: 14px !important;
    font-size: 30px !important;
    line-height: 1.08 !important;
  }

  body[data-page="about"] .about-banner p,
  body[data-page="about"] .about-mobile-desc {
    max-width: 300px;
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  body[data-page="about"] .about-v3-mobile {
    padding: 0 0 18px;
  }

  body[data-page="about"] .about-v3-mobile__wrap {
    position: relative;
    z-index: 2;
    gap: 16px !important;
    margin-top: -26px !important;
  }

  body[data-page="about"] .about-v3-card,
  body[data-page="about"] .about-v3-block {
    padding: 16px 14px !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 32px rgba(15, 43, 97, 0.08) !important;
  }

  body[data-page="about"] .about-v3-card h2,
  body[data-page="about"] .about-v3-block h2 {
    margin: 0 0 12px !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    color: #102b61 !important;
  }

  body[data-page="about"] .about-v3-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
  }

  body[data-page="about"] .about-v3-block__head h2 {
    margin: 0 !important;
  }

  body[data-page="about"] .about-v3-block__head a {
    flex: none;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    color: #1a57bb;
  }

  body[data-page="about"] .about-v3-block__head a::after {
    content: " >";
  }

  body[data-page="about"] .about-v3-intro p {
    margin: 0 0 10px !important;
    font-size: 13px !important;
    line-height: 1.72 !important;
    color: #62718d !important;
  }

  body[data-page="about"] .about-v3-intro__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  body[data-page="about"] .about-v3-intro__stats div {
    position: relative;
    min-height: 112px !important;
    padding: 46px 6px 10px !important;
    border-radius: 16px !important;
    background: #fff !important;
  }

  body[data-page="about"] .about-v3-intro__stats div::before {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    top: 12px !important;
    left: 50% !important;
    width: 28px !important;
    height: 28px !important;
    margin-left: -14px !important;
    border-radius: 10px !important;
    background: rgba(18, 80, 180, 0.08) !important;
    border: 1px solid rgba(18, 80, 180, 0.12) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 16px 16px !important;
  }

  body[data-page="about"] .about-v3-intro__stats div:nth-child(1)::before {
    background-image: var(--about3-icon-building) !important;
  }

  body[data-page="about"] .about-v3-intro__stats div:nth-child(2)::before {
    background-image: var(--about3-icon-factory) !important;
  }

  body[data-page="about"] .about-v3-intro__stats div:nth-child(3)::before {
    background-image: var(--about3-icon-users) !important;
  }

  body[data-page="about"] .about-v3-intro__stats div:nth-child(4)::before {
    background-image: var(--about3-icon-globe) !important;
  }

  body[data-page="about"] .about-v3-intro__stats strong {
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  body[data-page="about"] .about-v3-intro__stats span {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  body[data-page="about"] .about-v3-adv-grid {
    gap: 0 !important;
    border: 1px solid var(--about3-border);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
  }

  body[data-page="about"] .about-v3-adv-grid article {
    position: relative;
    min-height: 0 !important;
    padding: 12px 8px 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: center;
    align-items: center;
  }

  body[data-page="about"] .about-v3-adv-grid article:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 1px;
    background: rgba(18, 80, 180, 0.1);
  }

  body[data-page="about"] .about-v3-adv-grid strong {
    position: relative;
    margin-bottom: 6px !important;
    padding-top: 32px;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  body[data-page="about"] .about-v3-adv-grid strong::before {
    content: "" !important;
    position: absolute;
    left: 50%;
    top: 0;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-radius: 8px;
    background: rgba(18, 80, 180, 0.08);
    border: 1px solid rgba(18, 80, 180, 0.12);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 14px 14px;
  }

  body[data-page="about"] .about-v3-adv-grid article:nth-child(1) strong::before {
    background-image: var(--about3-icon-spark);
  }

  body[data-page="about"] .about-v3-adv-grid article:nth-child(2) strong::before {
    background-image: var(--about3-icon-shield);
  }

  body[data-page="about"] .about-v3-adv-grid article:nth-child(3) strong::before {
    background-image: var(--about3-icon-chip);
  }

  body[data-page="about"] .about-v3-adv-grid article:nth-child(4) strong::before {
    background-image: var(--about3-icon-headset);
  }

  body[data-page="about"] .about-v3-adv-grid p {
    font-size: 10px !important;
    line-height: 1.45 !important;
    color: #677893 !important;
  }

  body[data-page="about"] .about-v3-timeline-card {
    gap: 10px !important;
  }

  body[data-page="about"] .about-v3-timeline {
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  body[data-page="about"] .about-v3-timeline > div {
    grid-template-columns: 74px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 8px 0 10px !important;
  }

  body[data-page="about"] .about-v3-timeline > div strong {
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  body[data-page="about"] .about-v3-timeline > div span {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

  body[data-page="about"] .about-v3-timeline-media {
    position: relative;
    border: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    min-height: 132px;
  }

  body[data-page="about"] .about-v3-timeline-media img {
    height: 132px !important;
  }

  body[data-page="about"] .about-v3-timeline-media div {
    position: absolute;
    inset: auto 0 0 0;
    display: grid;
    gap: 4px;
    padding: 16px 14px 14px !important;
    background: linear-gradient(180deg, rgba(1, 20, 58, 0) 0%, rgba(1, 20, 58, 0.78) 100%);
  }

  body[data-page="about"] .about-v3-timeline-media strong {
    color: #fff;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  body[data-page="about"] .about-v3-timeline-media small {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 12px !important;
  }

  body[data-page="about"] .about-v3-timeline-media__action {
    justify-self: end;
    margin-top: 6px;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(10, 108, 255, 0.92);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
  }

  body[data-page="about"] .about-v3-timeline-media__action::after {
    content: "  >";
  }

  body[data-page="about"] .about-v3-culture {
    gap: 0 !important;
    border: 1px solid var(--about3-border);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
  }

  body[data-page="about"] .about-v3-culture article {
    position: relative;
    min-height: 122px !important;
    padding: 12px 8px 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body[data-page="about"] .about-v3-culture article:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 1px;
    background: rgba(18, 80, 180, 0.1);
  }

  body[data-page="about"] .about-v3-culture strong {
    position: relative;
    padding-top: 32px;
    margin-bottom: 6px !important;
    font-size: 13px !important;
  }

  body[data-page="about"] .about-v3-culture strong::before {
    content: "" !important;
    position: absolute;
    left: 50%;
    top: 0;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-radius: 8px;
    background: rgba(18, 80, 180, 0.08);
    border: 1px solid rgba(18, 80, 180, 0.12);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 14px 14px;
  }

  body[data-page="about"] .about-v3-culture article:nth-child(1) strong::before {
    background-image: var(--about3-icon-flag);
  }

  body[data-page="about"] .about-v3-culture article:nth-child(2) strong::before {
    background-image: var(--about3-icon-compass);
  }

  body[data-page="about"] .about-v3-culture article:nth-child(3) strong::before {
    background-image: var(--about3-icon-value);
  }

  body[data-page="about"] .about-v3-culture p {
    font-size: 10px !important;
    line-height: 1.5 !important;
  }

  body[data-page="about"] .about-v3-rail,
  body[data-page="about"] .about-v3-team-rail,
  body[data-page="about"] .about-v3-honor-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body[data-page="about"] .about-v3-team-rail article,
  body[data-page="about"] .about-v3-honor-rail article {
    border-radius: 14px !important;
  }

  body[data-page="about"] .about-v3-team-rail img {
    aspect-ratio: 1.18 / 1 !important;
  }

  body[data-page="about"] .about-v3-honor-rail article {
    position: relative;
    min-height: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(18, 80, 180, 0.08) !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  body[data-page="about"] .about-v3-honor-rail article:nth-child(n + 5) {
    display: none !important;
  }

  body[data-page="about"] .about-v3-honor-rail article::before {
    display: none !important;
  }

  body[data-page="about"] .about-v3-honor-rail article::after {
    display: none !important;
  }

  body[data-page="about"] .about-v3-honor-rail img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    object-fit: cover !important;
  }

  body[data-page="about"] .about-v3-honor-rail span {
    display: block;
    padding: 6px 2px 0 !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
    font-weight: 700;
    color: #4a5a74 !important;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
  }

  body[data-page="about"] .about-v3-mobile-cta {
    padding: 18px 16px !important;
    min-height: 148px;
    border-radius: 20px !important;
  }

  body[data-page="about"] .about-v3-mobile-cta::before {
    background:
      linear-gradient(90deg, rgba(2, 27, 76, 0.86) 0%, rgba(2, 27, 76, 0.36) 60%, rgba(2, 27, 76, 0.12) 100%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png")) right center/cover no-repeat !important;
    opacity: 1 !important;
  }

  body[data-page="about"] .about-v3-mobile-cta__copy strong {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  body[data-page="about"] .about-v3-mobile-cta__copy p {
    max-width: 270px;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  body[data-page="about"] .about-v3-mobile-cta__actions {
    margin-top: 14px !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px !important;
  }

  body[data-page="about"] .about-v3-mobile-cta__actions .btn {
    width: auto !important;
    min-width: 122px;
    min-height: 40px !important;
    padding-inline: 16px !important;
    border-radius: 12px !important;
  }
}

/* Contact-A final visual merge.
   Keep the service-network content, but make the banner, cards, buttons and mobile shell follow the shared system. */
@media (max-width: 768px) {
  body.contact-a-page {
    overflow-x: hidden;
    background: var(--color-bg);
  }

  body.contact-a-page .contact-a-mobile[hidden] {
    display: block !important;
  }

  body.contact-a-page .contact-a-mobile {
    display: block !important;
    padding: 10px 0 20px;
  }

  body.contact-a-page .contact-a-mobile .container {
    width: min(100% - 24px, var(--container));
    max-width: min(100% - 24px, var(--container));
    padding-inline: 0;
  }

  body.contact-a-page .contact-a-mobile__hero {
    --banner-image: url("../images/banners/contact-factory-office.jpg");
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(114px, 0.9fr);
    gap: 8px;
    align-items: center;
    width: calc(100% + 24px);
    min-height: 194px;
    margin: 0 -12px 12px;
    padding: 18px 14px 16px;
    border-radius: 0;
    overflow: hidden;
    background-image: var(--banner-overlay), var(--banner-image);
    background-size: cover, cover;
    background-position: var(--banner-position), center center;
    background-repeat: no-repeat, no-repeat;
    box-shadow: none;
  }

  body.contact-a-page .contact-a-mobile__hero-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    min-width: 0;
    color: var(--color-white);
  }

  body.contact-a-page .contact-a-mobile__hero-copy h1 {
    margin: 0;
    font-size: var(--mobile-banner-title);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0.02em;
  }

  body.contact-a-page .contact-a-mobile__hero-subtitle {
    margin: 0;
    font-size: var(--mobile-banner-subtitle);
    line-height: 1.45;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.96);
  }

  body.contact-a-page .contact-a-mobile__hero-desc {
    margin: 0;
    max-width: 14em;
    font-size: var(--mobile-body);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
  }

  body.contact-a-page .contact-a-mobile__hero-art {
    position: relative;
    z-index: 1;
    min-height: 128px;
    filter: drop-shadow(0 20px 24px rgba(5, 19, 82, 0.24));
  }

  body.contact-a-page .contact-a-mobile__hero-art svg {
    display: block;
    width: 100%;
    height: auto;
  }

  body.contact-a-page .contact-a-mobile__search,
  body.contact-a-page .contact-a-mobile__network .contact-a-mobile__list,
  body.contact-a-page .contact-a-mobile__network .contact-a-mobile__map,
  body.contact-a-page .contact-a-mobile__coverage {
    border-radius: var(--radius-lg);
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
  }

  body.contact-a-page .contact-a-mobile__search,
  body.contact-a-page .contact-a-mobile__network,
  body.contact-a-page .contact-a-mobile__coverage,
  body.contact-a-page .contact-a-mobile__cta {
    margin-bottom: 12px;
  }

  body.contact-a-page .contact-a-mobile__search {
    padding: 14px;
  }

  body.contact-a-page .contact-a-mobile__section-head {
    margin-bottom: 10px;
  }

  body.contact-a-page .contact-a-mobile__section-head h2 {
    margin: 0;
    color: var(--color-navy-900);
    font-size: var(--mobile-section-title);
    line-height: 1.25;
    font-weight: 900;
  }

  body.contact-a-page .contact-a-mobile__section-head p {
    margin: 4px 0 0;
    color: var(--color-subtle);
    font-size: var(--mobile-meta);
    line-height: 1.4;
  }

  body.contact-a-page .contact-a-mobile__search-form {
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
    gap: 10px;
  }

  body.contact-a-page .contact-a-mobile__field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-white);
  }

  body.contact-a-page .contact-a-mobile__field svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--color-subtle);
  }

  body.contact-a-page .contact-a-mobile__field input,
  body.contact-a-page .contact-a-mobile__field select {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--color-text);
    font-size: var(--mobile-body);
  }

  body.contact-a-page .contact-a-mobile__field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 8px;
  }

  body.contact-a-page .contact-a-mobile__field--select svg:last-child {
    margin-left: auto;
  }

  body.contact-a-page .contact-a-mobile__tabs-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 12px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  body.contact-a-page .contact-a-mobile__tabs-scroll::-webkit-scrollbar {
    display: none;
  }

  body.contact-a-page .contact-a-mobile__tabs-scroll button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-navy-900);
    font-size: var(--mobile-pill);
    font-weight: 800;
  }

  body.contact-a-page .contact-a-mobile__tabs-scroll button.is-active {
    border-color: var(--color-blue-700);
    background: var(--color-blue-700);
    color: var(--color-white);
  }

  body.contact-a-page .contact-a-mobile__network {
    display: grid;
    gap: 12px;
  }

  body.contact-a-page .contact-a-mobile__section-head--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  body.contact-a-page .contact-a-mobile__switch-map {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    background: var(--color-blue-100);
    color: var(--color-blue-700);
    font-size: var(--mobile-pill);
    font-weight: 800;
  }

  body.contact-a-page .contact-a-mobile__network-grid {
    display: grid;
    gap: 12px;
    min-width: 0;
  }

  body.contact-a-page .contact-a-mobile__list,
  body.contact-a-page .contact-a-mobile__map {
    padding: 14px;
    min-width: 0;
  }

  body.contact-a-page .contact-a-mobile__branch-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    gap: 10px;
    align-items: start;
    padding: 14px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
  }

  body.contact-a-page .contact-a-mobile__branch-item + .contact-a-mobile__branch-item {
    margin-top: 10px;
  }

  body.contact-a-page .contact-a-mobile__branch-index {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-blue-700);
    color: var(--color-white);
    font-size: var(--mobile-button);
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(15, 87, 215, 0.28);
  }

  body.contact-a-page .contact-a-mobile__branch-body {
    min-width: 0;
  }

  body.contact-a-page .contact-a-mobile__branch-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding-right: 2px;
  }

  body.contact-a-page .contact-a-mobile__branch-head h3 {
    margin: 0;
    color: var(--color-navy-900);
    font-size: var(--mobile-card-title);
    line-height: 1.35;
    font-weight: 900;
  }

  body.contact-a-page .contact-a-mobile__branch-head span {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--color-blue-100);
    color: var(--color-blue-700);
    font-size: var(--mobile-pill);
    font-weight: 800;
    white-space: nowrap;
  }

  body.contact-a-page .contact-a-mobile__branch-address {
    margin: 4px 0 0;
    color: var(--color-muted);
    font-size: var(--mobile-body);
    line-height: 1.55;
  }

  body.contact-a-page .contact-a-mobile__branch-meta {
    display: grid;
    gap: 6px;
    margin-top: 6px;
  }

  body.contact-a-page .contact-a-mobile__branch-meta li {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--color-muted);
    font-size: var(--mobile-body);
    line-height: 1.45;
  }

  body.contact-a-page .contact-a-mobile__branch-meta svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--color-blue-700);
  }

  body.contact-a-page .contact-a-mobile__branch-meta a {
    color: var(--color-blue-700);
    font-weight: 800;
  }

  body.contact-a-page .contact-a-mobile__route {
    display: inline-grid;
    place-items: center;
    align-self: center;
    width: 24px;
    height: 24px;
    color: var(--color-blue-700);
  }

  body.contact-a-page .contact-a-mobile__route svg {
    width: 18px;
    height: 18px;
  }

  body.contact-a-page .contact-a-mobile__more {
    display: block;
    margin-top: 12px;
    color: var(--color-blue-700);
    font-size: var(--mobile-pill);
    font-weight: 900;
    text-align: center;
  }

  body.contact-a-page .contact-a-mobile__more::after {
    content: "⌄";
    margin-left: 4px;
    font-size: var(--mobile-pill);
  }

  body.contact-a-page .contact-a-mobile__map {
    position: relative;
    padding: 14px;
  }

  body.contact-a-page .contact-a-mobile__map-stage {
    position: relative;
    overflow: hidden;
    min-height: 286px;
    border-radius: var(--radius-md);
    background:
      linear-gradient(180deg, rgba(237, 243, 252, 0.84), rgba(214, 231, 248, 0.94)),
      url("../images/placeholder.jpg") center/cover no-repeat;
  }

  body.contact-a-page .contact-a-mobile__map-stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.18;
  }

  body.contact-a-page .contact-a-mobile__map-overlay {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(120px 80px at 18% 28%, rgba(0, 70, 184, 0.18), transparent 60%),
      radial-gradient(130px 90px at 70% 52%, rgba(255, 122, 26, 0.14), transparent 60%);
  }

  body.contact-a-page .contact-a-mobile__map-switch {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.94);
    color: var(--color-blue-700);
    font-size: 12px;
    font-weight: 800;
    box-shadow: var(--shadow-soft);
  }

  body.contact-a-page .contact-a-mobile__map-switch svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
  }

  body.contact-a-page .contact-a-mobile__map-pin {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    color: #12396f;
    font-size: 11px;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(7, 30, 80, 0.16);
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }

  body.contact-a-page .contact-a-mobile__map-pin::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
    background: var(--color-blue-700);
    box-shadow: 0 0 0 4px rgba(15, 87, 215, 0.18);
  }

  body.contact-a-page .contact-a-mobile__map-pin--main {
    background: var(--color-blue-700);
    color: var(--color-white);
  }

  body.contact-a-page .contact-a-mobile__map-pin--main::before {
    background: var(--color-white);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
  }

  body.contact-a-page .contact-a-mobile__map-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 10px;
    color: var(--color-subtle);
    font-size: 11px;
  }

  body.contact-a-page .contact-a-mobile__map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  body.contact-a-page .contact-a-mobile__map-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7a8ca8;
  }

  body.contact-a-page .contact-a-mobile__map-legend i.is-main {
    background: var(--color-blue-700);
  }

  body.contact-a-page .contact-a-mobile__coverage {
    padding: 14px;
  }

  body.contact-a-page .contact-a-mobile__coverage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.contact-a-page .contact-a-mobile__coverage-grid article {
    display: grid;
    gap: 8px;
    min-height: 148px;
    padding: 14px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #f8fbff;
    text-align: center;
  }

  body.contact-a-page .contact-a-mobile__coverage-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-inline: auto;
    border-radius: 50%;
    background: var(--color-blue-100);
    color: var(--color-blue-700);
  }

  body.contact-a-page .contact-a-mobile__coverage-icon--green {
    background: #eaf8ef;
    color: #20a85d;
  }

  body.contact-a-page .contact-a-mobile__coverage-icon--orange {
    background: #fff2e6;
    color: #ff7a1a;
  }

  body.contact-a-page .contact-a-mobile__coverage-icon--purple {
    background: #f1ecff;
    color: #6b5df0;
  }

  body.contact-a-page .contact-a-mobile__coverage-icon svg {
    width: 22px;
    height: 22px;
  }

  body.contact-a-page .contact-a-mobile__coverage-grid strong {
    color: var(--color-navy-900);
    font-size: var(--mobile-card-title);
    font-weight: 900;
  }

  body.contact-a-page .contact-a-mobile__coverage-grid p {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--mobile-body);
    line-height: 1.55;
  }

  body.contact-a-page .contact-a-mobile__cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, var(--color-blue-700) 0%, var(--color-navy-900) 100%);
    color: var(--color-white);
    box-shadow: 0 16px 34px rgba(0, 43, 102, 0.2);
  }

  body.contact-a-page .contact-a-mobile__cta-copy {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
  }

  body.contact-a-page .contact-a-mobile__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-white);
    box-shadow: 0 8px 18px rgba(15, 87, 215, 0.12);
  }

  body.contact-a-page .contact-a-mobile__cta-icon svg {
    width: 18px;
    height: 18px;
  }

  body.contact-a-page .contact-a-mobile__cta-copy strong {
    display: block;
    color: var(--color-white);
    font-size: var(--mobile-card-title);
    line-height: 1.3;
    font-weight: 900;
  }

  body.contact-a-page .contact-a-mobile__cta-copy p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--mobile-body);
    line-height: 1.55;
  }

  body.contact-a-page .contact-a-mobile__cta .btn {
    min-height: var(--btn-height);
    padding-inline: 16px;
    border-radius: var(--radius-md);
    white-space: nowrap;
  }

  body.contact-a-page .contact-hero,
  body.contact-a-page .contact-a-filter-shell,
  body.contact-a-page .contact-a-network,
  body.contact-a-page .contact-a-cta,
  body.contact-a-page .contact-a-hero__stats,
  body.contact-a-page .contact-hotline-card {
    display: none !important;
  }

  body.contact-a-page .contact-a-page {
    padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
  }

  body.contact-a-page .mobile-bottom-nav,
  body.contact-a-page .floating-contact {
    display: none !important;
  }
}

@media (max-width: 480px) {
  body.contact-a-page .contact-a-mobile__hero {
    grid-template-columns: minmax(0, 1fr) 102px;
    min-height: 172px;
    padding: 16px 14px;
  }

  body.contact-a-page .contact-a-mobile__hero-copy h1 {
    font-size: var(--mobile-banner-title);
  }

  body.contact-a-page .contact-a-mobile__hero-subtitle {
    font-size: var(--mobile-banner-subtitle);
  }

  body.contact-a-page .contact-a-mobile__hero-desc {
    max-width: 19em;
    font-size: var(--mobile-meta);
  }

  body.contact-a-page .contact-a-mobile__hero-art {
    min-height: 126px;
  }

  body.contact-a-page .contact-a-mobile__search-form {
    grid-template-columns: 1fr;
  }

  body.contact-a-page .contact-a-mobile__network-grid {
    gap: 10px;
  }

  body.contact-a-page .contact-a-mobile__branch-item {
    grid-template-columns: 30px minmax(0, 1fr) 16px;
    gap: 8px;
    padding: 13px 10px;
  }

  body.contact-a-page .contact-a-mobile__branch-index {
    width: 30px;
    height: 30px;
    font-size: var(--mobile-meta);
  }

  body.contact-a-page .contact-a-mobile__branch-head h3 {
    font-size: var(--mobile-card-title);
  }

  body.contact-a-page .contact-a-mobile__branch-head span {
    height: 20px;
    padding: 0 7px;
    font-size: var(--mobile-meta);
  }

  body.contact-a-page .contact-a-mobile__map-stage {
    min-height: 240px;
  }

  body.contact-a-page .contact-a-mobile__cta {
    grid-template-columns: 1fr;
  }

  body.contact-a-page .contact-a-mobile__cta .btn {
    width: 100%;
  }
}

/* ================================
   100. B-class Mobile Visual Harmonization
   Final override for pages that still carried page-specific mobile shells.
   ================================ */
@media (max-width: 768px) {
  body:is(
    [data-page="support"],
    [data-page="faq"],
    [data-page="faq-detail"],
    [data-page="download"],
    [data-page="download-detail"],
    [data-page="solutions-s"],
    [data-page="solutions-y"],
    [data-page="sitemap"]
  ),
  body.contact-a-page {
    --form-control-height: 42px;
    --btn-height: 42px;
    --btn-height-sm: 34px;
  }

  body:is(
    [data-page="support"],
    [data-page="faq"],
    [data-page="faq-detail"],
    [data-page="download"],
    [data-page="download-detail"],
    [data-page="solutions-s"],
    [data-page="solutions-y"],
    [data-page="sitemap"]
  ),
  body.contact-a-page :is(
    .banner-search .btn,
    .download-center-search .btn,
    .video-portal-search .btn,
    .faq-hub-search .btn,
    .download-hero__cta,
    .download-cta__actions .btn,
    .faq-hub-cta__actions .btn,
    .faq-support-cta__actions .btn,
    .support-mobile-cta__actions .btn,
    .solutions-s-mobile__cta-actions .btn,
    .solutions-y-mobile__cta-actions .btn,
    .contact-a-mobile__cta .btn,
    .service-help-card .btn,
    .service-support-strip .btn,
    .banner-actions .btn,
    .service-action-row .btn
  ) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-height);
    padding-inline: 16px;
    min-width: 0;
    white-space: nowrap;
    line-height: normal;
    font-size: var(--font-body);
    transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  }

  body:is(
    [data-page="support"],
    [data-page="video"],
    [data-page="faq"],
    [data-page="faq-detail"],
    [data-page="download"],
    [data-page="download-detail"],
    [data-page="solutions-s"],
    [data-page="solutions-y"],
    [data-page="sitemap"]
  ),
  body.contact-a-page :is(
    .btn-sm,
    .download-filter-btn,
    .download-tabs button,
    .service-list-head button,
    .faq-feedback__actions .btn,
    .faq-cat-pill,
    .solutions-y-mobile__pills button,
    .solutions-y-mobile__select-row button,
    .contact-a-mobile__switch-map,
    .contact-a-mobile__tabs-scroll button,
    .download-center-pagination a,
    .download-center-pagination span,
    .service-pagination a,
    .service-pagination span
  ) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-height-sm);
    padding-inline: 14px;
    min-width: 0;
    white-space: nowrap;
    line-height: normal;
    font-size: var(--font-small);
    transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  }

  body:is(
    [data-page="support"],
    [data-page="video"],
    [data-page="faq"],
    [data-page="faq-detail"],
    [data-page="download"],
    [data-page="download-detail"],
    [data-page="solutions-s"],
    [data-page="solutions-y"],
    [data-page="sitemap"]
  ) :is(
    .banner-search,
    .download-center-search,
    .video-portal-search,
    .faq-hub-search
  ) {
    height: var(--btn-height);
  }

  body:is(
    [data-page="support"],
    [data-page="video"],
    [data-page="faq"],
    [data-page="faq-detail"],
    [data-page="download"],
    [data-page="download-detail"],
    [data-page="solutions-s"],
    [data-page="solutions-y"],
    [data-page="sitemap"]
  ) :is(
    .banner-search input,
    .download-center-search input,
    .video-portal-search input,
    .faq-hub-search input
  ) {
    height: var(--btn-height);
    min-height: var(--btn-height);
  }

  body:is(
    [data-page="support"],
    [data-page="video"],
    [data-page="faq"],
    [data-page="faq-detail"],
    [data-page="download"],
    [data-page="download-detail"],
    [data-page="solutions-s"],
    [data-page="solutions-y"],
    [data-page="sitemap"]
  ) :is(
    .support-mobile-cta__actions,
    .faq-hub-cta__actions,
    .faq-support-cta__actions,
    .download-center-cta__actions,
    .download-cta__actions,
    .solutions-s-mobile__cta-actions,
    .solutions-y-mobile__cta-actions,
    .faq-feedback__actions,
    .banner-actions
  ) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body.contact-a-page .contact-a-mobile__cta {
    display: grid;
    gap: 12px;
  }

  body:is(
    [data-page="support"],
    [data-page="video"],
    [data-page="faq"],
    [data-page="faq-detail"],
    [data-page="download"],
    [data-page="download-detail"],
    [data-page="solutions-s"],
    [data-page="solutions-y"],
    [data-page="sitemap"]
  ) :is(
    .support-mobile-cta__actions .btn,
    .faq-hub-cta__actions .btn,
    .faq-support-cta__actions .btn,
    .download-center-cta__actions .btn,
    .download-cta__actions .btn,
    .solutions-s-mobile__cta-actions .btn,
    .solutions-y-mobile__cta-actions .btn,
    .faq-feedback__actions .btn,
    .banner-actions .btn
  ) {
    width: 100%;
  }

  body.contact-a-page .contact-a-mobile__cta .btn {
    width: 100%;
  }

  body:is(
    [data-page="support"],
    [data-page="video"],
    [data-page="faq"],
    [data-page="faq-detail"],
    [data-page="download"],
    [data-page="download-detail"],
    [data-page="solutions-s"],
    [data-page="solutions-y"],
    [data-page="sitemap"]
  ) :is(
    .support-mobile-cta__actions .btn,
    .faq-hub-cta__actions .btn,
    .faq-support-cta__actions .btn,
    .download-center-cta__actions .btn,
    .download-cta__actions .btn,
    .solutions-s-mobile__cta-actions .btn,
    .solutions-y-mobile__cta-actions .btn,
    .faq-feedback__actions .btn,
    .banner-actions .btn
  ) {
    min-height: var(--btn-height);
    padding-inline: 16px;
    font-size: var(--font-body);
  }

  body:is(
    [data-page="support"],
    [data-page="video"],
    [data-page="faq"],
    [data-page="faq-detail"],
    [data-page="download"],
    [data-page="download-detail"],
    [data-page="solutions-s"],
    [data-page="solutions-y"],
    [data-page="sitemap"]
  ) :is(
    .page-banner,
    .download-center-hero,
    .video-portal-hero,
    .faq-hub-hero,
    .faq-detail-mobile-hero,
    .solutions-s-mobile__hero,
    .solutions-y-mobile__hero,
    .contact-a-mobile__hero
  ) {
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.18);
  }

  body:is(
    [data-page="support"],
    [data-page="faq"],
    [data-page="faq-detail"],
    [data-page="download"],
    [data-page="download-detail"],
    [data-page="solutions-s"],
    [data-page="solutions-y"],
    [data-page="sitemap"]
  ) .site-footer,
  body:is(
    [data-page="support"],
    [data-page="video"],
    [data-page="faq"],
    [data-page="faq-detail"],
    [data-page="download"],
    [data-page="download-detail"],
    [data-page="solutions-s"],
    [data-page="solutions-y"],
    [data-page="sitemap"]
  ) .floating-contact {
    display: none !important;
  }
}

@media (max-width: 992px) {
  body:not(.nav-open) .site-header .main-nav,
  body:not(.nav-open) body[data-page="home"] .site-header .main-nav {
    display: none !important;
  }
}

/* B-class final mobile overflow clamp.
   Last-write overrides to keep the remaining page-specific mobile shells inside the viewport. */
@media (max-width: 768px) {
  body:is(
    [data-page="support"],
    [data-page="video"],
    [data-page="faq"],
    [data-page="faq-detail"],
    [data-page="download"],
    [data-page="download-detail"],
    [data-page="solutions-s"],
    [data-page="solutions-y"],
    [data-page="sitemap"]
  ) {
    overflow-x: clip;
  }

  body[data-page="support"] .support-mobile-only {
    display: block !important;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body[data-page="support"] .support-mobile-only[style*="display:none"] {
    display: block !important;
  }

  body[data-page="support"] .support-mobile-assurance__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="support"] .support-assurance-item strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body[data-page="support"] .support-assurance-item small {
    white-space: normal;
  }

  body[data-page="support"] .support-download-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-page="support"] .support-video-section .service-video-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-page="support"] .support-video-section .service-video-card {
    min-width: 0;
  }

  body[data-page="video"] .video-latest-list {
    gap: 8px;
  }

  body[data-page="video"] .video-latest-item {
    grid-template-columns: 98px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    gap: 10px 10px;
  }

  body[data-page="video"] .video-latest-thumb {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 98px;
    height: 72px;
  }

  body[data-page="video"] .video-latest-main {
    grid-column: 2;
    grid-row: 1;
  }

  body[data-page="video"] .video-latest-item .btn {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    height: 34px;
    min-width: 72px;
    padding-inline: 12px;
  }

  body[data-page="video"] .video-hot-meta {
    min-width: 0;
  }

  body[data-page="video"] .video-hot-meta span {
    white-space: nowrap;
  }

  body[data-page="video"] .video-portal-cta__actions .btn {
    min-width: 0;
  }

  body[data-page="faq"] .faq-mobile-hub,
  body[data-page="faq"] .faq-mobile-hub .container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body[data-page="faq"] .faq-hub-hero__content {
    max-width: 100%;
    padding-right: 16px;
  }

  body[data-page="faq"] .faq-hub-board {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body[data-page="faq"] .faq-cat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-page="faq"] .faq-cat-pill strong,
  body[data-page="faq"] .faq-cat-pill small {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body[data-page="faq"] .faq-hub-cta {
    grid-template-columns: 1fr;
  }

  body[data-page="faq"] .faq-hub-cta__media {
    display: none;
  }

  body[data-page="faq-detail"] .faq-detail-mobile,
  body[data-page="faq-detail"] .faq-detail-mobile .container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-header__text strong,
  body[data-page="faq-detail"] .faq-detail-mobile-header__text small {
    white-space: normal;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-hero {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-hero__media {
    min-width: 96px;
  }

  body[data-page="faq-detail"] .faq-doc-item {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  body[data-page="faq-detail"] .faq-feedback__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="faq-detail"] .faq-support-cta {
    grid-template-columns: 1fr;
  }

  body[data-page="faq-detail"] .faq-support-cta__media {
    display: none;
  }

  body[data-page="download"] .download-mobile-center,
  body[data-page="download"] .download-mobile-center .container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body[data-page="download"] .download-center-cta {
    grid-template-columns: 1fr;
  }

  body[data-page="download"] .download-center-cta__media {
    display: none;
  }

  body[data-page="download-detail"] .download-detail-mobile,
  body[data-page="download-detail"] .download-detail-mobile .container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body[data-page="download-detail"] .download-cta {
    grid-template-columns: 1fr;
  }

  body[data-page="download-detail"] .download-cta__media {
    display: none;
  }

  body[data-page="solutions-s"] .solutions-s-mobile,
  body[data-page="solutions-s"] .solutions-s-mobile .container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="solutions-s"] .solutions-s-mobile__advantage-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="solutions-s"] .solutions-s-mobile__process-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__process-row article:not(:last-child)::after {
    display: none;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__device-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta {
    grid-template-columns: 1fr;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta-media {
    display: none;
  }

  body[data-page="solutions-y"] .solutions-y-mobile,
  body[data-page="solutions-y"] .solutions-y-mobile .container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__pills {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-page="solutions-y"] .solutions-y-mobile__item {
    min-width: 0;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__cta {
    padding-right: 16px;
    grid-template-columns: 1fr;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__cta-media {
    display: none;
  }

  body[data-page="sitemap"] .page-banner__inner {
    min-height: 220px;
  }

  body[data-page="sitemap"] .banner-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-page="sitemap"] .banner-stat {
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  body[data-page="sitemap"] .banner-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (max-width: 430px) {
  body[data-page="support"] .support-mobile-assurance__grid {
    gap: 8px 6px;
  }

  body[data-page="video"] .video-latest-item {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  body[data-page="video"] .video-latest-thumb {
    width: 92px;
    height: 70px;
  }

  body[data-page="faq"] .faq-cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="faq-detail"] .faq-detail-mobile-hero {
    grid-template-columns: 1fr;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-hero__media {
    display: none;
  }

  body[data-page="faq-detail"] .faq-feedback__actions {
    grid-template-columns: 1fr 1fr;
  }

  body[data-page="download"] .download-center-hero,
  body[data-page="download-detail"] .download-hero {
    grid-template-columns: 1fr;
  }

  body[data-page="download"] .download-center-hero__art,
  body[data-page="download-detail"] .download-hero__file {
    display: none;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero,
  body[data-page="solutions-y"] .solutions-y-mobile__hero {
    min-height: 210px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero-content,
  body[data-page="solutions-y"] .solutions-y-mobile__hero-copy {
    padding-right: 14px;
    max-width: 100%;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__device-grid,
  body[data-page="solutions-s"] .solutions-s-mobile__case-card,
  body[data-page="solutions-y"] .solutions-y-mobile__item {
    grid-template-columns: 1fr;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__case-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta {
    padding-right: 16px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-page="solutions-s"] .solutions-s-mobile__footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  body[data-page="sitemap"] .banner-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* B-class page hard clamp v3.
   Final width and stacking overrides for the remaining mobile shells that still drift past the viewport. */
@media (max-width: 768px) {
  body:is(
    [data-page="support"],
    [data-page="video"],
    [data-page="faq"],
    [data-page="faq-detail"],
    [data-page="download"],
    [data-page="download-detail"],
    [data-page="solutions-s"],
    [data-page="solutions-y"],
    [data-page="sitemap"]
  ) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body:is(
    [data-page="support"],
    [data-page="video"],
    [data-page="faq"],
    [data-page="faq-detail"],
    [data-page="download"],
    [data-page="download-detail"],
    [data-page="solutions-s"],
    [data-page="solutions-y"],
    [data-page="sitemap"]
  ) main,
  body[data-page="sitemap"] main {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: clip;
  }

  body[data-page="support"] .service-page,
  body[data-page="video"] .service-page,
  body[data-page="faq"] .service-page,
  body[data-page="faq-detail"] .service-page,
  body[data-page="download"] .service-page,
  body[data-page="download-detail"] .service-page,
  body[data-page="solutions-s"] .solutions-s-page,
  body[data-page="solutions-y"] .solutions-y-page {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  body[data-page="support"] .container,
  body[data-page="video"] .container,
  body[data-page="faq"] .container,
  body[data-page="faq-detail"] .container,
  body[data-page="download"] .container,
  body[data-page="download-detail"] .container,
  body[data-page="solutions-s"] .container,
  body[data-page="solutions-y"] .container,
  body[data-page="sitemap"] .container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body[data-page="support"] .support-mobile-assurance,
  body[data-page="support"] .support-mobile-services,
  body[data-page="support"] .support-mobile-faq,
  body[data-page="support"] .support-mobile-download,
  body[data-page="support"] .support-video-section,
  body[data-page="support"] .support-mobile-cta,
  body[data-page="video"] .video-mobile-portal,
  body[data-page="faq"] .faq-mobile-hub,
  body[data-page="faq-detail"] .faq-detail-mobile,
  body[data-page="download"] .download-mobile-center,
  body[data-page="download-detail"] .download-detail-mobile,
  body[data-page="solutions-s"] .solutions-s-mobile,
  body[data-page="solutions-y"] .solutions-y-mobile {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  body[data-page="support"] .support-mobile-services__grid {
    grid-template-columns: 1fr;
  }

  body[data-page="support"] .support-mobile-service-card {
    width: 100%;
    grid-template-columns: 42px minmax(0, 1fr) 14px;
  }

  body[data-page="support"] .support-mobile-service-card__body strong,
  body[data-page="support"] .support-mobile-service-card__body small {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body[data-page="support"] .support-mobile-service-card__arrow {
    justify-self: end;
  }

  body[data-page="faq"] .faq-mobile-hub .container,
  body[data-page="faq-detail"] .faq-detail-mobile .container,
  body[data-page="download"] .download-mobile-center .container,
  body[data-page="download-detail"] .download-detail-mobile .container,
  body[data-page="solutions-s"] .solutions-s-mobile .container,
  body[data-page="solutions-y"] .solutions-y-mobile .container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body[data-page="faq"] .faq-hub-hero,
  body[data-page="faq"] .faq-hub-board,
  body[data-page="faq"] .faq-hub-cta,
  body[data-page="faq-detail"] .faq-detail-mobile-hero,
  body[data-page="faq-detail"] .faq-support-cta,
  body[data-page="download"] .download-center-hero,
  body[data-page="download"] .download-center-cta,
  body[data-page="download-detail"] .download-hero,
  body[data-page="download-detail"] .download-cta,
  body[data-page="sitemap"] .page-banner,
  body[data-page="sitemap"] .page-banner__inner,
  body[data-page="sitemap"] .page-shell,
  body[data-page="sitemap"] .placeholder-block {
    width: 100%;
    max-width: 100%;
  }

  body[data-page="faq"] .faq-hub-hero__content {
    max-width: 100%;
  }

  body[data-page="faq"] .faq-cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="faq"] .faq-hub-cta {
    grid-template-columns: 1fr;
  }

  body[data-page="faq"] .faq-hub-cta__media {
    display: none;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-hero {
    grid-template-columns: 1fr;
  }

  body[data-page="faq-detail"] .faq-detail-mobile-hero__media {
    display: none;
  }

  body[data-page="faq-detail"] .faq-feedback__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="faq-detail"] .faq-support-cta {
    grid-template-columns: 1fr;
  }

  body[data-page="faq-detail"] .faq-support-cta__media {
    display: none;
  }

  body[data-page="download"] .download-center-hero,
  body[data-page="download-detail"] .download-hero {
    grid-template-columns: 1fr;
  }

  body[data-page="download"] .download-center-hero__art,
  body[data-page="download-detail"] .download-hero__file,
  body[data-page="download"] .download-center-cta__media,
  body[data-page="download-detail"] .download-cta__media {
    display: none;
  }

  body[data-page="download"] .download-center-cta,
  body[data-page="download-detail"] .download-cta {
    grid-template-columns: 1fr;
  }

  body[data-page="download-detail"] .download-hero__body {
    grid-template-columns: 1fr;
  }

  body[data-page="download-detail"] .download-related-item {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  body[data-page="download-detail"] .download-related-item .btn {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 2px;
  }

  body[data-page="video"] .video-mobile-portal,
  body[data-page="video"] .video-mobile-portal .container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body[data-page="video"] .video-hot-item,
  body[data-page="video"] .video-latest-item {
    grid-template-columns: 1fr;
  }

  body[data-page="video"] .video-hot-thumb,
  body[data-page="video"] .video-latest-thumb {
    width: 100%;
  }

  body[data-page="video"] .video-hot-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  body[data-page="video"] .video-hot-meta span {
    white-space: nowrap;
  }

  body[data-page="video"] .video-hot-badge {
    justify-self: start;
    margin-top: 2px;
  }

  body[data-page="video"] .video-latest-item .btn {
    justify-self: start;
    width: max-content;
    min-width: 72px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero,
  body[data-page="solutions-s"] .solutions-s-mobile__overview,
  body[data-page="solutions-s"] .solutions-s-mobile__advantages,
  body[data-page="solutions-s"] .solutions-s-mobile__process-section,
  body[data-page="solutions-s"] .solutions-s-mobile__device-section,
  body[data-page="solutions-s"] .solutions-s-mobile__case-section,
  body[data-page="solutions-s"] .solutions-s-mobile__cta {
    width: 100%;
    max-width: 100%;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__hero-content {
    max-width: 100%;
    padding-right: 14px;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__kpi,
  body[data-page="solutions-s"] .solutions-s-mobile__advantage-row,
  body[data-page="solutions-s"] .solutions-s-mobile__process-row,
  body[data-page="solutions-s"] .solutions-s-mobile__device-grid,
  body[data-page="solutions-s"] .solutions-s-mobile__case-card,
  body[data-page="solutions-s"] .solutions-s-mobile__footer-main {
    grid-template-columns: 1fr;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__process-row article:not(:last-child)::after {
    display: none;
  }

  body[data-page="solutions-s"] .solutions-s-mobile__cta-media {
    display: none;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__hero,
  body[data-page="solutions-y"] .solutions-y-mobile__panel,
  body[data-page="solutions-y"] .solutions-y-mobile__filters,
  body[data-page="solutions-y"] .solutions-y-mobile__list,
  body[data-page="solutions-y"] .solutions-y-mobile__cta {
    width: 100%;
    max-width: 100%;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__hero-copy {
    max-width: 100%;
    padding-right: 14px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__pills,
  body[data-page="solutions-y"] .solutions-y-mobile__select-row,
  body[data-page="solutions-y"] .solutions-y-mobile__item,
  body[data-page="solutions-y"] .solutions-y-mobile__cta,
  body[data-page="solutions-y"] .solutions-y-mobile__cta-actions {
    grid-template-columns: 1fr;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__item-body {
    padding: 10px 12px 12px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__cta {
    padding-right: 16px;
  }

  body[data-page="solutions-y"] .solutions-y-mobile__cta-media {
    display: none;
  }

  body[data-page="sitemap"] .banner-stats,
  body[data-page="sitemap"] .banner-actions {
    width: 100%;
    max-width: 100%;
  }

  body[data-page="sitemap"] .banner-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="sitemap"] .banner-actions {
    grid-template-columns: 1fr;
  }
}

/* Video mobile final banner and latest layout fix.
   Keep this at the end so it overrides earlier video-specific mobile shells. */
@media (max-width: 768px) {
  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 214px !important;
    margin: 0 0 14px !important;
    padding: 22px 16px 18px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
    align-content: center !important;
    justify-items: start !important;
    background:
      linear-gradient(90deg, rgba(0, 18, 48, 0.94) 0%, rgba(0, 43, 102, 0.76) 54%, rgba(0, 43, 102, 0.14) 100%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png")) center center / cover no-repeat !important;
  }

  body[data-page="video"] .video-mobile-portal--cases-rhythm .video-portal-hero__copy {
    width: min(100%, 286px) !important;
    position: relative;
    z-index: 1;
    min-width: 0;
  }

  body[data-page="video"] .video-portal-hero__art {
    display: none !important;
  }

  body[data-page="video"] .video-latest-list {
    gap: 10px !important;
  }

  body[data-page="video"] .video-latest-item {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 108px !important;
    padding: 10px !important;
  }

  body[data-page="video"] .video-latest-thumb {
    flex: 0 0 96px !important;
    width: 96px !important;
    height: 72px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }

  body[data-page="video"] .video-latest-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  body[data-page="video"] .video-latest-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: grid !important;
    align-content: center !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  body[data-page="video"] .video-latest-main h3,
  body[data-page="video"] .video-latest-main p {
    margin: 0 !important;
  }

  body[data-page="video"] .video-latest-main h3 {
    font-size: 14px !important;
    line-height: 1.3 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-page="video"] .video-latest-main h3 a {
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-page="video"] .video-latest-main p {
    font-size: 12px !important;
    line-height: 1.45 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-page="video"] .video-hot-meta {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }

  body[data-page="video"] .video-hot-meta span {
    white-space: nowrap !important;
  }

  body[data-page="video"] .video-latest-item .btn {
    flex: 0 0 88px !important;
    width: 88px !important;
    min-width: 88px !important;
    height: 44px !important;
    padding-inline: 0 !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 430px) {
  body[data-page="video"] .video-latest-thumb {
    width: 96px !important;
    height: 72px !important;
  }

  body[data-page="video"] .video-latest-item .btn {
    width: 88px !important;
    min-width: 88px !important;
  }
}

/* Video mobile CTA telephone fix.
   Give the CTA copy full width on phones so the hotline button never clips. */
@media (max-width: 768px) {
  body[data-page="video"] .video-portal-cta {
    grid-template-columns: 1fr !important;
  }

  body[data-page="video"] .video-portal-cta__copy {
    grid-column: 1 / -1 !important;
  }

  body[data-page="video"] .video-portal-cta__actions {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }

  body[data-page="video"] .video-portal-cta__actions .btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 44px !important;
    padding-inline: 16px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  body[data-page="video"] .video-portal-cta__actions .btn.btn-accent {
    min-width: 152px !important;
    font-size: 13px !important;
  }

  body[data-page="video"] .video-portal-cta__actions .btn.btn-outline {
    min-width: 0 !important;
    font-size: 13px !important;
  }

  body[data-page="video"] .video-portal-cta__media {
    display: none !important;
  }
}

/* Video latest update final two-row layout.
   Keep the play button off the title line so text can use the full content width. */
@media (max-width: 768px) {
  body[data-page="video"] .video-latest-item {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 8px 12px !important;
    align-items: start !important;
    min-width: 0 !important;
    padding: 10px !important;
  }

  body[data-page="video"] .video-latest-thumb {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    flex: none !important;
    width: 96px !important;
    height: 72px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }

  body[data-page="video"] .video-latest-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  body[data-page="video"] .video-latest-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  body[data-page="video"] .video-latest-main h3 {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  body[data-page="video"] .video-latest-main h3 a {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-page="video"] .video-latest-main p {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  body[data-page="video"] .video-hot-meta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  body[data-page="video"] .video-hot-meta span {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  body[data-page="video"] .video-latest-item .btn {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: center !important;
    width: 88px !important;
    min-width: 88px !important;
    height: 44px !important;
    padding-inline: 0 !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    flex: none !important;
  }
}

/* Touch feedback: keep desktop hover intact, add a light pressed state for coarse pointers. */
@media (hover: none) and (pointer: coarse) {
  :where(
    .btn,
    button,
    .nav-toggle,
    .main-nav a,
    .mobile-bottom-nav a,
    .home-hero__arrow,
    .home-hero__dots button,
    .accordion__button,
    .news-tabs a,
    .product-category-list a,
    .product-tabs a,
    .case-filter-bar a,
    .service-tabs a,
    .faq-cat-pill,
    .download-tabs button,
    .solutions-s-toolbar__tabs button,
    .solutions-y-tabs__nav a,
    [data-support-tab],
    .contact-a-mobile__tabs-scroll button,
    .video-cat-card,
    .video-browse-card,
    .video-hot-item,
    .video-latest-item,
    .news-list-item,
    .news-hot-card,
    .news-feature-card,
    .news-article,
    .case-card,
    .solution-card,
    .product-card,
    .download-card,
    .download-file-card,
    .download-related-item,
    .service-card,
    .service-side-card,
    .service-category-card,
    .service-video-card,
    .home-product-card,
    .home-case-card,
    .home-about-card,
    .home-support-download-item,
    .home-support-video-item,
    .support-download-card,
    .support-video-card
  ) {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
      transform 0.18s ease,
      box-shadow 0.18s ease,
      background-color 0.18s ease,
      color 0.18s ease,
      border-color 0.18s ease;
  }

  :where(
    .btn,
    button,
    .nav-toggle,
    .main-nav a,
    .mobile-bottom-nav a,
    .home-hero__arrow,
    .home-hero__dots button,
    .accordion__button,
    .news-tabs a,
    .product-category-list a,
    .product-tabs a,
    .case-filter-bar a,
    .service-tabs a,
    .faq-cat-pill,
    .download-tabs button,
    .solutions-s-toolbar__tabs button,
    .solutions-y-tabs__nav a,
    [data-support-tab],
    .contact-a-mobile__tabs-scroll button,
    .video-cat-card,
    .video-browse-card,
    .video-hot-item,
    .video-latest-item,
    .news-list-item,
    .news-hot-card,
    .news-feature-card,
    .news-article,
    .case-card,
    .solution-card,
    .product-card,
    .download-card,
    .download-file-card,
    .download-related-item,
    .service-card,
    .service-side-card,
    .service-category-card,
    .service-video-card,
    .home-product-card,
    .home-case-card,
    .home-about-card,
    .home-support-download-item,
    .home-support-video-item,
    .support-download-card,
    .support-video-card
  ):active {
    transform: translateY(1px) scale(0.985) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12) !important;
  }

  :where(
    .btn,
    button,
    .nav-toggle,
    .main-nav a,
    .mobile-bottom-nav a,
    .home-hero__arrow,
    .home-hero__dots button,
    .accordion__button,
    .news-tabs a,
    .product-category-list a,
    .product-tabs a,
    .case-filter-bar a,
    .service-tabs a,
    .faq-cat-pill,
    .download-tabs button,
    .solutions-s-toolbar__tabs button,
    .solutions-y-tabs__nav a,
    [data-support-tab],
    .contact-a-mobile__tabs-scroll button,
    .video-cat-card,
    .video-browse-card,
    .video-hot-item,
    .video-latest-item,
    .news-list-item,
    .news-hot-card,
    .news-feature-card,
    .news-article,
    .case-card,
    .solution-card,
    .product-card,
    .download-card,
    .download-file-card,
    .download-related-item,
    .service-card,
    .service-side-card,
    .service-category-card,
    .service-video-card,
    .home-product-card,
    .home-case-card,
    .home-about-card,
    .home-support-download-item,
    .home-support-video-item,
    .support-download-card,
    .support-video-card
  ):active * {
    transform: none !important;
  }

  /* Specificity guard: keep the pressed state visible even when page-level button styles are more specific. */
  body[data-page] .btn:active,
  body[data-page] button:active,
  body[data-page] .nav-toggle:active,
  body[data-page] .main-nav a:active,
  body[data-page] .mobile-bottom-nav a:active,
  body[data-page] .home-hero__arrow:active,
  body[data-page] .home-hero__dots button:active,
  body[data-page] .accordion__button:active,
  body[data-page] .news-tabs a:active,
  body[data-page] .product-category-list a:active,
  body[data-page] .product-tabs a:active,
  body[data-page] .case-filter-bar a:active,
  body[data-page] .service-tabs a:active,
  body[data-page] .faq-cat-pill:active,
  body[data-page] .download-tabs button:active,
  body[data-page] .solutions-s-toolbar__tabs button:active,
  body[data-page] .solutions-y-tabs__nav a:active,
  body[data-page] [data-support-tab]:active,
  body[data-page] .contact-a-mobile__tabs-scroll button:active,
  body[data-page] .video-cat-card:active,
  body[data-page] .video-browse-card:active,
  body[data-page] .video-hot-item:active,
  body[data-page] .video-latest-item:active,
  body[data-page] .news-list-item:active,
  body[data-page] .news-hot-card:active,
  body[data-page] .news-feature-card:active,
  body[data-page] .news-article:active,
  body[data-page] .case-card:active,
  body[data-page] .solution-card:active,
  body[data-page] .product-card:active,
  body[data-page] .download-card:active,
  body[data-page] .download-file-card:active,
  body[data-page] .download-related-item:active,
  body[data-page] .service-card:active,
  body[data-page] .service-side-card:active,
  body[data-page] .service-category-card:active,
  body[data-page] .service-video-card:active,
  body[data-page] .home-product-card:active,
  body[data-page] .home-case-card:active,
  body[data-page] .home-about-card:active,
  body[data-page] .home-support-download-item:active,
  body[data-page] .home-support-video-item:active,
  body[data-page] .support-download-card:active,
  body[data-page] .support-video-card:active {
    transform: translateY(1px) scale(0.985) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12) !important;
  }

  body[data-page] .video-hot-item:has(a:active),
  body[data-page] .video-latest-item:has(a:active),
  body[data-page] .news-list-item:has(a:active),
  body[data-page] .news-hot-card:has(a:active),
  body[data-page] .news-feature-card:has(a:active),
  body[data-page] .news-article:has(a:active),
  body[data-page] .case-card:has(a:active),
  body[data-page] .solution-card:has(a:active),
  body[data-page] .product-card:has(a:active),
  body[data-page] .download-card:has(a:active),
  body[data-page] .download-file-card:has(a:active),
  body[data-page] .download-related-item:has(a:active),
  body[data-page] .service-card:has(a:active),
  body[data-page] .service-side-card:has(a:active),
  body[data-page] .service-category-card:has(a:active),
  body[data-page] .service-video-card:has(a:active),
  body[data-page] .home-product-card:has(a:active),
  body[data-page] .home-case-card:has(a:active),
  body[data-page] .home-about-card:has(a:active),
  body[data-page] .home-support-download-item:has(a:active),
  body[data-page] .home-support-video-item:has(a:active),
  body[data-page] .support-download-card:has(a:active),
  body[data-page] .support-video-card:has(a:active) {
    transform: translateY(1px) scale(0.985) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12) !important;
  }
}

/* Global mobile chrome standardization.
   Keep every page aligned to the index.html mobile header, drawer, footer, and bottom nav shell. */
@media (max-width: 768px) {
  body[data-page] .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 70 !important;
    display: block !important;
    background: var(--color-white) !important;
    box-shadow: none !important;
  }

  body[data-page] .site-header .topbar {
    position: absolute !important;
    top: 0 !important;
    right: 58px !important;
    z-index: 72 !important;
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    pointer-events: none !important;
  }

  body[data-page] .site-header .topbar__inner,
  body[data-page] .site-header .topbar__contact {
    width: auto !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: flex-end !important;
  }

  body[data-page] .site-header .topbar__contact {
    pointer-events: auto !important;
  }

  body[data-page] .site-header .topbar__contact a:first-child {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #1a57bb !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    pointer-events: auto !important;
    white-space: nowrap !important;
  }

  body[data-page] .site-header .topbar__contact a:first-child::before {
    content: "☎" !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  body[data-page] .site-header .topbar__contact a:not(:first-child),
  body[data-page] .site-header .topbar__links {
    display: none !important;
  }

  body[data-page] .site-header .container {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 16px !important;
  }

  body[data-page] .site-header .navbar,
  body[data-page] .site-header .navbar__inner {
    min-height: 64px !important;
  }

  body[data-page] .site-header .navbar {
    background: var(--color-white) !important;
    box-shadow: 0 8px 24px rgba(5, 30, 76, 0.08) !important;
  }

  body[data-page] .site-header .navbar__inner {
    gap: 8px !important;
    padding-block: 8px !important;
  }

  body[data-page] .site-header .navbar__inner::after {
    content: none !important;
  }

  body[data-page] .site-header .brand {
    gap: 8px !important;
  }

  body[data-page] .site-header .brand__mark {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
  }

  body[data-page] .site-header .brand__text strong {
    font-size: 16px !important;
  }

  body[data-page] .site-header .brand__text small {
    margin-top: 1px !important;
    font-size: 10px !important;
  }

  body[data-page] .site-header .nav-toggle {
    display: inline-grid !important;
    width: 40px !important;
    height: 40px !important;
    margin-left: auto !important;
    padding: 8px !important;
    border: 0 !important;
    background: transparent !important;
  }

  body[data-page] .site-header .nav-toggle span {
    width: 24px !important;
    margin: 3px 0 !important;
    border-radius: 999px;
    background: var(--color-navy-900) !important;
  }

  body[data-page] .site-header .header-actions {
    display: none !important;
  }

  body[data-page] .site-header .main-nav {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: min(82vw, 330px) !important;
    height: 100dvh !important;
    gap: 0 !important;
    padding: 104px 20px 28px !important;
    overflow-y: auto !important;
    border-left: 1px solid var(--color-border) !important;
    background: var(--color-white) !important;
    box-shadow: -18px 0 40px rgba(0, 20, 52, 0.18) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(100%) !important;
    transition: transform 220ms ease, opacity 180ms ease, visibility 180ms ease !important;
    visibility: hidden !important;
    z-index: 90 !important;
    animation: none !important;
  }

  body.nav-open .site-header .main-nav,
  body.nav-open[data-page] .site-header .main-nav {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  body[data-page] .site-header .main-nav a {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 0 8px !important;
    border-bottom: 1px solid var(--color-border) !important;
    color: var(--color-text) !important;
    font-size: var(--text-md) !important;
    background: transparent !important;
    transition: color var(--transition), background-color var(--transition) !important;
  }

  body[data-page] .site-header .main-nav a::after {
    display: none !important;
  }

  body[data-page] .site-header .main-nav a:hover {
    color: var(--color-blue-600) !important;
    background: rgba(0, 70, 184, 0.04) !important;
    transform: none !important;
  }

  body[data-page] .site-header .main-nav a.is-active,
  body[data-page] .site-header .main-nav .current-menu-item > a,
  body[data-page] .site-header .main-nav .current-menu-ancestor > a {
    color: var(--color-blue-700) !important;
    font-weight: 700 !important;
    background: rgba(0, 70, 184, 0.06) !important;
  }

  body[data-page] .site-footer {
    display: block !important;
    margin-top: 12px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: linear-gradient(120deg, #011a45 0%, #022f7e 100%) !important;
    color: rgba(255, 255, 255, 0.82) !important;
  }

  body[data-page] .site-footer a {
    color: rgba(255, 255, 255, 0.82) !important;
  }

  body[data-page] .site-footer .footer-main {
    padding: 18px 0 10px !important;
  }

  body[data-page] .site-footer .footer-main__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 96px !important;
    gap: 14px 12px !important;
    align-items: start !important;
  }

  body[data-page] .site-footer .footer-company h2 {
    margin-bottom: 8px !important;
    font-size: 22px !important;
  }

  body[data-page] .site-footer .footer-company p,
  body[data-page] .site-footer .footer-contact {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  body[data-page] .site-footer .footer-links {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body[data-page] .site-footer .footer-links h3 {
    margin-bottom: 8px !important;
    font-size: 12px !important;
  }

  body[data-page] .site-footer .footer-links a {
    margin-top: 5px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  body[data-page] .site-footer .footer-qrcode {
    display: grid !important;
    justify-items: center !important;
    gap: 6px !important;
    text-align: center !important;
  }

  body[data-page] .site-footer .footer-qrcode img {
    width: 86px !important;
    height: 86px !important;
    margin-bottom: 0 !important;
    border: 3px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 10px !important;
    object-fit: cover !important;
  }

  body[data-page] .site-footer .footer-bottom__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 0 84px !important;
    text-align: center !important;
  }

  body[data-page] .site-footer .footer-bottom nav {
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
  }

  body[data-page] .site-footer .footer-cta {
    display: block !important;
  }

  body[data-page] .floating-contact {
    display: none !important;
  }

  body[data-page] .mobile-bottom-nav--cases,
  body[data-page] .mobile-bottom-nav--support,
  body[data-page] .mobile-bottom-nav--contact,
  body[data-page] .mobile-bottom-nav--news {
    display: none !important;
  }

  body[data-page] .mobile-bottom-nav--main {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 2px !important;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-top: 1px solid rgba(12, 44, 108, 0.1) !important;
    border-radius: 14px 14px 0 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 -8px 26px rgba(5, 30, 76, 0.12) !important;
    z-index: 86 !important;
  }

  body[data-page] .mobile-bottom-nav--main a {
    display: grid !important;
    justify-items: center !important;
    gap: 4px !important;
    min-height: 46px !important;
    color: rgba(14, 39, 88, 0.68) !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  body[data-page] .mobile-bottom-nav--main a.is-active {
    color: #1a57bb !important;
  }

  body[data-page] .mobile-bottom-nav--main svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Mobile design system unification.
   Keep this last so the shared mobile tokens and component rhythm win over page-level overrides. */
@media (max-width: 768px) {
  :root {
    --font-banner-title: var(--mobile-banner-title);
    --font-banner-desc: var(--mobile-banner-subtitle);
    --font-hero-title: var(--mobile-banner-title);
    --font-hero-desc: var(--mobile-banner-subtitle);
    --font-section-title: var(--mobile-section-title);
    --font-section-desc: var(--mobile-body);
    --font-card-title: var(--mobile-card-title);
    --font-card-desc: var(--mobile-body);
    --font-body: var(--mobile-body);
    --font-small: var(--mobile-meta);
    --section-gap: var(--mobile-section-gap);
    --card-gap: 16px;
    --radius-md: var(--mobile-radius-button);
    --radius-lg: var(--mobile-radius-card);
    --shadow-card: var(--mobile-shadow-card);
    --shadow-soft: 0 8px 20px rgba(15, 35, 70, 0.06);
    --btn-height: 40px;
    --btn-height-sm: 34px;
  }

  body[data-page] :is(
    .page-banner,
    .product-banner,
    .detail-hero,
    .case-banner,
    .news-banner,
    .about-banner,
    .service-banner,
    .contact-hero,
    .solution-hero,
    .download-center-hero,
    .download-hero,
    .faq-hub-hero,
    .faq-detail-mobile-hero,
    .video-mobile-portal .video-portal-hero,
    .support-mobile-assurance,
    .contact-a-mobile,
    .after-sale-mobile,
    .solutions-s-mobile__hero,
    .solutions-y-mobile__hero
  ) {
    min-height: 220px;
    overflow: hidden;
  }

  body[data-page] :is(
    .page-banner__inner,
    .product-banner__inner,
    .detail-hero__inner,
    .case-banner__inner,
    .news-banner__inner,
    .about-banner__inner,
    .service-banner__inner,
    .contact-hero__inner,
    .solution-hero__inner,
    .download-center-hero__inner,
    .download-hero__inner,
    .faq-hub-hero__content,
    .faq-detail-mobile-hero__content,
    .video-mobile-portal__content,
    .support-mobile-assurance__content,
    .contact-a-mobile__hero,
    .after-sale-mobile__hero,
    .solutions-s-mobile__hero-content,
    .solutions-y-mobile__hero-copy
  ) {
    padding-block: 32px;
  }

  body[data-page] :is(
    .page-banner h1,
    .product-banner h1,
    .detail-hero h1,
    .case-banner h1,
    .news-banner h1,
    .about-banner h1,
    .service-banner h1,
    .contact-hero h1,
    .solution-hero h1,
    .download-center-hero h1,
    .download-hero h1,
    .faq-hub-hero h1,
    .faq-detail-mobile-hero h1,
    .video-mobile-portal h1,
    .video-mobile-portal--cases-rhythm .video-portal-hero__copy h1,
    .support-mobile-assurance h1,
    .contact-a-mobile h1,
    .after-sale-mobile h1,
    .solutions-s-mobile__hero h1,
    .solutions-y-mobile__hero h1
  ) {
    font-size: var(--mobile-banner-title) !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
  }

  body[data-page] :is(
    .page-banner p,
    .product-banner p,
    .detail-hero p,
    .case-banner p,
    .news-banner p,
    .about-banner p,
    .service-banner p,
    .contact-hero p,
    .solution-hero p,
    .download-center-hero p,
    .download-hero p,
    .faq-hub-hero p,
    .faq-detail-mobile-hero p,
    .video-mobile-portal p,
    .video-mobile-portal--cases-rhythm .video-portal-hero__copy p,
    .support-mobile-assurance p,
    .contact-a-mobile p,
    .after-sale-mobile p,
    .solutions-s-mobile__hero p,
    .solutions-y-mobile__hero p
  ) {
    font-size: var(--mobile-banner-subtitle) !important;
    line-height: 1.45 !important;
  }

  body[data-page] :is(
    .section-header,
    .home-section-title,
    .home-news-heading,
    .about-section-head,
    .service-section-head,
    .service-list-head,
    .service-flow-section,
    .footer-cta,
    .footer-company,
    .video-portal-cta__copy,
    .faq-hub-cta,
    .download-center-cta,
    .download-cta,
    .contact-bottom-prompt,
    .contact-phone-cta,
    .product-inquiry__copy,
    .support-mobile-cta,
    .after-sale-mobile__cta,
    .solutions-s-mobile__hero-content,
    .solutions-y-mobile__hero-copy
  ) {
    gap: 8px;
    margin-bottom: 20px;
  }

  body[data-page] :is(
    .section-header h2,
    .home-section-title h2,
    .home-news-heading h2,
    .news-mobile-hot .section-head h2,
    .news-mobile-hot h2,
    .about-section-head h2,
    .service-section-head h2,
    .service-list-head h2,
    .service-flow-section h2,
    .footer-cta h2,
    .footer-company h2,
    .video-portal-cta__copy h2,
    .faq-hub-cta h2,
    .download-center-cta h2,
    .download-cta h2,
    .contact-bottom-prompt h2,
    .contact-phone-cta h2,
    .product-inquiry__copy h2,
    .support-mobile-cta h2,
    .after-sale-mobile__cta h2,
    .solutions-s-mobile__hero-content h2,
    .solutions-y-mobile__hero-copy h2
  ) {
    font-size: var(--mobile-section-title) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
  }

  body[data-page] :is(
    .section-header p,
    .home-section-title p,
    .home-news-heading p,
    .about-section-head p,
    .service-section-head p,
    .service-list-head p,
    .service-flow-section p,
    .footer-cta p,
    .footer-company p,
    .video-portal-cta__copy p,
    .faq-hub-cta p,
    .download-center-cta p,
    .download-cta p,
    .contact-bottom-prompt p,
    .contact-phone-cta p,
    .product-inquiry__copy p,
    .support-mobile-cta p,
    .after-sale-mobile__cta p,
    .solutions-s-mobile__hero-content p,
    .solutions-y-mobile__hero-copy p
  ) {
    font-size: var(--mobile-body) !important;
    line-height: 1.5 !important;
  }

  body[data-page] :is(
    .card,
    .news-list-item,
    .news-hot-card,
    .news-feature-card,
    .news-article,
    .case-card,
    .solution-card,
    .product-card,
    .download-card,
    .download-file-card,
    .download-related-item,
    .service-card,
    .service-side-card,
    .service-category-card,
    .service-video-card,
    .home-product-card,
    .home-case-card,
    .home-solution-card,
    .home-support-download-item,
    .home-support-video-item,
    .support-download-card,
    .support-video-card,
    .video-hot-item,
    .video-latest-item,
    .video-cat-card,
    .video-browse-card,
    .faq-qa
  ) {
    border-radius: var(--mobile-radius-card) !important;
    box-shadow: var(--mobile-shadow-card) !important;
  }

  body[data-page] :is(
    .card__body,
    .news-list-item > div,
    .news-hot-card > div,
    .news-feature-card > article,
    .news-article > article,
    .case-card > div,
    .solution-card > div,
    .product-card > div,
    .download-card > div,
    .download-file-card > div,
    .download-related-item > div,
    .service-card > div,
    .service-side-card > div,
    .service-video-card > div,
    .home-product-card > div,
    .home-case-card > div,
    .home-solution-card > div,
    .home-support-download-item > div,
    .home-support-video-item > div,
    .support-download-card > div,
    .support-video-card > div,
    .video-hot-item > div,
    .video-latest-item > div,
    .video-cat-card > div,
    .video-browse-card > div,
    .faq-qa > div
  ) {
    padding: var(--mobile-card-padding) !important;
  }

  body[data-page] :is(
    .card h3,
    .news-list-item h2,
    .news-list-item h3,
    .news-hot-card h3,
    .news-feature-card h3,
    .news-article h2,
    .case-card h2,
    .solution-card h3,
    .product-card h3,
    .download-card h3,
    .download-file-card h3,
    .download-related-item h3,
    .service-card h3,
    .service-side-card h2,
    .service-video-card strong,
    .home-product-card h3,
    .home-case-card h3,
    .home-solution-card h3,
    .home-support-download-item strong,
    .home-support-video-item strong,
    .support-download-card strong,
    .support-video-card strong,
    .video-hot-item h3,
    .video-latest-main h3,
    .video-browse-card strong,
    .video-cat-card strong,
    .solutions-s-mobile__case-card h3,
    .solutions-y-mobile__item-head h3,
    .faq-qa h3,
    .faq-detail-mobile h2,
    .faq-detail-mobile h3,
    .contact-mobile__branch-item h3,
    .service-category-card h3
  ) {
    font-size: var(--mobile-card-title) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
  }

  body[data-page] :is(
    .card p,
    .news-list-item p,
    .news-hot-card p,
    .news-feature-card p,
    .news-article p,
    .case-card p,
    .solution-card p,
    .product-card p,
    .download-card p,
    .download-file-card p,
    .download-related-item p,
    .service-card p,
    .service-side-card p,
    .service-video-card p,
    .home-product-card p,
    .home-case-card p,
    .home-solution-card p,
    .home-support-download-item p,
    .home-support-video-item p,
    .support-download-card p,
    .support-video-card p,
    .video-hot-item p,
    .video-latest-main p,
    .solutions-s-mobile__case-card p,
    .solutions-y-mobile__item p,
    .faq-qa p,
    .faq-detail-mobile p,
    .contact-mobile__branch-item p,
    .service-category-card p
  ) {
    font-size: var(--mobile-body) !important;
    line-height: 1.5 !important;
  }

  body[data-page] :is(
    .news-meta,
    .news-meta span,
    .video-hot-meta,
    .video-hot-meta span,
    .download-meta,
    .download-file-card small,
    .faq-cat-pill small,
    .service-video-card small,
    .home-support-download-item small,
    .home-support-video-item small,
    .support-download-card small,
    .support-video-card small,
    .home-case-card small,
    .home-product-card small
  ) {
    font-size: var(--mobile-meta) !important;
    line-height: 1.35 !important;
  }

  body[data-page] :is(
    .btn,
    .btn-sm,
    .banner-search button,
    .footer-cta .btn,
    .service-support-strip .btn,
    .contact-phone-cta .btn,
    .contact-bottom-prompt .btn,
    .news-contact-card .btn,
    .service-help-card .btn,
    .download-center-cta .btn,
    .download-cta .btn,
    .faq-hub-cta .btn,
    .faq-support-cta .btn,
    .video-portal-cta__actions .btn,
    .product-inquiry__copy .btn,
    .solutions-s-mobile__cta .btn,
    .solutions-y-mobile__cta .btn,
    .after-sale-mobile__cta .btn,
    .contact-a-mobile__cta .btn
  ) {
    min-height: var(--btn-height) !important;
    padding-inline: 18px !important;
    border-radius: var(--mobile-radius-button) !important;
    font-size: var(--mobile-button) !important;
    line-height: 1 !important;
  }

  body[data-page] :is(
    .news-tag,
    .faq-cat-pill,
    .download-tabs button,
    .solutions-s-toolbar__tabs button,
    .solutions-y-tabs__nav a,
    [data-support-tab],
    .contact-a-mobile__tabs-scroll button,
    .news-tabs a
  ) {
    min-height: 32px !important;
    padding-inline: 14px !important;
    border-radius: 999px !important;
    font-size: var(--mobile-pill) !important;
    line-height: 1 !important;
  }

  body[data-page] :is(
    .footer-cta,
    .faq-hub-cta,
    .download-center-cta,
    .download-cta,
    .video-portal-cta,
    .contact-bottom-prompt,
    .contact-phone-cta,
    .product-inquiry,
    .after-sale-mobile__cta,
    .solutions-s-mobile__cta,
    .solutions-y-mobile__cta,
    .faq-support-cta,
    .news-subscribe,
    .service-support-strip
  ) {
    border-radius: var(--mobile-radius-card) !important;
    box-shadow: var(--mobile-shadow-card) !important;
  }

  body[data-page] :is(
    .footer-cta,
    .faq-hub-cta,
    .download-center-cta,
    .download-cta,
    .video-portal-cta,
    .contact-bottom-prompt,
    .contact-phone-cta,
    .product-inquiry,
    .after-sale-mobile__cta,
    .solutions-s-mobile__cta,
    .solutions-y-mobile__cta,
    .faq-support-cta,
    .news-subscribe,
    .service-support-strip
  ) :is(
    .container,
    .footer-cta__inner,
    .faq-hub-cta__inner,
    .download-center-cta__inner,
    .download-cta__inner,
    .video-portal-cta__inner,
    .contact-bottom-prompt__inner,
    .contact-phone-cta__inner,
    .product-inquiry__inner
  ) {
    padding-block: var(--mobile-card-padding) !important;
  }

  body[data-page] .banner-search input {
    height: 42px !important;
    font-size: var(--mobile-body) !important;
  }
}

/* Support mobile edge alignment polish.
   Keep the hero a little tighter on phones without changing the shared header/nav. */
@media (max-width: 768px) {
  body[data-page="support"] {
    --s2-gutter: 12px;
  }

  body[data-page="support"] .service-banner {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    width: 100% !important;
    min-height: 214px !important;
    margin: 0 0 14px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background:
      linear-gradient(90deg, rgba(0, 18, 48, 0.94) 0%, rgba(0, 43, 102, 0.76) 54%, rgba(0, 43, 102, 0.14) 100%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png")) right center / cover no-repeat !important;
  }

  body[data-page="support"] .service-banner .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
  }

  body[data-page="support"] .service-banner__inner {
    min-height: 0 !important;
    padding: 22px 16px 18px !important;
    gap: 10px !important;
  }

  body[data-page="support"] .service-banner::before {
    background-image: none !important;
  }

  body[data-page="support"] .service-banner h1 {
    margin-bottom: 8px !important;
    color: var(--color-white) !important;
    font-size: 30px !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
    font-weight: 900 !important;
  }

  body[data-page="support"] .service-banner p {
    margin-bottom: 0 !important;
    max-width: 260px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 800 !important;
  }

  body[data-page="support"] .service-banner-points,
  body[data-page="support"] .banner-search {
    display: none !important;
  }
}

@media (max-width: 480px) {
  body[data-page="support"] .service-banner {
    min-height: 206px !important;
    margin-bottom: 12px !important;
  }

  body[data-page="support"] .service-banner__inner {
    padding: 20px 14px 16px !important;
  }

  body[data-page="support"] .service-banner h1 {
    font-size: 28px !important;
  }

  body[data-page="support"] .service-banner p {
    font-size: 12px !important;
  }
}

/* Support mobile final override.
   This block must stay at the very end so support's mobile edge alignment wins over shared container spacing. */
@media (max-width: 768px) {
  body[data-page="support"] {
    overflow-x: hidden !important;
  }

  body[data-page="support"] .site-header,
  body[data-page="support"] .site-header .topbar,
  body[data-page="support"] .site-header .navbar,
  body[data-page="support"] .site-footer,
  body[data-page="support"] .site-footer .footer-main,
  body[data-page="support"] .site-footer .footer-bottom {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body[data-page="support"] .site-header .container,
  body[data-page="support"] .site-header .navbar__inner,
  body[data-page="support"] .site-footer .container,
  body[data-page="support"] .site-footer .footer-main__grid,
  body[data-page="support"] .site-footer .footer-bottom__inner {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body[data-page="support"] .service-page {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    overflow-x: clip !important;
  }

  body[data-page="support"] .container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body[data-page="support"] .service-banner {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  body[data-page="support"] .service-banner .container,
  body[data-page="support"] .service-banner__inner {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  body[data-page="support"] .service-banner__inner {
    padding-block: 22px 18px !important;
  }

  body[data-page="support"] .service-banner::before {
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    background-size: cover !important;
    background-position: right center !important;
  }

  body[data-page="support"] .service-banner h1,
  body[data-page="support"] .service-banner p {
    padding-inline: 16px !important;
  }

  body[data-page="support"] .support-mobile-assurance,
  body[data-page="support"] .support-mobile-services,
  body[data-page="support"] .support-mobile-faq,
  body[data-page="support"] .support-mobile-download,
  body[data-page="support"] .support-video-section,
  body[data-page="support"] .support-mobile-cta {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body[data-page="support"] .support-mobile-assurance > .container,
  body[data-page="support"] .support-mobile-services > .container,
  body[data-page="support"] .support-mobile-faq > .container,
  body[data-page="support"] .support-mobile-download > .container,
  body[data-page="support"] .support-video-section > .container,
  body[data-page="support"] .support-mobile-cta > .container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body[data-page="support"] .support-mobile-assurance__card,
  body[data-page="support"] .support-mobile-services__grid,
  body[data-page="support"] .support-faq-list,
  body[data-page="support"] .support-download-strip,
  body[data-page="support"] .service-video-strip,
  body[data-page="support"] .support-mobile-cta__card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body[data-page="support"] .mobile-bottom-nav--main {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Home page mobile target zone: 375-430px.
   This block is appended last so it wins over earlier home/mobile experiments and only affects the requested phone width. */
@media (min-width: 375px) and (max-width: 430px) {
  body[data-page="home"] {
    overflow-x: hidden;
    background: #ffffff;
  }

  body[data-page="home"] .site-header .topbar {
    display: none !important;
  }

  body[data-page="home"] .site-header .navbar,
  body[data-page="home"] .site-header .navbar__inner {
    min-height: 64px !important;
  }

  body[data-page="home"] .home-main {
    overflow-x: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f5f8fe 52%, #ffffff 100%);
  }

  body[data-page="home"] .home-mobile-only {
    display: inline !important;
  }

  body[data-page="home"] .home-mobile-only[style*="display:none"] {
    display: unset !important;
  }

  body[data-page="home"] .home-product-grid .home-mobile-only {
    display: block !important;
  }

  body[data-page="home"] .home-hero {
    min-height: 382px;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body[data-page="home"] .home-hero__slide {
    background-image:
      linear-gradient(90deg, rgba(0, 20, 52, 0.78) 0%, rgba(0, 43, 102, 0.52) 46%, rgba(0, 43, 102, 0.10) 100%),
      var(--home-hero-image);
    background-position: 0 0, right center;
    background-size: 100% 100%, cover;
  }

  body[data-page="home"] .home-hero__inner {
    min-height: 382px;
    padding: 28px 16px 134px;
  }

  body[data-page="home"] .home-hero__content {
    max-width: 336px;
  }

  body[data-page="home"] .home-hero h1.home-desktop-only,
  body[data-page="home"] .home-hero p.home-desktop-only {
    display: none !important;
  }

  body[data-page="home"] .home-mobile-hero-title {
    display: block !important;
    max-width: 324px;
    margin: 0 0 10px;
    font-size: 30px;
    line-height: 1.22;
    letter-spacing: 0.2px;
  }

  body[data-page="home"] .home-mobile-hero-subtitle {
    display: block !important;
    max-width: 320px;
    margin: 0;
    font-size: 13px;
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.84);
  }

  body[data-page="home"] .home-hero__features {
    display: none !important;
  }

  body[data-page="home"] .home-hero-kpis {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
    padding: 12px 12px 11px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(0, 20, 52, 0.18);
    backdrop-filter: blur(10px);
  }

  body[data-page="home"] .home-hero-kpi {
    display: grid;
    gap: 4px;
    justify-items: center;
    min-width: 0;
    color: rgba(255, 255, 255, 0.98);
    text-align: center;
  }

  body[data-page="home"] .home-hero-kpi strong {
    font-size: 14px;
    line-height: 1.05;
  }

  body[data-page="home"] .home-hero-kpi small {
    font-size: 10px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.76);
    white-space: nowrap;
  }

  body[data-page="home"] .home-hero__controls {
    inset: auto 0 14px;
    display: flex;
    justify-content: center;
    pointer-events: none;
  }

  body[data-page="home"] .home-hero__arrow {
    display: none;
  }

  body[data-page="home"] .home-hero__dots {
    pointer-events: auto;
  }

  body[data-page="home"] .home-mobile-cta {
    display: block !important;
    padding: 0;
    margin-top: 12px;
  }

  body[data-page="home"] .home-mobile-cta .container,
  body[data-page="home"] .home-mobile-kpi .container,
  body[data-page="home"] .home-trust .container,
  body[data-page="home"] .home-service-cta .container {
    width: calc(100% - 32px);
  }

  body[data-page="home"] .home-mobile-cta__card {
    grid-template-columns: minmax(0, 1fr) 116px;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(16, 45, 106, 0.10);
    background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    box-shadow: 0 12px 28px rgba(9, 35, 89, 0.08);
  }

  body[data-page="home"] .home-mobile-cta__title {
    font-size: 16px;
    line-height: 1.25;
    font-weight: 800;
    color: var(--color-text);
  }

  body[data-page="home"] .home-mobile-cta__desc {
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-muted);
  }

  body[data-page="home"] .home-mobile-cta__btn {
    min-height: 34px;
    padding-inline: 14px;
    font-size: 12px;
  }

  body[data-page="home"] .home-mobile-cta__media {
    width: 116px;
    height: 74px;
    border-radius: 12px;
    background-position: center;
  }

  body[data-page="home"] .home-section {
    padding-block: 22px;
  }

  body[data-page="home"] .home-products {
    padding-top: 18px;
  }

  body[data-page="home"] .home-section-title,
  body[data-page="home"] .home-news-heading {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    align-items: end;
    margin-bottom: 14px;
    padding-right: 0;
    text-align: left;
  }

  body[data-page="home"] .home-section-title h2,
  body[data-page="home"] .home-news-heading h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: 0.2px;
  }

  body[data-page="home"] .home-section-title > p,
  body[data-page="home"] .home-news-heading > p {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(14, 39, 88, 0.68);
  }

  body[data-page="home"] .home-section-title > a,
  body[data-page="home"] .home-news-heading > a {
    position: static;
    font-size: 12px;
    font-weight: 700;
    color: #195ac0;
  }

  body[data-page="home"] .home-products .home-section-title > p {
    display: block;
  }

  body[data-page="home"] .home-solutions .home-section-title > p,
  body[data-page="home"] .home-cases .home-section-title > p {
    display: none;
  }

  body[data-page="home"] .home-product-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px;
    overflow: visible !important;
    padding: 0;
  }

  body[data-page="home"] .home-product-card {
    min-height: 0;
    padding: 8px 8px 10px;
    border: 1px solid rgba(16, 45, 106, 0.12);
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(9, 35, 89, 0.08);
    text-align: center;
    background: var(--color-white);
  }

  body[data-page="home"] .home-product-card img {
    width: 100%;
    height: 64px;
    margin-bottom: 8px;
    border-radius: 8px;
    object-fit: contain !important;
    background: #fff;
  }

  body[data-page="home"] .home-product-card h3 {
    margin: 0 0 4px;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 800;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 30px;
  }

  body[data-page="home"] .home-product-card p {
    margin: 0 0 7px;
    min-height: 28px;
    color: rgba(14, 39, 88, 0.62);
    font-size: 10px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  body[data-page="home"] .home-outline-btn {
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #0a6cff;
    background: transparent;
    font-size: 11px;
    font-weight: 800;
    box-shadow: none;
  }

  body[data-page="home"] .home-outline-btn::after {
    content: " >";
  }

  body[data-page="home"] .home-advantage-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-page="home"] .home-advantage-item {
    min-height: 122px;
    padding: 12px 8px 10px;
    border: 1px solid rgba(16, 45, 106, 0.12);
    border-radius: 14px;
    background: var(--color-white);
    box-shadow: 0 10px 22px rgba(9, 35, 89, 0.08);
  }

  body[data-page="home"] .home-advantage-item span {
    width: 34px;
    height: 34px;
    margin-bottom: 8px;
    border-width: 1.5px;
    font-size: 12px;
  }

  body[data-page="home"] .home-advantage-item strong {
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.2;
  }

  body[data-page="home"] .home-advantage-item small {
    font-size: 10px;
    line-height: 1.38;
  }

  body[data-page="home"] .home-solution-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px;
    overflow: visible !important;
    padding: 0;
  }

  body[data-page="home"] .home-solution-list {
    display: none !important;
  }

  body[data-page="home"] .home-solution-card {
    position: relative;
    min-height: 148px;
    padding: 10px 10px 30px;
    border: 1px solid rgba(16, 45, 106, 0.12);
    border-radius: 14px;
    background: var(--color-white);
    box-shadow: 0 10px 22px rgba(9, 35, 89, 0.08);
  }

  body[data-page="home"] .home-solution-card::after {
    content: "查看方案 >";
    position: absolute;
    left: 10px;
    bottom: 10px;
    color: #0a6cff;
    font-size: 10px;
    font-weight: 800;
  }

  body[data-page="home"] .home-solution-card img {
    display: none;
  }

  body[data-page="home"] .home-solution-card span {
    display: grid;
    align-content: start;
    gap: 8px;
    position: static;
    padding: 0;
    color: var(--color-text);
    text-align: left;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 800;
  }

  body[data-page="home"] .home-solution-card span::before {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(10, 108, 255, 0.14);
    border-radius: 10px;
    background: rgba(10, 108, 255, 0.06);
    color: #0a6cff;
    font-size: 12px;
    font-weight: 800;
  }

  body[data-page="home"] .home-solution-card span::after {
    color: rgba(14, 39, 88, 0.64);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.45;
    white-space: pre-line;
  }

  body[data-page="home"] .home-solution-card:nth-child(1) span::before {
    content: "钣";
  }

  body[data-page="home"] .home-solution-card:nth-child(1) span::after {
    content: "高精度切割，提升加工效率";
  }

  body[data-page="home"] .home-solution-card:nth-child(2) span::before {
    content: "工";
  }

  body[data-page="home"] .home-solution-card:nth-child(2) span::after {
    content: "高强度加工，稳定可靠";
  }

  body[data-page="home"] .home-solution-card:nth-child(3) span::before {
    content: "汽";
  }

  body[data-page="home"] .home-solution-card:nth-child(3) span::after {
    content: "精密加工，满足严苛需求";
  }

  body[data-page="home"] .home-solution-card:nth-child(4) span::before {
    content: "钢";
  }

  body[data-page="home"] .home-solution-card:nth-child(4) span::after {
    content: "高效切割，支持定制";
  }

  body[data-page="home"] .home-case-wrap {
    display: none !important;
  }

  body[data-page="home"] .home-case-list {
    display: none !important;
  }

  body[data-page="home"] .home-case-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px;
    overflow: visible !important;
    padding: 0;
  }

  body[data-page="home"] .home-case-card {
    overflow: hidden;
    min-height: 0;
    border: 1px solid rgba(16, 45, 106, 0.12);
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(9, 35, 89, 0.08);
    background: var(--color-white);
  }

  body[data-page="home"] .home-case-card img {
    width: 100%;
    height: 62px;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-case-card > div {
    display: grid;
    gap: 4px;
    padding: 8px 8px 10px;
    min-width: 0;
  }

  body[data-page="home"] .home-case-card h3 {
    margin: 0;
    font-size: 11px;
    line-height: 1.28;
    font-weight: 800;
  }

  body[data-page="home"] .home-case-card p {
    margin: 0;
    color: rgba(14, 39, 88, 0.66);
    font-size: 10px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  body[data-page="home"] .home-case-card > div::after {
    display: inline-flex;
    justify-self: start;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(10, 108, 255, 0.08);
    color: #195ac0;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="home"] .home-case-card:nth-child(1) > div::after {
    content: "工程机械";
  }

  body[data-page="home"] .home-case-card:nth-child(2) > div::after {
    content: "压力容器";
  }

  body[data-page="home"] .home-case-card:nth-child(3) > div::after {
    content: "钢结构";
  }

  body[data-page="home"] .home-case-card:nth-child(4) > div::after {
    content: "钣金加工";
  }

  body[data-page="home"] .home-case-card .home-outline-btn.home-mobile-only {
    display: none !important;
  }

  body[data-page="home"] .home-trust__title::after {
    content: "他们选择兆展数控";
    display: block;
    margin-top: 4px;
    color: rgba(14, 39, 88, 0.5);
    font-size: 11px;
    font-weight: 600;
  }

  body[data-page="home"] .home-service-cta__actions .btn-accent {
    min-width: 128px;
  }

  body[data-page="home"] .home-service-cta__actions .btn-primary {
    border: 1px solid rgba(255, 255, 255, 0.48);
    padding-inline: 14px;
    color: var(--color-white);
    background: transparent;
    box-shadow: none;
  }

  body[data-page="home"] .home-news-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  body[data-page="home"] .home-news-grid > div:nth-child(2) {
    display: none;
  }

  body[data-page="home"] .home-news-list {
    gap: 0;
  }

  body[data-page="home"] .home-news-list article {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 72px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(12, 44, 108, 0.08);
  }

  body[data-page="home"] .home-news-list article:last-child {
    border-bottom: 0;
  }

  body[data-page="home"] .home-news-list img {
    width: 84px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-news-list article > div {
    position: relative;
    display: grid;
    gap: 4px;
    min-width: 0;
    padding-right: 62px;
  }

  body[data-page="home"] .home-news-list article > div > span {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    height: 20px;
    margin: 0;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(0, 70, 184, 0.1);
    color: #1a57bb;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="home"] .home-news-list h3 {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 800;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  body[data-page="home"] .home-news-list p {
    margin: 0;
    color: rgba(14, 39, 88, 0.58);
    font-size: 10px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="home"] .home-trust {
    display: block !important;
    padding: 2px 0 4px;
  }

  body[data-page="home"] .home-trust__title {
    margin: 0 0 10px;
    text-align: center;
    color: rgba(14, 39, 88, 0.82);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 800;
  }

  body[data-page="home"] .home-trust__logos {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 16px;
    justify-content: center;
    align-items: center;
    overflow-x: auto;
    padding: 4px 0 10px;
    scrollbar-width: none;
  }

  body[data-page="home"] .home-trust__logos::-webkit-scrollbar {
    display: none;
  }

  body[data-page="home"] .home-trust__logo {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: rgba(14, 39, 88, 0.28);
    white-space: nowrap;
  }

  body[data-page="home"] .home-service-cta {
    display: block !important;
    padding: 12px 0 0;
  }

  body[data-page="home"] .home-service-cta__card {
    grid-template-columns: minmax(0, 1fr) 114px;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(120deg, #0052cf 0%, #00348f 100%);
  }

  body[data-page="home"] .home-service-cta__body {
    gap: 6px;
  }

  body[data-page="home"] .home-service-cta__body strong {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 800;
  }

  body[data-page="home"] .home-service-cta__body p {
    font-size: 12px;
    line-height: 1.4;
  }

  body[data-page="home"] .home-service-cta__actions {
    gap: 8px;
  }

  body[data-page="home"] .home-service-cta__actions .btn {
    min-height: 34px;
    padding-inline: 12px;
    font-size: 12px;
  }

  body[data-page="home"] .home-service-cta__media {
    width: 114px;
    height: 74px;
    border-radius: 12px;
  }

  body[data-page="home"] .site-footer {
    margin-top: 12px !important;
  }

  body[data-page="home"] .site-footer .footer-main {
    padding: 20px 0 10px !important;
  }

  body[data-page="home"] .site-footer .footer-main__grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body[data-page="home"] .site-footer .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body[data-page="home"] .site-footer .footer-qrcode {
    grid-template-columns: 90px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
  }

  body[data-page="home"] .site-footer .footer-qrcode img {
    width: 90px !important;
    height: 90px !important;
    border-radius: 14px !important;
  }

  body[data-page="home"] .site-footer .footer-bottom__inner {
    padding: 12px 0 calc(84px + env(safe-area-inset-bottom)) !important;
  }
}

@media (min-width: 375px) and (max-width: 414px) {
  body[data-page="home"] .home-main {
    overflow-x: clip;
  }

  body[data-page="home"] .home-mobile-only[style*="display:none"] {
    display: unset !important;
  }

  body[data-page="home"] .home-product-grid .home-mobile-only {
    display: block !important;
  }

  body[data-page="home"] .home-hero {
    min-height: 336px;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body[data-page="home"] .home-hero__slide {
    background-image:
      linear-gradient(90deg, rgba(3, 27, 76, 0.94) 0%, rgba(7, 61, 148, 0.74) 46%, rgba(7, 61, 148, 0.18) 100%),
      var(--home-hero-image);
    background-position: 0 0, 72% center;
    background-size: 100% 100%, cover;
  }

  body[data-page="home"] .home-hero__inner {
    min-height: 336px;
    padding: 24px 14px 74px;
  }

  body[data-page="home"] .home-hero__content {
    max-width: 336px;
  }

  body[data-page="home"] .home-hero h1.home-desktop-only,
  body[data-page="home"] .home-hero p.home-desktop-only,
  body[data-page="home"] .home-products .home-section-title > p {
    display: none !important;
  }

  body[data-page="home"] .home-mobile-hero-title {
    display: block !important;
    max-width: 252px;
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(28px, 7.4vw, 32px);
    line-height: 1.16;
    letter-spacing: 0.01em;
  }

  body[data-page="home"] .home-mobile-hero-subtitle {
    display: block !important;
    max-width: 302px;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    line-height: 1.55;
    letter-spacing: 0.01em;
  }

  body[data-page="home"] .home-hero__features {
    display: none !important;
  }

  body[data-page="home"] .home-hero-kpis {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
  }

  body[data-page="home"] .home-hero-kpi {
    position: relative;
    display: grid;
    gap: 4px;
    justify-items: start;
    min-width: 0;
    padding: 0 7px 0 10px;
    color: rgba(255, 255, 255, 0.98);
    text-align: left;
  }

  body[data-page="home"] .home-hero-kpi:first-child {
    padding-left: 0;
  }

  body[data-page="home"] .home-hero-kpi + .home-hero-kpi::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 1px;
    background: rgba(255, 255, 255, 0.18);
  }

  body[data-page="home"] .home-hero-kpi strong {
    position: relative;
    padding-left: 16px;
    font-size: 14px;
    line-height: 1.05;
    letter-spacing: 0;
  }

  body[data-page="home"] .home-hero-kpi strong::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 11px;
    height: 11px;
    border: 1.2px solid rgba(255, 255, 255, 0.94);
    border-radius: 999px;
    opacity: 0.96;
  }

  body[data-page="home"] .home-hero-kpi small {
    font-size: 10px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.76);
    white-space: nowrap;
  }

  body[data-page="home"] .home-hero__controls {
    inset: auto 0 12px;
    display: flex;
    justify-content: center;
    pointer-events: none;
  }

  body[data-page="home"] .home-hero__arrow {
    display: none !important;
  }

  body[data-page="home"] .home-hero__dots {
    gap: 8px;
    pointer-events: auto;
  }

  body[data-page="home"] .home-hero__dots button {
    width: 8px;
    height: 8px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: none;
    transform: none;
  }

  body[data-page="home"] .home-hero__dots button.is-active {
    width: 18px;
    background: #fff;
  }

  body[data-page="home"] .home-mobile-cta {
    display: block !important;
    position: relative;
    z-index: 2;
    padding: 0;
    margin-top: -24px;
  }

  body[data-page="home"] .home-mobile-cta .container,
  body[data-page="home"] .home-products .container,
  body[data-page="home"] .home-mobile-kpi .container,
  body[data-page="home"] .home-solutions .container {
    width: calc(100% - 20px);
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
  }

  body[data-page="home"] .home-mobile-cta__card {
    grid-template-columns: minmax(0, 1fr) 136px;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(15, 55, 132, 0.1);
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f3f7ff 100%);
    box-shadow: 0 16px 36px rgba(8, 34, 86, 0.12);
  }

  body[data-page="home"] .home-mobile-cta__body {
    display: grid;
    gap: 10px;
    align-content: center;
  }

  body[data-page="home"] .home-mobile-cta__title {
    max-width: 182px;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 800;
    color: #102b61;
  }

  body[data-page="home"] .home-mobile-cta__desc {
    max-width: 176px;
    font-size: 12px;
    line-height: 1.55;
    color: rgba(16, 43, 97, 0.62);
  }

  body[data-page="home"] .home-mobile-cta__btn {
    align-self: start;
    min-height: 40px;
    padding-inline: 18px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 800;
  }

  body[data-page="home"] .home-mobile-cta__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 98px;
    margin: 0;
    border-radius: 16px;
    background: linear-gradient(180deg, #eef4ff 0%, #ffffff 100%);
    overflow: hidden;
  }

  body[data-page="home"] .home-mobile-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  body[data-page="home"] .home-section {
    padding-block: 18px;
  }

  body[data-page="home"] .home-products {
    padding-top: 14px;
  }

  body[data-page="home"] .home-section-title {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    align-items: center;
    margin-bottom: 12px;
    padding-right: 0;
    text-align: left;
  }

  body[data-page="home"] .home-section-title h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: 0.01em;
  }

  body[data-page="home"] .home-section-title > a {
    position: static;
    font-size: 12px;
    font-weight: 700;
    color: #195ac0;
  }

  body[data-page="home"] .home-product-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-auto-rows: auto !important;
    gap: 8px;
    overflow: visible !important;
    overflow-x: visible !important;
    overscroll-behavior-inline: auto !important;
    scroll-snap-type: none !important;
    scrollbar-width: auto;
    padding: 0;
  }

  body[data-page="home"] .home-product-grid::-webkit-scrollbar {
    display: none;
  }

  body[data-page="home"] .home-product-card {
    display: grid;
    align-content: start;
    min-height: 0;
    min-width: 0;
    padding: 7px 6px 8px;
    border: 1px solid rgba(16, 45, 106, 0.1);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(9, 35, 89, 0.07);
    scroll-snap-align: unset;
    text-align: center;
  }

  body[data-page="home"] .home-product-card img {
    width: 100%;
    height: 60px;
    margin-bottom: 6px;
    border-radius: 8px;
    object-fit: cover !important;
    background: #fff;
  }

  body[data-page="home"] .home-product-card h3 {
    margin: 0 0 3px;
    font-size: 10.5px;
    line-height: 1.28;
    font-weight: 800;
    display: -webkit-box;
    min-height: 26px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="home"] .home-product-card p {
    margin: 0 0 5px;
    min-height: 12px;
    color: rgba(14, 39, 88, 0.62);
    font-size: 9px;
    line-height: 1.25;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  body[data-page="home"] .home-outline-btn {
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #0a6cff;
    background: transparent;
    font-size: 10px;
    font-weight: 800;
    box-shadow: none;
  }

  body[data-page="home"] .home-outline-btn::after {
    content: " >";
  }

  body[data-page="home"] .home-mobile-kpi {
    display: block !important;
    padding: 2px 0 0;
  }

  body[data-page="home"] .home-mobile-kpi__strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding: 14px 10px;
    border-radius: 18px;
    background: linear-gradient(135deg, #003fb5 0%, #0a6cff 100%);
    box-shadow: 0 14px 32px rgba(9, 35, 89, 0.14);
    color: #fff;
  }

  body[data-page="home"] .home-mobile-kpi__item {
    position: relative;
    display: grid;
    gap: 4px;
    justify-items: center;
    text-align: center;
    min-width: 0;
  }

  body[data-page="home"] .home-mobile-kpi__item + .home-mobile-kpi__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: rgba(255, 255, 255, 0.18);
  }

  body[data-page="home"] .home-mobile-kpi__item strong {
    font-size: 15px;
    line-height: 1.08;
    letter-spacing: 0.01em;
  }

  body[data-page="home"] .home-mobile-kpi__item small {
    font-size: 10px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
  }

  body[data-page="home"] .home-service-cta {
    display: block !important;
    padding: 8px 0 2px;
  }

  body[data-page="home"] .home-service-cta .container {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: var(--m2-gutter);
  }

  body[data-page="home"] .home-service-cta__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 8px;
    align-items: center;
    padding: 12px 10px 10px 12px;
    border-radius: 18px;
    background: linear-gradient(135deg, #0048bf 0%, #0a6cff 56%, #0a52d5 100%);
    box-shadow: 0 12px 26px rgba(9, 35, 89, 0.12);
    overflow: hidden;
    color: #fff;
  }

  body[data-page="home"] .home-service-cta__card::before {
    content: "";
    position: absolute;
    right: 96px;
    top: -34px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    opacity: 0.9;
  }

  body[data-page="home"] .home-service-cta__card::after {
    content: "";
    position: absolute;
    right: 72px;
    top: -24px;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    opacity: 0.9;
  }

  body[data-page="home"] .home-service-cta__body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 6px;
    min-width: 0;
  }

  body[data-page="home"] .home-service-cta__body strong {
    max-width: 148px;
    font-size: 15px;
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: 0.01em;
  }

  body[data-page="home"] .home-service-cta__body p {
    margin: 0;
    font-size: 11px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.84);
  }

  body[data-page="home"] .home-service-cta__actions {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
  }

  body[data-page="home"] .home-service-cta__actions .btn {
    min-height: 32px;
    padding-inline: 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="home"] .home-service-cta__actions .btn-accent {
    background: #ff7a1a;
    box-shadow: 0 12px 24px rgba(255, 122, 26, 0.26);
  }

  body[data-page="home"] .home-service-cta__actions .btn-primary {
    border: 1px solid rgba(255, 255, 255, 0.58);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
  }

  body[data-page="home"] .home-service-cta__media {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 64px;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 18px rgba(0, 20, 52, 0.18);
  }

  body[data-page="home"] .home-service-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 68% center;
  }
}

@media (max-width: 992px) {
  body[data-page] .site-footer,
  body.contact-a-page .site-footer {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body[data-page] .site-footer *,
  body.contact-a-page .site-footer * {
    display: none !important;
  }
}

@media (max-width: 768px) {
  body[data-page] .site-footer,
  body.contact-a-page .site-footer {
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    background: linear-gradient(120deg, #011a45 0%, #022f7e 100%) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body[data-page] .site-footer *,
  body.contact-a-page .site-footer * {
    display: revert !important;
  }

  body[data-page] .site-footer .footer-main,
  body.contact-a-page .site-footer .footer-main {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 18px 0 10px !important;
  }

  body[data-page] .site-footer .container,
  body.contact-a-page .site-footer .container {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 16px !important;
    box-sizing: border-box !important;
  }

  body[data-page] .site-footer .footer-main__grid,
  body.contact-a-page .site-footer .footer-main__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
  }

  body[data-page] .site-footer .footer-company h2,
  body.contact-a-page .site-footer .footer-company h2 {
    margin-bottom: 8px !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  body[data-page] .site-footer .footer-company p,
  body[data-page] .site-footer .footer-contact,
  body.contact-a-page .site-footer .footer-company p,
  body.contact-a-page .site-footer .footer-contact {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  body[data-page] .site-footer .footer-contact,
  body.contact-a-page .site-footer .footer-contact {
    margin-top: 12px !important;
    gap: 4px !important;
  }

  body[data-page] .site-footer .footer-links,
  body.contact-a-page .site-footer .footer-links {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 14px !important;
  }

  body[data-page] .site-footer .footer-links > div,
  body.contact-a-page .site-footer .footer-links > div {
    min-width: 0 !important;
  }

  body[data-page] .site-footer .footer-links h3,
  body.contact-a-page .site-footer .footer-links h3 {
    margin-bottom: 8px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  body[data-page] .site-footer .footer-links a,
  body.contact-a-page .site-footer .footer-links a {
    margin-top: 6px !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  body[data-page] .site-footer .footer-qrcode,
  body.contact-a-page .site-footer .footer-qrcode {
    display: grid !important;
    justify-items: center !important;
    gap: 8px !important;
    text-align: center !important;
  }

  body[data-page] .site-footer .footer-qrcode img,
  body.contact-a-page .site-footer .footer-qrcode img {
    width: 92px !important;
    height: 92px !important;
    margin-bottom: 0 !important;
    border-width: 4px !important;
    object-fit: cover !important;
  }

  body[data-page] .site-footer .footer-qrcode h3,
  body[data-page] .site-footer .footer-qrcode p,
  body.contact-a-page .site-footer .footer-qrcode h3,
  body.contact-a-page .site-footer .footer-qrcode p {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  body[data-page] .site-footer .social-links,
  body.contact-a-page .site-footer .social-links {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  body[data-page] .site-footer .social-links a,
  body.contact-a-page .site-footer .social-links a {
    width: var(--icon-social-btn) !important;
    height: var(--icon-social-btn) !important;
  }

  body[data-page] .site-footer .footer-bottom,
  body.contact-a-page .site-footer .footer-bottom {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding-bottom: 0 !important;
  }

  body[data-page] .site-footer .footer-bottom__inner,
  body.contact-a-page .site-footer .footer-bottom__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: auto !important;
    padding-block: 12px 18px !important;
    text-align: center !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body[data-page] .site-footer .footer-bottom nav,
  body.contact-a-page .site-footer .footer-bottom nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  body[data-page] .mobile-bottom-nav--main,
  body.contact-a-page .mobile-bottom-nav--main {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 768px) {
  body[data-page="contact"] .site-footer {
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: linear-gradient(120deg, #011a45 0%, #022f7e 100%) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body[data-page="contact"] .site-footer * {
    display: revert !important;
  }

  body[data-page="contact"] .site-footer .footer-main {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 14px 0 8px !important;
  }

  body[data-page="contact"] .site-footer .container {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 16px !important;
    box-sizing: border-box !important;
  }

  body[data-page="contact"] .site-footer .footer-main__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
  }

  body[data-page="contact"] .site-footer .footer-company h2 {
    margin-bottom: 6px !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  body[data-page="contact"] .site-footer .footer-company p,
  body[data-page="contact"] .site-footer .footer-links,
  body[data-page="contact"] .site-footer .footer-qrcode,
  body[data-page="contact"] .site-footer .social-links,
  body[data-page="contact"] .site-footer .footer-bottom nav {
    display: none !important;
  }

  body[data-page="contact"] .site-footer .footer-contact {
    margin-top: 8px !important;
    gap: 3px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  body[data-page="contact"] .site-footer .footer-contact li:nth-child(n + 4) {
    display: none !important;
  }

  body[data-page="contact"] .site-footer .footer-bottom {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding-bottom: 0 !important;
  }

  body[data-page="contact"] .site-footer .footer-bottom__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: auto !important;
    padding-block: 10px 14px !important;
    text-align: center !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body[data-page="contact"] .site-footer .footer-bottom p {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  body[data-page="contact"] .mobile-bottom-nav--main {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
}

/* Shared mobile content-width system.
   Keep all pages on a single 100% width rhythm with 16px horizontal gutters. */
@media (max-width: 768px) {
  body[data-page][data-page] main,
  body[data-page][data-page] section {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }

  body[data-page][data-page] .container,
  body[data-page][data-page] .container--wide {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  body[data-page][data-page] main > .container,
  body[data-page][data-page] main > .container--wide,
  body[data-page][data-page] section > .container,
  body[data-page][data-page] section > .container--wide {
    width: 100% !important;
    max-width: none !important;
  }

  body[data-page][data-page] .page-banner,
  body[data-page][data-page] .banner,
  body[data-page][data-page] .news-banner,
  body[data-page][data-page] .service-banner,
  body[data-page][data-page] .news-list-section,
  body[data-page][data-page] .news-mobile-categories,
  body[data-page][data-page] .news-mobile-hot,
  body[data-page][data-page] .news-mobile-cta,
  body[data-page][data-page] .home-mobile-cta,
  body[data-page][data-page] .home-mobile-kpi,
  body[data-page][data-page] .home-trust,
  body[data-page][data-page] .home-service-cta,
  body[data-page][data-page] .contact-mobile,
  body[data-page][data-page] .support-mobile-cta,
  body[data-page][data-page] .support-mobile-download,
  body[data-page][data-page] .support-video-section {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 375px) and (max-width: 430px) {
  body[data-page="home"] .home-product-grid .home-mobile-only[style*="display:none"] {
    display: block !important;
  }

  body[data-page="home"] .home-product-grid,
  body[data-page="home"] .home-solution-grid,
  body[data-page="home"] .home-case-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-auto-rows: auto !important;
    gap: 6px !important;
    width: 100%;
    min-width: 0;
    padding: 0;
    overflow: visible !important;
    overflow-x: visible !important;
    overscroll-behavior-inline: auto !important;
    scroll-snap-type: none !important;
  }

  body[data-page="home"] .home-product-grid::-webkit-scrollbar,
  body[data-page="home"] .home-solution-grid::-webkit-scrollbar,
  body[data-page="home"] .home-case-grid::-webkit-scrollbar {
    display: none;
  }

  body[data-page="home"] .home-product-grid > :nth-child(n + 5),
  body[data-page="home"] .home-solution-grid > :nth-child(n + 5),
  body[data-page="home"] .home-case-grid > :nth-child(n + 5) {
    display: none !important;
  }

  body[data-page="home"] .home-product-card,
  body[data-page="home"] .home-solution-card,
  body[data-page="home"] .home-case-card {
    min-width: 0;
    scroll-snap-align: unset !important;
  }

  body[data-page="home"] .home-product-card {
    display: grid;
    gap: 4px;
    align-content: start;
    padding: 6px 5px 7px;
    border-radius: 12px;
    text-align: center;
  }

  body[data-page="home"] .home-product-card img {
    width: 100%;
    height: 48px;
    margin-bottom: 0;
    border-radius: 8px;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-product-card h3 {
    margin: 0;
    min-height: 24px;
    font-size: 10px;
    line-height: 1.2;
    -webkit-line-clamp: 2;
  }

  body[data-page="home"] .home-product-card p {
    display: none !important;
  }

  body[data-page="home"] .home-product-card .home-outline-btn {
    font-size: 9.5px;
    line-height: 1.15;
  }

  body[data-page="home"] .home-solution-list,
  body[data-page="home"] .home-case-list {
    display: none !important;
  }

  body[data-page="home"] .home-solution-card {
    display: grid;
    gap: 5px;
    align-content: start;
    min-height: 0;
    padding: 6px 5px 8px;
    border-radius: 12px;
    text-align: center;
  }

  body[data-page="home"] .home-solution-card::after,
  body[data-page="home"] .home-solution-card span::after {
    display: none !important;
    content: none !important;
  }

  body[data-page="home"] .home-solution-card img {
    display: block !important;
    width: 100%;
    height: 48px;
    border-radius: 8px;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-solution-card span {
    display: -webkit-box;
    gap: 0;
    padding: 0;
    min-height: 24px;
    color: var(--color-text);
    text-align: center;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 800;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="home"] .home-solution-card span::before {
    display: none !important;
    content: none !important;
  }

  body[data-page="home"] .home-solution-card > *:not(img):not(span) {
    display: none !important;
  }

  body[data-page="home"] .home-case-wrap {
    display: block !important;
    overflow: visible !important;
    padding: 0;
  }

  body[data-page="home"] .home-case-wrap > :not(.home-case-grid),
  body[data-page="home"] .home-case-wrap .home-slider-btn {
    display: none !important;
  }

  body[data-page="home"] .home-case-card {
    overflow: hidden;
    min-height: 0;
    border-radius: 12px;
  }

  body[data-page="home"] .home-case-card img {
    width: 100%;
    height: 48px;
    border-radius: 0;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-case-card > div {
    display: grid;
    gap: 0;
    padding: 6px 5px 8px;
  }

  body[data-page="home"] .home-case-card h3 {
    margin: 0;
    min-height: 24px;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 800;
    text-align: center;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="home"] .home-case-card > div > *:not(h3) {
    display: none !important;
  }

  body[data-page="home"] .home-case-card p,
  body[data-page="home"] .home-case-card > div::after,
  body[data-page="home"] .home-case-card .home-outline-btn.home-mobile-only {
    display: none !important;
    content: none !important;
  }
}

@media (max-width: 992px) {
  body[data-page="home"] .home-solutions .home-solution-list,
  body[data-page="home"] .home-cases .home-case-list {
    display: none !important;
  }

  body[data-page="home"] .home-solutions .home-solution-grid,
  body[data-page="home"] .home-cases .home-case-wrap,
  body[data-page="home"] .home-cases .home-case-grid {
    display: grid !important;
    overflow: visible !important;
  }

  body[data-page="home"] .home-cases .home-case-wrap {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }

  body[data-page="home"] .home-solutions .home-solution-grid,
  body[data-page="home"] .home-cases .home-case-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-auto-rows: auto !important;
    gap: 6px !important;
    width: 100%;
    min-width: 0;
    padding: 0;
    overflow-x: visible !important;
    overscroll-behavior-inline: auto !important;
    scroll-snap-type: none !important;
  }

  body[data-page="home"] .home-solutions .home-solution-grid > :nth-child(n + 5),
  body[data-page="home"] .home-cases .home-case-grid > :nth-child(n + 5) {
    display: none !important;
  }

  body[data-page="home"] .home-case-wrap > :not(.home-case-grid),
  body[data-page="home"] .home-case-wrap .home-slider-btn,
  body[data-page="home"] .home-solution-grid::-webkit-scrollbar,
  body[data-page="home"] .home-case-grid::-webkit-scrollbar {
    display: none !important;
  }

  body[data-page="home"] .home-solutions .home-solution-card,
  body[data-page="home"] .home-cases .home-case-card {
    display: grid;
    align-content: start;
    min-width: 0;
    min-height: 0;
    padding: 6px 5px 8px;
    border-radius: 12px;
    text-align: center;
    scroll-snap-align: unset !important;
  }

  body[data-page="home"] .home-solutions .home-solution-card img,
  body[data-page="home"] .home-cases .home-case-card img {
    display: block !important;
    width: 100%;
    height: 48px;
    margin: 0;
    border-radius: 8px;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-solutions .home-solution-card > *:not(img):not(span),
  body[data-page="home"] .home-cases .home-case-card > div > *:not(h3),
  body[data-page="home"] .home-cases .home-case-card .home-outline-btn.home-mobile-only,
  body[data-page="home"] .home-cases .home-case-card > div::after,
  body[data-page="home"] .home-cases .home-case-card p {
    display: none !important;
    content: none !important;
  }

  body[data-page="home"] .home-solutions .home-solution-card::after,
  body[data-page="home"] .home-solutions .home-solution-card span::before,
  body[data-page="home"] .home-solutions .home-solution-card span::after {
    display: none !important;
    content: none !important;
  }

  body[data-page="home"] .home-solutions .home-solution-card span,
  body[data-page="home"] .home-cases .home-case-card h3 {
    display: -webkit-box;
    margin: 0;
    min-height: 24px;
    padding: 0;
    color: var(--color-text);
    text-align: center;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 800;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="home"] .home-cases .home-case-card > div {
    display: grid;
    gap: 0;
    padding: 6px 5px 8px;
  }
}

@media (max-width: 992px) {
  body[data-page="home"] .home-solutions .home-solution-grid {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list,
  body[data-page="home"] .home-solutions .home-solution-list.home-mobile-only[style*="display:none"] {
    display: grid !important;
    gap: 12px;
    margin-top: 12px;
    padding: 0;
  }

  body[data-page="home"] .home-solutions .home-section-title {
    margin-bottom: 0;
  }
}

@media (max-width: 992px) {
  body[data-page="home"] .home-cases .home-case-wrap,
  body[data-page="home"] .home-cases .home-case-grid {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body[data-page="home"] .home-cases .home-case-list,
  body[data-page="home"] .home-cases .home-case-list.home-mobile-only[style*="display:none"] {
    display: grid !important;
    gap: 12px;
    margin-top: 12px;
    padding: 0;
  }

  body[data-page="home"] .home-cases .home-section-title {
    margin-bottom: 0;
  }

  body[data-page="home"] .home-cases .home-case-list article {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(12, 44, 108, 0.08);
  }

  body[data-page="home"] .home-cases .home-case-list article:last-child {
    border-bottom: 0;
  }

  body[data-page="home"] .home-cases .home-case-list img {
    width: 96px;
    height: 72px;
    border-radius: 12px;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-cases .home-case-list article > div {
    position: relative;
    display: grid;
    gap: 6px;
    min-width: 0;
    padding-right: 64px;
  }

  body[data-page="home"] .home-cases .home-case-list span {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(0, 70, 184, 0.10);
    color: #003a8c;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    margin: 0;
  }

  body[data-page="home"] .home-cases .home-case-list h3 {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 900;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="home"] .home-cases .home-case-list p {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: rgba(14, 39, 88, 0.66);
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 992px) {
  body[data-page="home"] .home-service-cta {
    display: block !important;
    padding: 8px 0 2px;
  }

  body[data-page="home"] .home-service-cta .container {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: var(--m2-gutter);
  }

  body[data-page="home"] .home-service-cta__card {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 10px;
    align-items: end;
    padding: 12px 10px 12px 12px;
    border-radius: 18px;
    overflow: hidden;
  }

  body[data-page="home"] .home-service-cta__card::before,
  body[data-page="home"] .home-service-cta__card::after {
    pointer-events: none;
    z-index: 0;
  }

  body[data-page="home"] .home-service-cta__card::before {
    right: 78px;
    top: -26px;
    width: 152px;
    height: 152px;
  }

  body[data-page="home"] .home-service-cta__card::after {
    right: 58px;
    top: -16px;
    width: 124px;
    height: 124px;
  }

  body[data-page="home"] .home-service-cta__body {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 6px;
    min-width: 0;
    padding-right: 2px;
  }

  body[data-page="home"] .home-service-cta__body strong,
  body[data-page="home"] .home-service-cta__body p {
    max-width: none;
  }

  body[data-page="home"] .home-service-cta__actions {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    max-width: 100%;
  }

  body[data-page="home"] .home-service-cta__actions .btn {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 32px;
    padding-inline: 12px;
    white-space: nowrap;
  }

  body[data-page="home"] .home-service-cta__media {
    position: relative;
    z-index: 1;
    justify-self: end;
    align-self: end;
    width: 72px;
    height: 56px;
    margin: 0 0 2px;
    border-radius: 12px;
    pointer-events: none;
  }

  body[data-page="home"] .home-service-cta__media img {
    object-position: 72% center;
  }
}

@media (max-width: 992px) {
  body[data-page="home"] .home-solutions .home-solution-list,
  body[data-page="home"] .home-solutions .home-solution-list.home-mobile-only[style*="display:none"],
  body[data-page="home"] .home-news .home-news-list {
    gap: 12px !important;
    margin-top: 12px;
    padding: 0;
  }

  body[data-page="home"] .home-solutions .home-solution-list article,
  body[data-page="home"] .home-news .home-news-list article {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 0;
    padding: 10px 0;
    border-bottom: 1px solid rgba(12, 44, 108, 0.08);
  }

  body[data-page="home"] .home-solutions .home-solution-list article:last-child,
  body[data-page="home"] .home-news .home-news-list article:last-child {
    border-bottom: 0;
  }

  body[data-page="home"] .home-solutions .home-solution-list img,
  body[data-page="home"] .home-news .home-news-list img {
    width: 96px;
    height: 72px;
    border-radius: 12px;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list article > div,
  body[data-page="home"] .home-news .home-news-list article > div {
    position: relative;
    display: grid;
    gap: 6px;
    min-width: 0;
    padding-right: 64px;
  }

  body[data-page="home"] .home-solutions .home-solution-list span,
  body[data-page="home"] .home-news .home-news-list article > div > span {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(0, 70, 184, 0.10);
    color: #003a8c;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    margin: 0;
  }

  body[data-page="home"] .home-solutions .home-solution-list h3,
  body[data-page="home"] .home-news .home-news-list h3 {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 900;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="home"] .home-solutions .home-solution-list p,
  body[data-page="home"] .home-news .home-news-list p {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: rgba(14, 39, 88, 0.66);
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 992px) {
  body[data-page="home"] .home-product-card h3 {
    min-height: 32px;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 900;
  }
}

/* About mobile final override: real DOM classes only, written last so it wins. */
@media (max-width: 768px) {
  body[data-page="about"] .about-v3-team-rail,
  body[data-page="about"] .about-v3-honor-rail {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: start !important;
    overflow: visible !important;
  }

  body[data-page="about"] .about-v3-team-rail article,
  body[data-page="about"] .about-v3-honor-rail article {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  body[data-page="about"] .about-v3-team-rail article:nth-child(n + 5),
  body[data-page="about"] .about-v3-honor-rail article:nth-child(n + 5) {
    display: none !important;
  }

  body[data-page="about"] .about-v3-team-rail img {
    width: 100% !important;
    height: 58px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    display: block !important;
  }

  body[data-page="about"] .about-v3-honor-rail img {
    width: 100% !important;
    height: 70px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    display: block !important;
    background: #fff !important;
  }

  body[data-page="about"] .about-v3-honor-rail span {
    display: -webkit-box !important;
    margin: 0 !important;
    padding: 6px 2px 0 !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
    color: #4a5a74 !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: 2.5em;
  }
}

/* Products mobile final override: match the reference list-container rhythm. */
@media (max-width: 768px) {
  body[data-page="products"] .product-page {
    overflow-x: hidden !important;
  }

  body[data-page="products"] .product-list-main {
    min-width: 0 !important;
  }

  body[data-page="products"] .product-mobile-search__form {
    grid-template-columns: minmax(0, 1fr) 92px !important;
  }

  body[data-page="products"] .product-mobile-filterbar__row {
    gap: 8px !important;
  }

  body[data-page="products"] .product-grid {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid rgba(14, 39, 88, 0.10) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 28px rgba(0, 32, 84, 0.10) !important;
    overflow: hidden !important;
  }

  body[data-page="products"] .product-grid > .zz-product-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 118px minmax(0, 1fr) !important;
    grid-template-areas:
      "image title"
      "image desc"
      "image meta"
      "image link" !important;
    gap: 4px 12px !important;
    align-items: start !important;
    align-content: start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(14, 39, 88, 0.08) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-page="products"] .product-grid > .zz-product-card:last-child {
    border-bottom: 0 !important;
  }

  body[data-page="products"] .product-grid > .zz-product-card > img {
    grid-area: image !important;
    width: 118px !important;
    height: 96px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  body[data-page="products"] .product-grid > .zz-product-card > h3 {
    grid-area: title !important;
    margin: 0 !important;
    padding-right: 52px !important;
    font-size: 14px !important;
    line-height: 1.24 !important;
    font-weight: 950 !important;
    color: #0e274f !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-page="products"] .product-grid > .zz-product-card > p {
    grid-area: desc !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: rgba(14, 39, 88, 0.72) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-page="products"] .product-grid > .zz-product-card > dl {
    grid-area: meta !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 6px !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    color: rgba(14, 39, 88, 0.72) !important;
    min-width: 0 !important;
  }

  body[data-page="products"] .product-grid > .zz-product-card > dl dt {
    font-weight: 700 !important;
    color: rgba(14, 39, 88, 0.56) !important;
  }

  body[data-page="products"] .product-grid > .zz-product-card > dl dd {
    margin: 0 !important;
    font-weight: 700 !important;
    color: #143d8b !important;
  }

  body[data-page="products"] .product-grid > .zz-product-card > a {
    grid-area: link !important;
    justify-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #1a57bb !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
  }

  body[data-page="products"] .product-grid > .zz-product-card > a::after {
    content: " →" !important;
  }

  body[data-page="products"] .product-grid > .zz-product-card > .zz-product-tag {
    top: 14px !important;
    right: 14px !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 22px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: rgba(26, 87, 187, 0.10) !important;
    color: #1a57bb !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    width: max-content !important;
    white-space: nowrap !important;
  }

  body[data-page="products"] .product-mobile-pagination {
    gap: 8px !important;
  }

  body[data-page="products"] .product-mobile-cta__card {
    grid-template-columns: minmax(0, 1fr) 116px !important;
  }

  body[data-page="products"] .product-mobile-cta__media {
    width: 116px !important;
    height: 92px !important;
  }
}

/* Products mobile final list-tightening override: reduce vertical gaps and show only 6 cards by default. */
@media (max-width: 768px) {
  body[data-page="products"] .product-grid > .zz-product-card:nth-child(n + 7) {
    display: none !important;
  }

  body[data-page="products"] .product-grid > .zz-product-card {
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 14px 11px !important;
    grid-template-columns: 118px minmax(0, 1fr) !important;
    grid-template-areas:
      "image title"
      "image desc"
      "image meta"
      "image link" !important;
    gap: 3px 12px !important;
  }

  body[data-page="products"] .product-grid > .zz-product-card > img {
    grid-area: image !important;
    width: 118px !important;
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  body[data-page="products"] .product-grid > .zz-product-card > h3 {
    grid-area: title !important;
    margin: 0 !important;
    padding-right: 52px !important;
    font-size: 14px !important;
    line-height: 1.24 !important;
    font-weight: 950 !important;
    color: #0e274f !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-page="products"] .product-grid > .zz-product-card > p {
    grid-area: desc !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: rgba(14, 39, 88, 0.72) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-page="products"] .product-grid > .zz-product-card > dl {
    grid-area: meta !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 6px !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    color: rgba(14, 39, 88, 0.72) !important;
    min-width: 0 !important;
  }

  body[data-page="products"] .product-grid > .zz-product-card > dl dt {
    font-weight: 700 !important;
    color: rgba(14, 39, 88, 0.56) !important;
  }

  body[data-page="products"] .product-grid > .zz-product-card > dl dd {
    margin: 0 !important;
    font-weight: 700 !important;
    color: #143d8b !important;
  }

  body[data-page="products"] .product-grid > .zz-product-card > a {
    grid-area: link !important;
    justify-self: start !important;
    align-self: end !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #1a57bb !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
  }

  body[data-page="products"] .product-grid > .zz-product-card > a::after {
    content: " →" !important;
  }

  body[data-page="products"] .product-grid > .zz-product-card > .zz-product-tag {
    top: 14px !important;
    right: 14px !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 22px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: rgba(26, 87, 187, 0.10) !important;
    color: #1a57bb !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    width: max-content !important;
    white-space: nowrap !important;
  }
}

/* News mobile final reference layout override: categories counts, news sort tabs, vertical hot cards, and tighter CTA. */
@media (max-width: 768px) {
  body[data-page="news"] .news-page {
    overflow-x: hidden !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 58%, #ffffff 100%) !important;
  }

  body[data-page="news"] .news-banner {
    min-height: 258px !important;
    margin: 0 12px 12px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 16px 34px rgba(0, 20, 52, 0.16) !important;
  }

  body[data-page="news"] .news-banner::before {
    background-image:
      linear-gradient(90deg, rgba(0, 18, 48, 0.92) 0%, rgba(0, 43, 102, 0.72) 52%, rgba(0, 43, 102, 0.12) 100%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png")) !important;
    background-position: right center !important;
    background-size: cover !important;
  }

  body[data-page="news"] .news-banner__inner {
    position: relative;
    display: grid;
    align-content: end;
    min-height: 258px;
    padding: 28px 18px 24px !important;
    padding-right: clamp(116px, 32vw, 180px) !important;
  }

  body[data-page="news"] .news-banner h1 {
    margin: 0 0 8px !important;
    color: #fff !important;
    font-size: 30px !important;
    line-height: 1.08 !important;
    font-weight: 950 !important;
  }

  body[data-page="news"] .news-banner .news-hero-subtitle {
    max-width: 18em;
    margin: 0 0 8px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    font-weight: 700 !important;
  }

  body[data-page="news"] .news-banner .news-hero-desc {
    max-width: 20em;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  body[data-page="news"] .news-hero-media,
  body[data-page="news"] .news-banner .banner-search,
  body[data-page="news"] .news-breadcrumb {
    display: none !important;
  }

  body[data-page="news"] .news-mobile-categories {
    display: block !important;
    margin: 0 0 12px !important;
  }

  body[data-page="news"] .news-mobile-categories .container,
  body[data-page="news"] .news-list-section .container,
  body[data-page="news"] .news-mobile-hot .container,
  body[data-page="news"] .news-mobile-cta .container {
    width: calc(100% - 24px) !important;
    margin-inline: 12px !important;
    padding-inline: 0 !important;
  }

  body[data-page="news"] .news-mobile-categories__card {
    padding: 14px 12px 16px !important;
    border: 1px solid rgba(14, 39, 88, 0.08) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 10px 24px rgba(0, 43, 102, 0.06) !important;
  }

  body[data-page="news"] .news-mobile-categories__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }

  body[data-page="news"] .news-mobile-categories__title {
    margin: 0;
    color: var(--color-text);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 950;
  }

  body[data-page="news"] .news-mobile-categories__more {
    flex: 0 0 auto;
    color: var(--color-blue-700);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="news"] .news-mobile-categories__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px 6px;
  }

  body[data-page="news"] .news-mobile-categories__grid a {
    min-height: 92px;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 5px;
    padding: 8px 4px 9px;
    border: 1px solid rgba(14, 39, 88, 0.08);
    border-radius: 14px;
    background: #fff;
    color: #12469c;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 10px 24px rgba(0, 43, 102, 0.06);
    font-size: 10px;
    font-weight: 850;
    line-height: 1.1;
    overflow: hidden;
  }

  body[data-page="news"] .news-mobile-categories__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.10), rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(0, 70, 184, 0.10);
    box-shadow: 0 8px 18px rgba(0, 43, 102, 0.08);
    color: #1f5dcf;
  }

  body[data-page="news"] .news-mobile-categories__icon svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  body[data-page="news"] .news-mobile-categories__label {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 850;
  }

  body[data-page="news"] .news-mobile-categories__count {
    display: block;
    color: #6f7f94;
    font-size: 10px;
    line-height: 1.1;
    font-weight: 700;
  }

  body[data-page="news"] .news-mobile-categories__grid a.is-active {
    color: #fff;
    border-color: rgba(0, 70, 184, 0.18);
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.94), rgba(0, 43, 102, 0.94));
    box-shadow: 0 12px 24px rgba(0, 43, 102, 0.12);
  }

  body[data-page="news"] .news-mobile-categories__grid a.is-active .news-mobile-categories__icon {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
  }

  body[data-page="news"] .news-mobile-categories__grid a.is-active .news-mobile-categories__count {
    color: rgba(255, 255, 255, 0.92);
  }

  body[data-page="news"] .news-list-section {
    padding-block: 8px 18px !important;
  }

  body[data-page="news"] .news-main-card {
    padding: 0 !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 12px 28px rgba(0, 20, 52, 0.08) !important;
    overflow: hidden !important;
  }

  body[data-page="news"] .news-tabs {
    display: none !important;
  }

  body[data-page="news"] .news-mobile-tabs {
    display: block !important;
    padding: 10px 12px 0 !important;
    margin: 0 !important;
  }

  body[data-page="news"] .news-mobile-tabs__track {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    min-height: 46px;
    padding: 0 10px 6px;
    border-bottom: 1px solid rgba(14, 39, 88, 0.08);
  }

  body[data-page="news"] .news-mobile-tabs__track a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    color: rgba(16, 24, 40, 0.72);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="news"] .news-mobile-tabs__track a.is-active {
    color: var(--color-blue-700);
  }

  body[data-page="news"] .news-mobile-tabs__track a.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 28px;
    height: 3px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #2142ff, #5b8dff);
  }

  body[data-page="news"] .news-list {
    display: grid !important;
    gap: 12px !important;
    padding: 12px !important;
    margin: 0 !important;
  }

  body[data-page="news"] .news-list-item {
    display: grid !important;
    grid-template-columns: clamp(116px, 33%, 148px) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 10px !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 16px !important;
    background: var(--color-white) !important;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08) !important;
  }

  body[data-page="news"] .news-list-item img {
    width: 100% !important;
    height: 88px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    flex-shrink: 0;
  }

  body[data-page="news"] .news-list-item > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title tag"
      "desc desc"
      "meta meta" !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
    min-width: 0 !important;
    align-content: start !important;
  }

  body[data-page="news"] .news-tag {
    grid-area: tag;
    justify-self: end;
    align-self: start;
    width: fit-content;
    margin: 0 !important;
    min-height: 18px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    line-height: 18px !important;
  }

  body[data-page="news"] .news-list-item h2 {
    grid-area: title;
    margin: 0 !important;
    font-size: clamp(13px, 3.4vw, 15px) !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
  }

  body[data-page="news"] .news-list-item h2 a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--color-text);
  }

  body[data-page="news"] .news-list-item p {
    grid-area: desc;
    display: -webkit-box;
    margin: 0 !important;
    color: rgba(71, 84, 103, 0.88);
    font-size: clamp(10px, 2.75vw, 12px) !important;
    line-height: 1.5 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  body[data-page="news"] .news-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  body[data-page="news"] .news-meta span {
    white-space: nowrap;
  }

  body[data-page="news"] .news-meta span:nth-child(3),
  body[data-page="news"] .news-arrow {
    display: none !important;
  }

  body[data-page="news"] .news-mobile-loadmore {
    display: flex !important;
    justify-content: center;
    margin: 14px 12px 0;
  }

  body[data-page="news"] .news-mobile-loadmore .btn {
    width: 100%;
    height: 44px;
    border-radius: 14px;
    border-color: rgba(11, 91, 211, 0.38);
    color: var(--color-blue-700);
    background: rgba(255, 255, 255, 0.96);
  }

  body[data-page="news"] .news-sidebar,
  body[data-page="news"] .news-feature-section,
  body[data-page="news"] .news-subscribe,
  body[data-page="news"] .news-faq-strip,
  body[data-page="news"] .news-quote {
    display: none !important;
  }

  body[data-page="news"] .news-mobile-hot {
    display: block !important;
    padding-block: 18px 0 !important;
  }

  body[data-page="news"] .news-mobile-hot .section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  body[data-page="news"] .news-mobile-hot .section-head h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 950;
  }

  body[data-page="news"] .news-mobile-hot .section-more {
    color: var(--color-blue-700);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="news"] .news-hot-rail {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  body[data-page="news"] .news-hot-card {
    display: grid !important;
    grid-template-columns: clamp(116px, 33%, 148px) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 16px !important;
    background: var(--color-white) !important;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08) !important;
    overflow: hidden !important;
  }

  body[data-page="news"] .news-hot-card img {
    width: 100% !important;
    height: 88px !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    flex-shrink: 0;
  }

  body[data-page="news"] .news-hot-card__body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title tag"
      "desc desc"
      "meta meta" !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
    min-width: 0 !important;
    padding: 0 !important;
    align-content: start !important;
  }

  body[data-page="news"] .news-hot-card .news-tag {
    grid-area: tag;
    justify-self: end;
    align-self: start;
    width: fit-content;
    margin: 0 !important;
    min-height: 18px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    line-height: 18px !important;
  }

  body[data-page="news"] .news-hot-card h3 {
    grid-area: title;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 900;
  }

  body[data-page="news"] .news-hot-card h3 a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--color-text);
  }

  body[data-page="news"] .news-hot-card__body p {
    grid-area: desc;
    display: -webkit-box;
    margin: 0 !important;
    color: rgba(71, 84, 103, 0.88);
    font-size: 11px !important;
    line-height: 1.5 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  body[data-page="news"] .news-hot-card .news-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  body[data-page="news"] .news-hot-card .news-meta span {
    white-space: nowrap;
  }

  body[data-page="news"] .news-mobile-cta {
    display: block !important;
    padding-block: 18px 24px !important;
  }

  body[data-page="news"] .news-cta-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(108px, 28vw, 136px);
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0a33a4 0%, #0b5bd3 55%, #0f49cf 100%);
    color: var(--color-white);
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22);
  }

  body[data-page="news"] .news-cta-card__copy h2 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.2;
    color: #fff;
  }

  body[data-page="news"] .news-cta-card__copy p {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.45;
    opacity: 0.92;
    color: rgba(255, 255, 255, 0.96);
  }

  body[data-page="news"] .news-cta-card .btn.btn-accent {
    height: 40px;
    padding-inline: 16px;
    border-radius: 12px;
    background: #ff7a1a;
    border-color: #ff7a1a;
    color: #fff;
  }

  body[data-page="news"] .news-cta-card__media {
    width: 100%;
    height: 120px;
    border-radius: 14px;
    overflow: hidden;
    opacity: 0.95;
  }

  body[data-page="news"] .news-cta-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/* Shared mobile width EOF override.
   This is the real last mobile width layer so it wins over every earlier mobile width rule. */
@media (max-width: 768px) {
  body[data-page][data-page] main,
  body[data-page][data-page] section {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }

  body[data-page][data-page] .container,
  body[data-page][data-page] .container--wide {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  body[data-page][data-page] main > .container,
  body[data-page][data-page] main > .container--wide,
  body[data-page][data-page] section > .container,
  body[data-page][data-page] section > .container--wide {
    width: 100% !important;
    max-width: none !important;
  }

  body[data-page="support"] .support-mobile-assurance > .container,
  body[data-page="support"] .support-mobile-services > .container,
  body[data-page="support"] .support-mobile-faq > .container,
  body[data-page="support"] .support-mobile-download > .container,
  body[data-page="support"] .support-video-section > .container,
  body[data-page="support"] .support-mobile-cta > .container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}


/* Support body width final clean-up.
   Clear the last remaining support-page body gutter so the page sits flush on mobile. */
@media (max-width: 768px) {
  body[data-page="support"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  body[data-page="support"] .service-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Homepage mobile final pass: 375px visual polish, 2-column cards, slimmer footer, and no horizontal overflow. */
@media (max-width: 768px) {
  body[data-page="home"] {
    overflow-x: hidden !important;
    padding-bottom: 72px;
    background: #f5f7fa;
  }

  html {
    overflow-x: hidden !important;
  }

  body[data-page="home"] .home-main {
    overflow-x: hidden !important;
    background: #f5f7fa;
  }

  body[data-page="home"] .container {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }

  body[data-page="home"] .home-section {
    padding-block: 24px !important;
  }

  body[data-page="home"] .home-desktop-only {
    display: none !important;
  }

  body[data-page="home"] .home-mobile-only {
    display: inline !important;
  }

  body[data-page="home"] .home-products,
  body[data-page="home"] .home-solutions,
  body[data-page="home"] .home-cases,
  body[data-page="home"] .home-news,
  body[data-page="home"] .home-trust,
  body[data-page="home"] .home-service-cta {
    margin-top: 0 !important;
  }

  body[data-page="home"] .home-hero {
    min-height: 240px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body[data-page="home"] .home-hero__slide {
    background-image:
      linear-gradient(90deg, rgba(3, 27, 76, 0.94) 0%, rgba(7, 61, 148, 0.78) 52%, rgba(7, 61, 148, 0.2) 100%),
      var(--home-hero-image);
    background-position: 0 0, 76% center !important;
    background-size: 100% 100%, cover !important;
  }

  body[data-page="home"] .home-hero__inner {
    min-height: 240px !important;
    padding: 20px 16px 52px !important;
  }

  body[data-page="home"] .home-mobile-hero-title {
    display: block !important;
    max-width: 248px;
    margin: 0 0 10px !important;
    color: #fff;
    font-size: 30px !important;
    line-height: 1.12 !important;
    letter-spacing: 0.01em;
    font-weight: 950;
  }

  body[data-page="home"] .home-mobile-hero-subtitle {
    display: block !important;
    max-width: 300px;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  body[data-page="home"] .home-hero__features {
    display: none !important;
  }

  body[data-page="home"] .home-hero-kpis {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 26px;
    padding: 0;
    background: transparent;
  }

  body[data-page="home"] .home-hero-kpi {
    position: relative;
    display: grid;
    gap: 4px;
    justify-items: start;
    min-width: 0;
    padding: 0 6px 0 10px;
    color: rgba(255, 255, 255, 0.98);
    text-align: left;
  }

  body[data-page="home"] .home-hero-kpi:first-child {
    padding-left: 0;
  }

  body[data-page="home"] .home-hero-kpi + .home-hero-kpi::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 1px;
    background: rgba(255, 255, 255, 0.18);
  }

  body[data-page="home"] .home-hero-kpi strong {
    position: relative;
    padding-left: 16px;
    font-size: 14px;
    line-height: 1.05;
  }

  body[data-page="home"] .home-hero-kpi strong::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 11px;
    height: 11px;
    border: 1.2px solid rgba(255, 255, 255, 0.94);
    border-radius: 999px;
  }

  body[data-page="home"] .home-hero-kpi small {
    font-size: 10px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.78);
    white-space: nowrap;
  }

  body[data-page="home"] .home-hero__controls {
    inset: auto 0 10px;
  }

  body[data-page="home"] .home-hero__dots {
    gap: 8px;
  }

  body[data-page="home"] .home-mobile-cta {
    display: block !important;
    position: relative;
    z-index: 2;
    margin-top: -24px;
    padding: 0 0 24px;
  }

  body[data-page="home"] .home-mobile-cta .container {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  body[data-page="home"] .home-mobile-cta__card {
    grid-template-columns: 58% 42%;
    min-height: 120px;
    gap: 10px;
    align-items: center;
    padding: 12px 12px 12px 14px;
    border: 1px solid rgba(15, 55, 132, 0.08);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f3f7ff 100%);
    box-shadow: 0 12px 28px rgba(8, 34, 86, 0.10);
  }

  body[data-page="home"] .home-mobile-cta__body {
    gap: 5px;
  }

  body[data-page="home"] .home-mobile-cta__title {
    max-width: 180px;
    font-size: 16px;
    line-height: 1.22;
    color: #102b61;
  }

  body[data-page="home"] .home-mobile-cta__desc {
    max-width: 182px;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(16, 43, 97, 0.62);
  }

  body[data-page="home"] .home-mobile-cta__btn {
    min-height: 36px;
    padding-inline: 14px;
    border-radius: 12px;
    font-size: 12px;
  }

  body[data-page="home"] .home-mobile-cta__media {
    width: 100%;
    height: 100%;
    min-height: 96px;
    border-radius: 14px;
  }

  body[data-page="home"] .home-mobile-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center right;
  }

  body[data-page="home"] .home-products .home-section-title > p,
  body[data-page="home"] .home-solutions .home-section-title > p,
  body[data-page="home"] .home-cases .home-section-title > p,
  body[data-page="home"] .home-news .home-news-heading > p {
    display: none !important;
  }

  body[data-page="home"] .home-product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    gap: 12px !important;
    overflow: visible !important;
    overflow-x: hidden !important;
  }

  body[data-page="home"] .home-product-grid > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="home"] .home-product-grid .home-mobile-only {
    display: block !important;
  }

  body[data-page="home"] .home-product-grid::-webkit-scrollbar {
    display: none;
  }

  body[data-page="home"] .home-product-card {
    display: grid;
    align-content: start;
    min-width: 0;
    min-height: 0;
    height: 176px;
    padding: 8px;
    border: 1px solid rgba(16, 45, 106, 0.08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(9, 35, 89, 0.08);
    text-align: center;
  }

  body[data-page="home"] .home-product-card img {
    width: 100%;
    height: 110px;
    margin-bottom: 6px;
    border-radius: 12px;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-product-card h3 {
    margin: 0 0 3px;
    font-size: 12px;
    line-height: 1.28;
    font-weight: 900;
    min-height: 0;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="home"] .home-product-card p {
    margin: 0 0 4px;
    font-size: 11px;
    line-height: 1.3;
    color: rgba(14, 39, 88, 0.62);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  body[data-page="home"] .home-outline-btn {
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0a6cff;
    font-size: 10.5px;
    font-weight: 900;
  }

  body[data-page="home"] .home-outline-btn::after {
    content: " →";
  }

  body[data-page="home"] .home-solutions .home-solution-grid,
  body[data-page="home"] .home-cases .home-case-wrap,
  body[data-page="home"] .home-cases .home-case-grid {
    display: none !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list,
  body[data-page="home"] .home-cases .home-case-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    margin-top: 0;
    padding: 0;
  }

  body[data-page="home"] .home-solutions .home-solution-list > *,
  body[data-page="home"] .home-cases .home-case-list > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list article,
  body[data-page="home"] .home-cases .home-case-list article {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(14, 39, 88, 0.08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(9, 35, 89, 0.08);
  }

  body[data-page="home"] .home-solutions .home-solution-list img,
  body[data-page="home"] .home-cases .home-case-list img {
    width: 100%;
    height: 100px;
    border-radius: 12px;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list article > div,
  body[data-page="home"] .home-cases .home-case-list article > div {
    position: relative;
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 0;
  }

  body[data-page="home"] .home-solutions .home-solution-list span,
  body[data-page="home"] .home-cases .home-case-list span {
    position: static;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 22px;
    margin: 0;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(0, 70, 184, 0.10);
    color: #003a8c;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
  }

  body[data-page="home"] .home-solutions .home-solution-list h3,
  body[data-page="home"] .home-cases .home-case-list h3 {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 900;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="home"] .home-solutions .home-solution-list p,
  body[data-page="home"] .home-cases .home-case-list p {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: rgba(14, 39, 88, 0.66);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="home"] .home-solutions .home-solution-list article {
    min-height: 176px;
    align-content: start;
    justify-items: start;
    text-align: left;
  }

  body[data-page="home"] .home-solutions .home-solution-list img {
    width: 44px;
    height: 44px;
    margin-bottom: 2px;
    border-radius: 12px;
  }

  body[data-page="home"] .home-solutions .home-solution-list p {
    -webkit-line-clamp: 1;
  }

  body[data-page="home"] .home-solutions .home-solution-list article > div {
    gap: 4px;
  }

  body[data-page="home"] .home-solutions .home-solution-list .home-solution-more {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 2px;
    color: #0a6cff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
  }

  body[data-page="home"] .home-cases .home-case-list article {
    min-height: 188px;
    align-content: start;
    justify-items: start;
    text-align: left;
  }

  body[data-page="home"] .home-cases .home-case-list p {
    display: none !important;
  }

  body[data-page="home"] .home-cases .home-case-list img {
    height: 100px;
  }

  body[data-page="home"] .home-news-grid {
    display: block !important;
  }

  body[data-page="home"] .home-news-grid > div:nth-child(2) {
    margin-top: 18px;
  }

  body[data-page="home"] .home-news-list {
    display: grid !important;
    gap: 10px !important;
  }

  body[data-page="home"] .home-news-list article {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px;
    border: 1px solid rgba(14, 39, 88, 0.08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(9, 35, 89, 0.06);
  }

  body[data-page="home"] .home-news-list img {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-news-list article > div {
    position: relative;
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 0;
  }

  body[data-page="home"] .home-news-list article > div > span {
    position: static;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 22px;
    margin: 0;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(0, 70, 184, 0.10);
    color: #003a8c;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
  }

  body[data-page="home"] .home-news-list h3 {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 900;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="home"] .home-news-list p {
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
    color: rgba(14, 39, 88, 0.62);
  }

  body[data-page="home"] .home-trust {
    display: block !important;
    padding: 24px 0 0;
  }

  body[data-page="home"] .home-trust .container {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    padding-inline: 0 !important;
  }

  body[data-page="home"] .home-trust__title {
    margin-bottom: 12px;
    color: #23407a;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 950;
    text-align: center;
  }

  body[data-page="home"] .home-trust__logos {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    align-items: center;
  }

  body[data-page="home"] .home-trust__logo {
    min-width: 0;
    padding: 10px 6px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(9, 35, 89, 0.06);
    color: #8a96ab;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
  }

  body[data-page="home"] .home-service-cta {
    display: block !important;
    padding: 24px 0 24px;
  }

  body[data-page="home"] .home-service-cta .container {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    padding-inline: 0 !important;
  }

  body[data-page="home"] .home-service-cta__card {
    display: grid;
    grid-template-columns: 58% 42%;
    gap: 12px;
    align-items: center;
    height: 120px;
    padding: 12px 12px 12px 14px;
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(9, 35, 89, 0.14);
  }

  body[data-page="home"] .home-service-cta__body {
    gap: 4px;
  }

  body[data-page="home"] .home-service-cta__body strong {
    max-width: 170px;
    font-size: 15px;
    line-height: 1.18;
  }

  body[data-page="home"] .home-service-cta__body p {
    font-size: 11px;
    line-height: 1.35;
  }

  body[data-page="home"] .home-service-cta__actions {
    gap: 8px;
    flex-wrap: wrap;
  }

  body[data-page="home"] .home-service-cta__actions .btn {
    min-height: 36px;
    padding-inline: 14px;
    border-radius: 999px;
    font-size: 11px;
  }

  body[data-page="home"] .home-service-cta__media {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
  }

  body[data-page="home"] .home-service-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center right;
  }

  body[data-page="home"] .site-footer {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient(120deg, #011a45 0%, #022f7e 100%) !important;
  }

  body[data-page="home"] .site-footer .footer-main {
    padding: 10px 0 4px !important;
  }

  body[data-page="home"] .site-footer .footer-main__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  body[data-page="home"] .site-footer .footer-links,
  body[data-page="home"] .site-footer .footer-qrcode,
  body[data-page="home"] .site-footer .social-links {
    display: none !important;
  }

  body[data-page="home"] .site-footer .footer-company h2 {
    margin-bottom: 6px !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  body[data-page="home"] .site-footer .footer-contact {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  body[data-page="home"] .site-footer .footer-contact {
    margin-top: 4px !important;
    gap: 2px !important;
  }

  body[data-page="home"] .site-footer .footer-company > p,
  body[data-page="home"] .site-footer .footer-contact li:nth-child(n + 4) {
    display: none !important;
  }

  body[data-page="home"] .site-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  body[data-page="home"] .site-footer .footer-bottom__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: auto !important;
    padding-block: 6px 8px !important;
    text-align: center !important;
  }

  body[data-page="home"] .mobile-bottom-nav--main {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 58px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 -4px 16px rgba(7, 25, 61, 0.12) !important;
  }
}

/* Homepage mobile final fine-tune: appended last so it wins over earlier mobile fallbacks. */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  body[data-page="home"] {
    padding-bottom: 70px !important;
    background: #f5f7fa !important;
  }

  body[data-page="home"] .home-main {
    overflow-x: hidden !important;
    background: #f5f7fa !important;
  }

  body[data-page="home"] .container {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  body[data-page="home"] .site-header {
    position: sticky;
    top: 0;
    z-index: 120;
    overflow: visible;
  }

  body[data-page="home"] .site-header .nav-toggle {
    position: relative;
    z-index: 130;
    pointer-events: auto;
  }

  body[data-page="home"] .site-header .main-nav {
    display: flex !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(82vw, 330px);
    height: 100dvh;
    margin: 0;
    padding: 104px 20px 28px;
    overflow-y: auto;
    border-left: 1px solid rgba(14, 39, 88, 0.08);
    background: #fff;
    box-shadow: -18px 0 40px rgba(0, 20, 52, 0.18);
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform 220ms ease, opacity 180ms ease, visibility 180ms ease;
    visibility: hidden;
    z-index: 115;
  }

  body.nav-open[data-page="home"] {
    overflow: hidden !important;
  }

  body.nav-open[data-page="home"] .site-header .main-nav {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  body[data-page="home"] .home-section {
    padding-block: 24px !important;
  }

  body[data-page="home"] .home-products,
  body[data-page="home"] .home-solutions,
  body[data-page="home"] .home-cases,
  body[data-page="home"] .home-news,
  body[data-page="home"] .home-trust,
  body[data-page="home"] .home-service-cta {
    margin-top: 0 !important;
  }

  body[data-page="home"] .home-hero {
    min-height: 280px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body[data-page="home"] .home-hero__slide {
    background-image:
      linear-gradient(90deg, rgba(3, 27, 76, 0.94) 0%, rgba(7, 61, 148, 0.78) 52%, rgba(7, 61, 148, 0.2) 100%),
      var(--home-hero-image);
    background-position: 0 0, 76% center !important;
    background-size: 100% 100%, cover !important;
  }

  body[data-page="home"] .home-hero__inner {
    min-height: 280px !important;
    padding: 20px 16px 68px !important;
  }

  body[data-page="home"] .home-mobile-hero-title {
    display: block !important;
    max-width: 290px;
    margin: 0 0 8px !important;
    color: #fff;
    font-size: 34px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: 0;
  }

  body[data-page="home"] .home-mobile-hero-subtitle {
    display: block !important;
    max-width: 300px;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.03em;
  }

  body[data-page="home"] .home-hero__features {
    display: none !important;
  }

  body[data-page="home"] .home-hero-kpis {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 26px;
    padding: 0;
    background: transparent;
  }

  body[data-page="home"] .home-hero-kpi {
    position: relative;
    display: grid;
    gap: 4px;
    justify-items: start;
    min-width: 0;
    padding: 0 6px 0 10px;
    color: rgba(255, 255, 255, 0.98);
    text-align: left;
  }

  body[data-page="home"] .home-hero-kpi:first-child {
    padding-left: 0;
  }

  body[data-page="home"] .home-hero-kpi + .home-hero-kpi::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 1px;
    background: rgba(255, 255, 255, 0.18);
  }

  body[data-page="home"] .home-hero-kpi strong {
    position: relative;
    padding-left: 16px;
    font-size: 14px;
    line-height: 1.05;
  }

  body[data-page="home"] .home-hero-kpi strong::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 11px;
    height: 11px;
    border: 1.2px solid rgba(255, 255, 255, 0.94);
    border-radius: 999px;
  }

  body[data-page="home"] .home-hero-kpi small {
    font-size: 10px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.78);
    white-space: nowrap;
  }

  body[data-page="home"] .home-hero__controls {
    inset: auto 0 8px;
  }

  body[data-page="home"] .home-hero__dots {
    gap: 8px;
  }

  body[data-page="home"] .home-mobile-cta {
    display: block !important;
    position: relative;
    z-index: 2;
    margin-top: -24px;
    padding: 0 0 24px;
  }

  body[data-page="home"] .home-mobile-cta__card {
    display: grid !important;
    grid-template-columns: 60% 40%;
    gap: 12px;
    align-items: center;
    min-height: 140px;
    padding: 14px 12px 14px 16px;
    border: 1px solid rgba(15, 55, 132, 0.08);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f3f7ff 100%);
    box-shadow: 0 10px 22px rgba(8, 34, 86, 0.08);
  }

  body[data-page="home"] .home-mobile-cta__body {
    gap: 5px;
  }

  body[data-page="home"] .home-mobile-cta__title {
    max-width: 190px;
    font-size: 18px;
    line-height: 1.2;
    color: #102b61;
  }

  body[data-page="home"] .home-mobile-cta__desc {
    max-width: 190px;
    font-size: 12px;
    line-height: 1.35;
    color: rgba(16, 43, 97, 0.62);
  }

  body[data-page="home"] .home-mobile-cta__btn {
    min-height: 40px;
    min-width: 144px;
    padding-inline: 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
  }

  body[data-page="home"] .home-mobile-cta__media {
    width: 100%;
    height: 100%;
    min-height: 110px;
    border-radius: 14px;
    overflow: hidden;
  }

  body[data-page="home"] .home-mobile-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center right;
  }

  body[data-page="home"] .home-products .home-section-title > p,
  body[data-page="home"] .home-solutions .home-section-title > p,
  body[data-page="home"] .home-cases .home-section-title > p,
  body[data-page="home"] .home-news .home-news-heading > p {
    display: none !important;
  }

  body[data-page="home"] .home-product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 12px !important;
    overflow: visible !important;
    overflow-x: hidden !important;
  }

  body[data-page="home"] .home-product-grid > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="home"] .home-product-grid .home-mobile-only {
    display: block !important;
  }

  body[data-page="home"] .home-product-card {
    display: grid;
    align-content: start;
    min-width: 0;
    min-height: 0;
    height: 190px;
    padding: 10px 10px 8px;
    border: 1px solid rgba(16, 45, 106, 0.08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(9, 35, 89, 0.08);
    text-align: center;
  }

  body[data-page="home"] .home-product-card img {
    width: 100%;
    height: 120px;
    margin-bottom: 6px;
    border-radius: 12px;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-product-card h3 {
    margin: 0 0 2px;
    font-size: 15px;
    line-height: 1.22;
    font-weight: 900;
    min-height: 0;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="home"] .home-product-card p {
    display: none !important;
  }

  body[data-page="home"] .home-outline-btn {
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0a6cff;
    font-size: 11px;
    font-weight: 900;
  }

  body[data-page="home"] .home-outline-btn::after {
    content: " →";
  }

  body[data-page="home"] .home-solutions .home-solution-grid,
  body[data-page="home"] .home-cases .home-case-wrap,
  body[data-page="home"] .home-cases .home-case-grid {
    display: none !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list,
  body[data-page="home"] .home-cases .home-case-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px !important;
    margin-top: 0;
    padding: 0;
  }

  body[data-page="home"] .home-solutions .home-solution-list > *,
  body[data-page="home"] .home-cases .home-case-list > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list article,
  body[data-page="home"] .home-cases .home-case-list article {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 8px;
    min-width: 0;
    min-height: 186px;
    padding: 12px;
    border: 1px solid rgba(14, 39, 88, 0.08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(9, 35, 89, 0.08);
    align-content: start;
  }

  body[data-page="home"] .home-solutions .home-solution-list article:hover,
  body[data-page="home"] .home-solutions .home-solution-list article:active,
  body[data-page="home"] .home-cases .home-case-list article:hover,
  body[data-page="home"] .home-cases .home-case-list article:active {
    box-shadow: 0 14px 28px rgba(9, 35, 89, 0.12);
    transform: translateY(-1px);
  }

  body[data-page="home"] .home-solutions .home-solution-list img {
    display: none !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list article > div {
    gap: 4px;
    min-width: 0;
    padding: 0;
  }

  body[data-page="home"] .home-solution-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(10, 108, 255, 0.08);
    color: #0a6cff;
    box-shadow: inset 0 0 0 1px rgba(10, 108, 255, 0.10);
  }

  body[data-page="home"] .home-solution-icon svg {
    width: 18px;
    height: 18px;
    display: block;
  }

  body[data-page="home"] .home-solutions .home-solution-list span {
    position: static;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 22px;
    margin: 0;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(0, 70, 184, 0.10);
    color: #003a8c;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
  }

  body[data-page="home"] .home-solutions .home-solution-list h3,
  body[data-page="home"] .home-cases .home-case-list h3 {
    margin: 0;
    font-size: 13px;
    line-height: 1.32;
    font-weight: 900;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="home"] .home-solutions .home-solution-list p {
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
    color: rgba(14, 39, 88, 0.66);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="home"] .home-solutions .home-solution-list .home-solution-more {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 2px;
    color: #0a6cff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
  }

  body[data-page="home"] .home-cases .home-case-list article {
    position: relative;
    min-height: 222px;
    overflow: hidden;
  }

  body[data-page="home"] .home-cases .home-case-list img {
    width: 100%;
    height: 110px;
    border-radius: 12px;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-cases .home-case-list article > div {
    position: relative;
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 26px 76px 0 0;
  }

  body[data-page="home"] .home-cases .home-case-list span {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(0, 70, 184, 0.10);
    color: #003a8c;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    margin: 0;
  }

  body[data-page="home"] .home-cases .home-case-list p {
    display: none !important;
  }

  body[data-page="home"] .home-news-grid {
    display: block !important;
  }

  body[data-page="home"] .home-news-grid > div:nth-child(2) {
    margin-top: 18px;
  }

  body[data-page="home"] .home-news-list {
    display: grid !important;
    gap: 10px !important;
  }

  body[data-page="home"] .home-news-list article {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 7px 10px;
    border: 1px solid rgba(14, 39, 88, 0.08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(9, 35, 89, 0.06);
  }

  body[data-page="home"] .home-news-list img {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-news-list article > div {
    position: relative;
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 0;
  }

  body[data-page="home"] .home-news-list article > div > span {
    position: static;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 20px;
    margin: 0;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(0, 70, 184, 0.10);
    color: #003a8c;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
  }

  body[data-page="home"] .home-news-list h3 {
    margin: 0;
    font-size: 12px;
    line-height: 1.26;
    font-weight: 900;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="home"] .home-news-list p {
    margin: 0;
    font-size: 10px;
    line-height: 1.12;
    color: rgba(14, 39, 88, 0.58);
  }

  body[data-page="home"] .home-trust {
    display: block !important;
    padding: 34px 0 10px;
  }

  body[data-page="home"] .home-trust .container {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    padding-inline: 0 !important;
  }

  body[data-page="home"] .home-trust__title {
    margin-bottom: 10px;
    color: #23407a;
    font-size: 19px;
    line-height: 1.2;
    font-weight: 900;
    text-align: center;
  }

  body[data-page="home"] .home-trust__logos {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    align-items: center;
  }

  body[data-page="home"] .home-trust__logo {
    min-width: 0;
    padding: 10px 6px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(9, 35, 89, 0.06);
    color: rgba(40, 66, 112, 0.96);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    opacity: 1;
  }

  body[data-page="home"] .home-service-cta {
    display: block !important;
    padding: 24px 0 24px;
  }

  body[data-page="home"] .home-service-cta .container {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    padding-inline: 0 !important;
  }

  body[data-page="home"] .home-service-cta__card {
    display: grid !important;
    grid-template-columns: 60% 40%;
    gap: 10px;
    align-items: center;
    min-height: 140px;
    padding: 14px 10px 14px 16px;
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(9, 35, 89, 0.10);
  }

  body[data-page="home"] .home-service-cta__body {
    gap: 5px;
  }

  body[data-page="home"] .home-service-cta__body strong {
    font-size: 17px;
    line-height: 1.14;
  }

  body[data-page="home"] .home-service-cta__body p {
    font-size: 11px;
    line-height: 1.3;
  }

  body[data-page="home"] .home-service-cta__actions {
    gap: 8px;
    flex-wrap: nowrap;
  }

  body[data-page="home"] .home-service-cta__actions .btn {
    min-height: 40px;
    padding-inline: 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
  }

  body[data-page="home"] .home-service-cta__actions .btn:first-child {
    box-shadow: 0 10px 18px rgba(255, 106, 26, 0.28);
  }

  body[data-page="home"] .home-service-cta__media {
    width: 100%;
    height: 100%;
    min-height: 110px;
    border-radius: 14px;
    overflow: hidden;
  }

  body[data-page="home"] .home-service-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center right;
  }

  body[data-page="home"] .site-footer {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient(120deg, #011a45 0%, #022f7e 100%) !important;
  }

  body[data-page="home"] .site-footer .footer-main {
    display: none !important;
  }

  body[data-page="home"] .site-footer .footer-main__grid {
    display: none !important;
  }

  body[data-page="home"] .site-footer .footer-links,
  body[data-page="home"] .site-footer .footer-qrcode,
  body[data-page="home"] .site-footer .social-links {
    display: none !important;
  }

  body[data-page="home"] .site-footer .footer-company h2 {
    margin-bottom: 4px !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
  }

  body[data-page="home"] .site-footer .footer-company > p {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    max-width: 280px !important;
    margin-bottom: 3px !important;
    color: rgba(255, 255, 255, 0.84) !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  body[data-page="home"] .site-footer .footer-contact {
    display: grid !important;
    gap: 2px !important;
    margin-top: 3px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 10px !important;
    line-height: 1.12 !important;
  }

  body[data-page="home"] .site-footer .footer-contact li:nth-child(n + 4) {
    display: none !important;
  }

  body[data-page="home"] .site-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  body[data-page="home"] .site-footer .footer-bottom__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    min-height: auto !important;
    padding-block: 14px 16px !important;
    text-align: center !important;
  }

  body[data-page="home"] .site-footer .footer-bottom p {
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    white-space: nowrap;
  }

  body[data-page="home"] .site-footer .footer-bottom nav {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  body[data-page="home"] .site-footer .footer-bottom nav a {
    color: rgba(255, 255, 255, 0.84);
    font-size: 10px;
    line-height: 1.2;
  }

  body[data-page="home"] .mobile-bottom-nav--main {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 60px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    border-top: 1px solid rgba(14, 39, 88, 0.08) !important;
    box-shadow: 0 -4px 16px rgba(7, 25, 61, 0.08) !important;
  }

  body[data-page="home"] .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 120 !important;
    overflow: visible !important;
  }

  body[data-page="home"] .site-header .navbar__inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  body[data-page="home"] .site-header .nav-toggle {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin-left: auto !important;
    background: transparent !important;
    border: 0 !important;
    position: relative !important;
    z-index: 130 !important;
    pointer-events: auto !important;
  }

  body[data-page="home"] .site-header .nav-toggle span {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #0b2348 !important;
    transition: transform 180ms ease, opacity 160ms ease, width 180ms ease !important;
    transform-origin: center !important;
  }

  body.nav-open[data-page="home"] .site-header .nav-toggle span:nth-child(1),
  body.menu-open[data-page="home"] .site-header .nav-toggle span:nth-child(1),
  body[data-page="home"] .nav-toggle.is-active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg) !important;
  }

  body.nav-open[data-page="home"] .site-header .nav-toggle span:nth-child(2),
  body.menu-open[data-page="home"] .site-header .nav-toggle span:nth-child(2),
  body[data-page="home"] .nav-toggle.is-active span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0.2) !important;
  }

  body.nav-open[data-page="home"] .site-header .nav-toggle span:nth-child(3),
  body.menu-open[data-page="home"] .site-header .nav-toggle span:nth-child(3),
  body[data-page="home"] .nav-toggle.is-active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg) !important;
  }

  body[data-page="home"] .site-header .main-nav {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(82vw, 330px) !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 104px 20px 28px !important;
    overflow-y: auto !important;
    border-left: 1px solid rgba(14, 39, 88, 0.08) !important;
    background: #fff !important;
    box-shadow: -18px 0 40px rgba(0, 20, 52, 0.18) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(100%) !important;
    transition: transform 220ms ease, opacity 180ms ease, visibility 180ms ease !important;
    visibility: hidden !important;
    z-index: 115 !important;
  }

  body.nav-open[data-page="home"] {
    overflow: hidden !important;
  }

  body.nav-open[data-page="home"] .site-header .main-nav {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  body[data-page="home"] .home-mobile-cta .container,
  body[data-page="home"] .home-mobile-kpi .container,
  body[data-page="home"] .home-trust .container,
  body[data-page="home"] .home-service-cta .container {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  body[data-page="home"] .home-trust__logos {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  body[data-page="home"] .home-products .home-outline-btn {
    display: none !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list .home-solution-more {
    display: none !important;
  }

  body[data-page="home"] .home-cases .home-case-list span,
  body[data-page="home"] .home-cases .home-case-card__tag {
    display: none !important;
  }
}

@media (max-width: 768px) {
  body[data-page="home"] .home-product-grid {
    gap: 12px !important;
  }

  body[data-page="home"] .home-product-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: 220px !important;
    padding: 10px !important;
    gap: 6px !important;
    border-radius: 16px !important;
    text-align: left !important;
  }

  body[data-page="home"] .home-product-card img {
    width: 100% !important;
    height: 110px !important;
    margin-bottom: 0 !important;
    border-radius: 12px !important;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-product-card h3 {
    margin: 0 !important;
    color: #0e2758 !important;
    font-size: 15px !important;
    line-height: 1.24 !important;
    font-weight: 900 !important;
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-page="home"] .home-product-card p {
    display: -webkit-box !important;
    margin: 0 !important;
    color: rgba(14, 39, 88, 0.66) !important;
    font-size: 11px !important;
    line-height: 1.28 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
  }

  body[data-page="home"] .home-outline-btn {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    margin-top: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #0a6cff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  body[data-page="home"] .home-outline-btn::after {
    content: " →";
  }

  body[data-page="home"] .home-solutions .home-solution-grid,
  body[data-page="home"] .home-cases .home-case-wrap,
  body[data-page="home"] .home-cases .home-case-grid {
    display: none !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list,
  body[data-page="home"] .home-cases .home-case-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list > *,
  body[data-page="home"] .home-cases .home-case-list > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list article,
  body[data-page="home"] .home-cases .home-case-list article {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: 0;
    min-height: 188px !important;
    padding: 12px !important;
    gap: 8px !important;
    border: 1px solid rgba(14, 39, 88, 0.08) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 10px 22px rgba(9, 35, 89, 0.08) !important;
    overflow: hidden !important;
    align-content: initial !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list article:hover,
  body[data-page="home"] .home-solutions .home-solution-list article:active,
  body[data-page="home"] .home-cases .home-case-list article:hover,
  body[data-page="home"] .home-cases .home-case-list article:active {
    box-shadow: 0 14px 28px rgba(9, 35, 89, 0.12) !important;
    transform: translateY(-1px) !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list > article > .home-solution-icon {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    background: rgba(10, 108, 255, 0.10) !important;
    color: #0a6cff !important;
    box-shadow: inset 0 0 0 1px rgba(10, 108, 255, 0.12) !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list > article > .home-solution-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list article > div {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    gap: 5px !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list article > div > span {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background: rgba(0, 70, 184, 0.10) !important;
    color: #003a8c !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list h3 {
    margin: 0 !important;
    color: #0e2758 !important;
    font-size: 14px !important;
    line-height: 1.28 !important;
    font-weight: 900 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list p {
    margin: 0 !important;
    color: rgba(14, 39, 88, 0.66) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list .home-solution-more {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    margin-top: auto !important;
    color: #0a6cff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  body[data-page="home"] .home-cases .home-case-list article {
    min-height: 190px !important;
    padding: 10px 10px 12px !important;
  }

  body[data-page="home"] .home-cases .home-case-list img {
    width: 100% !important;
    height: 100px !important;
    margin-bottom: 0 !important;
    border-radius: 12px !important;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-cases .home-case-list article > div {
    position: relative;
    display: grid;
    gap: 4px !important;
    min-width: 0;
    padding: 26px 0 0 !important;
  }

  body[data-page="home"] .home-cases .home-case-list span {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 22px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: rgba(0, 70, 184, 0.10) !important;
    color: #003a8c !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  body[data-page="home"] .home-cases .home-case-list h3 {
    margin: 0 !important;
    color: #0e2758 !important;
    font-size: 13px !important;
    line-height: 1.28 !important;
    font-weight: 900 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-page="home"] .home-cases .home-case-list p {
    display: none !important;
  }
}

@media (max-width: 768px) {
  /* Home mobile baseline */
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body[data-page="home"] {
    background: #f5f7fa !important;
    padding-bottom: 70px !important;
  }

  body[data-page="home"] * {
    box-sizing: border-box;
  }

  body[data-page="home"] img {
    max-width: 100%;
    height: auto;
  }

  body[data-page="home"] .container {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    padding-inline: 0 !important;
  }

  body[data-page="home"] .home-section {
    padding-block: 24px !important;
  }

  body[data-page="home"] .home-desktop-only {
    display: none !important;
  }

  body[data-page="home"] .home-mobile-only {
    display: inline !important;
  }

  body[data-page="home"] .home-products .home-section-title > p,
  body[data-page="home"] .home-solutions .home-section-title > p,
  body[data-page="home"] .home-cases .home-section-title > p,
  body[data-page="home"] .home-news .home-news-heading > p {
    display: none !important;
  }

  body[data-page="home"] .home-section-title h2,
  body[data-page="home"] .home-section-title--compact h2,
  body[data-page="home"] .home-news-heading h2,
  body[data-page="home"] .home-trust__title {
    color: #0b2348;
    font-weight: 900;
    line-height: 1.15;
  }

  /* Header */
  body[data-page="home"] .site-header {
    position: sticky;
    top: 0;
    z-index: 120;
    background: #fff;
    box-shadow: 0 1px 0 rgba(14, 39, 88, 0.08);
  }

  body[data-page="home"] .site-header .topbar {
    display: none !important;
  }

  body[data-page="home"] .site-header .navbar {
    padding: 10px 0 !important;
    background: #fff !important;
  }

  body[data-page="home"] .site-header .navbar__inner {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    min-height: 46px;
    margin: 0 auto;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  body[data-page="home"] .site-header .brand {
    min-width: 0;
    gap: 8px;
  }

  body[data-page="home"] .site-header .brand__mark {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }

  body[data-page="home"] .site-header .brand__text strong {
    font-size: 15px;
    line-height: 1.1;
  }

  body[data-page="home"] .site-header .brand__text small {
    font-size: 9px;
    line-height: 1.05;
    letter-spacing: 0.08em;
  }

  body[data-page="home"] .site-header .main-nav,
  body[data-page="home"] .site-header .header-actions,
  body[data-page="home"] .site-header .topbar__links {
    display: none !important;
  }

  body[data-page="home"] .site-header .nav-toggle {
    display: inline-flex !important;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  body[data-page="home"] .home-products .home-product-card {
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 12px 14px !important;
    gap: 10px !important;
    align-content: start !important;
  }

  body[data-page="home"] .home-products .home-product-card img {
    height: 120px !important;
    margin-bottom: 0 !important;
    border-radius: 12px !important;
  }

  body[data-page="home"] .home-products .home-product-card h3 {
    margin: 0 !important;
  }

  body[data-page="home"] .home-products .home-product-card p,
  body[data-page="home"] .home-products .home-outline-btn {
    display: none !important;
  }

  /* Banner */
  body[data-page="home"] .home-hero {
    min-height: 240px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body[data-page="home"] .home-hero__slide {
    background-image:
      linear-gradient(90deg, rgba(3, 27, 76, 0.94) 0%, rgba(7, 61, 148, 0.78) 52%, rgba(7, 61, 148, 0.2) 100%),
      var(--home-hero-image);
    background-position: 0 0, 76% center !important;
    background-size: 100% 100%, cover !important;
  }

  body[data-page="home"] .home-hero__inner {
    min-height: 240px !important;
    padding: 20px 16px 52px !important;
  }

  body[data-page="home"] .home-mobile-hero-title {
    display: block !important;
    max-width: 248px;
    margin: 0 0 10px !important;
    color: #fff;
    font-size: 34px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  body[data-page="home"] .home-mobile-hero-subtitle {
    display: block !important;
    margin: 0 0 12px !important;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    line-height: 1.34;
    letter-spacing: 0.02em;
  }

  body[data-page="home"] .home-hero-kpis {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: auto;
    padding-top: 10px;
  }

  body[data-page="home"] .home-hero-kpi {
    min-width: 0;
    padding-right: 6px;
    color: rgba(255, 255, 255, 0.9);
  }

  body[data-page="home"] .home-hero-kpi strong {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    line-height: 1.1;
    font-weight: 900;
  }

  body[data-page="home"] .home-hero-kpi small {
    display: block;
    font-size: 9px;
    line-height: 1.12;
    opacity: 0.88;
  }

  body[data-page="home"] .home-hero__controls {
    bottom: 10px;
  }

  /* 获取方案卡片 */
  body[data-page="home"] .home-mobile-cta {
    padding: 0 0 24px !important;
  }

  body[data-page="home"] .home-mobile-cta .container {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    padding-inline: 0 !important;
  }

  body[data-page="home"] .home-mobile-cta__card {
    width: 100%;
    min-height: 140px;
    padding: 14px 10px 14px 16px;
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(9, 35, 89, 0.08);
  }

  body[data-page="home"] .home-mobile-cta__body {
    width: 58%;
    gap: 6px;
  }

  body[data-page="home"] .home-mobile-cta__title {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 900;
  }

  body[data-page="home"] .home-mobile-cta__desc {
    font-size: 11px;
    line-height: 1.28;
    color: rgba(14, 39, 88, 0.62);
  }

  body[data-page="home"] .home-mobile-cta__btn {
    min-height: 36px;
    padding-inline: 14px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
  }

  body[data-page="home"] .home-mobile-cta__media {
    width: 42%;
    min-height: 110px;
    border-radius: 14px;
    overflow: hidden;
  }

  body[data-page="home"] .home-mobile-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center right;
  }

  /* 热门产品 */
  body[data-page="home"] .home-product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    overflow: visible !important;
    overflow-x: hidden !important;
  }

  body[data-page="home"] .home-product-grid > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="home"] .home-product-grid .home-mobile-only {
    display: block !important;
  }

  body[data-page="home"] .home-product-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: 220px !important;
    padding: 10px !important;
    gap: 6px !important;
    border: 1px solid rgba(16, 45, 106, 0.08) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 10px 22px rgba(9, 35, 89, 0.08) !important;
    text-align: left !important;
  }

  body[data-page="home"] .home-product-card img {
    width: 100% !important;
    height: 110px !important;
    margin-bottom: 0 !important;
    border-radius: 12px !important;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-product-card h3 {
    margin: 0 !important;
    color: #0e2758 !important;
    font-size: 15px !important;
    line-height: 1.24 !important;
    font-weight: 900 !important;
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-page="home"] .home-product-card p {
    display: -webkit-box !important;
    margin: 0 !important;
    color: rgba(14, 39, 88, 0.66) !important;
    font-size: 11px !important;
    line-height: 1.28 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
  }

  body[data-page="home"] .home-outline-btn {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    margin-top: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #0a6cff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  body[data-page="home"] .home-outline-btn::after {
    content: " →";
  }

  /* 数据条 */
  body[data-page="home"] .home-mobile-kpi {
    display: block !important;
    padding: 0 0 24px;
  }

  body[data-page="home"] .home-mobile-kpi__strip {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding: 12px 8px;
    border-radius: 16px;
    background: linear-gradient(90deg, #174dc8 0%, #0a6cff 100%);
    box-shadow: 0 10px 22px rgba(10, 108, 255, 0.18);
  }

  body[data-page="home"] .home-mobile-kpi__item {
    min-width: 0;
    text-align: center;
    color: #fff;
  }

  body[data-page="home"] .home-mobile-kpi__item strong {
    display: block;
    font-size: 14px;
    line-height: 1.1;
    font-weight: 900;
  }

  body[data-page="home"] .home-mobile-kpi__item small {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    line-height: 1.1;
    opacity: 0.9;
  }

  /* 行业解决方案 */
  body[data-page="home"] .home-solutions .home-solution-grid,
  body[data-page="home"] .home-cases .home-case-wrap,
  body[data-page="home"] .home-cases .home-case-grid {
    display: none !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list,
  body[data-page="home"] .home-cases .home-case-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list > *,
  body[data-page="home"] .home-cases .home-case-list > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list article,
  body[data-page="home"] .home-cases .home-case-list article {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: 0;
    min-height: 188px !important;
    padding: 12px !important;
    gap: 8px !important;
    border: 1px solid rgba(14, 39, 88, 0.08) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 10px 22px rgba(9, 35, 89, 0.08) !important;
    overflow: hidden !important;
    align-content: initial !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list article:hover,
  body[data-page="home"] .home-solutions .home-solution-list article:active,
  body[data-page="home"] .home-cases .home-case-list article:hover,
  body[data-page="home"] .home-cases .home-case-list article:active {
    box-shadow: 0 14px 28px rgba(9, 35, 89, 0.12) !important;
    transform: translateY(-1px) !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list > article > .home-solution-icon {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    background: rgba(10, 108, 255, 0.10) !important;
    color: #0a6cff !important;
    box-shadow: inset 0 0 0 1px rgba(10, 108, 255, 0.12) !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list > article > .home-solution-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list article > div {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    gap: 5px !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list article > div > span {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background: rgba(0, 70, 184, 0.10) !important;
    color: #003a8c !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list h3 {
    margin: 0 !important;
    color: #0e2758 !important;
    font-size: 14px !important;
    line-height: 1.28 !important;
    font-weight: 900 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list p {
    margin: 0 !important;
    color: rgba(14, 39, 88, 0.66) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-page="home"] .home-solutions .home-solution-list .home-solution-more {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    margin-top: auto !important;
    color: #0a6cff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  /* 客户案例 */
  body[data-page="home"] .home-cases .home-case-list article {
    min-height: 190px !important;
    padding: 10px 10px 12px !important;
  }

  body[data-page="home"] .home-cases .home-case-list img {
    width: 100% !important;
    height: 100px !important;
    margin-bottom: 0 !important;
    border-radius: 12px !important;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-cases .home-case-list article > div {
    position: relative;
    display: grid;
    gap: 4px !important;
    min-width: 0;
    padding: 26px 0 0 !important;
  }

  body[data-page="home"] .home-cases .home-case-list span {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 22px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: rgba(0, 70, 184, 0.10) !important;
    color: #003a8c !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  body[data-page="home"] .home-cases .home-case-list h3 {
    margin: 0 !important;
    color: #0e2758 !important;
    font-size: 13px !important;
    line-height: 1.28 !important;
    font-weight: 900 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-page="home"] .home-cases .home-case-list p {
    display: none !important;
  }

  /* 新闻中心 */
  body[data-page="home"] .home-news-grid {
    display: block !important;
  }

  body[data-page="home"] .home-news-grid > div:nth-child(2) {
    margin-top: 18px;
  }

  body[data-page="home"] .home-news-list {
    display: grid !important;
    gap: 10px !important;
  }

  body[data-page="home"] .home-news-list article {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 7px 10px;
    border: 1px solid rgba(14, 39, 88, 0.08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(9, 35, 89, 0.06);
  }

  body[data-page="home"] .home-news-list img {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    object-fit: cover !important;
  }

  body[data-page="home"] .home-news-list article > div {
    position: relative;
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 0;
  }

  body[data-page="home"] .home-news-list article > div > span {
    position: static;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 20px;
    margin: 0;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(0, 70, 184, 0.10);
    color: #003a8c;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
  }

  body[data-page="home"] .home-news-list h3 {
    margin: 0;
    font-size: 12px;
    line-height: 1.26;
    font-weight: 900;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="home"] .home-news-list p {
    margin: 0;
    font-size: 10px;
    line-height: 1.12;
    color: rgba(14, 39, 88, 0.58);
  }

  /* 企业信赖 */
  body[data-page="home"] .home-trust {
    display: block !important;
    padding: 34px 0 10px;
  }

  body[data-page="home"] .home-trust .container {
    max-width: none !important;
    margin-inline: 0 !important;
    padding: 16px !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 8px 18px rgba(9, 35, 89, 0.06) !important;
  }

  body[data-page="home"] .home-trust__title {
    margin-bottom: 10px;
    color: #23407a;
    font-size: 19px;
    line-height: 1.2;
    font-weight: 900;
    text-align: center;
  }

  body[data-page="home"] .home-trust__logos {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    align-items: center;
  }

  body[data-page="home"] .home-trust__logo {
    min-width: 0;
    padding: 10px 6px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(9, 35, 89, 0.06);
    color: rgba(40, 66, 112, 0.96);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    opacity: 1;
  }

  /* CTA */
  body[data-page="home"] .home-service-cta {
    display: block !important;
    padding: 24px 0 24px;
  }

  body[data-page="home"] .home-service-cta__card {
    display: grid !important;
    grid-template-columns: 60% 40%;
    gap: 10px;
    align-items: center;
    min-height: 140px;
    padding: 14px 10px 14px 16px;
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(9, 35, 89, 0.10);
  }

  body[data-page="home"] .home-service-cta__body {
    gap: 5px;
  }

  body[data-page="home"] .home-service-cta__body strong {
    font-size: 17px;
    line-height: 1.14;
  }

  body[data-page="home"] .home-service-cta__body p {
    font-size: 11px;
    line-height: 1.3;
  }

  body[data-page="home"] .home-service-cta__actions {
    gap: 8px;
    flex-wrap: nowrap;
  }

  body[data-page="home"] .home-service-cta__actions .btn {
    min-height: 40px;
    padding-inline: 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
  }

  body[data-page="home"] .home-service-cta__actions .btn:first-child {
    box-shadow: 0 10px 18px rgba(255, 106, 26, 0.28);
  }

  body[data-page="home"] .home-service-cta__media {
    width: 100%;
    height: 100%;
    min-height: 110px;
    border-radius: 14px;
    overflow: hidden;
  }

  body[data-page="home"] .home-service-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center right;
  }

  /* Footer */
  body[data-page="home"] .site-footer {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient(120deg, #011a45 0%, #022f7e 100%) !important;
  }

  body[data-page="home"] .site-footer .footer-main {
    padding: 6px 0 2px !important;
  }

  body[data-page="home"] .site-footer .footer-main__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }

  body[data-page="home"] .site-footer .footer-links,
  body[data-page="home"] .site-footer .footer-qrcode,
  body[data-page="home"] .site-footer .social-links {
    display: none !important;
  }

  body[data-page="home"] .site-footer .footer-company h2 {
    margin-bottom: 4px !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
  }

  body[data-page="home"] .site-footer .footer-company > p {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    max-width: 280px !important;
    margin-bottom: 3px !important;
    color: rgba(255, 255, 255, 0.84) !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  body[data-page="home"] .site-footer .footer-contact {
    display: grid !important;
    gap: 2px !important;
    margin-top: 3px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 10px !important;
    line-height: 1.12 !important;
  }

  body[data-page="home"] .site-footer .footer-contact li:nth-child(n + 4) {
    display: none !important;
  }

  body[data-page="home"] .site-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  body[data-page="home"] .site-footer .footer-bottom__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    min-height: auto !important;
    padding-block: 4px 6px !important;
    text-align: center !important;
  }

  body[data-page="home"] .site-footer .footer-bottom p {
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    white-space: nowrap;
  }

  body[data-page="home"] .site-footer .footer-bottom nav {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  body[data-page="home"] .site-footer .footer-bottom nav a {
    color: rgba(255, 255, 255, 0.84);
    font-size: 10px;
    line-height: 1.2;
  }

  /* Bottom nav */
  body[data-page="home"] .mobile-bottom-nav--main {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 60px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    border-top: 1px solid rgba(14, 39, 88, 0.08) !important;
    box-shadow: 0 -4px 16px rgba(7, 25, 61, 0.08) !important;
  }

  body[data-page="home"] .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 120 !important;
    overflow: visible !important;
  }

  body[data-page="home"] .site-header .nav-toggle {
    position: relative !important;
    z-index: 130 !important;
    pointer-events: auto !important;
  }

  body[data-page="home"] .site-header .main-nav {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(82vw, 330px) !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 104px 20px 28px !important;
    overflow-y: auto !important;
    border-left: 1px solid rgba(14, 39, 88, 0.08) !important;
    background: #fff !important;
    box-shadow: -18px 0 40px rgba(0, 20, 52, 0.18) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(100%) !important;
    transition: transform 220ms ease, opacity 180ms ease, visibility 180ms ease !important;
    visibility: hidden !important;
    z-index: 115 !important;
  }

  body.nav-open[data-page="home"] {
    overflow: hidden !important;
  }

  body.nav-open[data-page="home"] .site-header .main-nav {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  body[data-page="home"] .home-mobile-cta .container,
  body[data-page="home"] .home-mobile-kpi .container,
  body[data-page="home"] .home-trust .container,
  body[data-page="home"] .home-service-cta .container {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}

/* Home mobile header reset: match about.html shared header behavior. */
@media (max-width: 768px) {
  body[data-page="home"] .site-header .navbar__inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    min-height: 64px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-block: 8px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  body[data-page="home"] .site-header .nav-toggle {
    display: inline-grid !important;
    width: 40px !important;
    height: 40px !important;
    margin-left: auto !important;
    padding: 8px !important;
    background: transparent !important;
    border: 0 !important;
  }

  body[data-page="home"] .site-header .nav-toggle span {
    width: 24px !important;
    height: 2px !important;
    margin: 3px 0 !important;
    border-radius: 999px !important;
    background: var(--color-navy-900) !important;
    transition: transform var(--transition), opacity var(--transition) !important;
  }

  body.nav-open[data-page="home"] .site-header .nav-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
  }

  body.nav-open[data-page="home"] .site-header .nav-toggle span:nth-child(2) {
    opacity: 0 !important;
  }

  body.nav-open[data-page="home"] .site-header .nav-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
  }
}

/* News mobile final pass: 375px banner, one-line categories, compact news cards, and simplified footer.
   Keep this at the very end so it wins over earlier news mobile shells. */
@media (max-width: 768px) {
  body[data-page="news"] {
    overflow-x: hidden !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 88px) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 58%, #ffffff 100%) !important;
  }

  body[data-page="news"] .news-page {
    overflow-x: hidden !important;
  }

  body[data-page="news"] .news-banner {
    width: 343px !important;
    max-width: calc(100% - 32px) !important;
    min-height: 180px !important;
    margin: 0 16px 24px !important;
    border-radius: 24px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    box-shadow: 0 16px 34px rgba(0, 20, 52, 0.16) !important;
  }

  body[data-page="news"] .news-banner::before {
    background-image:
      linear-gradient(90deg, rgba(0, 18, 48, 0.92) 0%, rgba(0, 43, 102, 0.72) 52%, rgba(0, 43, 102, 0.14) 100%),
      var(--banner-image, url("../images/banners/default-industrial-factory.png")) !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  body[data-page="news"] .news-banner__inner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 180px !important;
    width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  body[data-page="news"] .news-banner h1 {
    margin: 0 0 8px !important;
    color: #fff !important;
    font-size: 28px !important;
    line-height: 1.08 !important;
    font-weight: 950 !important;
  }

  body[data-page="news"] .news-banner .news-hero-subtitle {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 800 !important;
  }

  body[data-page="news"] .news-banner .news-hero-desc,
  body[data-page="news"] .news-banner .banner-search,
  body[data-page="news"] .news-breadcrumb {
    display: none !important;
  }

  body[data-page="news"] .news-mobile-categories {
    display: block !important;
    margin: 0 0 24px !important;
  }

  body[data-page="news"] .news-mobile-categories .container,
  body[data-page="news"] .news-list-section .container,
  body[data-page="news"] .news-mobile-cta .container {
    width: 343px !important;
    max-width: calc(100% - 32px) !important;
    margin-inline: 16px !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }

  body[data-page="news"] .news-mobile-categories__card {
    padding: 12px 12px 10px !important;
    border: 1px solid rgba(14, 39, 88, 0.08) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 10px 24px rgba(0, 43, 102, 0.06) !important;
  }

  body[data-page="news"] .news-mobile-categories__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
  }

  body[data-page="news"] .news-mobile-categories__title {
    margin: 0 !important;
    color: var(--color-text) !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
  }

  body[data-page="news"] .news-mobile-categories__more {
    display: none !important;
    flex: 0 0 auto !important;
    color: var(--color-blue-700) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  body[data-page="news"] .news-mobile-categories__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  body[data-page="news"] .news-mobile-categories__grid a {
    width: 100% !important;
    min-height: 76px !important;
    display: grid !important;
    justify-items: center !important;
    align-content: start !important;
    gap: 4px !important;
    padding: 10px 6px 8px !important;
    border: 1px solid rgba(14, 39, 88, 0.08) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #12469c !important;
    text-decoration: none !important;
    text-align: center !important;
    box-shadow: 0 10px 24px rgba(0, 43, 102, 0.06) !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    overflow: hidden !important;
    scroll-snap-align: start !important;
  }

  body[data-page="news"] .news-mobile-categories__icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.10), rgba(255, 255, 255, 0.96)) !important;
    border: 1px solid rgba(0, 70, 184, 0.10) !important;
    box-shadow: 0 8px 18px rgba(0, 43, 102, 0.08) !important;
    color: #1f5dcf !important;
  }

  body[data-page="news"] .news-mobile-categories__icon svg {
    width: 15px !important;
    height: 15px !important;
    display: block !important;
  }

  body[data-page="news"] .news-mobile-categories__label {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    font-weight: 850 !important;
  }

  body[data-page="news"] .news-mobile-categories__count {
    display: block !important;
    color: #6f7f94 !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
  }

  body[data-page="news"] .news-mobile-categories__grid a.is-active {
    color: #fff !important;
    border-color: rgba(0, 70, 184, 0.18) !important;
    background: linear-gradient(135deg, rgba(0, 70, 184, 0.94), rgba(0, 43, 102, 0.94)) !important;
    box-shadow: 0 12px 24px rgba(0, 43, 102, 0.12) !important;
  }

  body[data-page="news"] .news-mobile-categories__grid a.is-active .news-mobile-categories__icon {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
  }

  body[data-page="news"] .news-mobile-categories__grid a.is-active .news-mobile-categories__count {
    color: rgba(255, 255, 255, 0.92) !important;
  }

  body[data-page="news"] .news-list-section {
    padding-block: 0 6px !important;
  }

  body[data-page="news"] .news-main-card {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 12px 28px rgba(0, 20, 52, 0.08) !important;
    overflow: hidden !important;
  }

  body[data-page="news"] .news-tabs,
  body[data-page="news"] .news-mobile-tabs {
    display: none !important;
  }

  body[data-page="news"] .news-list {
    display: grid !important;
    gap: 12px !important;
    padding: 12px !important;
    margin: 0 !important;
  }

  body[data-page="news"] .news-list-item {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    min-height: 112px !important;
    padding: 10px !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 16px !important;
    background: var(--color-white) !important;
    box-shadow: 0 10px 26px rgba(0, 20, 52, 0.08) !important;
  }

  body[data-page="news"] .news-list-item img {
    width: 96px !important;
    height: 72px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
  }

  body[data-page="news"] .news-list-item > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title tag"
      "desc desc"
      "meta meta" !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
    min-width: 0 !important;
    align-content: start !important;
  }

  body[data-page="news"] .news-tag {
    grid-area: tag;
    justify-self: end;
    align-self: start;
    width: fit-content;
    margin: 0 !important;
    min-height: 18px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    line-height: 18px !important;
  }

  body[data-page="news"] .news-list-item h2 {
    grid-area: title;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
  }

  body[data-page="news"] .news-list-item h2 a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--color-text);
  }

  body[data-page="news"] .news-list-item p {
    grid-area: desc;
    display: -webkit-box;
    margin: 0 !important;
    color: rgba(71, 84, 103, 0.88);
    font-size: 11px !important;
    line-height: 1.5 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  body[data-page="news"] .news-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  body[data-page="news"] .news-meta span {
    white-space: nowrap;
  }

  body[data-page="news"] .news-meta span:nth-child(2),
  body[data-page="news"] .news-meta span:nth-child(3),
  body[data-page="news"] .news-arrow {
    display: none !important;
  }

  body[data-page="news"] .news-mobile-loadmore {
    display: flex !important;
    justify-content: center !important;
    margin: 0 16px 24px !important;
  }

  body[data-page="news"] .news-mobile-loadmore .btn {
    width: 100% !important;
    height: 44px !important;
    border-radius: 12px !important;
    border-color: rgba(11, 91, 211, 0.38) !important;
    color: var(--color-blue-700) !important;
    background: rgba(255, 255, 255, 0.96) !important;
  }

  body[data-page="news"] .news-sidebar,
  body[data-page="news"] .news-feature-section,
  body[data-page="news"] .news-subscribe,
  body[data-page="news"] .news-faq-strip,
  body[data-page="news"] .news-quote,
  body[data-page="news"] .news-mobile-hot {
    display: none !important;
  }

  body[data-page="news"] .news-mobile-cta {
    display: block !important;
    padding: 0 0 24px !important;
  }

  body[data-page="news"] .news-cta-card {
    width: 100% !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 92px !important;
    gap: 12px !important;
    align-items: center !important;
    min-height: 120px !important;
    padding: 16px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #0a33a4 0%, #0b5bd3 55%, #0f49cf 100%) !important;
    color: var(--color-white) !important;
    overflow: hidden !important;
    box-shadow: 0 18px 44px rgba(0, 20, 52, 0.22) !important;
  }

  body[data-page="news"] .news-cta-card__copy {
    min-width: 0 !important;
  }

  body[data-page="news"] .news-cta-card__copy h2 {
    margin: 0 0 8px !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    color: #fff !important;
  }

  body[data-page="news"] .news-cta-card__copy p {
    margin: 0 0 12px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: rgba(255, 255, 255, 0.96) !important;
  }

  body[data-page="news"] .news-cta-card .btn.btn-accent {
    min-height: 44px !important;
    padding-inline: 16px !important;
    border-radius: 12px !important;
    background: #ff7a1a !important;
    border-color: #ff7a1a !important;
    color: #fff !important;
  }

  body[data-page="news"] .news-cta-card__media {
    width: 92px !important;
    height: 92px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    justify-self: end !important;
    opacity: 0.95;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  body[data-page="news"] .news-cta-card__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  body[data-page="news"] .site-footer {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: linear-gradient(120deg, #011a45 0%, #022f7e 100%) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body[data-page="news"] .site-footer .footer-main {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 14px 0 8px !important;
  }

  body[data-page="news"] .site-footer .container {
    width: 343px !important;
    max-width: calc(100% - 32px) !important;
    margin-inline: 16px !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }

  body[data-page="news"] .site-footer .footer-main__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
  }

  body[data-page="news"] .site-footer .footer-main__grid > .footer-links,
  body[data-page="news"] .site-footer .footer-main__grid > .footer-qrcode {
    display: none !important;
  }

  body[data-page="news"] .site-footer .footer-company h2 {
    margin-bottom: 6px !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  body[data-page="news"] .site-footer .footer-company > p,
  body[data-page="news"] .site-footer .social-links,
  body[data-page="news"] .site-footer .footer-bottom nav {
    display: none !important;
  }

  body[data-page="news"] .site-footer .footer-contact {
    margin-top: 8px !important;
    gap: 3px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  body[data-page="news"] .site-footer .footer-contact li:nth-child(n + 4) {
    display: none !important;
  }

  body[data-page="news"] .site-footer .footer-bottom {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding-bottom: 0 !important;
  }

  body[data-page="news"] .site-footer .footer-bottom__inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "nav"
      "copy" !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: auto !important;
    padding-block: 8px 12px !important;
    text-align: center !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body[data-page="news"] .site-footer .footer-bottom p {
    grid-area: copy;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    min-width: 0 !important;
  }

  body[data-page="news"] .site-footer .footer-bottom nav {
    grid-area: nav;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 14px !important;
    min-width: 0 !important;
  }

  body[data-page="news"] .site-footer .footer-bottom nav a {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  body[data-page="news"] .mobile-bottom-nav--main {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  body[data-page="news"] .floating-contact {
    display: none !important;
  }
}

@media (min-width: 769px) {
  body[data-page="products"] .product-list-section {
    padding-block: 26px 20px !important;
  }

  body[data-page="products"] .product-load-more {
    margin: 24px 0 0 !important;
  }

  body[data-page="products"] .product-helper-section {
    padding-block: 20px !important;
  }

  body[data-page="products"] .service-guarantee {
    padding-block: 20px !important;
  }

  body[data-page="products"] .product-inquiry {
    padding-block: 20px 40px !important;
  }
}

@media (min-width: 961px) {
  body[data-page="support"] .service-banner {
    min-height: 252px !important;
  }

  body[data-page="support"] .service-banner__inner {
    min-height: 252px !important;
    padding-block: 26px !important;
  }

  body[data-page="support"] .service-banner-points {
    margin-top: 8px !important;
    gap: 20px !important;
  }

  body[data-page="support"] .service-banner h1 {
    margin-bottom: 6px !important;
  }

  body[data-page="support"] .service-nav-section {
    margin-top: -18px !important;
  }

  body[data-page="support"] .service-nav-card a {
    min-height: 96px !important;
    padding: 14px 10px 12px !important;
    gap: 3px !important;
  }

  body[data-page="support"] .service-nav-card span {
    width: 30px !important;
    height: 30px !important;
  }

  body[data-page="support"] .service-nav-card strong {
    font-size: 15px !important;
  }

  body[data-page="support"] .service-nav-card small {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  body[data-page="support"] .service-home-section,
  body[data-page="support"] .service-section {
    padding-block: 24px !important;
  }

  body[data-page="support"] .service-home-grid {
    gap: 20px !important;
  }

  body[data-page="support"] .service-card,
  body[data-page="support"] .service-side-card,
  body[data-page="support"] .service-help-card,
  body[data-page="support"] .service-list-panel {
    padding: 20px !important;
  }

  body[data-page="support"] .service-section-head,
  body[data-page="support"] .service-list-head,
  body[data-page="support"] .service-flow-section h2 {
    margin-bottom: 32px !important;
  }

  body[data-page="support"] .service-section-head h2,
  body[data-page="support"] .service-list-head h2,
  body[data-page="support"] .service-flow-section h2 {
    font-size: 22px !important;
  }

  body[data-page="support"] .service-accordion-list {
    gap: 8px !important;
  }

  body[data-page="support"] .service-accordion-list summary {
    min-height: 44px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
  }

  body[data-page="support"] .service-accordion-list p {
    padding: 0 16px 16px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  body[data-page="support"] .service-flow {
    margin-top: 0 !important;
    gap: 12px !important;
  }

  body[data-page="support"] .service-flow div {
    gap: 5px !important;
  }

  body[data-page="support"] .service-flow div:not(:last-child)::after {
    top: 18px !important;
  }

  body[data-page="support"] .service-flow span {
    width: 54px !important;
    height: 54px !important;
  }

  body[data-page="support"] .service-flow strong {
    font-size: 14px !important;
  }

  body[data-page="support"] .service-flow small {
    font-size: 11px !important;
  }

  body[data-page="support"] .service-guarantee-grid div {
    min-height: 68px !important;
    padding: 10px 12px !important;
    gap: 2px 8px !important;
  }

  body[data-page="support"] .service-guarantee-grid span {
    width: 36px !important;
    height: 36px !important;
  }

  body[data-page="support"] .service-guarantee-grid span::before {
    width: 18px !important;
    height: 18px !important;
  }

  body[data-page="support"] .service-guarantee-grid strong {
    font-size: 15px !important;
  }

  body[data-page="support"] .service-guarantee-grid small {
    font-size: 11px !important;
  }

  body[data-page="support"] .service-support-strip {
    padding-block: 12px 20px !important;
  }

  body[data-page="support"] .service-support-strip .product-inquiry__inner {
    gap: 24px !important;
    padding: 12px 28px !important;
  }

  body[data-page="support"] .service-support-strip h2 {
    font-size: 28px !important;
  }

  body[data-page="support"] .service-support-strip p {
    font-size: 15px !important;
  }

  body[data-page="support"] .service-hotline strong {
    font-size: 20px !important;
  }
}

@media (min-width: 961px) {
  body[data-page="news"] .news-list-section {
    padding-block: 24px 48px !important;
  }

  body[data-page="news"] .news-layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important;
    gap: 24px !important;
    align-items: start !important;
  }

  body[data-page="news"] .news-main-card {
    padding: 20px !important;
  }

  body[data-page="news"] .news-tabs {
    margin-bottom: 16px !important;
  }

  body[data-page="news"] .news-list {
    gap: 0 !important;
  }

  body[data-page="news"] .news-list-item {
    padding-block: 14px !important;
  }

  body[data-page="news"] .news-pagination {
    margin-top: 18px !important;
  }

  body[data-page="news"] .news-sidebar {
    gap: 16px !important;
  }

  body[data-page="news"] .news-side-card {
    padding: 20px !important;
  }

  body[data-page="news"] .news-side-card h2 {
    margin-bottom: 14px !important;
    font-size: 20px !important;
  }

  body[data-page="news"] .news-download-list {
    display: grid;
    gap: 10px;
  }

  body[data-page="news"] .news-download-list li {
    margin: 0;
  }

  body[data-page="news"] .news-download-list a {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(14, 39, 88, 0.08);
    color: var(--color-text);
  }

  body[data-page="news"] .news-download-list li:last-child a {
    border-bottom: 0;
    padding-bottom: 0;
  }

  body[data-page="news"] .news-download-list span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--color-blue-700);
    background: var(--color-blue-100);
    font-size: 11px;
    font-weight: 900;
  }

  body[data-page="news"] .news-download-list strong {
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.45;
  }

  body[data-page="news"] .news-download-list a:hover strong {
    color: var(--color-blue-700);
  }

  body[data-page="news"] .news-contact-card {
    padding: 18px 20px 20px !important;
  }

  body[data-page="news"] .news-contact-card strong {
    font-size: 22px;
  }

  body[data-page="news"] .news-feature-section {
    padding-bottom: 48px !important;
  }

  body[data-page="news"] .news-feature-card {
    gap: 20px !important;
    padding: 18px !important;
  }

  body[data-page="news"] .news-faq-strip {
    padding-block: 48px !important;
  }

  body[data-page="news"] .news-faq-strip .container {
    display: grid;
    gap: 16px;
  }

  body[data-page="news"] .news-faq-strip h2 {
    margin-bottom: 0 !important;
    color: var(--color-text);
    font-size: 24px;
    text-align: left;
  }

  body[data-page="news"] .news-faq-accordion {
    display: grid;
    gap: 10px;
  }

  body[data-page="news"] .news-faq-accordion summary {
    color: var(--color-blue-700);
  }

  body[data-page="news"] .news-faq-accordion p {
    color: var(--color-muted);
  }

  body[data-page="news"] .news-quote {
    padding: 0 0 48px !important;
  }

  body[data-page="news"] .news-quote .product-inquiry__inner {
    padding: 24px 28px !important;
  }

  body[data-page="news"] .news-quote .product-inquiry__copy h2 {
    font-size: 28px !important;
  }

  body[data-page="news"] .news-quote .product-inquiry-form--inline {
    gap: 12px !important;
  }

  body[data-page="news"] .news-quote .product-inquiry-form--inline input,
  body[data-page="news"] .news-quote .product-inquiry-form--inline select {
    height: 44px !important;
  }
}

@media (min-width: 961px) {
  body[data-page="contact"] .contact-main {
    padding-block: 64px 64px;
  }

  body[data-page="contact"] .contact-hero__inner {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
  }

  body[data-page="contact"] .contact-hotline-card {
    justify-self: end;
    align-self: center;
    width: 320px;
    height: 170px;
    box-sizing: border-box;
    padding: 16px 18px 14px;
  }

  body[data-page="contact"] .contact-hotline-card > span {
    font-size: 12px;
  }

  body[data-page="contact"] .contact-hotline-card strong {
    margin: 4px 0 4px;
    font-size: 26px;
    line-height: 1.1;
  }

  body[data-page="contact"] .contact-hotline-card p {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.35;
  }

  body[data-page="contact"] .contact-hotline-card div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
  }

  body[data-page="contact"] .contact-hotline-card .btn {
    min-height: 34px;
    padding-inline: 10px;
    font-size: 12px;
  }

  body[data-page="contact"] .contact-info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 320px;
    gap: 32px;
    align-items: stretch;
    margin-bottom: 64px;
  }

  body[data-page="contact"] .contact-info-card {
    min-height: 132px;
    padding: 20px 22px;
  }

  body[data-page="contact"] .contact-info-card--qr {
    grid-column: 4;
    grid-row: 1;
    grid-template-columns: 54px minmax(0, 1fr) 84px;
  }

  body[data-page="contact"] .contact-info-card--qr img {
    width: 84px;
    height: 84px;
  }

  body[data-page="contact"] .contact-map-grid {
    gap: 32px;
    margin-bottom: 64px;
  }

  body[data-page="contact"] .contact-map-card {
    min-height: 320px;
  }

  body[data-page="contact"] .contact-map-card img {
    min-height: 320px;
  }

  body[data-page="contact"] .contact-map-pin {
    left: 32px;
    top: 50%;
    bottom: auto;
    width: min(360px, calc(100% - 64px));
    transform: translateY(-50%);
  }

  body[data-page="contact"] .contact-branches {
    padding: 24px;
  }

  body[data-page="contact"] .contact-form-grid {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 64px;
  }

  body[data-page="contact"] .contact-form-card--quote {
    padding: 24px;
  }

  body[data-page="contact"] .contact-form-card--quote p {
    margin-bottom: 24px;
  }

  body[data-page="contact"] .contact-branch-grid {
    gap: 24px;
  }

  body[data-page="contact"] .contact-branch-grid article {
    min-height: 132px;
    padding: 20px;
  }

  body[data-page="contact"] .contact-section-head h2,
  body[data-page="contact"] .contact-form-card h2,
  body[data-page="contact"] .contact-bottom-prompt strong,
  body[data-page="contact"] .contact-support-grid > .contact-panel:nth-of-type(1) h2,
  body[data-page="contact"] .contact-support-grid > .contact-panel:nth-of-type(2) h2 {
    margin-bottom: 24px;
  }

  body[data-page="contact"] .contact-support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
    margin-bottom: 64px;
  }

  body[data-page="contact"] .contact-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
  }

  body[data-page="contact"] .contact-mini-faq {
    gap: 12px;
    margin-bottom: 24px;
  }

  body[data-page="contact"] .contact-mini-faq summary {
    padding: 10px 0;
  }

  body[data-page="contact"] .contact-mini-faq p {
    margin-bottom: 12px;
  }

  body[data-page="contact"] .contact-review-list {
    gap: 24px;
    margin-bottom: 24px;
  }

  body[data-page="contact"] .contact-review-list blockquote {
    padding-bottom: 18px;
  }

  body[data-page="contact"] .contact-review-list p {
    margin-bottom: 10px;
    line-height: 1.7;
  }

  body[data-page="contact"] .contact-panel > .btn.btn-outline.btn-sm {
    margin-top: auto;
  }

  body[data-page="contact"] .contact-bottom-prompt {
    margin-bottom: 64px;
    padding: 24px;
  }

  body[data-page="contact"] .contact-bottom-prompt > div:last-child {
    gap: 16px;
  }

  body[data-page="contact"] .contact-bottom-prompt .btn {
    min-width: 160px;
  }
}

@media (min-width: 961px) {
  body[data-page="news"] .news-list-section {
    padding-block: 24px 64px !important;
  }

  body[data-page="news"] .news-layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important;
    gap: 24px !important;
    align-items: start !important;
  }

  body[data-page="news"] .news-main-card {
    padding: 20px !important;
  }

  body[data-page="news"] .news-tabs {
    margin-bottom: 16px !important;
  }

  body[data-page="news"] .news-list {
    gap: 0 !important;
  }

  body[data-page="news"] .news-list-item {
    grid-template-columns: 220px minmax(0, 1fr) auto !important;
    gap: 18px !important;
    align-items: start !important;
    padding: 14px 0 !important;
  }

  body[data-page="news"] .news-list-item img {
    width: 220px;
    height: 124px;
  }

  body[data-page="news"] .news-list-item > div {
    display: grid;
    gap: 6px;
    min-width: 0;
  }

  body[data-page="news"] .news-list-item h2 {
    margin-bottom: 0 !important;
    font-size: 22px !important;
    line-height: 1.35 !important;
  }

  body[data-page="news"] .news-list-item h2 a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="news"] .news-list-item p {
    margin-bottom: 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  body[data-page="news"] .news-tag {
    display: none !important;
  }

  body[data-page="news"] .news-meta {
    gap: 0;
    color: var(--color-subtle);
    font-size: 13px;
    line-height: 1.4;
  }

  body[data-page="news"] .news-meta span::before {
    width: 14px;
    height: 14px;
  }

  body[data-page="news"] .news-arrow {
    display: inline-flex;
    align-self: center;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    height: auto;
    gap: 4px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
  }

  body[data-page="news"] .news-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px !important;
  }

  body[data-page="news"] .news-mobile-loadmore {
    display: flex !important;
    justify-content: center;
    margin: 24px 0 0;
  }

  body[data-page="news"] .news-mobile-loadmore .btn {
    width: 220px;
    height: 48px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
  }

  body[data-page="news"] .news-sidebar {
    gap: 16px !important;
  }

  body[data-page="news"] .news-side-card {
    padding: 20px !important;
  }

  body[data-page="news"] .news-side-card h2 {
    margin-bottom: 14px !important;
    font-size: 20px !important;
  }

  body[data-page="news"] .news-download-list {
    display: grid;
    gap: 10px;
  }

  body[data-page="news"] .news-download-list li {
    margin: 0;
  }

  body[data-page="news"] .news-download-list a {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(14, 39, 88, 0.08);
    color: var(--color-text);
  }

  body[data-page="news"] .news-download-list li:last-child a {
    border-bottom: 0;
    padding-bottom: 0;
  }

  body[data-page="news"] .news-download-list span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--color-blue-700);
    background: var(--color-blue-100);
    font-size: 11px;
    font-weight: 900;
  }

  body[data-page="news"] .news-download-list strong {
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.45;
  }

  body[data-page="news"] .news-download-list a:hover strong {
    color: var(--color-blue-700);
  }

  body[data-page="news"] .news-contact-card {
    padding: 18px 20px 20px !important;
  }

  body[data-page="news"] .news-contact-card strong {
    font-size: 22px;
  }

  body[data-page="news"] .news-feature-section {
    padding-block: 0 64px !important;
  }

  body[data-page="news"] .news-feature-card {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 220px;
    gap: 16px !important;
    align-items: start !important;
    min-height: 220px;
    padding: 16px !important;
    overflow: hidden;
  }

  body[data-page="news"] .news-feature-card > img {
    width: 220px;
    height: 220px;
  }

  body[data-page="news"] .news-feature-card article {
    display: grid;
    gap: 8px;
    align-content: start;
    min-width: 0;
  }

  body[data-page="news"] .news-feature-meta {
    margin-bottom: 0;
  }

  body[data-page="news"] .news-feature-card h2 {
    margin-bottom: 0;
    font-size: 22px;
    line-height: 1.3;
  }

  body[data-page="news"] .news-feature-card p {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.6;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="news"] .news-feature-card ol {
    display: none;
  }

  body[data-page="news"] .news-feature-card .btn {
    width: fit-content;
  }

  body[data-page="news"] .news-feature-card aside {
    display: grid;
    gap: 10px;
    align-content: start;
  }

  body[data-page="news"] .news-feature-card aside h3 {
    margin-bottom: 0;
    font-size: 16px;
  }

  body[data-page="news"] .news-feature-card aside a:not(.btn) {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 8px;
  }

  body[data-page="news"] .news-feature-card aside img {
    width: 64px;
    height: 42px;
  }

  body[data-page="news"] .news-feature-card aside span {
    font-size: 12px;
    line-height: 1.45;
  }

  body[data-page="news"] .news-faq-strip {
    padding-block: 0 64px !important;
  }

  body[data-page="news"] .news-faq-strip .container {
    display: grid;
    gap: 16px;
  }

  body[data-page="news"] .news-faq-strip h2 {
    margin-bottom: 0 !important;
    color: var(--color-text);
    font-size: 24px;
    text-align: left;
  }

  body[data-page="news"] .news-quote {
    padding: 0 0 64px !important;
  }

  body[data-page="news"] .news-quote .product-inquiry__inner {
    padding: 24px 28px !important;
  }
}

@media (min-width: 769px) {
  /* Product page service guarantee final polish. Keep this at EOF so it wins. */
  body[data-page="products"] .service-guarantee {
    opacity: 1 !important;
    transform: none !important;
  }

  body[data-page="products"] .service-guarantee.zzcnc-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  body[data-page="products"] .service-guarantee-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body[data-page="products"] .service-guarantee-grid div {
    min-height: 88px !important;
    padding: 14px 16px !important;
    gap: 4px 10px !important;
    align-items: center !important;
  }

  body[data-page="products"] .service-guarantee-grid span {
    width: 40px !important;
    height: 40px !important;
  }

  body[data-page="products"] .service-guarantee-grid span svg {
    width: 20px !important;
    height: 20px !important;
  }

  body[data-page="products"] .service-guarantee-grid strong {
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  body[data-page="products"] .service-guarantee-grid small {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 768px) {
  body[data-page="products"] .service-guarantee-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body[data-page="products"] .service-guarantee-grid div {
    min-height: 0 !important;
    padding: 10px 8px !important;
  }
}