:root {
  --brand:#095cd7;
  --accent:#0067fa;
  --text:#303e65;
  --muted:#5d6c89;
  --section:#f7f9fc;
  --line:#d6e2f3;
  --font:"Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  color:var(--text);
  font-family:var(--font);
  background:#fff;
}

img {
  display:block;
  max-width:100%;
  height:auto;
}

a {
  color:inherit;
  text-decoration:none;
}

.section-container {
  width:min(1440px,calc(100% - 48px));
  max-width:none;
  margin-inline:auto;
  padding-right:0;
  padding-left:0;
}

.scanner-hero {
  padding:86px 0 100px;
  background:url("../assets/product-scanner/hero-background.webp") center top/cover no-repeat;
}

.scanner-hero__grid {
  display:grid;
  grid-template-columns:minmax(420px,539px) minmax(0,1fr);
  gap:110px;
  align-items:center;
  padding-top:28px;
}

.scanner-hero__media {
  margin:0;
}

.scanner-hero__copy h1 {
  margin:0 0 28px;
  color:#1b1f25;
  font-size:clamp(2.25rem,2rem + 1.2vw,3.375rem);
  line-height:1.12;
  font-weight:700;
}

.scanner-hero__copy>p {
  max-width:653px;
  margin:14px 0;
  font-size:18px;
  line-height:1.75;
  text-align:justify;
}

.model-line {
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#596b80;
  font-size:18px;
  line-height:1.8;
}

.model-line b {
  flex:0 0 auto;
  padding:2px 18px;
  border-radius:999px;
  color:#fff;
  background:var(--accent);
}

.scanner-tags {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-top:40px;
}

.scanner-tags span {
  min-width:205px;
  padding:8px 24px;
  border:2px solid #a6bfed;
  border-radius:999px;
  color:var(--brand);
  font-size:20px;
  text-align:center;
}

.scanner-advantages {
  margin-top:86px;
}

.section-title {
  display:flex;
  position:relative;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0 0 54px;
  color:#20365d;
  font-size:clamp(1.65rem,1.45rem + .8vw,2rem);
  line-height:1.35;
  font-weight:700;
  letter-spacing:.04em;
  text-align:center;
}

.section-title span {
  position:relative;
  z-index:0;
  padding:0 18px 3px;
}

.section-title span::before {
  position:absolute;
  z-index:-1;
  right:8px;
  bottom:2px;
  left:8px;
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(0,103,250,.05),rgba(65,196,207,.13),rgba(0,103,250,.05));
  content:"";
}

.section-title::before {
  content:none;
}

.section-title::after {
  width:58px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#1875ec,#62c7d1);
  content:"";
}

.advantage-card {
  display:grid;
  grid-template-rows:72px minmax(32px,auto) 1fr;
  row-gap:10px;
  justify-items:center;
  align-content:start;
  height:100%;
  min-height:250px;
  padding:24px 18px 22px;
  border:2px solid #e9eff5;
  border-radius:16px;
  background:#fff;
  text-align:center;
}

