:root {
  --teal: #5dbeb9;
  --button-bg: #006f6a;
  --button-bg-hover: #005b57;
  --button-text: #fff;
  --bright: #4be0d7;
  --accent: #006f6a;
  --ink: #163d40;
  --muted: #4e696b;
  --line: #d9e8e6;
  --mint: #eff8f6;
  --deep: #123d40;
  --sans:
    "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --latin: Arial, Helvetica, sans-serif;
}

/* Public source pages share the brand's colour, texture and readable rhythm. */
.resource-section {
  background:
    radial-gradient(ellipse at 8% 15%, #d9f1ed 0, transparent 50%),
    linear-gradient(135deg, #f5faf9, #edf6f3);
  border-top: 1px solid var(--line);
}
.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.resource-grid li:first-child {
  grid-column: span 2;
}
.resource-grid a {
  display: block;
  position: relative;
  height: 100%;
  padding: 32px;
  background: radial-gradient(circle at 95% 0%, #dff2ed, transparent 60%), #fff;
  border: 1px solid #c6dfda;
  border-radius: 10px;
  transition:
    border-color 0.2s,
    transform 0.2s;
}
.resource-grid a:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}
.resource-number {
  display: block;
  margin-bottom: 26px;
  color: var(--accent);
  font: 14px var(--latin);
}
.resource-grid h3 {
  font-size: 21px;
  margin-bottom: 14px;
  padding-right: 12px;
}
.resource-grid p {
  color: var(--muted);
  font-size: 14px;
  max-width: 42ch;
}
.resource-arrow {
  position: absolute;
  right: 24px;
  top: 24px;
  color: var(--accent);
  font-size: 24px;
}
.content-page {
  background:
    radial-gradient(ellipse at 0 300px, #e5f3ef, transparent 800px), #f5f9f7;
}
.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px max(32px, calc((100% - 1120px) / 2));
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.content-header .brand img {
  width: 85px;
  height: auto;
}
.content-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.content-header nav a {
  font-size: 14px;
  color: var(--accent);
}
.content-main {
  width: min(1060px, calc(100% - 64px));
  margin: 40px auto 72px;
}
.content-breadcrumb {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 26px;
  overflow-wrap: anywhere;
}
.content-breadcrumb a:hover,
.content-body a:hover,
.content-footer a:hover {
  text-decoration: underline;
}
.content-main article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.content-heading {
  padding: 56px 68px 36px;
  background:
    radial-gradient(ellipse at 100% 0, #deefeb, transparent 70%), #f1f8f5;
}
.content-heading h1 {
  margin: 18px 0 20px;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -0.02em;
}
.content-intro {
  color: var(--muted);
  max-width: 60ch;
}
.content-meta {
  margin-top: 24px;
  font-size: 12px;
  color: var(--muted);
}
.content-body {
  padding: 40px 68px 56px;
  font-size: 16px;
  line-height: 1.95;
  overflow-wrap: anywhere;
}
.content-body p {
  margin: 0 0 20px;
}
.content-body h2 {
  font-size: 23px;
  margin: 40px 0 16px;
}
.content-body h3 {
  font-size: 19px;
  margin: 28px 0 14px;
}
.content-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.content-body a.btn {
  color: var(--button-text);
  text-decoration: none;
}
.content-body ul,
.content-body ol {
  margin: 18px 0 26px;
  padding-left: 24px;
}
.content-body li {
  margin-bottom: 10px;
}
.content-body dl {
  padding: 24px;
  background: var(--mint);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.content-body dt {
  font-weight: 600;
  margin-top: 12px;
}
.content-body dt:first-child {
  margin-top: 0;
}
.content-body dd {
  margin: 4px 0 0;
}
.content-table {
  overflow-x: auto;
  margin: 26px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.content-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  font-size: 14px;
}
.content-table caption {
  text-align: left;
  padding: 16px 20px;
  color: var(--muted);
  background: var(--mint);
}
.content-table th,
.content-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.content-table th {
  font-weight: 600;
  background: #f6faf8;
}
.content-table tbody tr:last-child > * {
  border-bottom: 0;
}
.content-photo {
  margin: 24px 0;
}
.content-photo img {
  max-height: 420px;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.content-photo figcaption {
  color: var(--muted);
  font-size: 12px;
  margin-top: 8px;
}
.content-sources {
  border-top: 1px solid var(--line);
  margin-top: 42px;
  padding-top: 8px;
  font-size: 14px;
  color: var(--muted);
}
.content-related {
  margin-top: 32px;
  padding: 30px;
  border: 1px solid #c6dfda;
  border-radius: 10px;
  background: linear-gradient(135deg, #e4f3ee, #f5faf8);
}
.content-related h2 {
  font-size: 21px;
  margin-bottom: 18px;
}
.content-related > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.content-related a {
  padding: 9px 16px;
  border: 1px solid #bedbd2;
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
  color: var(--accent);
}
.content-footer {
  background: var(--deep);
  color: #fff;
  text-align: center;
  padding: 32px;
  font-size: 13px;
}
.content-footer nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 12px;
}
.content-body .library-list {
  padding: 0;
  list-style: none;
}
.library-list li {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.library-list a {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-weight: 600;
}
.library-list p {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--muted);
}
@media (max-width: 760px) {
  .resource-grid {
    grid-template-columns: 1fr;
  }
  .resource-grid li:first-child {
    grid-column: auto;
  }
  .resource-grid a {
    padding: 26px;
  }
  .content-header {
    padding: 18px 20px;
    flex-wrap: wrap;
    gap: 16px;
  }
  .content-header .brand-signature {
    font-size: 16px;
  }
  .content-header nav {
    gap: 20px;
  }
  .content-main {
    width: calc(100% - 32px);
    margin-top: 24px;
  }
  .content-heading {
    padding: 28px 22px;
  }
  .content-heading h1 {
    font-size: 27px;
  }
  .content-body {
    padding: 24px 22px 32px;
    font-size: 15px;
  }
  .content-body h2 {
    font-size: 21px;
  }
  .content-table th,
  .content-table td {
    padding: 12px 14px;
  }
  .content-related {
    padding: 24px 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .resource-grid a {
    transition: none;
  }
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}
h1,
h2,
h3,
h4 {
  font-weight: 550;
  line-height: 1.4;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button {
  color: inherit;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
button {
  border: 0;
}
button:disabled {
  opacity: 0.6;
  cursor: wait;
}
em {
  font-style: normal;
}
ul {
  padding-left: 20px;
}
::selection {
  background: #b0ebe5;
  color: var(--ink);
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}
[hidden] {
  display: none !important;
}
.container {
  width: min(1280px, calc(100% - 112px));
  margin-inline: auto;
}
.section {
  padding: 106px 0;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  margin-bottom: 48px;
}
.eyebrow {
  font: 600 11px/1.5 var(--latin);
  letter-spacing: 0.19em;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 19px;
}
.eyebrow > span {
  height: 7px;
  width: 7px;
  background: var(--teal);
  display: inline-block;
  flex: none;
  border-radius: 50%;
}
h2 {
  font-size: 40px;
  line-height: 1.5;
  letter-spacing: 0.025em;
}
.heading-intro,
.heading-side > p {
  color: var(--muted);
  line-height: 1.9;
  font-size: 14px;
  padding-bottom: 4px;
}
.heading-side .text-link {
  margin-top: 14px;
}
.text-link {
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  background: transparent;
  padding: 0;
  min-height: 40px;
  color: var(--accent);
}
.text-link span {
  font-size: 19px;
  font-family: var(--latin);
  transition: transform 0.2s;
}
.text-link:hover span {
  transform: translate(3px, -2px);
}
.btn {
  min-height: 50px;
  padding: 12px 25px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  transition:
    background 0.2s,
    transform 0.2s;
}
.btn-primary {
  background: var(--button-bg);
  color: var(--button-text);
}
.btn-primary:hover {
  background: var(--button-bg-hover);
  transform: translateY(-2px);
}
.btn > span {
  font-size: 20px;
  font-family: var(--latin);
}
.small-tag {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.data-note {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.9;
  margin-top: 24px;
}
.sr-only,
.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 1000;
  background: var(--ink);
  color: #fff;
  padding: 10px 20px;
}
.skip-link:focus {
  top: 10px;
}
.site-header {
  height: 88px;
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid rgba(217, 232, 230, 0.5);
  transition: box-shadow 0.2s;
}
.site-header.scrolled {
  box-shadow: 0 4px 20px rgba(22, 61, 64, 0.05);
}
.header-inner {
  max-width: 1536px;
  padding: 0 48px;
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 17px;
  flex: none;
}
.brand img {
  width: 86px;
  height: 54px;
  object-fit: contain;
}
.brand-signature {
  border-left: 1px solid var(--line);
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.7;
  white-space: nowrap;
}
.brand-signature small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.1em;
}
.main-nav {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-left: auto;
}
.main-nav a {
  font-size: 13px;
  line-height: 88px;
  position: relative;
  white-space: nowrap;
}
.main-nav a:hover,
.main-nav a.active {
  color: var(--accent);
}
.main-nav a.active:after {
  content: "";
  height: 3px;
  width: 15px;
  position: absolute;
  bottom: 17px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--teal);
}
.header-cta {
  font-size: 13px;
  border: 1px solid var(--line);
  padding: 9px 15px;
  border-radius: 4px;
  white-space: nowrap;
  display: flex;
  gap: 17px;
}
.header-cta:hover {
  background: var(--mint);
}
.menu-toggle {
  display: none;
  background: transparent;
  width: 42px;
  height: 42px;
  padding: 10px;
}
.menu-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  margin: 6px 0;
}
.hero {
  position: relative;
  background: linear-gradient(108deg, #f0f9f6 0%, #f1faf8 52%, #e1f3ef 100%);
  padding-top: 45px;
  overflow: hidden;
}
.hero:before {
  content: "";
  position: absolute;
  width: 670px;
  height: 670px;
  border: 1px solid rgba(93, 190, 185, 0.18);
  border-radius: 50%;
  left: -360px;
  top: 60px;
  box-shadow:
    0 0 0 50px rgba(93, 190, 185, 0.035),
    0 0 0 100px rgba(93, 190, 185, 0.025);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: 56px;
  align-items: center;
  position: relative;
}
.hero-copy {
  padding: 15px 0;
}
.hero-copy .eyebrow {
  margin-bottom: 25px;
}
.hero-label {
  font-size: 13px;
  letter-spacing: 0.13em;
  margin-bottom: 14px;
  color: var(--muted);
}
.hero h1 {
  font-size: clamp(36px, 3.72vw, 59px);
  font-weight: 550;
  line-height: 1.45;
  letter-spacing: -0.035em;
  white-space: normal;
}
.hero h1 > span,
.hero h1 > em {
  display: block;
}
.hero h1 > em {
  color: var(--accent);
}
.hero-description {
  color: var(--muted);
  max-width: 465px;
  font-size: 14px;
  margin-top: 27px;
  line-height: 2.05;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 32px;
}
.hero-actions .text-link {
  gap: 18px;
  color: var(--ink);
}
.hero-principles {
  display: flex;
  gap: 32px;
  margin-top: 45px;
  max-width: 385px;
}
.hero-principles > span {
  font-size: 21px;
  font-weight: 550;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  border-right: 1px solid #cddfda;
  line-height: 1.4;
}
.hero-principles > span:last-child {
  border: 0;
}
.hero-principles small {
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.hero-visual {
  position: relative;
  height: 570px;
  background: #c6ded5;
  border-radius: 110px 5px 5px 5px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(24, 77, 73, 0.08);
}
.hero-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% 50%;
}
.hero-image-label {
  position: absolute;
  top: 23px;
  right: 22px;
  padding: 8px 13px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 9px;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 3px;
}
.hero-image-label > span:last-child {
  border-left: 1px solid var(--line);
  padding-left: 8px;
  letter-spacing: 0;
}
.live-dot {
  width: 5px;
  height: 5px;
  display: block;
  border-radius: 50%;
  background: var(--accent);
}
.hero-image-note {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.94);
  padding: 18px 23px;
  border-radius: 4px;
}
.hero-image-note > span {
  font-size: 17px;
  line-height: 1.65;
}
.hero-image-note a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--button-bg);
  color: var(--button-text);
  font-size: 24px;
  font-family: var(--latin);
}
.hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 0;
  font-size: 10px;
  letter-spacing: 0.13em;
  position: relative;
}
.hero-bottom > span:first-child {
  color: var(--muted);
  font-family: var(--latin);
}
.hero-bottom a {
  display: flex;
  gap: 23px;
  align-items: center;
}
.hero-bottom a > span {
  font-size: 20px;
}
.brand-stats {
  border-bottom: 1px solid var(--line);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 35px 0;
}
.stats-grid > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 19px;
  border-right: 1px solid var(--line);
}
.stats-grid > div:first-child {
  justify-content: flex-start;
}
.stats-grid > div:last-child {
  border: 0;
}
.stats-grid strong {
  font-family: var(--latin);
  font-size: 43px;
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1.3;
}
.stats-grid em {
  font-size: 24px;
  color: var(--accent);
  vertical-align: super;
}
.stats-grid span {
  font-size: 12px;
  line-height: 1.7;
}
.stats-grid small {
  display: block;
  font-size: 9px;
  color: var(--muted);
  margin-top: 4px;
}
.brand-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}
.founder-card {
  position: relative;
  background: var(--mint);
  overflow: hidden;
  border-radius: 4px;
}
.founder-card > img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  object-position: 50% 50%;
}
.founder-card figcaption {
  background: var(--deep);
  color: white;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.founder-card strong {
  font-size: 22px;
  letter-spacing: 0.1em;
}
.founder-card figcaption span {
  display: block;
  font-size: 12px;
  color: #c6e4e0;
  margin-top: 6px;
}
.circle-link {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #79a3a3;
  border-radius: 50%;
  color: #b9ebe4;
  background: transparent;
  font: 24px var(--latin);
}
.circle-link:hover {
  background: #24565a;
}
.brand-story h3 {
  font-size: 27px;
  line-height: 1.6;
  margin: 18px 0;
}
.brand-story > p {
  color: var(--muted);
  font-size: 14px;
  line-height: 2;
}
.brand-values {
  border-top: 1px solid var(--line);
  margin: 23px 0 13px;
  padding-top: 20px;
  display: flex;
  gap: 23px;
  align-items: flex-start;
}
.brand-values > span {
  font-size: 11px;
  color: var(--accent);
  flex: none;
  padding-top: 2px;
}
.brand-values p {
  font-size: 13px;
}
.services-section {
  background: #f9fbfa;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.service-card {
  background: white;
  text-align: left;
  border: 1px solid #e4edeb;
  border-radius: 5px;
  overflow: hidden;
  padding: 0;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 35px rgba(22, 61, 64, 0.08);
}
.service-image {
  height: 210px;
  overflow: hidden;
  position: relative;
  background: var(--mint);
}
.service-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.service-card:hover img {
  transform: scale(1.04);
}
.service-index {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(255, 255, 255, 0.94);
  font: 11px var(--latin);
  padding: 9px;
  border-radius: 50%;
  width: 31px;
  height: 31px;
  text-align: center;
}
.service-content {
  padding: 23px 24px 24px;
  position: relative;
}
.service-content > p {
  font: 9px/1.5 var(--latin);
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 7px;
}
.service-content h3 {
  font-size: 22px;
}
.service-detail {
  color: var(--muted);
  font-size: 12px;
  margin-top: 9px;
}
.service-arrow {
  position: absolute;
  right: 24px;
  top: 38px;
  font: 21px var(--latin);
  color: var(--accent);
}
.service-process {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 27px;
  margin-top: 38px;
  font-size: 12px;
}
.service-process > span {
  font-weight: 600;
}
.service-process ol {
  list-style: none;
  display: flex;
  gap: 34px;
  margin: 0;
  padding: 0;
  color: var(--muted);
}
.service-process b {
  font: 10px var(--latin);
  color: var(--accent);
  margin-right: 7px;
}
.service-process > a {
  color: var(--accent);
  font-weight: 600;
}
.research-section {
  background: var(--mint);
}
.research-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 66px;
  align-items: center;
}
.research-image {
  position: relative;
  height: 393px;
  border-radius: 4px;
  overflow: hidden;
}
.research-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.research-image > span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(9, 38, 36, 0.8));
  color: white;
  font-size: 11px;
  padding: 45px 22px 18px;
}
.research-techniques {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 21px 28px;
  margin: 23px 0;
}
.research-techniques b {
  font: 11px var(--latin);
  color: var(--accent);
}
.research-techniques h3 {
  font-size: 16px;
  margin: 7px 0;
}
.research-techniques p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
}
.research-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 20px;
  border-top: 1px solid #cfdedb;
  margin-top: 25px;
}
.research-numbers strong {
  font: 32px/1.2 var(--latin);
  letter-spacing: -0.04em;
}
.research-numbers span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 7px;
}
.research-content > .data-note {
  margin-top: 15px;
  font-size: 10px;
}
.credentials-strip {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  padding: 30px 0;
  margin-top: 42px;
  border-top: 1px solid #cddedb;
  border-bottom: 1px solid #cddedb;
  align-items: center;
}
.credentials-strip > div {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 13px;
}
.credential-symbol {
  font-size: 32px;
  color: var(--accent);
}
.credentials-strip small {
  display: block;
  font-size: 9px;
  color: var(--muted);
  margin-top: 4px;
}
.credentials-strip .text-link {
  font-size: 11px;
  gap: 15px;
  white-space: nowrap;
}
.history-heading {
  display: flex;
  justify-content: space-between;
  margin: 48px 0 28px;
  align-items: center;
}
.history-heading h3 {
  font-size: 23px;
}
.history-heading > span {
  font: 12px var(--latin);
  letter-spacing: 0.08em;
  color: var(--accent);
}
.timeline {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #a1cdc6 transparent;
  padding-bottom: 16px;
}
.timeline > article {
  min-width: 215px;
  width: 215px;
  flex: none;
  scroll-snap-align: start;
  padding-right: 30px;
}
.timeline > article:last-child {
  padding-right: 0;
}
.timeline strong {
  font: 27px var(--latin);
  color: var(--accent);
  font-weight: 500;
}
.timeline-dot {
  display: block;
  position: relative;
  border-top: 1px solid #b2d5cf;
  margin: 24px -30px 24px 0;
}
.timeline-dot:before {
  content: "";
  width: 7px;
  height: 7px;
  position: absolute;
  top: -4px;
  background: var(--teal);
  border-radius: 50%;
}
.timeline h4 {
  font-size: 14px;
  margin-bottom: 10px;
}
.timeline p {
  font-size: 12px;
  color: var(--muted);
}
.products-section {
  background: white;
}
.product-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  background: #eef6f3;
  border: 1px solid #e1ede9;
  border-radius: 5px;
  overflow: hidden;
}
.product-tabs {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid #dae7e2;
}
.product-tabs > button {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 14px;
  text-align: left;
  background: transparent;
  border-radius: 4px;
  font-size: 14px;
  min-height: 60px;
}
.product-tabs > button > span {
  font: 10px var(--latin);
  color: var(--muted);
}
.product-tabs > button > b {
  font: 18px var(--latin);
  margin-left: auto;
  opacity: 0;
}
.product-tabs > button[aria-selected="true"] {
  background: var(--button-bg);
  color: var(--button-text);
}
.product-tabs > button[aria-selected="true"] > b {
  opacity: 1;
}
.product-tabs > button[aria-selected="true"] > span {
  color: var(--button-text);
}
.product-tabs > button:hover {
  background: #d0ebe4;
}
.product-panel {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: stretch;
  min-width: 0;
}
.product-photo {
  position: relative;
  overflow: hidden;
  min-height: 435px;
}
.product-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.product-photo > span {
  position: absolute;
  bottom: 17px;
  left: 18px;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.95);
  padding: 5px 10px;
  border-radius: 3px;
}
.product-copy {
  padding: 40px 35px;
}
.product-copy .eyebrow {
  font-size: 9px;
  margin-bottom: 10px;
}
.product-copy h3 {
  font-size: 27px;
  margin-bottom: 14px;
}
.product-copy > p:not(.eyebrow) {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.95;
}
.product-copy #productSummary {
  font-size: 14px;
  margin-bottom: 15px;
  color: var(--ink);
}
.product-range {
  border-top: 1px solid #cdded7;
  padding-top: 16px;
  margin-top: 22px;
  margin-bottom: 13px;
}
.product-range small {
  display: block;
  font-size: 10px;
  color: var(--muted);
}
.product-range strong {
  font-size: 19px;
  line-height: 1.6;
  font-weight: 500;
}
.network-section {
  background: #f9fbfa;
}
.gallery-layout {
  display: grid;
  grid-template-columns: 1fr 235px;
  gap: 26px;
}
.gallery-main {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}
.gallery-main > button {
  padding: 0;
  position: relative;
  width: 100%;
  display: block;
  background: var(--mint);
}
.gallery-main > button > img {
  height: 490px;
  width: 100%;
  object-fit: cover;
}
.expand-icon {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 39px;
  height: 39px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: white;
  font: 22px var(--latin);
}
.gallery-caption {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 25px;
}
.gallery-caption strong {
  font-size: 17px;
  font-weight: 500;
}
.gallery-caption > span {
  font-size: 11px;
  color: var(--muted);
}
.gallery-caption small {
  margin-left: auto;
  font: 10px var(--latin);
  color: var(--accent);
  white-space: nowrap;
}
.gallery-thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gallery-thumb {
  padding: 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  text-align: left;
}
.gallery-thumb img {
  width: 100%;
  height: 117px;
  object-fit: cover;
}
.gallery-thumb > span {
  font-size: 10px;
  padding: 10px 8px;
  display: block;
}
.gallery-thumb.active {
  border: 2px solid var(--accent);
}
.gallery-thumb:hover {
  border-color: var(--accent);
}
.store-search {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 65px;
  padding-top: 46px;
  margin-top: 43px;
  border-top: 1px solid var(--line);
  align-items: center;
}
.store-search .eyebrow {
  font-size: 9px;
  margin-bottom: 10px;
}
.store-search h3 {
  font-size: 26px;
}
.store-search > div > p:last-child {
  color: var(--muted);
  font-size: 12px;
  margin-top: 10px;
}
.search-field {
  display: flex;
  gap: 10px;
}
.search-field input {
  min-width: 0;
  flex: 1;
  border: 1px solid #cbded8;
  background: white;
  padding: 12px 17px;
  border-radius: 4px;
  font-size: 13px;
  min-height: 50px;
}
.search-field .btn {
  font-size: 13px;
  padding: 12px 20px;
  gap: 18px;
}
.store-search-controls #networkResult {
  font-size: 11px;
  margin-top: 12px;
  color: var(--muted);
}
#networkResult a {
  text-decoration: underline;
  color: var(--accent);
}
.store-results {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.store-result {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 12px;
}
.store-result h3 {
  font-size: 16px;
  margin-bottom: 10px;
}
.store-result a {
  color: var(--accent);
  margin-top: 9px;
  display: block;
}
.join-section {
  background: #e7f5f0;
}
.join-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}
.join-intro h2 {
  font-size: 42px;
}
.join-intro > div > p:not(.eyebrow) {
  font-size: 14px;
  color: var(--muted);
  margin: 24px 0 28px;
  line-height: 2;
}
.join-intro figure {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}
.join-intro img {
  height: 360px;
  width: 100%;
  object-fit: cover;
}
.join-intro figcaption {
  font-size: 10px;
  position: absolute;
  bottom: 14px;
  right: 16px;
  background: rgba(255, 255, 255, 0.96);
  padding: 6px 10px;
  border-radius: 3px;
}
.support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 27px 45px;
  margin-top: 58px;
}
.support-grid > article {
  padding: 22px 0;
  border-top: 1px solid #bddbd2;
}
.support-grid > article > span {
  font: 10px var(--latin);
  color: var(--accent);
}
.support-grid h3 {
  font-size: 18px;
  margin: 12px 0;
}
.support-grid p {
  color: var(--muted);
  font-size: 12px;
}
.model-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 32px 0 27px;
  gap: 20px;
}
.model-heading h3 {
  font-size: 24px;
}
.model-heading > span {
  font-size: 11px;
  color: var(--muted);
}
.model-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 23px;
}
.model-card {
  background: white;
  border: 1px solid #cde3da;
  border-radius: 5px;
  padding: 26px 28px;
}
.model-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.model-card h4 {
  font-size: 20px;
}
.model-card > div > span {
  font-size: 11px;
  background: var(--mint);
  padding: 5px 10px;
  border-radius: 3px;
  color: var(--accent);
}
.model-price {
  color: var(--accent);
  font-size: 13px;
  margin-top: 20px;
}
.model-price strong {
  font: 44px var(--latin);
  letter-spacing: -0.035em;
  margin-right: 5px;
}
.model-card > p:not(.model-price) {
  font-size: 10px;
  color: var(--muted);
  margin-top: 6px;
}
.model-card ul {
  font-size: 11px;
  color: var(--muted);
  padding-left: 0;
  list-style: none;
  line-height: 2.2;
  margin: 20px 0;
}
.model-card .text-link {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.learning-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.learning-layout figure {
  background: var(--mint);
  border-radius: 5px;
  overflow: hidden;
}
.learning-layout figure img {
  width: 100%;
  height: 410px;
  object-fit: cover;
}
.learning-layout figcaption {
  font-size: 10px;
  padding: 16px 20px;
  color: var(--muted);
}
.learning-layout h2 {
  font-size: 32px;
}
.learning-layout > div > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 13px;
  margin: 20px 0;
}
.learning-tracks > div {
  border-top: 1px solid var(--line);
  padding: 15px 0;
  display: grid;
  grid-template-columns: 22px 90px 1fr;
  align-items: baseline;
  gap: 10px;
}
.learning-tracks span {
  font: 10px var(--latin);
  color: var(--accent);
}
.learning-tracks strong {
  font-size: 13px;
  font-weight: 500;
}
.learning-tracks p {
  font-size: 11px;
  color: var(--muted);
}
.learning-layout .text-link {
  margin-top: 10px;
}
.partner-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 54px 0 27px;
}
.partner-heading h3 {
  font-size: 25px;
}
.partner-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}
.partner-card {
  flex: 1 1 calc((100% - 50px) / 3);
  min-width: 0;
  padding: 25px;
  background: #f1f7f4;
  border: 1px solid var(--line);
  border-radius: 4px;
  text-align: left;
}
.partner-card:hover {
  background: #e4f3ed;
}
.partner-card > div {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
}
.partner-card > div > small {
  font-size: 10px;
}
.partner-card > p {
  font-size: 11px;
  display: flex;
  align-items: baseline;
  gap: 13px;
  margin: 20px 0;
}
.partner-card strong {
  font: 42px var(--latin);
  font-weight: 400;
  letter-spacing: -0.04em;
}
.partner-card h4 {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #d4e4db;
  padding-top: 20px;
}
.partner-card h4 > span {
  font: 20px var(--latin);
  color: var(--accent);
}
.journal-section {
  background: #f8fbfa;
}
.journal-grid,
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}
.journal-card,
.news-card {
  position: relative;
  padding: 28px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
}
.journal-card:hover,
.news-card:hover {
  border-color: var(--teal);
}
.journal-number {
  position: absolute;
  right: 26px;
  top: 21px;
  font: 39px var(--latin);
  letter-spacing: -0.06em;
  color: #78958f;
}
.journal-card > small,
.news-card > small {
  font-size: 11px;
  color: var(--accent);
}
.journal-card h3 {
  font-size: 22px;
  line-height: 1.6;
  margin: 26px 0 16px;
}
.journal-card p,
.news-card p {
  font-size: 12px;
  line-height: 1.9;
  color: var(--muted);
}
.journal-card > .text-link {
  display: flex;
  justify-content: space-between;
  margin-top: 29px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.news-card h3 {
  font-size: 21px;
  margin: 15px 0;
}
.news-card > span {
  display: block;
  margin-top: 25px;
  color: var(--accent);
  font-size: 12px;
}
.contact-section {
  padding: 90px 0;
  background: #d6eee7;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}
.contact-copy h2 {
  font-size: 40px;
}
.contact-copy > p:not(.eyebrow) {
  font-size: 13px;
  color: var(--muted);
  margin: 23px 0 30px;
  line-height: 2;
}
.contact-details > div {
  margin-top: 22px;
}
.contact-details > div > span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 7px;
}
.contact-details a {
  font: 33px var(--latin);
  letter-spacing: -0.02em;
}
.contact-details p {
  font-size: 13px;
}
.contact-wechat {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 29px;
}
.contact-wechat img {
  width: 76px;
  height: 76px;
  padding: 6px;
  background: white;
  border-radius: 4px;
}
.contact-wechat strong {
  font-size: 12px;
  display: block;
  font-weight: 500;
}
.contact-wechat span {
  font-size: 10px;
  color: var(--muted);
  display: block;
  margin-top: 5px;
}
.contact-form {
  background: white;
  border-radius: 6px;
  padding: 35px 35px 30px;
  box-shadow: 0 15px 50px rgba(42, 83, 66, 0.04);
}
.form-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 21px;
  margin-bottom: 23px;
}
.form-title > strong {
  font-size: 20px;
  font-weight: 500;
}
.form-title > span {
  font-size: 10px;
  color: var(--muted);
}
.contact-form label {
  font-size: 11px;
  display: block;
  margin-bottom: 17px;
  color: var(--muted);
}
.contact-form input:not([type="checkbox"]),
.contact-form textarea,
.contact-form select {
  width: 100%;
  display: block;
  border: 1px solid #d4e3dd;
  background: #f9fcfa;
  border-radius: 3px;
  padding: 11px 13px;
  font-size: 12px;
  color: var(--ink);
  margin-top: 7px;
  min-height: 44px;
}
.contact-form textarea {
  resize: vertical;
  min-height: 90px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #637b7a;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}
.contact-form .consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.8;
  font-size: 10px;
}
.consent input {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  margin: 3px 0 0;
  flex: none;
}
.consent a {
  color: var(--accent);
  text-decoration: underline;
}
.btn-submit {
  width: 100%;
  justify-content: space-between;
  min-height: 48px;
}
.contact-form > small {
  font-size: 9px;
  color: var(--muted);
  display: block;
  margin-top: 13px;
  text-align: center;
}
.form-error {
  font-size: 12px;
  color: #a42532;
  margin: 10px 0;
}
.site-footer {
  background: #fff;
  padding: 28px 0 22px;
}
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 27px;
}
.footer-top .brand-signature {
  font-size: 11px;
  letter-spacing: 0.03em;
}
.footer-links {
  display: flex;
  gap: 28px;
  font-size: 11px;
  color: var(--muted);
}
.footer-links a:hover {
  color: var(--accent);
}
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 9px;
  color: var(--muted);
}
.floating-tools {
  position: fixed;
  right: 20px;
  bottom: 25px;
  z-index: 25;
  display: grid;
  background: white;
  box-shadow: 0 3px 20px rgba(22, 61, 64, 0.09);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.floating-tools > * {
  background: white;
  min-width: 40px;
  min-height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  font-size: 17px;
  color: var(--accent);
}
.floating-tools > * + * {
  border-top: 1px solid var(--line);
}
.floating-tools > *:hover {
  background: var(--mint);
}
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 20px);
  z-index: 100;
  max-width: calc(100% - 40px);
  padding: 16px 23px;
  background: var(--deep);
  color: white;
  font-size: 13px;
  border-radius: 4px;
  box-shadow: 0 8px 35px #153a4030;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(14, 39, 40, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
}
.quick-modal {
  position: relative;
  background: #fff;
  border-radius: 7px;
  width: 760px;
  max-width: 100%;
  padding: 38px;
  max-height: 90vh;
  overflow: auto;
  overscroll-behavior: contain;
}
.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mint);
  font: 27px var(--latin);
  z-index: 1;
}
.quick-modal > .eyebrow {
  margin-bottom: 15px;
  padding-right: 40px;
}
.quick-modal > h2 {
  font-size: 28px;
  margin-bottom: 23px;
  padding-right: 27px;
}
.multiline {
  white-space: pre-line;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.95;
}
.multiline:has(.detail-rich) {
  white-space: normal;
}
.detail-rich > p {
  margin-bottom: 20px;
}
.detail-rich h3 {
  font-size: 18px;
  color: var(--ink);
  margin: 26px 0 13px;
}
.detail-rich h4 {
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 7px;
}
.detail-rich img {
  width: 100%;
  border-radius: 4px;
  margin-bottom: 17px;
  max-height: 500px;
  object-fit: contain;
}
.detail-rich .detail-entry {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.detail-entry small {
  display: block;
  color: var(--accent);
  font-size: 11px;
  margin: 5px 0;
}
.detail-rich table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  margin-bottom: 20px;
}
.detail-rich td,
.detail-rich th {
  border-bottom: 1px solid var(--line);
  padding: 12px 8px;
  text-align: left;
}
.detail-rich .note {
  font-size: 11px;
  color: var(--muted);
  background: var(--mint);
  padding: 15px;
  border-radius: 4px;
}
.quick-modal > #detailConsult {
  margin-top: 27px;
}
.detail-rich .patent-number {
  font-family: var(--latin);
  font-size: 11px;
  color: var(--accent);
}
@media (min-width: 1700px) {
  .hero {
    padding-top: 60px;
  }
  .hero-grid {
    gap: 76px;
  }
  .hero-visual {
    height: 610px;
  }
  .hero h1 {
    font-size: 58px;
  }
}
@media (max-width: 1250px) {
  .container {
    width: calc(100% - 80px);
  }
  .header-inner {
    padding: 0 32px;
    gap: 22px;
  }
  .brand-signature {
    display: none;
  }
  .main-nav {
    gap: 23px;
  }
  .hero-grid {
    gap: 36px;
  }
  .hero-visual {
    height: 535px;
  }
  .hero h1 {
    font-size: clamp(38px, 3.65vw, 48px);
  }
  .hero-principles {
    gap: 25px;
  }
  .stats-grid strong {
    font-size: 37px;
  }
  .stats-grid > div {
    gap: 13px;
  }
  .stats-grid small {
    font-size: 8px;
  }
  .brand-layout {
    gap: 60px;
  }
  .research-layout {
    gap: 40px;
  }
  .product-layout {
    grid-template-columns: 215px 1fr;
  }
  .product-copy {
    padding: 30px 25px;
  }
  .product-panel {
    grid-template-columns: 0.85fr 1.15fr;
  }
  .product-tabs {
    padding: 15px;
  }
  .product-tabs > button {
    gap: 10px;
  }
  .credentials-strip {
    gap: 15px;
  }
  .credentials-strip > div {
    font-size: 11px;
  }
  .credential-symbol {
    font-size: 26px;
  }
  .credentials-strip .text-link {
    font-size: 10px;
    gap: 10px;
  }
  .gallery-layout {
    grid-template-columns: 1fr 210px;
    gap: 20px;
  }
  .gallery-caption {
    gap: 16px;
  }
  .gallery-caption > span {
    font-size: 10px;
  }
  .join-intro {
    gap: 65px;
  }
  .contact-grid {
    gap: 65px;
  }
  .service-process ol {
    gap: 20px;
  }
  .learning-layout {
    gap: 50px;
  }
  .learning-layout h2 {
    font-size: 29px;
  }
}
@media (max-width: 1000px) {
  .container {
    width: calc(100% - 64px);
  }
  .site-header {
    height: 78px;
  }
  .header-inner {
    gap: 18px;
  }
  .brand img {
    width: 76px;
    height: 49px;
  }
  .main-nav {
    gap: 15px;
  }
  .main-nav a {
    font-size: 11px;
    line-height: 78px;
  }
  .header-cta {
    font-size: 11px;
    padding: 7px 12px;
    gap: 10px;
  }
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 25px;
  }
  .hero h1 {
    font-size: 37px;
  }
  .hero-description {
    font-size: 12px;
  }
  .hero .eyebrow {
    font-size: 9px;
  }
  .hero-actions {
    gap: 16px;
  }
  .hero-actions .btn {
    padding: 12px 18px;
    gap: 16px;
    font-size: 12px;
  }
  .hero-actions .text-link {
    font-size: 11px;
    gap: 12px;
  }
  .hero-principles {
    margin-top: 30px;
    gap: 20px;
  }
  .hero-visual {
    height: 490px;
    border-radius: 80px 4px 4px 4px;
  }
  .hero-image-label {
    font-size: 7px;
    top: 19px;
    right: 15px;
    padding: 8px 10px;
  }
  .hero-image-label > span:last-child {
    display: none;
  }
  .hero-image-note {
    padding: 16px;
    bottom: 15px;
    left: 15px;
    right: 15px;
  }
  .hero-image-note > span {
    font-size: 14px;
  }
  .stats-grid {
    padding: 28px 0;
    gap: 10px;
  }
  .stats-grid > div {
    display: block;
    padding-left: 15px;
  }
  .stats-grid > div:first-child {
    padding-left: 0;
  }
  .stats-grid strong {
    font-size: 33px;
    display: block;
    margin-bottom: 8px;
  }
  .stats-grid em {
    font-size: 18px;
  }
  .stats-grid span {
    font-size: 11px;
  }
  .stats-grid small {
    font-size: 9px;
  }
  .section {
    padding: 78px 0;
  }
  h2 {
    font-size: 33px;
  }
  .section-heading {
    gap: 30px;
    margin-bottom: 37px;
  }
  .heading-intro,
  .heading-side > p {
    font-size: 12px;
  }
  .brand-layout {
    gap: 40px;
  }
  .brand-story h3 {
    font-size: 22px;
  }
  .brand-story > p {
    font-size: 12px;
  }
  .founder-card > img {
    height: 330px;
  }
  .brand-values {
    gap: 15px;
  }
  .brand-values p {
    font-size: 11px;
  }
  .service-grid {
    gap: 18px;
  }
  .service-image {
    height: 175px;
  }
  .service-content {
    padding: 20px 18px;
  }
  .service-content h3 {
    font-size: 19px;
  }
  .service-detail {
    font-size: 10px;
  }
  .service-arrow {
    right: 18px;
    top: 34px;
  }
  .service-process ol {
    gap: 14px;
    font-size: 11px;
  }
  .service-process > span {
    font-size: 10px;
  }
  .service-process > a {
    font-size: 10px;
  }
  .research-layout {
    gap: 30px;
  }
  .research-techniques {
    gap: 17px;
  }
  .research-techniques h3 {
    font-size: 13px;
  }
  .research-techniques p {
    font-size: 10px;
  }
  .research-image {
    height: 360px;
  }
  .research-numbers strong {
    font-size: 27px;
  }
  .credentials-strip {
    flex-wrap: wrap;
    gap: 20px;
  }
  .credentials-strip > div {
    font-size: 12px;
  }
  .credentials-strip .text-link {
    font-size: 11px;
  }
  .product-layout {
    grid-template-columns: 185px 1fr;
  }
  .product-tabs {
    padding: 13px 10px;
  }
  .product-tabs > button {
    font-size: 12px;
    gap: 8px;
    padding: 14px 10px;
  }
  .product-panel {
    grid-template-columns: 1fr;
  }
  .product-photo {
    min-height: 230px;
    height: 230px;
  }
  .product-copy {
    padding: 25px;
  }
  .product-copy h3 {
    font-size: 23px;
  }
  .product-photo img {
    object-position: center 45%;
  }
  .product-range {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 12px;
    margin-top: 18px;
  }
  .product-range strong {
    font-size: 16px;
  }
  .gallery-layout {
    grid-template-columns: 1fr 190px;
  }
  .gallery-main > button > img {
    height: 390px;
  }
  .gallery-thumb img {
    height: 90px;
  }
  .gallery-thumb > span {
    font-size: 9px;
    padding: 8px 6px;
  }
  .gallery-caption {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 5px;
    padding: 17px;
  }
  .gallery-caption strong {
    font-size: 15px;
  }
  .gallery-caption > span {
    grid-column: 1;
    grid-row: 2;
  }
  .gallery-caption small {
    grid-column: 2;
    grid-row: 1/3;
  }
  .store-search {
    gap: 30px;
    grid-template-columns: 1fr 1.3fr;
  }
  .store-search h3 {
    font-size: 22px;
  }
  .search-field .btn {
    font-size: 11px;
    padding: 10px 15px;
    gap: 10px;
  }
  .search-field input {
    padding: 12px;
    font-size: 11px;
  }
  .join-intro {
    gap: 45px;
  }
  .join-intro h2 {
    font-size: 34px;
  }
  .join-intro > div > p:not(.eyebrow) {
    font-size: 12px;
  }
  .join-intro img {
    height: 315px;
  }
  .support-grid {
    gap: 18px 30px;
  }
  .support-grid h3 {
    font-size: 16px;
  }
  .support-grid p {
    font-size: 11px;
  }
  .model-heading h3 {
    font-size: 21px;
  }
  .model-heading > span {
    font-size: 10px;
  }
  .model-grid {
    gap: 18px;
  }
  .model-card {
    padding: 22px 19px;
  }
  .model-card h4 {
    font-size: 18px;
  }
  .model-card > div > span {
    font-size: 9px;
  }
  .model-card ul {
    font-size: 10px;
  }
  .model-price strong {
    font-size: 37px;
  }
  .learning-layout {
    gap: 35px;
  }
  .learning-layout h2 {
    font-size: 27px;
  }
  .learning-layout figure img {
    height: 375px;
  }
  .learning-layout > div > p:not(.eyebrow) {
    font-size: 11px;
  }
  .learning-tracks > div {
    grid-template-columns: 20px 75px 1fr;
    gap: 5px;
  }
  .learning-tracks strong {
    font-size: 11px;
  }
  .learning-tracks p {
    font-size: 10px;
  }
  .partner-grid {
    gap: 18px;
  }
  .partner-card {
    padding: 21px;
  }
  .partner-card > div {
    display: block;
  }
  .partner-card > div small {
    display: block;
    margin-top: 5px;
  }
  .journal-card {
    padding: 23px;
  }
  .journal-card h3 {
    font-size: 19px;
  }
  .journal-number {
    font-size: 33px;
  }
  .journal-card p {
    font-size: 11px;
  }
  .contact-grid {
    gap: 45px;
  }
  .contact-copy h2 {
    font-size: 33px;
  }
  .contact-copy > p:not(.eyebrow) {
    font-size: 12px;
  }
  .contact-form {
    padding: 27px;
  }
  .contact-details a {
    font-size: 28px;
  }
  .footer-top .brand-signature {
    display: none;
  }
  .footer-links {
    gap: 22px;
  }
  .footer-bottom {
    font-size: 8px;
  }
  .floating-tools {
    right: 12px;
  }
}
@media (max-width: 760px) {
  html {
    scroll-padding-top: 86px;
  }
  .container {
    width: calc(100% - 40px);
  }
  .section {
    padding: 63px 0;
  }
  .site-header {
    height: 72px;
  }
  .header-inner {
    padding: 0 20px;
    gap: 12px;
  }
  .brand img {
    width: 73px;
    height: 46px;
  }
  .header-cta {
    margin-left: auto;
    font-size: 11px;
    padding: 7px 12px;
  }
  .menu-toggle {
    display: block;
    margin-right: -8px;
  }
  .main-nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 15px 20px #143c4010;
    padding: 15px 20px 23px;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }
  .main-nav.open {
    display: grid;
  }
  .main-nav a {
    line-height: 50px;
    font-size: 13px;
    border-bottom: 1px solid #edf3f0;
  }
  .main-nav a.active:after {
    display: none;
  }
  .hero {
    padding-top: 35px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .hero-copy {
    padding: 0;
  }
  .hero-copy .eyebrow {
    font-size: 9px;
    margin-bottom: 23px;
  }
  .hero-label {
    font-size: 11px;
    margin-bottom: 10px;
  }
  .hero h1 {
    font-size: clamp(31px, 6.8vw, 43px);
    line-height: 1.5;
    letter-spacing: -0.015em;
  }
  .hero-description {
    font-size: 12px;
    line-height: 2;
    max-width: 100%;
    margin-top: 17px;
  }
  .hero-actions {
    gap: 24px;
    margin-top: 25px;
  }
  .hero-actions .btn {
    min-height: 47px;
    font-size: 12px;
    gap: 27px;
    padding: 11px 19px;
  }
  .hero-actions .text-link {
    font-size: 12px;
  }
  .hero-principles {
    margin-top: 30px;
    max-width: 350px;
    gap: 23px;
  }
  .hero-principles > span {
    font-size: 18px;
  }
  .hero-principles small {
    font-size: 9px;
  }
  .hero-visual {
    height: 385px;
    border-radius: 70px 4px 4px 4px;
  }
  .hero-image-label {
    font-size: 8px;
    top: 18px;
    right: 16px;
  }
  .hero-image-note {
    padding: 15px 18px;
  }
  .hero-image-note > span {
    font-size: 15px;
  }
  .hero-image-note a {
    height: 38px;
    width: 38px;
    font-size: 22px;
  }
  .hero-bottom {
    padding: 19px 0;
    font-size: 8px;
    letter-spacing: 0.07em;
  }
  .hero-bottom > span:nth-child(2) {
    display: none;
  }
  .hero-bottom a {
    gap: 18px;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 18px 0;
  }
  .stats-grid > div {
    padding: 17px 18px !important;
    border: 0;
    display: flex;
    gap: 18px;
    justify-content: flex-start;
  }
  .stats-grid > div:nth-child(odd) {
    border-right: 1px solid var(--line);
    padding-left: 0 !important;
  }
  .stats-grid > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
  .stats-grid strong {
    font-size: 29px;
    margin: 0;
    min-width: 56px;
  }
  .stats-grid > div:nth-child(2) > strong {
    font-size: 27px;
    min-width: 68px;
  }
  .stats-grid em {
    font-size: 14px;
  }
  .stats-grid span {
    font-size: 10px;
  }
  .stats-grid small {
    font-size: 8px;
    line-height: 1.6;
    max-width: 105px;
  }
  h2 {
    font-size: 28px;
    letter-spacing: 0.015em;
  }
  .eyebrow {
    font-size: 9px;
    letter-spacing: 0.15em;
    margin-bottom: 14px;
  }
  .eyebrow > span {
    width: 6px;
    height: 6px;
  }
  .section-heading {
    display: block;
    margin-bottom: 29px;
  }
  .heading-intro,
  .heading-side > p {
    margin-top: 19px;
    font-size: 12px;
    line-height: 1.85;
  }
  .heading-side .text-link {
    margin-top: 7px;
    font-size: 11px;
  }
  .heading-intro br,
  .heading-side > p br {
    display: none;
  }
  .brand-layout {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .founder-card {
    width: 100%;
  }
  .founder-card > img {
    height: 260px;
  }
  .founder-card figcaption {
    padding: 18px 20px;
  }
  .founder-card strong {
    font-size: 20px;
  }
  .founder-card figcaption span {
    font-size: 10px;
  }
  .circle-link {
    height: 38px;
    width: 38px;
    font-size: 21px;
  }
  .brand-story h3 {
    font-size: 23px;
    margin: 13px 0 16px;
  }
  .brand-story > p {
    font-size: 12px;
    line-height: 2;
  }
  .brand-values {
    margin: 20px 0 12px;
  }
  .brand-values > span {
    font-size: 10px;
  }
  .brand-values p {
    font-size: 12px;
  }
  .service-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .service-image {
    height: 156px;
  }
  .service-content {
    padding: 15px 14px 17px;
  }
  .service-content > p {
    font-size: 7px;
    letter-spacing: 0.07em;
    margin-bottom: 7px;
  }
  .service-content h3 {
    font-size: 18px;
  }
  .service-detail {
    font-size: 9px;
    line-height: 1.8;
    margin-top: 7px;
    padding-right: 7px;
  }
  .service-index {
    top: 12px;
    left: 12px;
    height: 25px;
    width: 25px;
    padding: 7px;
    font-size: 9px;
  }
  .service-arrow {
    right: 11px;
    top: 35px;
    font-size: 16px;
  }
  .service-process {
    margin-top: 27px;
    display: block;
    padding-top: 21px;
  }
  .service-process > span {
    font-size: 12px;
  }
  .service-process ol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 20px;
    margin: 20px 0;
  }
  .service-process > a {
    font-size: 12px;
  }
  .research-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .research-image {
    height: 260px;
  }
  .research-content > .small-tag {
    font-size: 11px;
  }
  .research-techniques {
    gap: 24px;
    margin-top: 20px;
  }
  .research-techniques h3 {
    font-size: 14px;
  }
  .research-techniques p {
    font-size: 11px;
  }
  .research-numbers {
    padding-top: 20px;
  }
  .research-numbers strong {
    font-size: 31px;
  }
  .research-numbers span {
    font-size: 10px;
  }
  .credentials-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px 14px;
    padding: 25px 0;
    margin-top: 29px;
  }
  .credentials-strip > div {
    align-items: flex-start;
    gap: 7px;
    font-size: 11px;
  }
  .credentials-strip small {
    font-size: 8px;
    max-width: 115px;
    line-height: 1.7;
  }
  .credential-symbol {
    font-size: 25px;
    line-height: 1.3;
  }
  .credentials-strip .text-link {
    font-size: 11px;
    gap: 10px;
    align-self: center;
  }
  .history-heading {
    margin: 31px 0 24px;
  }
  .history-heading h3 {
    font-size: 18px;
  }
  .history-heading > span {
    font-size: 9px;
  }
  .timeline > article {
    width: 190px;
    min-width: 190px;
  }
  .timeline strong {
    font-size: 27px;
  }
  .timeline h4 {
    font-size: 13px;
  }
  .timeline p {
    font-size: 11px;
  }
  .timeline-dot {
    margin-top: 20px;
  }
  .product-layout {
    display: block;
  }
  .product-tabs {
    display: flex;
    flex-direction: row;
    overflow: auto;
    padding: 13px;
    gap: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    scrollbar-width: thin;
  }
  .product-tabs > button {
    white-space: nowrap;
    flex: none;
    padding: 10px 13px;
    min-height: 42px;
    font-size: 12px;
  }
  .product-tabs > button > span {
    font-size: 9px;
  }
  .product-tabs > button > b {
    display: none;
  }
  .product-panel {
    display: block;
  }
  .product-photo {
    height: 230px;
    min-height: 230px;
  }
  .product-copy {
    padding: 25px;
  }
  .product-copy h3 {
    font-size: 24px;
  }
  .product-copy #productSummary {
    font-size: 13px;
  }
  .product-copy > p:not(.eyebrow) {
    font-size: 12px;
  }
  .product-range {
    display: block;
    margin-top: 21px;
  }
  .product-range strong {
    display: block;
    font-size: 19px;
    margin-top: 5px;
  }
  .data-note {
    font-size: 10px;
    margin-top: 18px;
  }
  .gallery-layout {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  .gallery-main > button > img {
    height: 280px;
  }
  .gallery-caption {
    padding: 17px 18px;
  }
  .gallery-caption > span {
    font-size: 9px;
  }
  .gallery-thumbs {
    display: flex;
    overflow: auto;
    gap: 11px;
    padding-bottom: 5px;
    scrollbar-width: thin;
  }
  .gallery-thumb {
    flex: none;
    width: 110px;
  }
  .gallery-thumb img {
    height: 83px;
  }
  .gallery-thumb > span {
    padding: 9px;
    font-size: 10px;
  }
  .store-search {
    grid-template-columns: 1fr;
    gap: 23px;
    padding-top: 28px;
    margin-top: 25px;
  }
  .store-search h3 {
    font-size: 23px;
  }
  .store-search > div > p:last-child {
    font-size: 12px;
  }
  .search-field {
    gap: 8px;
  }
  .search-field input {
    font-size: 11px;
    padding: 10px 12px;
    min-height: 45px;
  }
  .search-field .btn {
    font-size: 11px;
    min-height: 45px;
    gap: 10px;
    padding: 10px 14px;
    flex: none;
  }
  .store-search-controls #networkResult {
    font-size: 10px;
  }
  .store-results {
    grid-template-columns: 1fr;
  }
  .join-intro {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: stretch;
  }
  .join-intro h2 {
    font-size: 29px;
  }
  .join-intro > div > p:not(.eyebrow) {
    font-size: 12px;
    margin: 19px 0 23px;
  }
  .join-intro img {
    height: 255px;
  }
  .support-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px 25px;
    margin-top: 30px;
  }
  .support-grid > article {
    padding: 20px 0;
  }
  .support-grid h3 {
    font-size: 15px;
    margin: 11px 0 9px;
  }
  .support-grid p {
    font-size: 11px;
    line-height: 1.8;
  }
  .model-heading {
    display: block;
    margin-top: 29px;
    margin-bottom: 21px;
  }
  .model-heading h3 {
    font-size: 21px;
  }
  .model-heading > span {
    display: block;
    font-size: 10px;
    margin-top: 10px;
  }
  .model-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .model-card {
    padding: 23px;
  }
  .model-card h4 {
    font-size: 20px;
  }
  .model-card > div > span {
    font-size: 11px;
  }
  .model-card ul {
    font-size: 11px;
    margin: 17px 0;
  }
  .model-price strong {
    font-size: 43px;
  }
  .model-price {
    margin-top: 14px;
  }
  .model-card .text-link {
    padding-top: 12px;
  }
  .learning-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .learning-layout figure img {
    height: 250px;
  }
  .learning-layout figcaption {
    font-size: 9px;
    padding: 13px 17px;
  }
  .learning-layout h2 {
    font-size: 26px;
  }
  .learning-layout > div > p:not(.eyebrow) {
    font-size: 12px;
  }
  .learning-tracks > div {
    grid-template-columns: 20px 80px 1fr;
    gap: 6px;
  }
  .learning-tracks strong {
    font-size: 12px;
  }
  .learning-tracks p {
    font-size: 11px;
  }
  .partner-heading {
    display: block;
    margin: 35px 0 20px;
  }
  .partner-heading h3 {
    font-size: 22px;
  }
  .partner-heading .text-link {
    font-size: 11px;
    margin-top: 10px;
  }
  .partner-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .partner-card {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 20px;
  }
  .partner-card > div {
    grid-column: 1;
  }
  .partner-card > p {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    align-items: center;
    gap: 8px;
  }
  .partner-card strong {
    font-size: 34px;
  }
  .partner-card h4 {
    grid-column: 1/3;
    margin-top: 17px;
    padding-top: 16px;
    font-size: 12px;
  }
  .journal-grid,
  .news-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .journal-card {
    padding: 25px;
  }
  .journal-card h3 {
    font-size: 22px;
    margin-top: 19px;
  }
  .journal-card p {
    font-size: 12px;
  }
  .journal-card > .text-link {
    font-size: 12px;
    margin-top: 21px;
    padding-top: 13px;
  }
  .journal-number {
    font-size: 37px;
  }
  .contact-section {
    padding: 60px 0;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .contact-copy h2 {
    font-size: 29px;
  }
  .contact-copy > p:not(.eyebrow) {
    margin: 20px 0 22px;
  }
  .contact-details a {
    font-size: 31px;
  }
  .contact-details p {
    font-size: 12px;
  }
  .contact-details > div {
    margin-top: 19px;
  }
  .contact-wechat {
    margin-top: 25px;
  }
  .contact-wechat img {
    height: 69px;
    width: 69px;
  }
  .contact-form {
    padding: 27px 23px;
  }
  .form-title {
    margin-bottom: 20px;
    padding-bottom: 19px;
  }
  .form-title > strong {
    font-size: 20px;
  }
  .form-title > span {
    font-size: 9px;
  }
  .contact-form input:not([type="checkbox"]),
  .contact-form textarea,
  .contact-form select {
    font-size: 16px;
    padding: 10px 12px;
  }
  .contact-form .consent {
    font-size: 10px;
  }
  .contact-form label {
    font-size: 11px;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .footer-top {
    flex-direction: column;
    gap: 23px;
    align-items: flex-start;
    padding-bottom: 25px;
  }
  .footer-top .brand-signature {
    display: block;
    font-size: 11px;
  }
  .footer-links {
    flex-wrap: wrap;
    gap: 13px 20px;
    font-size: 10px;
  }
  .footer-bottom {
    display: block;
    line-height: 2;
    font-size: 8px;
    padding-top: 17px;
  }
  .footer-bottom > span {
    display: block;
    margin-top: 5px;
  }
  .floating-tools {
    right: 8px;
    bottom: 14px;
  }
  .floating-tools > * {
    min-width: 33px;
    min-height: 35px;
    font-size: 14px;
  }
  .quick-modal {
    padding: 32px 25px;
    width: 100%;
    max-height: 88vh;
  }
  .modal-backdrop {
    padding: 18px;
  }
  .quick-modal > h2 {
    font-size: 23px;
    margin-bottom: 20px;
  }
  .multiline {
    font-size: 13px;
  }
  .modal-close {
    width: 35px;
    height: 35px;
    font-size: 25px;
    top: 13px;
    right: 13px;
  }
  .detail-rich h3 {
    font-size: 17px;
  }
  .detail-rich table {
    font-size: 10px;
  }
  .detail-rich td,
  .detail-rich th {
    padding: 10px 5px;
  }
  .toast {
    font-size: 12px;
    width: max-content;
    max-width: calc(100% - 40px);
    bottom: 25px;
  }
}
@media (max-width: 360px) {
  .container {
    width: calc(100% - 32px);
  }
  .header-inner {
    padding: 0 16px;
  }
  .hero h1 {
    font-size: 30px;
  }
  .hero-visual {
    height: 310px;
  }
  .hero-actions {
    gap: 17px;
  }
  .hero-actions .btn {
    padding: 11px 15px;
    gap: 18px;
  }
  .hero-actions .text-link {
    font-size: 11px;
    gap: 10px;
  }
  .hero-principles {
    gap: 18px;
  }
  .stats-grid > div {
    gap: 10px;
    padding-right: 7px !important;
  }
  .stats-grid > div:nth-child(2) > strong {
    min-width: 61px;
    font-size: 24px;
  }
  .stats-grid strong {
    min-width: 46px;
    font-size: 27px;
  }
  .stats-grid span {
    font-size: 9px;
  }
  .stats-grid small {
    font-size: 7px;
  }
  .service-grid {
    gap: 11px;
  }
  .service-image {
    height: 135px;
  }
  .service-content {
    padding: 14px 11px;
  }
  .service-content h3 {
    font-size: 16px;
  }
  .service-content > p {
    font-size: 6.5px;
  }
  .service-arrow {
    font-size: 14px;
    right: 8px;
  }
  .service-detail {
    font-size: 8px;
  }
  .hero-image-note > span {
    font-size: 13px;
  }
  .history-heading h3 {
    font-size: 16px;
  }
  .credentials-strip > div {
    font-size: 10px;
  }
  .gallery-main > button > img {
    height: 235px;
  }
  .search-field .btn {
    padding: 10px;
    font-size: 10px;
    gap: 7px;
  }
  .contact-form {
    padding: 25px 20px;
  }
  .footer-top .brand-signature {
    font-size: 10px;
  }
  .quick-modal {
    padding: 32px 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 760px) {
  .hero-description,
  .brand-story > p,
  .heading-intro,
  .heading-side > p,
  .research-techniques p,
  .product-copy > p:not(.eyebrow),
  .support-grid p,
  .journal-card p,
  .contact-copy > p:not(.eyebrow) {
    font-size: 14px;
    line-height: 1.9;
  }
  .service-detail {
    font-size: 11px;
  }
  .service-content > p {
    font-size: 8px;
  }
  .research-content > .data-note,
  .data-note {
    font-size: 11px;
  }
  .timeline p {
    font-size: 12px;
  }
  .product-tabs > button {
    font-size: 13px;
  }
  .gallery-caption > span {
    font-size: 10px;
  }
  .learning-tracks p {
    font-size: 12px;
  }
  .footer-bottom {
    font-size: 10px;
  }
}
.contact-form .honeypot {
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  left: 0;
  top: 0;
  border: 0 !important;
}
.privacy-page {
  width: min(820px, calc(100% - 40px));
  margin: 60px auto 90px;
  font-size: 15px;
  line-height: 2;
}
.privacy-page > a {
  display: block;
  color: var(--accent);
  margin-bottom: 40px;
}
.privacy-page h1 {
  font-size: 36px;
  margin: 12px 0 18px;
}
.privacy-page h2 {
  font-size: 22px;
  margin: 30px 0 13px;
}
.privacy-page p {
  color: var(--muted);
  margin-bottom: 16px;
}
.privacy-page a {
  text-decoration: underline;
}
.privacy-page .eyebrow {
  color: var(--accent);
}

/* Section backdrops: hair flow, botanical care, research traces and spatial arcs. */
.hero {
  background:
    url("assets/decor-hair-flow.svg") left -190px top 60px / 870px auto
      no-repeat,
    radial-gradient(ellipse at 84% 10%, #bde8e0 0, transparent 50%),
    linear-gradient(120deg, #f4fcf9, #e5f5f1 65%, #d8f0e9);
}
.hero-principles {
  padding: 17px 19px;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 9px 26px rgba(39, 97, 88, 0.035);
}
.brand-stats {
  background:
    radial-gradient(
      ellipse at 80% 0,
      rgba(93, 190, 185, 0.11),
      transparent 65%
    ),
    linear-gradient(100deg, #fff, #f4fbf8);
}
.brand-section {
  background:
    url("assets/decor-hair-flow.svg") right -170px top -95px / 800px auto
      no-repeat,
    radial-gradient(ellipse at 92% 45%, #e6f5ee, transparent 52%),
    linear-gradient(155deg, #fff 15%, #f4fbf8);
}
.brand-story {
  padding: 32px;
  background:
    radial-gradient(
      ellipse at 100% 0,
      rgba(207, 239, 229, 0.7),
      transparent 60%
    ),
    rgba(255, 255, 255, 0.9);
  border: 1px solid #e2eee8;
  border-radius: 12px;
  box-shadow: 0 15px 45px rgba(35, 92, 78, 0.045);
}
.founder-card {
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(23, 75, 65, 0.1);
}
.founder-card figcaption {
  background:
    url("assets/decor-hair-flow.svg") right -10px center / 420px auto no-repeat,
    linear-gradient(110deg, #123d40, #20565a);
}
.services-section {
  background:
    url("assets/decor-botanical.svg") left -180px bottom -80px / 480px auto
      no-repeat,
    radial-gradient(ellipse at 90% 12%, #e0f3ec, transparent 46%),
    linear-gradient(145deg, #f0f8f4, #fafdfa 55%, #edf7f2);
}
.service-card {
  border-color: #d6e8df;
  border-radius: 10px;
  box-shadow: 0 7px 24px rgba(31, 87, 71, 0.045);
  background:
    radial-gradient(ellipse at 100% 100%, #eaf7f1, transparent 60%), #fff;
}
.service-card:nth-child(2n) {
  background: linear-gradient(140deg, #fff 62%, #f0f9f5);
}
.service-process {
  padding: 24px 26px;
  border: 1px solid #d6e7dd;
  border-radius: 10px;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.95), #e7f5ef);
  box-shadow: 0 10px 30px rgba(33, 90, 73, 0.035);
}
.research-section {
  background:
    url("assets/decor-science.svg") right -30px top 25px / 940px auto no-repeat,
    radial-gradient(ellipse at 0 48%, #daf0e8, transparent 52%),
    linear-gradient(145deg, #edf8f5, #f7fcf9 60%, #e4f3ed);
}
.research-content {
  padding: 28px;
  border: 1px solid rgba(203, 229, 217, 0.85);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.89);
  box-shadow: 0 15px 40px rgba(36, 89, 72, 0.035);
}
.research-image {
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(23, 75, 65, 0.09);
}
.credentials-strip {
  padding: 25px;
  border: 1px solid #cce3d7;
  border-radius: 10px;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.95), #eef9f3);
}
.products-section {
  background:
    url("assets/decor-botanical.svg") right -55px top -130px / 460px auto
      no-repeat,
    url("assets/decor-hair-flow.svg") left -230px bottom -240px / 860px auto
      no-repeat,
    radial-gradient(ellipse at 70% 30%, #f0f8e9, transparent 58%),
    #fdfefb;
}
.product-layout {
  border: 1px solid #cfe4d8;
  border-radius: 12px;
  background: #f7fcf8;
  box-shadow: 0 20px 55px rgba(48, 93, 66, 0.065);
}
.product-tabs {
  background:
    url("assets/decor-botanical.svg") left -170px bottom -90px / 360px auto
      no-repeat,
    linear-gradient(145deg, #e1f2e9, #f0f8ee);
}
.product-copy {
  background:
    radial-gradient(ellipse at 100% 0, #e5f4e7, transparent 70%),
    linear-gradient(140deg, #fff, #f7fcf6);
}
.product-range {
  padding: 15px 16px;
  border: 1px solid #dcebdd;
  border-radius: 7px;
  background: rgba(245, 251, 241, 0.85);
}
.network-section {
  background:
    url("assets/decor-space.svg") right -110px top -60px / 780px auto no-repeat,
    radial-gradient(ellipse at 6% 70%, #e7f2f0, transparent 52%),
    linear-gradient(120deg, #f9fcfb, #eef7f4 90%);
}
.gallery-main {
  border-radius: 12px;
  border-color: #d0e5db;
  box-shadow: 0 16px 45px rgba(31, 79, 68, 0.065);
}
.gallery-caption {
  background: linear-gradient(100deg, #fff, #ecf8f1);
}
.gallery-thumb {
  border-radius: 7px;
  background: linear-gradient(150deg, #fff, #f0f9f4);
  box-shadow: 0 6px 16px rgba(41, 92, 74, 0.035);
}
.store-search {
  padding: 30px;
  border: 1px solid #d4e6dc;
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 0 100%, #e5f4ec, transparent 55%),
    rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 30px rgba(31, 87, 65, 0.04);
}
.store-result {
  background: linear-gradient(135deg, #fff, #f0f9f4);
  border-radius: 7px;
}
.join-section {
  background:
    url("assets/decor-space.svg") left -350px top 5px / 850px auto no-repeat,
    url("assets/decor-hair-flow.svg") right -310px bottom -100px / 1030px auto
      no-repeat,
    radial-gradient(ellipse at 82% 35%, #d8eee4, transparent 58%),
    linear-gradient(130deg, #f2faf5, #e4f3eb 70%, #edf8f0);
}
.join-intro figure {
  border-radius: 12px;
  border: 7px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 20px 50px rgba(35, 83, 61, 0.1);
}
.support-grid {
  gap: 22px;
}
.support-grid > article {
  padding: 23px 25px;
  border: 1px solid rgba(206, 228, 213, 0.95);
  border-radius: 9px;
  background:
    radial-gradient(ellipse at 100% 0, #e3f4e9, transparent 65%),
    rgba(255, 255, 255, 0.93);
  box-shadow: 0 6px 24px rgba(36, 88, 63, 0.035);
}
.model-card {
  border-radius: 10px;
  border-color: #d0e5d7;
  background:
    radial-gradient(ellipse at 100% 0, #e5f6ed, transparent 60%), #fff;
  box-shadow: 0 10px 30px rgba(35, 86, 61, 0.045);
}
.model-card:nth-child(2) {
  background:
    url("assets/decor-hair-flow.svg") right -170px bottom -150px / 430px auto
      no-repeat,
    linear-gradient(135deg, #f9fdfb, #eaf8f0);
  border-color: #91cbb8;
}
.learning-section {
  background:
    url("assets/decor-botanical.svg") left -130px top -80px / 450px auto
      no-repeat,
    url("assets/decor-hair-flow.svg") right -220px bottom -360px / 900px auto
      no-repeat,
    radial-gradient(ellipse at 100% 42%, #e8f5ee, transparent 65%),
    #fbfdfb;
}
.learning-layout figure {
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(26, 83, 60, 0.075);
}
.learning-layout figcaption {
  background: linear-gradient(100deg, #eef8f2, #fff);
}
.learning-tracks {
  padding: 0 20px;
  border: 1px solid #dcece1;
  border-radius: 9px;
  background: linear-gradient(125deg, #fff, #f0f9f2);
}
.learning-tracks > div:first-child {
  border-top: 0;
}
.partner-card {
  border-radius: 9px;
  background:
    radial-gradient(ellipse at 100% 0, #e1f3e8, transparent 65%),
    linear-gradient(145deg, #fff, #f2faf4);
  box-shadow: 0 7px 23px rgba(39, 86, 64, 0.035);
}
.journal-section {
  background:
    radial-gradient(circle, rgba(112, 159, 145, 0.1) 1px, transparent 1px) 0 0 /
      24px 24px,
    radial-gradient(ellipse at 95% 0, #e6f6ed, transparent 55%),
    linear-gradient(130deg, #f4faf5, #fcfefb);
}
.journal-card,
.news-card {
  border-radius: 11px;
  border-color: #d8e8df;
  box-shadow: 0 10px 30px rgba(41, 86, 62, 0.04);
  background:
    url("assets/decor-hair-flow.svg") right -280px bottom -260px / 600px auto
      no-repeat,
    linear-gradient(150deg, #fff 30%, #f1faf5);
}
.journal-card:nth-child(2) {
  background:
    url("assets/decor-botanical.svg") right -135px bottom -200px / 280px auto
      no-repeat,
    linear-gradient(145deg, #fff 20%, #eff8ed);
}
.journal-card:nth-child(3) {
  background:
    url("assets/decor-science.svg") right -190px bottom -130px / 470px auto
      no-repeat,
    linear-gradient(145deg, #fff 15%, #edf8f5);
}
.news-section {
  background:
    url("assets/decor-hair-flow.svg") left -250px bottom -250px / 900px auto
      no-repeat,
    linear-gradient(120deg, #f5fbf8, #fff);
}
.contact-section {
  background:
    url("assets/decor-hair-flow.svg") left -250px center / 1150px auto no-repeat,
    url("assets/decor-botanical.svg") right -60px bottom -160px / 460px auto
      no-repeat,
    radial-gradient(ellipse at 100% 0, #eef9f0, transparent 65%),
    linear-gradient(115deg, #d6eee7, #e8f6ed);
}
.contact-wechat {
  width: fit-content;
  padding: 12px 17px 12px 12px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
}
.contact-form {
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-top: 4px solid var(--teal);
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 100% 0, #e9f8ef, transparent 48%), #fff;
  box-shadow: 0 24px 65px rgba(34, 91, 66, 0.11);
}
.site-footer {
  background:
    url("assets/decor-hair-flow.svg") right -160px center / 620px auto no-repeat,
    linear-gradient(115deg, #fff, #f4faf6);
}
.quick-modal {
  background:
    radial-gradient(ellipse at 100% 0, #edf9f3, transparent 45%), #fff;
  border: 1px solid #daece2;
  box-shadow: 0 30px 90px rgba(10, 48, 39, 0.2);
}
@media (max-width: 1000px) {
  .brand-story {
    padding: 25px;
  }
  .research-layout {
    gap: 24px;
  }
  .research-content {
    padding: 22px;
  }
  .credentials-strip {
    padding: 22px;
  }
  .store-search {
    padding: 26px;
    gap: 25px;
  }
  .support-grid > article {
    padding: 21px;
  }
  .service-process {
    flex-wrap: wrap;
    gap: 20px;
    padding: 22px;
  }
}
@media (max-width: 760px) {
  .hero {
    background-position:
      left -210px top 45px,
      center,
      center;
    background-size:
      620px auto,
      auto,
      auto;
  }
  .hero-principles {
    padding: 15px 16px;
    gap: 18px;
    max-width: 100%;
  }
  .brand-section {
    background-size:
      520px auto,
      auto,
      auto;
    background-position:
      right -240px top -20px,
      center,
      center;
  }
  .brand-story {
    padding: 24px;
    width: 100%;
  }
  .services-section {
    background-size:
      360px auto,
      auto,
      auto;
    background-position:
      left -200px bottom -100px,
      center,
      center;
  }
  .service-process {
    padding: 23px;
  }
  .research-section {
    background-size:
      650px auto,
      auto,
      auto;
    background-position:
      right -290px top 25px,
      center,
      center;
  }
  .research-content {
    padding: 22px;
  }
  .research-techniques {
    column-gap: 17px;
  }
  .credentials-strip {
    padding: 21px 18px;
    column-gap: 12px;
  }
  .products-section {
    background-size:
      300px auto,
      650px auto,
      auto,
      auto;
    background-position:
      right -140px top -70px,
      left -290px bottom -230px,
      center,
      center;
  }
  .product-tabs {
    background-image: linear-gradient(110deg, #e1f2e9, #f0f8ee);
  }
  .product-range {
    padding: 13px 15px;
  }
  .network-section {
    background-size:
      540px auto,
      auto,
      auto;
    background-position:
      right -250px top -30px,
      center,
      center;
  }
  .store-search {
    padding: 23px 20px;
    gap: 20px;
  }
  .join-section {
    background-size:
      550px auto,
      700px auto,
      auto,
      auto;
    background-position:
      left -360px top 80px,
      right -350px bottom -90px,
      center,
      center;
  }
  .support-grid {
    gap: 14px;
  }
  .support-grid > article {
    padding: 20px 17px;
  }
  .support-grid h3 {
    font-size: 14px;
  }
  .learning-section {
    background-size:
      330px auto,
      650px auto,
      auto,
      auto;
    background-position:
      left -200px top -20px,
      right -350px bottom -150px,
      center,
      center;
  }
  .learning-tracks {
    padding: 0 14px;
  }
  .learning-tracks > div {
    grid-template-columns: 18px 72px 1fr;
  }
  .contact-section {
    background-size:
      820px auto,
      350px auto,
      auto,
      auto;
    background-position:
      left -360px top 140px,
      right -220px bottom -70px,
      center,
      center;
  }
  .site-footer {
    background-size:
      500px auto,
      auto;
    background-position:
      right -280px center,
      center;
  }
}