.baifei-u8 {
  --bfu8-night: #050b12;
  --bfu8-navy: #071a2b;
  --bfu8-blue: #168df5;
  --bfu8-blue-bright: #4db4ff;
  --bfu8-paper: #f4f2ed;
  --bfu8-ink: #0b1721;
  --bfu8-muted: #5e6a73;
  --bfu8-line: #d9dfe3;
  background: #fff;
  color: var(--bfu8-ink);
}
.baifei-u8 .site-main,
.baifei-u8 main { overflow: hidden; }
.bfu8-live,
.bfu8-live * { box-sizing: border-box; }
.bfu8-live img { display: block; width: 100%; height: auto; }
.bfu8-live h1,
.bfu8-live h2,
.bfu8-live h3,
.bfu8-live p,
.bfu8-live figure { margin-top: 0; }
.bfu8-live h1,
.bfu8-live h2,
.bfu8-live h3 { font-family: Arial, Helvetica, sans-serif; }
.bfu8-live p,
.bfu8-live li,
.bfu8-live a,
.bfu8-live span,
.bfu8-live strong,
.bfu8-live small { font-family: Arial, Helvetica, sans-serif; }

.bfu8-subnav {
  position: sticky;
  z-index: 30;
  top: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(5,11,18,.96);
  backdrop-filter: blur(16px);
}
.bfu8-subnav a {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-right: 1px solid rgba(255,255,255,.1);
  color: #dbe7ef;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
.bfu8-subnav a:hover,
.bfu8-subnav-cta { background: var(--bfu8-blue); color: #fff !important; }

.bfu8-hero {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(420px, 1.06fr);
  min-height: 720px;
  background: var(--bfu8-night);
  color: #fff;
}
.bfu8-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(70px, 8vw, 142px) clamp(28px, 7vw, 118px);
}
.bfu8-eyebrow {
  margin-bottom: 18px;
  color: var(--bfu8-blue-bright);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.bfu8-hero h1 {
  max-width: 760px;
  margin-bottom: 26px;
  color: #fff;
  font-size: clamp(48px, 6.2vw, 94px);
  line-height: .94;
  letter-spacing: -.055em;
}
.bfu8-hero-copy > p:not(.bfu8-eyebrow) {
  max-width: 680px;
  margin-bottom: 30px;
  color: #b7c5cf;
  font-size: 17px;
  line-height: 1.7;
}
.bfu8-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.bfu8-button,
.bfu8-text-link {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}
.bfu8-button-primary { background: var(--bfu8-blue); color: #fff; }
.bfu8-button-primary:hover { background: #0877cf; color: #fff; }
.bfu8-text-link { border: 1px solid rgba(255,255,255,.28); color: #fff; }
.bfu8-hero small {
  max-width: 680px;
  margin-top: 28px;
  color: #8295a3;
  font-size: 11px;
  line-height: 1.65;
}
.bfu8-hero-media {
  display: flex;
  min-width: 0;
  min-height: 720px;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: clamp(30px, 5vw, 80px);
  background: radial-gradient(circle at 50% 45%, #14293c 0, #07131f 48%, #03080d 100%);
}
.bfu8-hero-media img { max-width: 820px; margin: auto; background: #fff; object-fit: contain; }
.bfu8-hero-media figcaption,
.bfu8-wide-card figcaption,
.bfu8-rain-evidence figcaption,
.bfu8-document-layout figcaption {
  padding: 12px 0 0;
  color: #91a2af;
  font-size: 11px;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
}

.bfu8-value-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--bfu8-line);
  background: #fff;
}
.bfu8-value-strip article {
  min-height: 210px;
  padding: 34px;
  border-right: 1px solid var(--bfu8-line);
}
.bfu8-value-strip span,
.bfu8-oem-grid span {
  display: block;
  margin-bottom: 36px;
  color: var(--bfu8-blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .15em;
}
.bfu8-value-strip strong { display: block; margin-bottom: 11px; font-size: 21px; }
.bfu8-value-strip p { margin-bottom: 0; color: var(--bfu8-muted); font-size: 13px; line-height: 1.55; }

.bfu8-section-heading { max-width: 1050px; margin: 0 auto 48px; text-align: center; }
.bfu8-section-heading h2 {
  margin-bottom: 18px;
  color: var(--bfu8-ink);
  font-size: clamp(42px, 5vw, 70px);
  line-height: .99;
  letter-spacing: -.045em;
}
.bfu8-section-heading > p:not(.bfu8-eyebrow) { max-width: 800px; margin: 0 auto; color: var(--bfu8-muted); line-height: 1.7; }
.bfu8-heading-light h2 { color: #fff; }
.bfu8-heading-light > p:not(.bfu8-eyebrow) { color: #9fb0bc; }

.bfu8-variants,
.bfu8-documents,
.bfu8-faq { padding: clamp(76px, 8vw, 132px) clamp(18px, 6vw, 106px); background: var(--bfu8-paper); }
.bfu8-wide-card { max-width: 1200px; margin: 0 auto 32px; }
.bfu8-wide-card img { border: 1px solid #15334b; box-shadow: 0 24px 70px rgba(4,17,29,.18); }
.bfu8-sku-grid { display: grid; grid-template-columns: 1fr 1fr; max-width: 1200px; margin: 0 auto; gap: 24px; }
.bfu8-sku-grid figure { display: flex; min-width: 0; flex-direction: column; margin: 0; overflow: hidden; border: 1px solid var(--bfu8-line); background: #fff; }
.bfu8-sku-grid img { aspect-ratio: 1 / 1; object-fit: cover; }
.bfu8-sku-grid figcaption { display: grid; gap: 7px; padding: 20px 22px; border-top: 1px solid var(--bfu8-line); }
.bfu8-sku-grid strong { font-size: 20px; }
.bfu8-sku-grid span { color: var(--bfu8-muted); font-size: 11px; }

.bfu8-feature-grid { display: grid; gap: 1px; padding: 1px; background: var(--bfu8-line); }
.bfu8-feature-grid article { display: grid; grid-template-columns: minmax(360px, .95fr) minmax(0, 1.05fr); align-items: center; background: #fff; }
.bfu8-feature-grid article:nth-child(even) img { order: 2; }
.bfu8-feature-grid img { height: 100%; max-height: 760px; object-fit: contain; background: #f4f5f6; }
.bfu8-feature-grid article > div { padding: clamp(44px, 7vw, 112px); }
.bfu8-feature-grid h2 { margin-bottom: 18px; font-size: clamp(40px, 4.6vw, 66px); line-height: 1; letter-spacing: -.04em; }
.bfu8-feature-grid p:not(.bfu8-eyebrow) { color: var(--bfu8-muted); line-height: 1.7; }

.bfu8-specifications { padding: clamp(76px, 8vw, 132px) clamp(18px, 6vw, 106px); background: var(--bfu8-night); color: #fff; }
.bfu8-spec-layout {
  display: grid;
  grid-template-columns: minmax(330px, .9fr) minmax(450px, 1.1fr);
  max-width: 1500px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #1d3b52;
  background: #071522;
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
}
.bfu8-spec-layout > img { height: 100%; object-fit: contain; object-position: top center; background: #050b12; }
.bfu8-spec-grid { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
.bfu8-spec-grid div { min-height: 112px; padding: 22px; border-bottom: 1px solid #1b3549; border-left: 1px solid #1b3549; }
.bfu8-spec-grid span { display: block; margin-bottom: 9px; color: #74bdf4; font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.bfu8-spec-grid strong { display: block; color: #fff; font-size: 15px; line-height: 1.48; }
.bfu8-verification {
  display: grid;
  grid-template-columns: auto 1fr;
  max-width: 1500px;
  margin: 24px auto 0;
  padding: 22px 26px;
  border-left: 5px solid var(--bfu8-blue);
  background: #0b2234;
  gap: 24px;
}
.bfu8-verification strong { white-space: nowrap; }
.bfu8-verification p { margin-bottom: 0; color: #aabac5; }

.bfu8-rain-evidence {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  align-items: center;
  background: #fff;
}
.bfu8-rain-evidence > div { padding: clamp(54px, 7vw, 112px); }
.bfu8-rain-evidence h2 { margin-bottom: 20px; font-size: clamp(42px, 5vw, 72px); line-height: .98; letter-spacing: -.045em; }
.bfu8-rain-evidence p:not(.bfu8-eyebrow) { color: var(--bfu8-muted); line-height: 1.7; }
.bfu8-rain-evidence figure { margin: 0; padding: clamp(24px, 5vw, 70px); background: #e9edf0; }
.bfu8-rain-evidence figcaption { color: #5d6b75; }

.bfu8-documents { background: #fff; }
.bfu8-document-layout { display: grid; grid-template-columns: .8fr 1.2fr; max-width: 1180px; margin: 0 auto; gap: 34px; align-items: center; }
.bfu8-document-layout figure { margin: 0; padding: 24px; border: 1px solid var(--bfu8-line); background: #f8f9fa; }
.bfu8-document-layout figcaption { color: #5d6b75; }
.bfu8-document-note { padding: clamp(30px, 5vw, 68px); border-left: 6px solid #e34c3b; background: #fff4f1; }
.bfu8-document-note > span { color: #c43a2b; font-size: 12px; font-weight: 900; letter-spacing: .15em; }
.bfu8-document-note h3 { margin: 14px 0 22px; font-size: clamp(30px, 4vw, 48px); line-height: 1; }
.bfu8-document-note ul { margin: 0 0 24px; padding-left: 20px; }
.bfu8-document-note li { margin: 9px 0; color: #3f4e58; }
.bfu8-document-note p { margin-bottom: 0; color: #5c6870; line-height: 1.65; }

.bfu8-source-archive { padding: 36px clamp(18px, 6vw, 106px) 90px; background: #fff; }
.bfu8-source-archive details { max-width: 1400px; margin: 0 auto; border: 1px solid var(--bfu8-line); }
.bfu8-source-archive summary { padding: 22px 26px; cursor: pointer; background: var(--bfu8-navy); color: #fff; font-weight: 900; }
.bfu8-source-archive details > div { padding: 28px; }
.bfu8-source-archive details > div > p { max-width: 980px; margin: 0 auto 28px; color: var(--bfu8-muted); line-height: 1.65; text-align: center; }
.bfu8-source-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bfu8-source-grid figure { margin: 0; overflow: hidden; border: 1px solid var(--bfu8-line); background: #f4f6f7; }
.bfu8-source-grid img { aspect-ratio: 4 / 5; object-fit: contain; background: #08111c; }
.bfu8-source-grid figcaption { padding: 13px; color: var(--bfu8-muted); font-size: 11px; text-align: center; }

.bfu8-oem { padding: clamp(76px, 8vw, 132px) clamp(18px, 6vw, 106px); background: var(--bfu8-night); color: #fff; }
.bfu8-oem-grid { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1500px; margin: 0 auto; gap: 1px; background: rgba(255,255,255,.13); }
.bfu8-oem-grid article { min-height: 260px; padding: 30px; background: #082035; }
.bfu8-oem-grid h3 { margin-bottom: 13px; color: #fff; font-size: 23px; }
.bfu8-oem-grid p { margin-bottom: 0; color: #aab8c2; font-size: 14px; }

.bfu8-faq { background: var(--bfu8-paper); }
.bfu8-faq-list { max-width: 1040px; margin: 0 auto; border-top: 1px solid var(--bfu8-line); }
.bfu8-faq details { border-bottom: 1px solid var(--bfu8-line); }
.bfu8-faq summary { position: relative; padding: 24px 48px 24px 0; cursor: pointer; color: var(--bfu8-ink); font-size: 18px; font-weight: 900; list-style: none; }
.bfu8-faq summary::after { position: absolute; top: 20px; right: 4px; content: "+"; color: var(--bfu8-blue); font-size: 27px; }
.bfu8-faq details[open] summary::after { content: "-"; }
.bfu8-faq details p { max-width: 860px; margin-bottom: 24px; color: var(--bfu8-muted); line-height: 1.65; }

.bfu8-inquiry { padding: clamp(82px, 9vw, 148px) clamp(24px, 8vw, 150px); background: var(--bfu8-blue); color: #fff; text-align: center; }
.bfu8-inquiry .bfu8-eyebrow { color: #fff; }
.bfu8-inquiry h2 { max-width: 1000px; margin-right: auto; margin-bottom: 20px; margin-left: auto; color: #fff; font-size: clamp(46px, 6vw, 82px); line-height: .98; letter-spacing: -.045em; }
.bfu8-inquiry > p:not(.bfu8-eyebrow) { max-width: 820px; margin-right: auto; margin-bottom: 28px; margin-left: auto; color: #eef8ff; }
.bfu8-inquiry > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-bottom: 30px; }
.bfu8-inquiry > div span { padding: 8px 12px; border: 1px solid rgba(255,255,255,.62); border-radius: 999px; font-size: 12px; font-weight: 800; }
.bfu8-button-light { border: 1px solid #fff; background: #fff; color: var(--bfu8-night); }

@media (max-width: 980px) {
  .bfu8-subnav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bfu8-hero,
  .bfu8-feature-grid article,
  .bfu8-spec-layout,
  .bfu8-rain-evidence,
  .bfu8-document-layout { grid-template-columns: 1fr; }
  .bfu8-hero { min-height: auto; }
  .bfu8-hero-media { min-height: auto; }
  .bfu8-feature-grid article:nth-child(even) img { order: 0; }
  .bfu8-value-strip,
  .bfu8-oem-grid { grid-template-columns: 1fr 1fr; }
  .bfu8-value-strip article:nth-child(2) { border-right: 0; }
  .bfu8-document-layout figure { max-width: 650px; margin: 0 auto; }
}

@media (max-width: 680px) {
  .bfu8-subnav { grid-template-columns: repeat(2, 1fr); }
  .bfu8-subnav a { min-height: 44px; padding: 7px 5px; font-size: 9px; }
  .bfu8-hero-copy { padding: 58px 22px 46px; }
  .bfu8-hero h1 { font-size: 43px; }
  .bfu8-hero-media { padding: 20px 14px 30px; }
  .bfu8-actions { display: grid; }
  .bfu8-button,
  .bfu8-text-link { width: 100%; text-align: center; }
  .bfu8-value-strip,
  .bfu8-oem-grid,
  .bfu8-sku-grid,
  .bfu8-source-grid { grid-template-columns: 1fr; }
  .bfu8-value-strip article { min-height: auto; border-right: 0; border-bottom: 1px solid var(--bfu8-line); }
  .bfu8-value-strip span,
  .bfu8-oem-grid span { margin-bottom: 18px; }
  .bfu8-variants,
  .bfu8-documents,
  .bfu8-faq,
  .bfu8-specifications,
  .bfu8-oem { padding-right: 14px; padding-left: 14px; }
  .bfu8-section-heading h2,
  .bfu8-feature-grid h2,
  .bfu8-rain-evidence h2 { font-size: 39px; }
  .bfu8-feature-grid article > div,
  .bfu8-rain-evidence > div { padding: 42px 22px; }
  .bfu8-spec-grid { grid-template-columns: 1fr; }
  .bfu8-spec-grid div { min-height: auto; border-left: 0; }
  .bfu8-verification { grid-template-columns: 1fr; padding: 20px; }
  .bfu8-verification strong { white-space: normal; }
  .bfu8-document-note { padding: 28px 22px; }
  .bfu8-source-archive { padding-right: 14px; padding-left: 14px; }
  .bfu8-source-archive details > div { padding: 14px; }
  .bfu8-oem-grid article { min-height: auto; }
  .bfu8-inquiry { padding-right: 20px; padding-left: 20px; }
  .bfu8-inquiry h2 { font-size: 43px; }
}

