/* ==========================================================================
   BOD — BIOTY TECHNOLOGY CO., LTD
   Design system: precision-engineered storage. Graphite ink + signal teal.
   ========================================================================== */

:root {
  --ink: #0b1420;
  --ink-2: #14212f;
  --ink-3: #1d2c3c;
  --steel: #5d6f80;
  --steel-2: #8896a3;
  --line: #e2e8ee;
  --line-2: #eef2f6;
  --paper: #ffffff;
  --mist: #f4f7fa;

  --teal: #00a89e;
  --teal-dk: #00827a;
  --teal-lt: #d8f3f0;

  --radius: 14px;
  --radius-s: 9px;
  --shadow-s: 0 1px 2px rgba(11, 20, 32, .05), 0 6px 18px -8px rgba(11, 20, 32, .14);
  --shadow-m: 0 10px 40px -16px rgba(11, 20, 32, .28);
  --ease: cubic-bezier(.22, .71, .24, 1);

  --sans: "Inter", "Segoe UI", system-ui, -apple-system, "Noto Sans", "Helvetica Neue",
          Arial, "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono",
          Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

/* lang-detect.js adds this to <html> for visitors whose negotiated language is
   not English: the markup is written in English, so we hold the first paint
   until app.js has swapped in the right pack. app.js removes it after render,
   and a 1.5 s timer in lang-detect.js removes it anyway if anything fails —
   the class must never be able to leave the page blank. */
html.i18n-pending body { opacity: 0; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.022em;
}

p { margin: 0; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 26px; }

/* ---------------------------------------------------------------- utility */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-dk);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 9px; height: 9px;
  background: var(--teal);
  flex: none;
}
.eyebrow.on-dark { color: #7fe6dd; }

.sec { padding: 92px 0; }
.sec.tight { padding: 66px 0; }
.sec.mist { background: var(--mist); }
.sec.ink { background: var(--ink); color: #dbe4ec; }
.sec.ink h1, .sec.ink h2, .sec.ink h3 { color: #fff; }

.sec-head { max-width: 760px; margin-bottom: 46px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head h2 { font-size: clamp(28px, 3.4vw, 40px); }
.sec-head p { margin-top: 14px; color: var(--steel); font-size: 17px; }
.sec.ink .sec-head p { color: #93a5b6; }

.lead { font-size: 17px; color: var(--steel); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s, border-color .2s, box-shadow .2s, color .2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 15px; height: 15px; flex: none; }

.btn-primary { background: var(--teal); color: #fff; box-shadow: 0 8px 22px -10px rgba(0, 168, 158, .8); }
.btn-primary:hover { background: var(--teal-dk); }

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-3); }

.btn-ghost { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal-dk); }

.btn-outline-light { border-color: rgba(255, 255, 255, .28); color: #fff; }
.btn-outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--teal-dk);
}
.link-arrow svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
:root[dir="rtl"] .link-arrow svg { transform: scaleX(-1); }

/* ---------------------------------------------------------------- topbar */
.topbar {
  background: var(--ink);
  color: #93a5b6;
  font-size: 12.5px;
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 40px;
}
.topbar-list { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar-item { display: inline-flex; align-items: center; gap: 7px; }
.topbar-item svg { width: 13px; height: 13px; color: var(--teal); flex: none; }
.topbar-item a:hover { color: #fff; }

/* ---------------------------------------------------------------- header */
.site-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 76px;
}
.brand { display: flex; align-items: center; gap: 13px; flex: none; }
.brand img { height: 46px; width: auto; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand-txt b { font-size: 15px; letter-spacing: .02em; }
.brand-txt span {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .13em;
  color: var(--steel-2);
  text-transform: uppercase;
}

.nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; flex: none; }
.nav a {
  position: relative;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;   /* an eight-item menu shrinks into two-line links without this */
  transition: color .2s, background .2s;
}
.nav a:hover { color: var(--teal-dk); background: var(--mist); }
.nav a.active { color: var(--teal-dk); }
.nav a.active::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 3px;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
}

.head-actions { display: flex; align-items: center; gap: 12px; flex: none; }

/* language switch */
.lang { position: relative; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s;
}
.lang-btn:hover { border-color: var(--teal); }
.lang-btn svg { width: 14px; height: 14px; color: var(--steel); }
.lang-btn .caret { width: 10px; height: 10px; }

.lang-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 10px);
  min-width: 190px;
  padding: 7px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-m);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 70;
}
.lang.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 13.5px;
  text-align: start;
  cursor: pointer;
}
.lang-menu button:hover { background: var(--mist); }
.lang-menu button[aria-current="true"] { color: var(--teal-dk); font-weight: 700; }
.lang-menu .code {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--steel-2);
}

