html { scrollbar-gutter: auto; }
body.hero-only:not(.about-view) main > section:not(.hero),
body.hero-only.about-view main > section:not(#aboutView) { display: none !important; }
      body.hero-only.about-view #aboutView { display: block !important; }

      .hero-rail svg,
      .hero .section-code { color: var(--orange); }
      .hero-rail a:hover { background: rgba(240, 121, 34, .18); }

      .about-stage {
        position: relative;
        min-height: calc(100svh - var(--site-header-height));
        overflow: hidden;
        color: #fff;
        background: #172022;
      }
      .about-background,
      .about-background img,
      .about-background::after { position: absolute; inset: 0; }
      .about-background { overflow: hidden; margin: 0; }
      .about-background img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 45%;
        filter: none;
        transform: none;
        transition: opacity .35s ease, transform .7s ease;
      }
      .about-background::after {
        content: "";
        opacity: .5;
        background: linear-gradient(180deg, rgba(13, 20, 22, .04) 0%, rgba(13, 20, 22, .18) 20%, rgba(13, 20, 22, .68) 40%, rgba(13, 20, 22, .68) 62%, rgba(13, 20, 22, .25) 82%, rgba(13, 20, 22, .65) 100%);
      }
      .about-shell {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: min(var(--max), calc(100% - 112px));
        min-height: calc(100svh - var(--site-header-height));
        margin: 0 auto;
        padding: 32px 0 94px;
      }
      .about-content { width: 100%; max-width: 1040px; margin: auto; text-align: center; text-shadow: 0 2px 4px rgba(0, 0, 0, .85); }
      .about-kicker {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin: 0;
        color: var(--orange);
        font-size: .6875rem;
        font-weight: 800;
        letter-spacing: .18em;
      }
      .about-kicker::before { width: 34px; height: 2px; background: currentColor; content: ""; }
      .about-title {
        max-width: 1040px;
        margin: 14px auto 0;
        color: #fff;
        font-size: clamp(40px, 4vw, 56px);
        font-weight: 650;
        line-height: 1.18;
      }
      .about-title span { font-weight: inherit; }
      .about-title .about-accent { color: var(--orange); font-weight: 750; }
      .about-copy {
        max-width: 960px;
        margin: 22px auto 0;
        padding: 17px 20px;
        border-top: 1px solid rgba(255, 255, 255, .3);
        border-bottom: 1px solid rgba(255, 255, 255, .17);
        text-align: left;
      }
      .about-copy p {
        margin: 0;
        color: #e0e7e4;
        font-size: 1.0625rem;
        font-weight: 400;
        line-height: 1.82;
      }
      .about-copy .key { color: #fff; font-weight: 700; }
      .about-copy .warm { color: var(--orange); font-weight: 700; }
      .about-summary { display: flex; justify-content: center; margin-top: 17px; }
      .about-meta-item {
        display: flex;
        align-items: baseline;
        gap: 10px;
        min-height: 34px;
        padding: 5px 25px;
        border-left: 1px solid rgba(255, 255, 255, .22);
      }
      .about-meta-item:first-child { border-left: 0; }
      .about-meta-item strong { color: #fff; font: 800 1.3125rem/1 Consolas, monospace; }
      .about-meta-item small { color: #c8d0cc; font-size: .625rem; font-weight: 500; }
      .about-index {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: center;
        gap: clamp(25px, 6vw, 82px);
        border-top: 1px solid rgba(255, 255, 255, .28);
      }
      .about-index button {
        position: relative;
        display: flex;
        flex: 0 1 260px;
        align-items: center;
        gap: 11px;
        min-height: 72px;
        padding: 10px 0 13px;
        border: 0;
        color: #aebbb7;
        background: transparent;
        text-align: left;
        cursor: pointer;
        transition: color .2s ease;
      }
      .about-index button:hover,
      .about-index button.active { color: #fff; }
      .about-index button::after {
        position: absolute;
        right: auto;
        bottom: 0;
        left: 0;
        width: 30px;
        height: 2px;
        background: var(--orange);
        content: "";
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .2s ease;
      }
      .about-index button.active::after { transform: scaleX(1); }
      .about-index strong { display: block; color: inherit; font-size: .8125rem; font-weight: 650; line-height: 1.35; }
      .about-index small { display: block; margin-top: 3px; color: #b4bfbb; font-size: .625rem; font-weight: 400; line-height: 1.4; }
      .about-index svg { width: 18px; height: 18px; margin-left: auto; color: var(--orange); stroke-width: 1.5; }
      .about-caption { position: absolute; right: 0; bottom: 82px; color: rgba(255, 255, 255, .58); font: .625rem Consolas, monospace; letter-spacing: .12em; }
      @media (min-width: 821px) and (max-height: 800px) {.about-shell { padding-top: 24px; padding-bottom: 82px; }
        .about-title { margin-top: 10px; font-size: clamp(37px, 3.6vw, 50px); }
        .about-copy { margin-top: 15px; padding-top: 14px; padding-bottom: 13px; }
        .about-copy p { font-size: 1rem; line-height: 1.72; }
        .about-summary { margin-top: 12px; }
        .about-index button { min-height: 64px; padding-top: 8px; padding-bottom: 10px; }
}
      @media (max-width: 820px) {body { min-width: 0; }
        .about-stage { min-height: max(620px, calc(100svh - var(--site-header-height))); }
        .about-shell { width: calc(100% - 64px); min-height: max(620px, calc(100svh - var(--site-header-height))); padding: 38px 0 214px; }
        .about-title { font-size: clamp(38px, 8vw, 58px); }
        .about-copy { margin-top: 17px; padding: 15px 14px; }
        .about-copy p { font-size: .9375rem; line-height: 1.8; }
        .about-summary { margin-top: 14px; }
        .about-meta-item { padding: 5px 12px; }
        .about-meta-item strong { font-size: 1.0625rem; }
        .about-meta-item small { font-size: .5625rem; }
        .about-index { display: grid; gap: 0; }
        .about-index button { width: 100%; max-width: none; min-height: 59px; padding: 10px 13px; }
        .about-index button::after { left: 13px; }
        .about-caption { display: none; }
}
      @media (max-width: 560px) {.about-shell { width: calc(100% - 40px); padding-top: 22px; padding-bottom: 190px; }
        .about-title { font-size: 2.1875rem; }
        .about-copy { margin-top: 13px; padding-left: 11px; padding-right: 11px; }
        .about-copy p { font-size: .875rem; line-height: 1.75; }
        .about-summary { margin-top: 10px; }
        .about-meta-item { gap: 6px; padding: 5px 7px; }
        .about-meta-item strong { font-size: .9375rem; }
        .about-meta-item small { font-size: .5625rem; }
        html[lang="en"] .about-copy p { font-size: .75rem; line-height: 1.5; }
}
      @media (prefers-reduced-motion: reduce) {.about-background img,
        .about-index button,
        .about-index button::after { transition-duration: .01ms; }
}

@media (min-width: 1024px) {:root {
    --brand-accent: #F7B427; --brand-accent-hover: #E5A215;
    --carbon: #1D2427; --steel: #4B565A; --slate: #687276;
    --paper: #F5F6F6; --white: #FFFFFF; --line: #D9DEE0;
    --orange: var(--brand-accent); --orange-dark: var(--brand-accent);
    --ink: var(--carbon); --ink-soft: var(--steel); --muted: var(--slate);
    --green: var(--steel); --max: 1600px;
    --text-on-dark: #D5DCDF; --muted-on-dark: #B4BEC3;
    --brand-tint: #FFF3E8; --desktop-gutter: 48px;
    --desktop-font: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  }
  body { color: var(--carbon); background: var(--paper); font-family: var(--desktop-font); }
  button, input, textarea, select { font-family: var(--desktop-font); }
  .shell { width: min(var(--max), calc(100% - 2 * var(--desktop-gutter))); margin-inline: auto; }
  svg.lucide { stroke-width: 1.75; }
  a, button { transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--orange); outline-offset: 4px;
  }
  ::selection { color: var(--carbon); background: #F9C79F; }
}

@media (min-width: 1024px) {.hero-photo img { filter: saturate(.86) contrast(1.02); }
  .hero-photo::before { background: linear-gradient(90deg, #1D2427E6 0%, #1D2427B3 28%, #1D24271F 62%, #1D242708); }
  .hero .section-code, .about-kicker { color: var(--orange); font: 700 .75rem/1.4 var(--desktop-font); letter-spacing: .08em; }
  .hero .section-code::before, .about-kicker::before { width: 32px; height: 2px; background: var(--orange); }
  .hero-tagline { font-size: 2.75rem; font-weight: 700; line-height: 1.2; margin: 16px 0 24px; }
  .hero p { color: var(--text-on-dark); font-size: .9375rem; line-height: 1.75; }
  .hero-actions { gap: 24px; margin-top: 32px; }
  .button { height: 48px; padding-inline: 24px; border-radius: 2px; border-color: var(--orange); color: var(--carbon); background: var(--orange); font-size: .875rem; font-weight: 600; gap: 16px; }
  .button:hover { color: var(--carbon); background: var(--brand-accent-hover); border-color: var(--brand-accent-hover); }
  .hero-rail { background: var(--carbon); border-color: #FFFFFF24; }
  .hero-rail a { border-color: #FFFFFF24; }
  .hero-rail svg { color: var(--orange); }
  .hero-rail a:hover { background: #F7B4271A; }
  .about-stage { background: var(--carbon); }
  .about-shell { width: min(var(--max), calc(100% - 2 * var(--desktop-gutter))); padding-top: 32px; }
  .about-background img { filter: saturate(.86) contrast(1.02); }
  .about-background::after { background: linear-gradient(180deg, #1D24270A 0%, #1D24272E 20%, #1D2427B8 40%, #1D2427B8 62%, #1D242740 82%, #1D2427B3 100%); }
  .about-title { font-size: 3rem; font-weight: 700; line-height: 1.2; margin-top: 16px; }
  .about-copy { margin-top: 24px; padding: 16px 24px; border-color: #FFFFFF33; }
  .about-copy p, html[lang="en"] .about-copy p { color: var(--text-on-dark); font-size: 1rem; line-height: 1.75; }
  .about-summary { margin-top: 16px; }
  .about-meta-item small, .about-index small { color: var(--muted-on-dark); font-size: .75rem; }
  .about-index { border-color: #FFFFFF33; }
  .about-index button { color: var(--muted-on-dark); }
  .about-index strong { font-size: .875rem; font-weight: 600; }
  #products.product-center { background: var(--paper); padding: 24px 0; }
  #products .product-shell { width: min(var(--max), calc(100% - 2 * var(--desktop-gutter))); }
  .product-heading { padding-bottom: 24px; margin-bottom: 24px; border-color: var(--line); }
  #products .product-heading :is(h1, h2) { color: var(--carbon); font-size: 2rem; font-weight: 700; line-height: 1.2; }
  .product-heading :is(h1, h2) small { color: var(--slate); font-size: .75rem; font-weight: 500; margin-left: 16px; }
  .product-breadcrumb, .product-result-summary > span { color: var(--slate); font-size: .75rem; }
  .product-layout { gap: 32px; }
  .product-sidebar, .product-tile { background: var(--white); border-color: var(--line); }
  .product-sidebar { border-top-color: var(--orange); }
  .product-sidebar > h3, .product-result-heading h3 { font-size: 1rem; font-weight: 600; }
  .product-sidebar > h3 { padding: 16px 24px; border-color: var(--line); }
  .product-category { color: var(--steel); font-size: .875rem; padding: 16px; border-bottom-color: var(--line); }
  .product-category small { color: var(--slate); }
  .product-category:hover { color: var(--orange-dark); background: var(--brand-tint); }
  .product-category[aria-pressed="true"], .product-category[aria-pressed="true"] small { color: var(--orange-dark); background: var(--brand-tint); }
  .product-grid { gap: 16px; }
  .product-tile { border-radius: 2px; }
  .product-tile-copy { padding: 12px 16px; border-color: var(--line); }
  .product-tile h4 { color: var(--carbon); font-size: .875rem; font-weight: 600; line-height: 1.5; }
  .product-tile p { color: var(--steel); font-size: .75rem; }
  .product-search { height: 40px; border-radius: 2px; border-color: var(--line); }
  #products .product-search input { color: var(--carbon); font-size: .875rem; }
  .product-search-submit { color: var(--carbon); background: var(--orange); font-size: .875rem; font-weight: 600; border-radius: 0 2px 2px 0; }
  .product-search-submit:hover { background: var(--brand-accent-hover); }
  .product-pagination { gap: 8px; margin-top: 24px; }
  .product-page { width: 36px; height: 36px; border-radius: 2px; border-color: var(--line); color: var(--steel); font-size: .8125rem; font-weight: 600; }
  .product-page[aria-current="page"] { color: var(--carbon); background: var(--orange); border-color: var(--orange); }
  .product-page:hover:not(:disabled) { border-color: var(--orange); }
}
.hero-photo .hero-carousel-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  display: grid;
  place-items: center;
  width: 36px;
  height: 48px;
  padding: 0;
  border: 1px solid #FFFFFF66;
  border-radius: 2px;
  color: #fff;
  background: #1D242780;
  cursor: pointer;
  transform: translateY(-50%);
}
.hero-photo .hero-carousel-arrow:hover { background: #1D2427B3; }
.hero-photo .hero-carousel-arrow:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.hero-photo .hero-carousel-prev { left: 48px; }
.hero-photo .hero-carousel-next { right: 48px; }
.hero-photo .hero-carousel-arrow svg { width: 22px; height: 22px; pointer-events: none; }

@media (min-width: 1024px) {.hero { height: max(540px, calc(100svh - var(--site-header-height, 82px))); }
  .hero-tagline { font-size: clamp(36px, 3.2vw, 44px); line-height: 1.25; text-wrap: balance; }
  .hero p { max-width: 480px; line-height: 1.85; }
  .hero-actions { align-items: center; gap: 24px; }
  .hero-rail a { min-width: 0; }
  .about-content { max-width: 1000px; text-shadow: 0 2px 12px #00000040; }
  .about-title { font-size: clamp(38px, 3.5vw, 52px); line-height: 1.25; text-wrap: balance; }
  .about-background::after { background: linear-gradient(180deg, #1D242708 0%, #1D242740 22%, #1D2427C7 43%, #1D2427C7 62%, #1D242759 82%, #1D2427B8 100%); }
  .about-copy { max-width: 900px; padding: 20px 24px; background: #1D242726; }
  .about-copy p, html[lang="en"] .about-copy p { font-size: 1rem; line-height: 1.9; }
  .about-meta-item { align-items: center; padding-inline: 24px; }
  .about-meta-item strong { font-family: var(--desktop-font); font-size: 1.5rem; }
  .about-index { gap: clamp(24px, 5vw, 72px); }
  .about-index button { min-height: 80px; }
  .about-index small { line-height: 1.6; }
  #products.product-center { min-height: 680px; }
  .product-grid { grid-template-rows: repeat(2, minmax(210px, 1fr)); gap: 20px; }
  .product-tile-copy { min-height: 96px; padding: 14px 16px; }
  .product-tile h4 { display: -webkit-box; min-height: 42px; max-height: 42px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .product-tile p { margin-top: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .product-tile-image { padding: 14px 18px; }
  .product-tile-image img { object-fit: contain; }
  .product-result-heading { gap: 24px; }
  .product-search { flex-basis: 360px; }
  .product-pagination { margin-top: 20px; }
}

:root {
    --brand-accent: #F7B427; --brand-accent-hover: #E5A215;
  --carbon: #1D2427; --steel: #4B565A; --slate: #687276;
  --paper: #F5F6F6; --white: #FFFFFF; --line: #D9DEE0;
    --orange: var(--brand-accent); --orange-dark: var(--brand-accent);
  --ink: var(--carbon); --ink-soft: var(--steel); --muted: var(--slate);
  --green: var(--steel); --text-on-dark: #D5DCDF; --muted-on-dark: #B4BEC3;
  --brand-tint: #FFF3E8;
  --desktop-font: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
}
body, button, input, textarea { font-family: var(--desktop-font); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

.about-copy p { white-space: normal; }
@media (max-width: 1023px) {body { min-width: 0; }
  .hero { height: auto; min-height: calc(100svh - var(--site-header-height)); }
  .hero-photo { inset: 0; }
  .hero-photo img { object-position: 64% center; filter: saturate(.86) contrast(1.02); }
  .hero-photo::before { background: linear-gradient(90deg, #1D2427EB, #1D2427B3 60%, #1D242766); }
  .hero .shell { width: calc(100% - 56px); height: auto; min-height: max(520px, calc(100svh - var(--site-header-height) - 100px)); padding: 44px 0; }
  .hero h1, html[lang="zh"] .hero h1 { margin: 16px 0 12px; font-size: 5.25rem; }
  .hero-tagline, html[lang="zh"] .hero-tagline { max-width: 650px; font-size: 2.25rem; line-height: 1.35; margin: 12px 0 20px; font-weight: 700; text-wrap: balance; }
  .hero p { max-width: 570px; font-size: 1rem; line-height: 1.85; color: var(--text-on-dark); }
  .hero .section-code { color: var(--orange); line-height: 1.6; letter-spacing: .04em; }
  .hero .section-code::before { flex: 0 0 24px; }
  .hero-actions { flex-wrap: wrap; gap: 16px 24px; margin-top: 28px; }
  .hero .button { font-size: .875rem; font-weight: 600; color: var(--carbon); letter-spacing: 0; text-transform: none; border-radius: 2px; }
  .hero-index, .hero-side { display: none; }
  .hero-rail { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--carbon); }
  .hero-rail a { min-width: 0; min-height: 92px; padding: 16px; gap: 12px; }
  .about-background::after { background: linear-gradient(180deg, #1D242778, #1D2427D1 36%, #1D2427D1 75%, #1D2427BA); }
  .about-shell { width: calc(100% - 56px); min-height: calc(100svh - var(--site-header-height)); padding: 42px 0 0; justify-content: center; }
  .about-content { margin: auto 0; padding-bottom: 28px; text-shadow: none; }
  .about-title { font-size: clamp(32px, 5vw, 44px); line-height: 1.35; text-wrap: balance; }
  .about-copy { padding: 20px 12px; margin-top: 24px; background: #1D242733; }
  .about-copy p, html[lang="en"] .about-copy p { color: var(--text-on-dark); font-size: 1rem; line-height: 1.85; }
  .about-summary { flex-wrap: wrap; gap: 8px 0; margin-top: 20px; }
  .about-meta-item { align-items: center; padding: 5px 16px; gap: 10px; }
  .about-meta-item strong { font-size: 1.25rem; line-height: 1.4; }
  .about-meta-item small { font-size: .75rem; line-height: 1.6; }
  .about-index { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .about-index button { min-width: 0; padding: 16px 0; min-height: 88px; }
  .about-index button::after { left: 0; }
  .about-index strong { font-size: .875rem; }
  .about-index small { color: var(--muted-on-dark); font-size: .75rem; line-height: 1.6; }
  .about-caption { display: none; }
  #products.product-center { height: auto; min-height: calc(100svh - var(--site-header-height)); background: var(--paper); }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 260px; }
  .product-tile-copy { min-height: 86px; }
  .product-tile h4 { font-size: .875rem; line-height: 1.5; }
  .product-tile p { font-size: .75rem; }
  .product-search-submit { color: var(--carbon); font-weight: 600; }
  .product-category[aria-pressed="true"], .product-category[aria-pressed="true"] small { color: var(--orange-dark); background: var(--brand-tint); }
  .product-page[aria-current="page"] { color: var(--carbon); }
}
@media (max-width: 720px) {.hero .shell { width: calc(100% - 40px); min-height: 0; padding: 32px 0 34px; }
  .hero-photo img { object-position: 62% center; }
  .hero-photo::before { background: linear-gradient(180deg, #1D2427CC, #1D2427BA 35%, #1D2427D9 80%); }
  .hero h1, html[lang="zh"] .hero h1 { font-size: clamp(58px, 16vw, 72px); }
  .hero-tagline, html[lang="zh"] .hero-tagline { max-width: none; font-size: clamp(26px, 7vw, 32px); line-height: 1.4; white-space: normal; }
  .hero p { font-size: .9375rem; line-height: 1.85; }
  .hero .section-code { font-size: .625rem; gap: 9px; }
  .hero .section-code::before { flex-basis: 20px; }
  .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
  .hero .button { min-width: 0; height: auto; min-height: 46px; padding: 12px 10px; gap: 8px; font-size: .875rem; }
  .hero .button:first-child, .hero .button:last-child:nth-child(2) { grid-column: 1 / -1; }
  .hero .button svg { flex: 0 0 16px; }
  .hero-rail { grid-template-columns: 1fr; }
  .hero-rail a { min-height: 74px; padding: 15px 20px; border-right: 0; border-bottom: 1px solid #FFFFFF24; }
  .hero-rail a:last-child { border-bottom: 0; }
  .about-stage { min-height: calc(100svh - var(--site-header-height)); }
  .about-shell { width: calc(100% - 40px); padding-top: 30px; }
  .about-content { padding-bottom: 24px; }
  .about-title { font-size: 1.875rem; line-height: 1.4; }
  .about-copy { padding: 18px 0; margin-top: 20px; }
  .about-copy p, html[lang="en"] .about-copy p { font-size: .9375rem; line-height: 1.9; }
  .about-meta-item { flex-direction: column; align-items: flex-start; gap: 3px; padding-inline: 14px; }
  .about-meta-item strong { font-size: 1.1875rem; }
  .about-meta-item small { font-size: .6875rem; max-width: 170px; }
  .about-index { grid-template-columns: 1fr; gap: 0; }
  .about-index button { min-height: 70px; padding: 14px 0; border-bottom: 1px solid #FFFFFF24; }
  .about-index button:last-child { border-bottom: 0; }
  .about-index small { font-size: .75rem; }
  #products .product-shell { width: calc(100% - 40px); }
  #products .product-heading :is(h1, h2) { font-size: 1.75rem; }
  .product-category { padding: 12px 8px; font-size: .875rem; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 254px; gap: 12px; }
  .product-tile-image { padding: 12px; }
  .product-tile-copy { padding: 12px 10px; min-height: 94px; }
  .product-tile h4 { font-size: .875rem; }
  .product-tile p { font-size: .75rem; }
  #products .product-search input { font-size: .875rem; }
  .product-search { height: 44px; }
  .product-search-submit { padding-inline: 12px; font-size: .875rem; }
  .product-result-summary > span { font-size: .75rem; }
  .product-empty p { font-size: .875rem; }
  .product-empty-actions { align-items: center; }
  .product-empty-actions a { color: var(--orange-dark); font-size: .875rem; padding: 9px 6px; }
  .product-page { width: 38px; height: 38px; }
}

/* Shared proportions for desktop, tablet and phone. */
:root { --max:1440px; --page-gutter:clamp(20px,3.4vw,64px); }
body { min-width:0; }
.shell,
#products .product-shell,
.about-shell {
  width:min(var(--max),calc(100% - 2 * var(--page-gutter)));
  margin-inline:auto;
}
.hero { display:flex; flex-direction:column; height:auto; min-height:calc(100svh - var(--site-header-height)); color:var(--carbon); background:var(--paper); }
.hero-photo { inset:0 0 96px; }
.hero-photo img { object-fit:cover; object-position:70% center; filter:none; }
.hero-photo::before { background:linear-gradient(90deg,#F5F6F6B3 0%,#F5F6F680 28%,#F5F6F64D 40%,#F5F6F600 60%); }
.hero-photo::after { display:none; }
.hero .shell {
  position:relative; z-index:2; height:auto; flex:1 0 auto;
  min-height:clamp(560px,calc(100svh - var(--site-header-height) - 98px),840px);
  padding:64px 0; justify-content:center;
}
.hero-brand { display:none; }
.hero h1.hero-tagline, html[lang="zh"] .hero h1.hero-tagline {
  max-width:min(47%,620px); margin:24px 0;
  font-size:clamp(36px,3vw,48px); font-weight:700; line-height:1.3;
  letter-spacing:-.025em; white-space:normal; text-wrap:balance;
}
.hero h1.hero-tagline::after { display:none; }
.hero-headline-line { display:block; text-wrap:balance; }
.hero-term { white-space:nowrap; }
.hero p, html[lang="zh"] .hero p { max-width:min(43%,540px); color:var(--steel); font-size:1rem; line-height:1.9; white-space:normal; }
.hero .section-code { max-width:48%; color:var(--orange-dark); font-size:.6875rem; line-height:1.6; letter-spacing:.045em; }
.hero .section-code::before { flex:0 0 24px; }
.hero-actions { max-width:53%; display:flex; align-items:stretch; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero .button {
  min-width:0; height:auto; min-height:48px; padding:12px 18px; gap:12px;
  border:1px solid var(--orange); border-radius:2px; color:var(--carbon);
  background:var(--orange); font-size:.875rem; font-weight:600;
  line-height:1.5; letter-spacing:0; text-transform:none; transform:none;
}
.hero .button svg { width:17px; height:17px; flex:0 0 17px; }
.hero-index, .hero-side { display:none; }
.hero-rail {
  position:relative; inset:auto; z-index:3; width:100%;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  padding:0 max(var(--page-gutter),calc((100% - var(--max))/2));
  background:var(--carbon); border-top:1px solid #FFFFFF24;
}
.hero-rail a, .hero-rail a:first-child {
  min-width:0; min-height:96px; padding:20px 28px;
  gap:16px; border-right:1px solid #FFFFFF24; border-bottom:0; background:transparent;
}
.hero-rail a:first-child { padding-left:0; }
.hero-rail a:last-child { border-right:0; }
.hero-rail svg { width:24px; height:24px; }

.about-stage { min-height:0; }

.about-shell { min-height:max(620px,calc(100svh - var(--site-header-height))); padding:56px 0 0; justify-content:center; }
.about-content { max-width:920px; margin:auto; padding-bottom:36px; text-shadow:none; }
.about-kicker { line-height:1.6; letter-spacing:.05em; }
.about-title { max-width:920px; margin:18px auto 0; font-size:clamp(34px,3.3vw,48px); line-height:1.35; text-wrap:balance; }
.about-copy { max-width:880px; margin:26px auto 0; padding:24px 0; background:none; }
.about-copy p, html[lang="en"] .about-copy p { font-size:1rem; line-height:1.95; }
.about-summary { flex-wrap:wrap; gap:12px 0; margin-top:24px; }
.about-meta-item { gap:12px; padding:5px 24px; align-items:center; }
.about-meta-item strong { font:700 1.4375rem/1.4 var(--desktop-font); }
.about-meta-item small { font-size:.75rem; line-height:1.6; }
.about-index { position:static; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; width:100%; margin-top:24px; }
.about-index button { min-width:0; min-height:96px; padding:20px 0; }
.about-index strong { font-size:.875rem; line-height:1.5; }
.about-index small { font-size:.75rem; line-height:1.6; }
.about-caption { display:none; }

#products.product-center { height:auto; min-height:calc(100svh - var(--site-header-height)); padding:32px 0 40px; }
#products .product-shell { height:auto; }
.product-heading { margin-bottom:26px; padding-bottom:24px; }
#products .product-heading :is(h1, h2) { font-size:2rem; line-height:1.3; }
.product-layout { grid-template-columns:200px minmax(0,1fr); gap:32px; flex:none; }
.product-result-heading { margin-bottom:20px; min-height:48px; gap:24px; }
.product-search { height:46px; flex-basis:360px; }
.product-grid { flex:none; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:auto; gap:20px; align-items:stretch; }
.product-tile { min-height:0; }
.product-tile-image { flex:none; aspect-ratio:4/3; padding:18px; }
.product-tile-image img { height:100%; width:100%; object-fit:contain; }
.product-tile-copy { min-height:94px; padding:14px; }
.product-tile h4 { min-height:42px; max-height:none; line-height:1.5; }
.product-tile p { white-space:normal; overflow-wrap:anywhere; text-overflow:clip; margin-top:8px; }
.product-pagination { margin-top:28px; }
.product-page { width:40px; height:40px; }
.product-empty { min-height:330px; }
@media (min-width:901px) and (max-width:1199px) {.product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .product-layout { grid-template-columns:172px minmax(0,1fr); gap:24px; }
  .product-result-heading { flex-wrap:wrap; gap:12px; }
  .product-search { flex:1 1 100%; }
}
@media (max-width:1023px) {.hero .shell { min-height:580px; padding-block:52px; }
  .hero h1.hero-tagline, html[lang="zh"] .hero h1.hero-tagline { max-width:51%; font-size:2.25rem; }
  .hero p, html[lang="zh"] .hero p { max-width:49%; font-size:.9375rem; }
  .hero-actions { max-width:53%; }
  .hero .button { padding-inline:14px; }
  .hero-rail a, .hero-rail a:first-child { padding:18px; gap:12px; }
  .hero-rail a:first-child { padding-left:0; }
}
@media (max-width:900px) {.hero { display:grid; grid-template-columns:1fr; grid-template-rows:minmax(min-content,1fr) auto auto; }
  .hero .shell { grid-row:1; min-height:0; padding:44px 0; }
  .hero .section-code { max-width:100%; }
  .hero h1.hero-tagline, html[lang="zh"] .hero h1.hero-tagline { max-width:680px; font-size:clamp(30px,4.7vw,40px); margin:20px 0; }
  .hero p, html[lang="zh"] .hero p { max-width:660px; font-size:1rem; }
  .hero-actions { max-width:100%; }
  .hero-photo { position:relative; inset:auto; grid-row:2; height:clamp(240px,48vw,380px); overflow:hidden; border-top:1px solid #1D24271F; }
  .hero-photo img { position:absolute; right:0; width:100%; max-width:100%; height:100%; object-fit:cover; object-position:right center; filter:saturate(.9) contrast(1.02); }
  .hero-photo::before { display:none; }
  .hero-rail { grid-row:3; }
  .about-shell { padding-top:44px; }
  .about-content { max-width:760px; }
  .about-copy { padding:22px 0; }
  .about-index { gap:24px; }
  .about-index svg { display:none; }
  .product-layout { display:flex; flex-direction:column; gap:24px; }
  .product-sidebar { width:100%; }
  .product-sidebar > h3 { display:none; }
  .product-categories { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .product-category { min-height:52px; padding:14px; }
  .product-category svg { display:none; }
  .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
  .product-result-heading { flex-wrap:wrap; gap:14px; }
  .product-search { flex:1 1 360px; }
}
@media (max-width:600px) {.hero .shell { padding:32px 0 34px; }
  .hero h1.hero-tagline, html[lang="zh"] .hero h1.hero-tagline { font-size:clamp(28px,6.8vw,34px); line-height:1.4; margin:18px 0; }
  .hero p, html[lang="zh"] .hero p { font-size:.9375rem; line-height:1.9; }
  .hero .section-code { font-size:.625rem; gap:10px; }
  .hero-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:24px; }
  .hero .button { min-height:48px; width:100%; padding:12px 10px; gap:8px; font-size:.875rem; }
  .hero .button:first-child { grid-column:auto; }
  .hero .button:last-child:not([hidden]) { grid-column:1/-1; }
  .hero-photo { height:clamp(230px,64vw,340px); }
  .hero-rail { grid-template-columns:1fr; }
  .hero-rail a, .hero-rail a:first-child { min-height:76px; padding:16px 0; border-right:0; border-bottom:1px solid #FFFFFF24; gap:16px; }
  .hero-rail a:last-child { border-bottom:0; }
  .hero-rail svg { width:22px; height:22px; }
  .about-shell { min-height:calc(100svh - var(--site-header-height)); padding:32px 0 0; }
  .about-content { margin:0; text-align:left; padding-bottom:24px; }
  .about-kicker { justify-content:flex-start; font-size:.6875rem; }
  .about-title { font-size:1.875rem; line-height:1.45; margin-top:18px; }
  .about-copy { margin-top:22px; padding:20px 0; }
  .about-copy p, html[lang="en"] .about-copy p { font-size:.9375rem; line-height:1.95; }
  .about-summary { justify-content:flex-start; gap:12px 0; margin-top:22px; }
  .about-meta-item { padding:0 16px; flex-direction:column; align-items:flex-start; gap:4px; }
  .about-meta-item:first-child { padding-left:0; }
  .about-meta-item strong { font-size:1.25rem; }
  .about-meta-item small { font-size:.6875rem; max-width:180px; }
  .about-index { grid-template-columns:1fr; gap:0; margin-top:10px; }
  .about-index button { padding:16px 0; min-height:76px; border-bottom:1px solid #FFFFFF24; }
  .about-index button:last-child { border-bottom:0; }
  .about-index svg { display:block; }
  #products.product-center { padding:26px 0 32px; }
  #products .product-heading :is(h1, h2) { font-size:1.75rem; }
  .product-heading { padding-bottom:20px; margin-bottom:20px; }
  .product-layout { gap:22px; }
  .product-category { font-size:.875rem; padding:12px 10px; min-height:48px; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .product-tile-image { aspect-ratio:1/1; padding:14px; }
  .product-tile-copy { min-height:98px; padding:12px 10px; }
  .product-tile h4 { font-size:.875rem; }
  .product-result-summary { flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:6px 12px; }
  .product-search { flex:1 1 100%; }
  .product-search-submit { padding-inline:12px; }
  .product-pagination { gap:6px; margin-top:24px; }
  .product-page { width:38px; height:38px; }
}
@media (max-width:380px) {.product-category { flex-direction:column; justify-content:center; gap:3px; min-height:64px; padding:10px 6px; font-size:.8125rem; }
}
@media (hover:hover) and (pointer:fine) {.hero-rail a:hover { background:transparent; }
}
@media (hover:none) {.hero .button:hover { transform:none; }
  .hero-rail a:hover { background:transparent; }
}

#aboutView .about-kicker { display: none; }
  #aboutView .about-content,
  #aboutView .about-index strong,
  #aboutView .about-index small {
    -webkit-text-stroke: .25px rgba(13, 20, 22, .8);
    paint-order: stroke fill;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 1px 3px rgba(0, 0, 0, .4);
  }
  #aboutView .about-title {
    -webkit-text-stroke: .4px rgba(13, 20, 22, .8);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 2px 4px rgba(0, 0, 0, .35);
  }
  #aboutView .about-copy p { color: #FFFFFF; font-weight: 500; }
  #aboutView .about-meta-item small,
  #aboutView .about-index small { color: #FFFFFF; font-weight: 500; }
  #aboutView .about-index button:not(.active):not(:hover) { color: #FFFFFF; }
  #aboutView .about-index svg { display: block; flex: 0 0 auto; margin-left: 0; }

#aboutView .about-summary a.about-meta-item { cursor: pointer; }
  #aboutView .about-summary a.about-meta-item strong,
  #aboutView .about-summary a.about-meta-item small {
    transition: color .2s ease, transform .2s ease;
  }
  #aboutView .about-summary a.about-meta-item:hover strong,
  #aboutView .about-summary a.about-meta-item:focus-visible strong {
    color: var(--orange);
    transform: translateY(-2px);
  }
  #aboutView .about-summary a.about-meta-item:hover small,
  #aboutView .about-summary a.about-meta-item:focus-visible small {
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 4px;
    transform: translateY(-2px);
  }
  #aboutView .about-summary a.about-meta-item:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 4px;
  }
  @media (prefers-reduced-motion: reduce) {#aboutView .about-summary a.about-meta-item strong,
    #aboutView .about-summary a.about-meta-item small { transition: none; }
}

#aboutView .about-copy { border-color: #FFFFFF80; }
  #aboutView .about-meta-item { border-left-color: #FFFFFF80; }
  #aboutView .about-index { border-top: 1px solid #FFFFFF80; }
  #aboutView .about-index button {
    display: grid;
    grid-template-columns: 18px minmax(0, max-content) 18px;
    justify-content: center;
    column-gap: 12px;
    text-align: center;
  }
  #aboutView .about-index button > span { min-width: 0; }
  #aboutView .about-index button::after { left: calc(50% - 15px); }
  #aboutView .about-index button + button::before {
    content: "";
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: -16px;
    width: 1px;
    background: #FFFFFF80;
    pointer-events: none;
  }
  @media (max-width: 900px) {#aboutView .about-index button + button::before { left: -12px; }
}
  @media (max-width: 600px) {#aboutView .about-index button + button::before { display: none; }
    #aboutView .about-index button:not(:last-child) { border-bottom-color: #FFFFFF80; }
}

:root {
    --orange: #F7B427;
    --orange-dark: #F7B427;
    --brand-accent: #F7B427;
  }

@media (min-width: 821px) {#products.product-center { height: auto; min-height: calc(100svh - var(--site-header-height));
    padding: 14px 0 10px; overflow: visible;
  }
  #products .product-shell { height: auto; }
  .product-heading { padding-bottom: 10px; margin-bottom: 12px; }
  #products .product-heading :is(h1, h2) { font-size: 1.75rem; }
  .product-layout { gap: 22px; flex: none; min-height: 0; }
  .product-sidebar > h3 { padding: 10px 16px; }
  .product-category { min-height: 44px; padding: 10px 14px; }
  .product-result-heading { min-height: 36px; margin-bottom: 10px; gap: 16px; }
  .product-result-heading h3 { font-size: 1rem; }
  .product-search { height: 36px; }
  .product-grid { flex: none;
    min-height: 0; grid-template-rows: none; grid-auto-rows: clamp(16.25rem, 22vw, 19.375rem);
    width: calc(100% - 16px);
    margin-inline: auto;
    padding: 6px 0;
    gap: 16px;
  }
  .product-tile-image { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; padding: 5px 6px 0; overflow: hidden; }
  .product-tile-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .product-tile-copy { min-height: 58px; padding: 7px 10px; }
  .product-tile h4 { display: -webkit-box; min-height: 0; max-height: 36px; overflow: hidden; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .product-tile p { margin-top: 3px; line-height: 1.25; }
  .product-pagination { min-height: 32px; gap: 6px; margin-top: 10px; }
  .product-page { width: 32px; height: 32px; }
}
@media (max-width: 820px) {#products.product-center { padding-top: 18px; padding-bottom: 24px; }
  .product-heading { padding-bottom: 14px; margin-bottom: 14px; }
  .product-layout { gap: 14px; }
  .product-result-heading { margin-bottom: 10px; }
  .product-grid { grid-auto-rows: auto; padding: 4px 0; gap: 16px; }
  .product-tile-image { padding: 5px 5px 0; overflow: hidden; }
  .product-tile-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .product-tile-copy { min-height: 68px; padding: 8px; }
  .product-pagination { margin-top: 14px; }
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

@keyframes qh-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes qh-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hero .section-code { animation: qh-fade-up .7s .08s var(--motion-smooth) both; }
.hero h1 { animation: qh-fade-up .75s .16s var(--motion-smooth) both; }
.hero p { animation: qh-fade-up .75s .24s var(--motion-smooth) both; }
.hero-actions { animation: qh-fade-up .75s .32s var(--motion-smooth) both; }
.hero-rail { animation: qh-fade-in .8s .38s var(--motion-smooth) both; }
.hero-photo img { transition: transform 1.2s var(--motion-smooth); }
.hero:hover .hero-photo img { transform: scale(1.012); }

.hero .button { transition: transform .24s var(--motion-smooth), color .24s var(--motion-smooth), background-color .24s var(--motion-smooth), border-color .24s var(--motion-smooth); }
.hero .button:hover { transform: translateY(-2px); }
.hero-rail a { transition: background-color .24s var(--motion-smooth), color .24s var(--motion-smooth); }
.hero-rail svg { transition: transform .3s var(--motion-smooth), color .24s var(--motion-smooth); }
@media (hover: hover) and (pointer: fine) {
  .hero-rail a:hover { background: rgba(255,255,255,.045); }
  .hero-rail a:hover svg { transform: translateY(-2px); }
}

.about-content { animation: qh-fade-up .7s .08s var(--motion-smooth) both; }
.about-index button { transition: color .24s var(--motion-smooth), background-color .24s var(--motion-smooth), border-color .24s var(--motion-smooth), transform .24s var(--motion-smooth); }
.about-index button:hover { transform: translateY(-2px); }
.about-background img { transition: transform 1.2s var(--motion-smooth), filter .6s var(--motion-smooth); }
.about-view .about-background img { transform: scale(1.012); }

.product-category { transition: color .24s var(--motion-smooth), background-color .24s var(--motion-smooth), border-color .24s var(--motion-smooth); }
.product-search { transition: border-color .24s var(--motion-smooth), box-shadow .24s var(--motion-smooth); }
.product-tile { transition: transform .28s var(--motion-smooth), box-shadow .28s var(--motion-smooth), border-color .28s var(--motion-smooth); }
.product-tile:hover { transform: translateY(-3px); border-color: #d1d9da; box-shadow: 0 9px 22px rgba(29,36,39,.10); }
.product-tile-image img { transition: transform .55s var(--motion-smooth); }
.product-tile:hover .product-tile-image img { transform: scale(1.035); }
.product-page { transition: color .24s var(--motion-smooth), background-color .24s var(--motion-smooth), border-color .24s var(--motion-smooth), transform .24s var(--motion-smooth); }
.product-page:hover:not(:disabled) { transform: translateY(-2px); }

@media (min-width: 1024px) {.hero { height: auto; min-height: calc(100svh - var(--site-header-height)); }
  .hero .shell { height: auto; min-height: max(35rem, calc(100svh - var(--site-header-height) - 96px)); padding-block: 40px; }
  .hero-rail { flex: 0 0 auto; }
}
@media (max-width: 1023px) {.hero .button:hover { transform: translateY(-1px); }
  .product-tile:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* QIHE HOME ABOUT PRODUCTS RESPONSIVE START */
.products-page-main { min-height: calc(100svh - var(--site-header-height)); }
.qihe-about .about-stage { min-height: calc(100svh - var(--site-header-height)); }
.qihe-home .hero-rail strong {
  display: block; color: var(--white); font-size: .875rem; font-weight: 600; line-height: 1.5;
}
.qihe-home .hero-rail small {
  display: block; margin-top: .25rem; color: var(--muted-on-dark); font-size: .75rem; font-weight: 400; line-height: 1.6;
}
@media (hover: hover) and (pointer: fine) {
  .qihe-home .hero-rail a:hover strong { color: var(--orange); }
}
.qihe-home .hero h1.hero-tagline,
html[lang="zh"] .qihe-home .hero h1.hero-tagline { white-space: pre-line; }
.qihe-home .hero .button {
  border-color: #1D242733; color: var(--carbon); background: #FFFFFFCC;
}
.qihe-home .hero .button svg { color: var(--orange-dark); }
.qihe-home .hero-photo {
  position: absolute; inset: 0 0 96px; height: auto; border: 0;
}
.qihe-home .hero-photo img {
  position: absolute; inset: 0; width: 100%; max-width: none; height: 100%;
  object-fit: cover; object-position: 70% center;
}
.qihe-home .hero-photo::before { display: block; }
@media (hover: hover) and (pointer: fine) {
  .qihe-home .hero .button:hover {
    border-color: var(--orange); color: var(--carbon); background: #FFFFFF;
  }
}
@media (max-width: 820px) {
  .qihe-products #products.product-center { height: auto; min-height: calc(100svh - var(--site-header-height)); overflow: visible; }
  .qihe-products .product-shell { height: auto; }
  .qihe-products .product-grid { width: 100%; margin-inline: 0; grid-template-rows: none; }
  .qihe-products .product-result-heading { align-items: stretch; }
  .qihe-products .product-search { width: 100%; max-width: 100%; }
}
@media (max-width: 900px) {
  .qihe-home .hero {
    display: grid; grid-template-columns: 1fr;
    grid-template-rows: minmax(min-content, 1fr) auto auto;
  }
  .qihe-home .hero-photo {
    position: relative; inset: auto; grid-row: 2;
    height: clamp(240px, 48vw, 380px); overflow: hidden;
    border-top: 1px solid #1D24271F;
  }
  .qihe-home .hero-photo img {
    position: absolute; inset: auto 0 0 auto; width: 145%; max-width: none; height: 100%;
    object-fit: cover; object-position: right center;
  }
  .qihe-home .hero-photo::before { display: none; }
  .qihe-home .hero-rail { grid-row: 3; }
}
@media (max-width: 720px) {
  .qihe-home .hero-actions { width: 100%; max-width: 100%; }
  .qihe-home .hero .button { min-width: 0; white-space: normal; text-align: center; }
  .qihe-about .about-index button { grid-template-columns: 1.125rem minmax(0, 1fr) 1.125rem; }
  .qihe-about .about-index button > span { min-width: 0; }
  .qihe-products .product-categories { width: 100%; }
  .qihe-products .product-category { min-width: 0; white-space: normal; }
  .qihe-products .product-category span { min-width: 0; overflow-wrap: anywhere; }
  .qihe-products .product-search { flex-wrap: nowrap; }
  .qihe-products .product-search-field { min-width: 0; }
}
@media (max-width: 600px) {
  .qihe-home .hero-photo { height: clamp(230px, 64vw, 340px); }
}
@media (max-width: 480px) {
  .qihe-home .hero-actions { grid-template-columns: minmax(0, 1fr); }
  .qihe-home .hero .button,
  .qihe-home .hero .button:first-child,
  .qihe-home .hero .button:last-child:not([hidden]) { grid-column: auto; width: 100%; }
  .qihe-products .product-grid { gap: .75rem; }
  .qihe-products .product-tile-copy { min-height: 0; }
  .qihe-products .product-page { flex: 0 0 auto; }
}
/* QIHE HOME ABOUT PRODUCTS RESPONSIVE END */

/* Keep the product title-to-model spacing stable across responsive breakpoints. */
.qihe-products .product-tile-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
}
.qihe-products .product-tile h4 {
  min-height: 0;
  max-height: none;
  margin: 0;
}
.qihe-products .product-tile p {
  margin: 0;
}