.advantage-card img {
  width:72px;
  height:72px;
  margin:0 auto;
  padding:13px;
  border:1px solid #dce8f8;
  border-radius:50%;
  background:linear-gradient(135deg,#edf3ff 0 50%,#e6f8f5 50% 100%);
  box-shadow:none;
  object-fit:contain;
}

.scanner-advantages .row>article:nth-child(2) .advantage-card img,
.scanner-advantages .row>article:nth-child(5) .advantage-card img {
  background:linear-gradient(135deg,#e9f5ff 0 50%,#f1ecff 50% 100%);
}

.scanner-advantages .row>article:nth-child(3) .advantage-card img,
.scanner-advantages .row>article:nth-child(6) .advantage-card img {
  background:linear-gradient(135deg,#f0edff 0 50%,#e8f6ff 50% 100%);
}

.advantage-card h3 {
  display:flex;
  width:100%;
  align-items:center;
  justify-content:center;
  margin:0;
  color:#303e65;
  font-size:18px;
  line-height:1.55;
  font-weight:700;
}

.advantage-card p {
  width:100%;
  max-width:202px;
  margin:6px auto 0;
  color:#637498;
  font-size:14px;
  line-height:1.7;
}

.scanner-section {
  padding:72px 0;
}

.samples-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:24px;
}

.samples-grid figure {
  display:flex;
  flex-direction:column;
  height:100%;
  margin:0;
  overflow:hidden;
  border:1px solid #dce6f2;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(44,79,128,.06);
  text-align:center;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}

.samples-grid figure:hover {
  transform:translateY(-3px);
  border-color:#b8d0f2;
  box-shadow:0 12px 28px rgba(44,79,128,.1);
}

.samples-grid img {
  width:100%;
  aspect-ratio:1.56;
  border-radius:0;
  object-fit:cover;
}

.samples-grid figcaption {
  display:flex;
  min-height:58px;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:12px 10px;
  border-top:1px solid #e6edf6;
  color:#303e65;
  font-size:16px;
  font-weight:600;
  line-height:1.5;
}

.specs {
  background:linear-gradient(180deg,#f8fbff 0%,#f5f8fd 100%);
}

.specs-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}

.spec-table {
  position:relative;
  overflow:hidden;
  margin:0;
  border:1px solid #d9e5f3;
  border-top:4px solid var(--accent);
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 34px rgba(38,73,124,.08);
}

.spec-table>div {
  display:grid;
  grid-template-columns:167px minmax(0,1fr);
  min-height:56px;
  border-bottom:1px solid #e4ebf4;
}

.spec-table>div:last-child {
  border-bottom:0;
}

.spec-table>div:nth-child(even) dd {
  background:#fbfdff;
}

.spec-table dt,.spec-table dd {
  display:flex;
  align-items:center;
  margin:0;
  padding:12px 18px;
  font-size:15px;
  line-height:1.55;
}

.spec-table dt {
  position:relative;
  justify-content:flex-start;
  border-right:1px solid #dce7f4;
  color:#075fcf;
  background:#eef5ff;
  font-weight:700;
}

.spec-table dt::before {
  width:4px;
  height:18px;
  margin-right:10px;
  border-radius:999px;
  background:#5b9df5;
  content:"";
}

.spec-table dd {
  color:#425374;
  background:#fff;
}

.spectrum {
  background:linear-gradient(180deg,#f8fbff 0%,#f3f7fc 100%);
}

.spectrum-grid {
  display:grid;
  grid-template-columns:minmax(0,918px) minmax(340px,497px);
  gap:25px;
  align-items:center;
}

.table-scroll {
  overflow-x:auto;
}

.spectrum table {
  width:100%;
  min-width:620px;
  border-collapse:separate;
  border-spacing:1px;
}

.spectrum th,.spectrum td {
  height:42px;
  padding:8px 14px;
  background:#fff;
  text-align:center;
  font-size:16px;
  font-weight:400;
}

.spectrum th {
  height:55px;
  color:#fff;
  background:var(--accent);
}

.spectrum td:last-child {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.spectrum td img {
  width:16px;
  height:16px;
}

.spectrum-chart {
  width:100%;
  border-radius:2px;
  box-shadow:0 3px 6px rgba(129,131,141,.12);
}

@media(max-width:1180px) {
  .scanner-hero__grid {
    grid-template-columns:minmax(300px,.85fr) 1.15fr;
    gap:46px;
  }

  .samples-grid {
    grid-template-columns:repeat(3,1fr);
  }

  .spectrum-grid {
    grid-template-columns:1fr;
  }

  .spectrum-chart {
    width:min(100%,560px);
    margin:auto;
  }

}

@media(max-width:760px) {
  .section-container {
    width:calc(100% - 32px);
  }

  .scanner-hero {
    padding-top:32px;
    background-position:35% top;
  }

  .scanner-hero__grid {
    display:flex;
    flex-direction:column;
    gap:28px;
  }

  .scanner-hero__media {
    order:2;
  }

  .scanner-hero__copy {
    order:1;
  }

  .scanner-hero__copy>p {
    text-align:left;
  }

  .model-line {
    flex-direction:column;
  }

  .scanner-tags {
    gap:10px;
    margin-top:24px;
  }

  .scanner-tags span {
    min-width:0;
    flex:1 1 140px;
    font-size:16px;
  }

  .scanner-advantages {
    margin-top:56px;
  }

  .section-title {
    margin-bottom:34px;
  }

  .section-title span {
    padding-right:12px;
    padding-left:12px;
  }

  .section-title::after {
    width:48px;
  }

  .scanner-section {
    padding:56px 0;
  }

  .samples-grid {
    grid-template-columns:repeat(2,1fr);
    gap:20px 12px;
  }

  .specs-grid {
    grid-template-columns:1fr;
    gap:28px;
  }

  .spec-table>div {
    grid-template-columns:112px minmax(0,1fr);
  }

  .spec-table dt,.spec-table dd {
    padding:9px 10px;
    font-size:14px;
  }

}

@media(max-width:380px) {
  .samples-grid {
    grid-template-columns:1fr;
  }

}

@media(max-width:760px) {

  .scanner-hero__copy h1 {
    font-size:1.875rem;
    line-height:1.2;
  }

  .scanner-hero__copy>p {
    margin:11px 0;
    font-size:.9375rem;
    line-height:1.7;
  }

  .model-line {
    gap:8px;
    font-size:.9375rem;
    line-height:1.65;
  }

  .model-line b {
    padding:2px 14px;
    font-size:.9375rem;
  }

  .scanner-tags span {
    padding:6px 12px;
    font-size:.875rem;
  }

  .scanner-advantages .row {
    --bs-gutter-x:.75rem;
    --bs-gutter-y:.75rem;
  }

  .scanner-advantages .row>article {
    width:50%;
    flex:0 0 auto;
  }

  .advantage-card {
    grid-template-rows:60px minmax(42px,auto) auto;
    row-gap:8px;
    min-height:212px;
    padding:18px 10px;
    border-radius:12px;
  }

  .advantage-card img {
    width:60px;
    height:60px;
    padding:11px;
    border-radius:50%;
  }

  .advantage-card h3 {
    font-size:1rem;
    line-height:1.4;
  }

  .advantage-card p {
    margin-top:2px;
    font-size:.8125rem;
    line-height:1.6;
  }

}

@media(max-width:760px) {

  .scanner-hero__grid {
    gap:20px;
  }

  .scanner-hero__copy {
    display:contents;
  }

  .scanner-hero__copy h1 {
    order:1;
    width:100%;
    margin-bottom:0;
  }

  .scanner-hero__media {
    order:2;
    width:100%;
    margin:4px 0;
  }

  .model-line {
    order:3;
    width:100%;
  }

  .scanner-hero__copy>p {
    order:4;
    width:100%;
  }

  .scanner-tags {
    order:5;
    width:100%;
    flex-wrap:nowrap;
    gap:6px;
    margin-top:4px;
  }

  .scanner-tags span {
    min-width:0;
    flex:1 1 0;
    padding:5px 2px;
    font-size:clamp(.625rem,3vw,.75rem);
    white-space:nowrap;
  }

}