.burger {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.burger span { display: block; width: 17px; height: 1.6px; background: var(--ink); position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.6px; background: var(--ink);
}
.burger span::before { top: -5.5px; }
.burger span::after { top: 5.5px; }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(11, 20, 32, .94) 32%, rgba(11, 20, 32, .55) 62%, rgba(11, 20, 32, .5) 100%),
    radial-gradient(120% 90% at 88% 30%, rgba(0, 168, 158, .22), transparent 58%);
}
:root[dir="rtl"] .hero-bg::after {
  background:
    linear-gradient(270deg, var(--ink) 0%, rgba(11, 20, 32, .94) 32%, rgba(11, 20, 32, .55) 62%, rgba(11, 20, 32, .5) 100%),
    radial-gradient(120% 90% at 12% 30%, rgba(0, 168, 158, .22), transparent 58%);
}

.hero-inner { padding: 104px 0 76px; max-width: 660px; }
.hero h1 {
  font-size: clamp(34px, 4.6vw, 56px);
  letter-spacing: -.03em;
}
.hero h1 em { font-style: normal; color: #6fe0d6; }
.hero p.lead { margin-top: 22px; color: #a9b8c6; font-size: 17.5px; max-width: 560px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 34px;
}
.hero-tags span {
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #c6d4e0;
}

.statbar {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: rgba(11, 20, 32, .55);
  backdrop-filter: blur(8px);
}
.statbar .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
}
.stat { padding: 26px 4px 28px; }
.stat b {
  display: block;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: #fff;
}
.stat span {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  color: #90a2b3;
}
.stat + .stat { padding-inline-start: 26px; border-inline-start: 1px solid rgba(255, 255, 255, .1); }

/* ---------------------------------------------------------------- categories */
/* Four product lines: 2 x 2 on desktop, single column below 760px (see the
   mobile block further down). auto-fit would strand a lone card at mid widths. */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 372px;
  padding: 32px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
  color: #fff;
}
.cat-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .8s var(--ease);
}
.cat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(11, 20, 32, .12) 0%, rgba(11, 20, 32, .55) 48%, rgba(11, 20, 32, .93) 100%);
}
.cat-card:hover img { transform: scale(1.05); }
.cat-card .cat-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6fe0d6;
  margin-bottom: 10px;
}
.cat-card h3 { font-size: 27px; color: #fff; }
.cat-card p { margin-top: 9px; color: #b3c2d0; font-size: 14.5px; max-width: 420px; }
.cat-card .cat-more {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.cat-card .cat-more svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.cat-card:hover .cat-more svg { transform: translateX(5px); }

/* ---------------------------------------------------------------- products */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 34px;
}
.chip {
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .2s var(--ease);
}
.chip:hover { border-color: var(--teal); color: var(--teal-dk); }
.chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }

.search-box { position: relative; margin-inline-start: auto; }
.search-box input {
  width: 240px;
  padding: 11px 16px 11px 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 13.5px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
:root[dir="rtl"] .search-box input { padding: 11px 40px 11px 16px; }
.search-box input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-lt); }
.search-box svg {
  position: absolute;
  inset-inline-start: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--steel-2);
  pointer-events: none;
}

.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 22px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card:hover {
  transform: translateY(-4px);
  border-color: #cfe9e6;
  box-shadow: var(--shadow-m);
}
.card-media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: #101a25;
  overflow: hidden;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }
