:root {
  --zybio-accent: #00a5b5;
  --zybio-ink: #4e5f70;
  --zybio-muted: #666;
  --zybio-line: #d0d1d4;
  --zybio-surface: #fff;
  --zybio-soft: #f5f5f5;
  --zybio-button: #4c4a62;
  --zybio-content: 1200px;
  --zybio-header-height: 144px;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; }
body { margin: 0; color: var(--zybio-muted); background: var(--zybio-surface); font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif; font-size: 16px; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.content-width { width: min(var(--zybio-content), calc(100% - 40px)); margin-inline: auto; }
.site-header { height: var(--zybio-header-height); background: #fff; }
.site-header__inner { width: min(1200px, calc(100% - 40px)); height: 100%; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; }
.site-logo { display: inline-flex; align-items: center; gap: 12px; color: #087dbc; text-decoration: none; }
.site-logo__mark { display: grid; width: 58px; height: 58px; border-radius: 50%; place-items: center; background: #087dbc; color: #fff; font-family: Arial, sans-serif; font-size: 21px; font-weight: 700; line-height: 1; }
.site-logo__text { max-width: 190px; color: #087dbc; font-family: Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.05; text-transform: uppercase; }
.primary-navigation { display: flex; align-items: center; gap: 66px; }
.primary-navigation a { text-decoration: none; color: #989898; font-family: Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1; transition: color .15s ease; }
.primary-navigation a:hover, .primary-navigation a.is-current { color: var(--zybio-accent); }
.nav-toggle { display: none; }
.page-section { padding: 56px 0; }
.home-hero { width: 100%; aspect-ratio: 1920 / 811; background: center / cover no-repeat url('../images/home-hero.jpg'); display: grid; place-items: center; color: #fff; text-align: center; }
.home-hero__content { padding: 24px; transform: translateY(-70px); text-shadow: 0 1px 3px rgba(0,0,0,.25); }
.home-hero h1 { margin: 0 0 56px; font: 700 62px/1.1 "Times New Roman", serif; }
.home-hero p { max-width: 960px; margin: 0; font: 700 20px/1.5 "Times New Roman", serif; }
.home-about { display: none; text-align: center; }
.home-about h2 { margin: 0 0 28px; font: 700 38px/1.2 "Times New Roman", serif; color: #333; }
.home-about p { max-width: 680px; margin: 0 auto; font: 20px/1.8 "Times New Roman", serif; color: #333; }
.advantage-section { color: #fff; background: linear-gradient(rgba(34, 50, 84, .78), rgba(24, 42, 72, .84)), center / cover no-repeat url('../images/home-hero.jpg'); }
.advantage-section__inner { min-height: 430px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; }
.advantage-section h2 { margin: 0; font: 700 56px/1.1 "Times New Roman", serif; }
.advantage-section__copy { font-size: 15px; line-height: 1.85; }
.advantage-section__copy p { margin: 0 0 18px; }
.home-contact { padding-top: 0; }
.home-contact__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(330px, 1fr); align-items: start; }
.home-contact__image { min-height: 640px; background: center / cover no-repeat url('../images/home-hero.jpg'); }
.home-contact__form { padding: 38px 0 0 38px; }
.inner-banner { width: 100%; aspect-ratio: 4 / 1; background: center / cover no-repeat url('../images/inner-banner.jpg'); }
.about-page { padding-bottom: 20px; text-align: center; }
.about-page__statement { margin: 0 0 25px; color: #666; font-weight: 700; }
.about-page__image { width: 720px; margin: 0 auto; }
.page-title { margin: 32px 0 18px; text-align: center; color: var(--zybio-ink); font-size: 24px; line-height: 1.2; }
.product-tabs { display: flex; justify-content: center; align-items: stretch; gap: 0; margin: 0 auto 70px; }
.product-tab { min-width: 160px; padding: 10px 24px; border: 0; background: transparent; color: #666; cursor: pointer; font-size: 18px; }
.product-tab:hover, .product-tab.is-active { color: #fff; background: #000; }
.product-panel[hidden] { display: none; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.product-card { min-width: 0; padding: 10px 30px 16px; background: #fff; text-decoration: none; transition: color .15s ease; }
.product-card:hover { color: #f60; }
.product-card img { width: 100%; aspect-ratio: 800 / 801; object-fit: contain; }
.product-card__name, .product-card__price { display: block; }
.product-card__name { margin-top: 8px; font-size: 16px; }
.product-card__price { margin-top: 22px; color: #222; font-size: 14px; }
.pagination { display: flex; justify-content: center; gap: 12px; padding: 46px 0 18px; }
.pagination a, .pagination span { min-width: 44px; padding: 9px 12px; border: 1px solid #ccc; text-align: center; text-decoration: none; color: #333; }
.pagination .is-current { border-color: transparent; background: #fff; font-weight: 700; }
.pagination a:hover { background: #e6e6e6; border-color: #c4c4c4; color: #666; }
.product-empty { min-height: 220px; padding-top: 70px; text-align: center; }
.contact-page { padding-top: 45px; }
.contact-form h1 { margin: 0 0 20px; color: var(--zybio-ink); text-align: center; font-size: 24px; }
.contact-form input:not([type="hidden"]), .contact-form textarea { width: 100%; border: 1px solid #ccd1d9; border-radius: 4px; background: #fff; color: #222; padding: 0 22px; font-size: 14px; }
.contact-form input:not([type="hidden"]) { height: 40px; }
.contact-form textarea { min-height: 260px; padding-top: 14px; resize: vertical; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #888; opacity: 1; }
.contact-form textarea, .contact-form input { margin-bottom: 14px; }
.captcha-row { display: flex; align-items: center; position: relative; }
.captcha-row input { padding-right: 160px; margin-bottom: 0; }
.captcha-refresh { position: absolute; top: 0; right: 0; height: 40px; min-width: 110px; border: 0; background: transparent; color: #555; cursor: pointer; font-size: 14px; }
.field-error { display: block; min-height: 0; color: #b52b2b; font-size: 12px; }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-submit { display: block; width: 160px; height: 40px; margin: 25px auto 0; border: 0; border-radius: 2px; color: #fff; background: var(--zybio-button); cursor: pointer; transition: background .15s ease; }
.form-submit:hover { background: #00b885; }
.form-status { min-height: 24px; margin: 12px 0 0; text-align: center; color: var(--zybio-ink); font-size: 14px; }
.contact-details { color: #8a8a8a; font-size: 14px; line-height: 1.8; }
.contact-details p { margin: 0 0 6px; }
.contact-details span { margin-right: 8px; }
.contact-details a { text-decoration: none; }
.contact-details a:hover { color: var(--zybio-accent); }
.contact-details__brand { margin-left: 66px !important; }
.contact-page__details { border-top: 1px solid #eee; margin-top: 62px; padding-top: 46px; }
.contact-page__details h2 { margin: 0 0 22px; color: var(--zybio-ink); font-size: 20px; font-weight: 400; }
.contact-page__details .contact-details { padding-bottom: 55px; }
.contact-form--compact h1 { display: none; }
.contact-form--compact textarea { min-height: 120px; }
.home-contact__form .contact-details { padding: 0 0 20px; }
.site-footer { height: 40px; background: #fff; border-top: 1px solid #f1f1f1; text-align: center; }
.site-footer p { margin: 0; color: #666; font-size: 16px; line-height: 40px; }

@media (max-width: 767px) {
  :root { --zybio-header-height: 100px; }
  .content-width, .site-header__inner { width: calc(100% - 28px); }
  .site-header { height: var(--zybio-header-height); }
  .site-header__inner { align-items: center; }
  .site-logo { gap: 8px; max-width: calc(100% - 58px); }
  .site-logo__mark { width: 44px; height: 44px; font-size: 16px; }
  .site-logo__text { max-width: 150px; font-size: 18px; line-height: 1.08; }
  .nav-toggle { position: relative; z-index: 10; display: flex; flex: 0 0 44px; width: 44px; height: 44px; padding: 9px 8px; border: 0; background: transparent; flex-direction: column; justify-content: center; gap: 6px; cursor: pointer; }
  .nav-toggle > span:not(.screen-reader-text) { display: none; }
  .nav-toggle::before { content: ""; display: block; width: 100%; height: 2px; background: #aaa; box-shadow: 0 7px #aaa, 0 14px #aaa; }
  .primary-navigation { position: absolute; z-index: 5; top: var(--zybio-header-height); left: 0; right: 0; display: none; padding: 8px 0 18px; background: #fff; box-shadow: 0 7px 18px rgba(0,0,0,.08); flex-direction: column; gap: 0; }
  .primary-navigation.is-open { display: flex; }
  .primary-navigation a { width: 100%; padding: 14px 24px; text-align: center; font-size: 18px; }
  .home-hero { aspect-ratio: 1920 / 811; min-height: 0; }
  .home-hero__content { display: none; }
  .home-hero h1 { margin: 0 0 18px; font-size: 31px; }
  .home-hero p { max-width: 320px; color: #333; font-size: 17px; line-height: 1.7; }
  .home-about { display: block; padding: 48px 0 58px; }
  .home-about h2 { font-size: 31px; }
  .home-about p { width: 100%; font-size: 18px; line-height: 1.75; overflow-wrap: anywhere; }
  .advantage-section__inner { min-height: 0; display: block; }
  .advantage-section__title { padding: 34px 0 26px; }
  .advantage-section h2 { font-size: 31px; text-align: center; }
  .advantage-section__copy { padding: 0 10px 38px; font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
  .home-contact__grid { display: block; }
  .home-contact__image { min-height: 180px; }
  .home-contact__form { padding: 25px 0 0; }
  .inner-banner { aspect-ratio: 4 / 1; }
  .page-section { padding: 48px 0; }
  .about-page { padding-top: 58px; }
  .about-page__statement { font-size: 16px; line-height: 1.8; }
  .about-page__image { width: 100%; margin-top: 24px; }
  .page-title { margin: 0 0 18px; font-size: 24px; }
  .product-tabs { margin-bottom: 34px; }
  .product-tab { min-width: 0; flex: 1; padding: 10px 8px; font-size: 14px; }
  .product-grid { grid-template-columns: 1fr; gap: 20px; }
  .product-card { padding: 10px 26px 16px; }
  .product-card__price { margin-top: 12px; }
  .pagination { padding-top: 30px; }
  .contact-page { padding-top: 46px; }
  .contact-form h1 { font-size: 24px; line-height: 1.45; }
  .contact-form textarea { min-height: 250px; }
  .contact-page__details { margin-top: 42px; padding-top: 36px; }
  .contact-page__details h2 { font-size: 18px; line-height: 1.5; }
  .contact-details { font-size: 14px; line-height: 1.8; }
  .contact-details__brand { margin-left: 0 !important; }
  .site-footer { min-height: 80px; height: auto; }
  .site-footer p { padding: 12px 24px; line-height: 1.8; }
  .home-contact .site-footer { min-height: 40px; }
}