.card-cat {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(11, 20, 32, .72);
  backdrop-filter: blur(6px);
  color: #7fe6dd;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.card-body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { font-size: 16.5px; line-height: 1.36; }
.card-body p { margin-top: 9px; font-size: 13.5px; color: var(--steel); }
.spec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }
.spec-chips span {
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--mist);
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--steel);
}
.card-foot {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.empty-state {
  grid-column: 1 / -1;
  padding: 70px 20px;
  text-align: center;
  color: var(--steel);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

/* ---------------------------------------------------------------- features */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.feat {
  padding: 28px 26px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.feat:hover { border-color: #cfe9e6; box-shadow: var(--shadow-s); transform: translateY(-3px); }
.feat .num {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  color: var(--teal);
  display: block;
  margin-bottom: 16px;
}
.feat .ic {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--teal-lt);
  color: var(--teal-dk);
  margin-bottom: 18px;
}
.feat .ic svg { width: 21px; height: 21px; }
.feat h3 { font-size: 16.5px; }
.feat p { margin-top: 10px; font-size: 14px; color: var(--steel); }

/* ---------------------------------------------------------------- split band */
.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.split.rev { grid-template-columns: 1fr 1.05fr; }
.split-media { position: relative; border-radius: 18px; overflow: hidden; }
.split-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.split-media::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  border-radius: 18px;
}
.sec.ink .split-media::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }

.check-list { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.check-list li { display: flex; gap: 12px; font-size: 15px; }
.check-list svg { width: 19px; height: 19px; flex: none; color: var(--teal); margin-top: 3px; }
.sec.ink .check-list li { color: #b6c4d2; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin-top: 44px; }
.step {
  position: relative;
  padding: 26px 22px 28px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .03);
}
.step b {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: #6fe0d6;
  margin-bottom: 14px;
}
.step h4 { font-size: 16px; color: #fff; }
.step p { margin-top: 9px; font-size: 13.5px; color: #93a5b6; }

/* applications */
.app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.app {
  background: #fff;
  padding: 30px 24px;
  text-align: center;
  transition: background .25s;
}
.app:hover { background: var(--mist); }
.app svg { width: 26px; height: 26px; color: var(--teal-dk); margin: 0 auto 14px; }
.app h4 { font-size: 14.5px; }
.app p { margin-top: 7px; font-size: 12.5px; color: var(--steel); }

/* certificates */
.cert-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cert {
  min-width: 128px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: #fff;
  text-align: center;
}
.cert b { display: block; font-size: 15px; letter-spacing: .04em; }
.cert span { display: block; margin-top: 4px; font-size: 11px; color: var(--steel-2); }

/* ---------------------------------------------------------------- news */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }
/* Four-card listing. auto-fit drops the fourth card onto a lonely row between
   roughly 540 px and 1240 px, so fix the count and step it down by hand. */
.news-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.news-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.news-card:hover { transform: translateY(-4px); border-color: #cfe9e6; box-shadow: var(--shadow-m); }
.news-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--mist); }
.news-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.news-card:hover .news-media img { transform: scale(1.05); }
.news-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.news-date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--steel-2);
  text-transform: uppercase;
}
.news-body h3 { margin-top: 11px; font-size: 17px; line-height: 1.4; }
.news-body p { margin-top: 11px; font-size: 14px; color: var(--steel); }
.news-body .link-arrow { margin-top: auto; padding-top: 20px; }

/* ---------------------------------------------------------------- contact */
.contact-band { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.contact-info {
  background: var(--ink);
  color: #cdd9e4;
  padding: 46px 42px;
}
.contact-info h3 { color: #fff; font-size: 24px; }
.contact-info > p { margin-top: 12px; color: #93a5b6; font-size: 14.5px; }
.info-list { margin-top: 30px; display: grid; gap: 20px; }
.info-item { display: flex; gap: 14px; }
.info-item .ic {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(0, 168, 158, .16);
  color: #6fe0d6;
}
.info-item .ic svg { width: 17px; height: 17px; }
.info-item b { display: block; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: #7f92a4; font-family: var(--mono); font-weight: 600; }
.info-item span, .info-item a { display: block; margin-top: 4px; font-size: 14.5px; color: #e3ebf2; }
.info-item a:hover { color: #6fe0d6; }

.form-panel { background: #fff; padding: 46px 42px; }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--steel);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: #fff;
  font-size: 14.5px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 118px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-lt);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { margin-top: 14px; font-size: 12.5px; color: var(--steel-2); }
.form-ok {
  display: flex;
  gap: 13px;
  padding: 18px 20px;
  margin-top: 18px;
  border-radius: var(--radius-s);
  background: var(--teal-lt);
  border: 1px solid #a9e3dd;
  color: #00564f;
  font-size: 14px;
}
.form-ok[hidden] { display: none; }
.form-ok svg { width: 20px; height: 20px; flex: none; }

/* The collector is unreachable or refused the submission — tell the visitor
   plainly and hand them a filled-in email instead of a dead button. */
.form-ok.is-error {
  background: #fff5ef;
  border-color: #f2cdb2;
  color: #8a4a12;
}

/* Honeypot. Off-screen rather than display:none — some bots skip hidden inputs
   but fill anything that is merely positioned away. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------- page head */
.page-head { background: var(--ink); color: #fff; padding: 66px 0 62px; position: relative; overflow: hidden; }
.page-head::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 130% at 85% 0%, rgba(0, 168, 158, .22), transparent 60%);
  pointer-events: none;
}
.page-head .wrap { position: relative; z-index: 1; }
.page-head h1 { font-size: clamp(30px, 3.8vw, 44px); }
.page-head p { margin-top: 15px; color: #9fb0c0; max-width: 660px; font-size: 16.5px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; font-size: 12.5px; color: #8698a9; margin-bottom: 18px; font-family: var(--mono); letter-spacing: .06em; }
.crumbs a:hover { color: #6fe0d6; }
.crumbs svg { width: 12px; height: 12px; }
:root[dir="rtl"] .crumbs svg { transform: scaleX(-1); }

/* ---------------------------------------------------------------- detail */
.detail-top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 52px; align-items: start; }
.detail-media {
  border-radius: 18px;
  overflow: hidden;
  background: #101a25;
  border: 1px solid var(--line);
}
.detail-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.detail-info h1 { font-size: clamp(26px, 3vw, 36px); }
.detail-info .lead { margin-top: 16px; }
.detail-price-note {
  margin-top: 24px;
  padding: 14px 18px;
  border-radius: var(--radius-s);
  background: var(--mist);
  border: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--steel);
}
.detail-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.key-specs { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; }
.key-spec { background: #fff; padding: 15px 17px; }
.key-spec span { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-2); }
.key-spec b { display: block; margin-top: 5px; font-size: 14.5px; font-weight: 600; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.spec { width: 100%; border-collapse: collapse; min-width: 560px; }
table.spec th, table.spec td { padding: 15px 20px; text-align: start; font-size: 14.5px; border-bottom: 1px solid var(--line-2); }
table.spec th {
  width: 34%;
  background: var(--mist);
  font-weight: 600;
  color: var(--ink-2);
  font-size: 13.5px;
}
table.spec tr:last-child th, table.spec tr:last-child td { border-bottom: 0; }
table.spec td { font-family: var(--mono); font-size: 13px; color: var(--steel); }

/* ---------------------------------------------------------------- cta band */
.cta-band {
  position: relative;
  padding: 74px 0;
  background: linear-gradient(120deg, var(--ink) 0%, #12293a 62%, #0d3b3b 100%);
  color: #fff;
  overflow: hidden;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 120% at 88% 50%, rgba(0, 168, 158, .3), transparent 62%);
}
.cta-band .wrap { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.cta-band h2 { font-size: clamp(26px, 3.2vw, 36px); }
.cta-band p { margin-top: 12px; color: #a5b6c5; max-width: 560px; }

/* ---------------------------------------------------------------- footer */
.site-foot { background: var(--ink); color: #8ea1b2; padding: 66px 0 0; font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; }
.site-foot .brand img { height: 54px; }
.site-foot .brand-txt b { color: #fff; }
.foot-about { margin-top: 20px; line-height: 1.75; max-width: 330px; }
.foot-social { display: flex; gap: 10px; margin-top: 22px; }
.foot-social a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px;
  color: #b3c3d1;
  transition: all .2s;
}
.foot-social a:hover { border-color: var(--teal); color: #6fe0d6; }
.foot-social svg { width: 16px; height: 16px; }
.site-foot h4 {
  color: #fff;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-family: var(--mono);
  font-weight: 600;
  margin-bottom: 18px;
}
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.site-foot ul a:hover { color: #6fe0d6; }
.foot-contact { display: grid; gap: 13px; }
.foot-contact div { display: flex; gap: 11px; align-items: flex-start; }
.foot-contact svg { width: 15px; height: 15px; color: var(--teal); flex: none; margin-top: 4px; }
.foot-contact a:hover { color: #6fe0d6; }
.foot-bottom {
  margin-top: 54px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 12.5px;
  color: #75879a;
}

/* ---------------------------------------------------------------- reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- rtl */
:root[dir="rtl"] body { font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, var(--sans); }
:root[dir="rtl"] .stat + .stat { padding-inline-start: 0; padding-inline-end: 26px; }
:root[dir="rtl"] .search-box { margin-inline-start: 0; margin-inline-end: auto; }
:root[dir="rtl"] .nav a.active::after { left: 13px; right: 13px; }
:root[dir="rtl"] .news-card:hover .news-media img { transform: scale(1.05); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1200px) {
  /* Eight nav items plus brand, language menu and the quote button need about
     1090px of usable width. Narrower than that the links push the quote button
     off the edge, so hand the navigation over to the drawer instead. */
  .nav { display: none; }
  .burger { display: flex; }
  .head-actions { margin-inline-start: auto; }
}
@media (max-width: 1080px) {
  .split, .split.rev { grid-template-columns: 1fr; gap: 34px; }
  .detail-top { grid-template-columns: 1fr; gap: 34px; }
  .contact-band { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .statbar .wrap { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, .1); }
}

@media (max-width: 760px) {
  .sec { padding: 64px 0; }
  .sec.tight { padding: 52px 0; }
  .cat-grid { grid-template-columns: 1fr; }
  .hero-inner { padding: 74px 0 54px; }
  .hero-bg img { object-position: 66% center; }
  .topbar-list .topbar-item:last-child { display: none; }
  .search-box { margin-inline-start: 0; width: 100%; }
  .search-box input { width: 100%; }
  .field-row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .contact-info, .form-panel { padding: 34px 24px; }
  .key-specs { grid-template-columns: 1fr; }
  .wrap { padding: 0 18px; }
  .brand-txt { display: none; }
}

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(11, 20, 32, .5);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
}
.drawer.open { opacity: 1; visibility: visible; }
.drawer-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  width: min(340px, 88vw);
  background: #fff;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s var(--ease);
  box-shadow: -20px 0 60px -20px rgba(0, 0, 0, .4);
}
:root[dir="rtl"] .drawer-panel { transform: translateX(-100%); }
.drawer.open .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.drawer-head img { height: 42px; }
.drawer-close {
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--steel);
}
.drawer-panel > a {
  padding: 13px 12px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
}
.drawer-panel > a:hover { background: var(--mist); color: var(--teal-dk); }
.drawer-panel .btn { margin-top: 18px; }

/* product switcher pills on detail page */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.pill {
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .2s;
}
.pill:hover { border-color: var(--teal); color: var(--teal-dk); }
.pill.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ==========================================================================
   AI / procurement layer, TAA page, contact actions, static (no-JS) chrome
   ========================================================================== */

/* ---------------------------------------- language strip shown before JS runs */
.lang-static { display: flex; align-items: center; gap: 1px; }
.lang-static a {
  padding: 5px 7px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--steel);
}
.lang-static a:hover { background: var(--mist); color: var(--teal-dk); }

@media (max-width: 1180px) {
  .nav a { padding: 9px 9px; font-size: 13px; }
}
@media (max-width: 1080px) {
  .lang-static { display: none; }
}

/* --------------------------------------------------------------- TAA band */
.taa-band { padding: 58px 0; background: var(--mist); }
.taa-band-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 34px 38px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(0, 168, 158, .10), transparent 58%),
    #fff;
}
.taa-band-ic {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--ink);
  color: #7fe6dd;
}
.taa-band-ic svg { width: 26px; height: 26px; }
.taa-band h2 { font-size: clamp(22px, 2.4vw, 30px); }
.taa-band p { margin-top: 12px; color: var(--steel); font-size: 15px; max-width: 720px; }
.taa-band-cta { display: flex; flex-direction: column; gap: 11px; }
@media (max-width: 900px) {
  .taa-band-inner { grid-template-columns: 1fr; gap: 22px; padding: 28px 24px; }
  .taa-band-cta { flex-direction: row; flex-wrap: wrap; }
}

/* ------------------------------------------------------------- TAA badges */
.taa-badges { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.taa-badge {
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #c6d4e0;
}

.taa-note {
  margin-top: 22px;
  padding: 16px 18px;
  border-inline-start: 3px solid var(--teal);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: var(--mist);
  font-size: 13.5px;
  color: var(--steel);
}

/* ----------------------------------------------------------- legal notice */
.legal-note {
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--steel);
  border-radius: var(--radius-s);
  background: var(--mist);
  padding: 22px 24px;
}
.legal-note h3 {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.legal-note p {
  margin: 0 0 11px;
  font-size: 13.5px;
  line-height: 1.78;
  color: var(--steel);
}
.legal-note p:last-child { margin-bottom: 0; }
.legal-note b { color: var(--ink); }

/* --------------------------------------------------------- document cards */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px; }
.doc-card {
  padding: 24px 22px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.doc-card:hover { border-color: #cfe9e6; box-shadow: var(--shadow-s); transform: translateY(-3px); }
.doc-ic {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--teal-lt);
  color: var(--teal-dk);
  margin-bottom: 16px;
}
.doc-ic svg { width: 19px; height: 19px; }
.doc-card h3 { font-size: 15.5px; }
.doc-card p { margin-top: 9px; font-size: 13.5px; color: var(--steel); }

/* ------------------------------------------------------------------- FAQ */
.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.faq-card {
  padding: 24px 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.faq-card h3 { font-size: 16px; line-height: 1.4; }
.faq-card p { margin-top: 11px; font-size: 14px; color: var(--steel); }

/* ------------------------------------------------------- contact persons */
.people-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(282px, 1fr)); gap: 18px; }
.person {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.person-av {
  width: 44px; height: 44px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #7fe6dd;
  font-size: 17px;
  font-weight: 700;
}
.person-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.person-body b { font-size: 15px; }
.person-role {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel-2);
}
.person-mail {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--teal-dk);
  overflow-wrap: anywhere;
}
.person-mail svg { width: 14px; height: 14px; flex: none; }
.person-wa {
  margin-inline-start: auto;
  width: 40px; height: 40px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  background: #25d366;
  color: #fff;
  transition: filter .2s, transform .2s var(--ease);
}
.person-wa svg { width: 19px; height: 19px; }
.person-wa:hover { filter: brightness(.94); transform: translateY(-2px); }

/* WeChat has no deep link, so the ID is copyable instead */
.copy-btn {
  margin-top: 8px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: transparent;
  color: #9fb2c2;
  font-size: 11px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.copy-btn:hover { border-color: #6fe0dd; color: #6fe0dd; }
.copy-btn.copied { border-color: var(--teal); color: #6fe0dd; }
.info-item .hint {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 11.5px;
  color: #7f92a4;
}

/* enquiry fallback actions */
.form-fallback { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }

/* --------------------------------------------------- floating WhatsApp CTA */
.wa-float {
  position: fixed;
  inset-inline-end: 22px;
  bottom: 22px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 19px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 14px 34px -12px rgba(37, 211, 102, .8);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.wa-float svg { width: 19px; height: 19px; }
.wa-float:hover { transform: translateY(-3px); }
@media (max-width: 760px) {
  .wa-float { padding: 14px; inset-inline-end: 16px; bottom: 16px; }
  .wa-float-txt { display: none; }
}

/* ==========================================================================
   Quality page — grade comparison, test table, certificate wall
   ========================================================================== */
table.spec.cmp { min-width: 760px; }
table.spec.cmp thead th {
  width: auto;
  padding: 13px 20px;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 500;
}
table.spec.cmp tbody th { width: 24%; }
table.spec.cmp td { font-family: inherit; font-size: 13.8px; color: var(--ink-2); line-height: 1.5; }
table.spec.cmp tbody td:last-child { color: var(--teal-dk); }

table.spec.test-table { min-width: 460px; }
table.spec.test-table th { width: 52%; }
table.spec.test-table td { font-size: 13px; }

.cert-grid {
  display: grid;
  /* auto-fill left an orphan once the wall grew to four — 4*320+3*22 exceeds the
     1188px container. Fixed tracks keep the row balanced at every count. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 1200px) { .news-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .news-grid.four { grid-template-columns: 1fr; } }
@media (max-width: 1080px) { .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .cert-grid { grid-template-columns: 1fr; } }
.cert-card {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.cert-card a { display: block; background: var(--mist); }
.cert-card img { width: 100%; height: auto; display: block; }
.cert-card figcaption { padding: 15px 16px 17px; }
.cert-card b { display: block; font-size: 14px; line-height: 1.35; color: var(--ink); }
.cert-card span {
  display: block;
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--steel);
}
@media (max-width: 760px) {
  table.spec.cmp tbody th { width: 34%; }
}