/* ============================================================================
   ChipWorld — Components
   ----------------------------------------------------------------------------
   所有组件均为「区块级可复用单元」：只依赖 tokens.css 变量，无页面耦合。
   新增页面（品类页 / 型号详情页 / RFQ 页）可直接复用本节全部类名。
   目录：
     1  Buttons          2  Topbar          3  Header / Nav
     4  Language switch  5  Mobile nav      6  Hero
     7  Part search      8  Stats           9  Brand marquee
    10  Category grid   11  Brand chips    12  Why us
    13  Value services  14  RFQ form       15  Footer
    16  Mobile bottom bar                  17  Toast
   ========================================================================== */

/* ==== 1. Buttons =========================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 14px 24px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: .01em;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

/* 主按钮：电光渐变实心。文字用深色以保证 13:1 对比度 */
.btn--primary {
  /* 白字在 #7050F5 上 5.05:1、在 #5B3BE0 上 6.67:1 —— 渐变全程过 AA */
  background: var(--grad-cta);
  color: var(--text-on-accent);
  box-shadow: 0 8px 26px -12px rgba(124, 92, 255, .7), 0 0 0 1px rgba(255, 255, 255, .12) inset;
}
.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -12px rgba(124, 92, 255, .85), 0 0 0 1px rgba(255, 255, 255, .2) inset;
  color: var(--text-on-accent);
}
.btn--primary:active { transform: translateY(0); }

/* 次按钮：玻璃描边 */
.btn--ghost {
  background: rgba(160, 128, 224, .05);
  border-color: var(--line-default);
  color: var(--text-primary);
}
.btn--ghost:hover {
  background: rgba(124, 92, 255, .07);
  border-color: var(--line-accent);
  color: #fff;
  box-shadow: var(--glow-accent-soft);
}

/* 文字按钮 */
.btn--text {
  padding: 8px 4px;
  color: var(--cyan-300);
}
.btn--text:hover { color: var(--cyan-500); gap: var(--sp-3); }
.btn--text svg { transition: transform var(--dur-base) var(--ease-out); }
.btn--text:hover svg { transform: translateX(3px); }

.btn--sm { padding: 10px 16px; font-size: var(--fs-xs); }
.btn--lg { padding: 17px 30px; font-size: var(--fs-body); }
.btn--block { width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--text-disabled);
  background: rgba(160, 128, 224, .05);
  border-color: var(--line-subtle);
  box-shadow: none;
  transform: none;
}

/* 图标按钮（搜索、关闭） */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  color: var(--text-secondary);
  transition: color var(--dur-fast), background-color var(--dur-fast), border-color var(--dur-fast);
}
.icon-btn:hover {
  color: var(--cyan-500);
  background: rgba(124, 92, 255, .07);
  border-color: var(--line-accent);
}

/* ==== 2. Topbar ============================================================ */
.topbar {
  background: var(--bg-inset);
  border-bottom: 1px solid var(--line-subtle);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--topbar-h);
}
.topbar__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
}
.topbar__item svg { color: var(--cyan-600); flex: none; }
.topbar__item:hover { color: var(--text-secondary); }
.topbar__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 10px var(--green-500);
  animation: breathe 3.2s var(--ease-in-out) infinite;
}
/* 移动端顶栏只留“可联系”信息，砍掉干扰项 */
@media (max-width: 767px) {
  .topbar__meta .topbar__item:not(:first-child) { display: none; }
  .topbar { font-size: 11px; }
}

/* ==== 3. Header / Nav ====================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(10, 7, 24, .72);
  /* 玻璃拟态：只用在导航/卡片/浮层，列表项与表格禁用（见 design-system.md 6.1） */
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  transition: box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base);
}
.site-header.is-stuck {
  box-shadow: var(--shadow-header);
  background: rgba(8, 5, 20, .94);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

/* Logo：纯 CSS + SVG，无图片依赖 */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  flex: none;
}
.logo:hover { color: #fff; }
.logo__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: linear-gradient(150deg, rgba(124, 92, 255, .22), rgba(74, 123, 255, .12));
  border: 1px solid rgba(124, 92, 255, .35);
  box-shadow: 0 0 18px -6px rgba(124, 92, 255, .7) inset, 0 0 16px -8px rgba(124, 92, 255, .8);
}
.logo__mark svg { width: 18px; height: 18px; color: var(--cyan-300); }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 1.0625rem;
  letter-spacing: .01em;
}
.logo__name em {
  font-style: normal;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--cyan-500);
}
.logo__sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: uppercase;
}

/* 主导航：层级不超过 2 层 */
.nav { margin-inline-start: var(--sp-4); }
.nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  position: relative;
  white-space: nowrap;   /* 俄语导航项较长，禁止折行 */
}
.nav__link:hover,
.nav__link[aria-current="page"] {
  color: #fff;
  background: rgba(160, 128, 224, .06);
}
/* 激活态：底部电光线 */
.nav__link[aria-current="page"]::after {
  content: '';
  position: absolute;
  inset-inline: 12px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--cyan-500);
  box-shadow: 0 0 10px var(--cyan-500);
}
.nav__link .caret { opacity: .5; transition: transform var(--dur-fast); }
.nav__link:hover .caret { transform: translateY(1px); opacity: .9; }

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-inline-start: auto;
}

/* 头部搜索（桌面中等宽度以上才显示，移动端进汉堡菜单） */
.header-search {
  position: relative;
  display: none;
  flex: 1 1 260px;
  max-width: 300px;
}
.header-search input {
  width: 100%;
  height: 40px;
  padding: 0 40px 0 38px;
  border-radius: var(--r-sm);
  background: var(--bg-elev-1);
  border: 1px solid var(--line-default);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-base), box-shadow var(--dur-base), background-color var(--dur-base);
}
.header-search input::placeholder { color: var(--text-muted); }
.header-search input:focus {
  outline: none;
  background: var(--bg-elev-2);
  border-color: var(--line-accent);
  box-shadow: var(--glow-accent-soft);
}
.header-search__icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.header-search__key {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--line-default);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

.burger {
  display: none;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-default);
  color: var(--text-secondary);
}
.burger:hover { color: var(--cyan-500); border-color: var(--line-accent); }

@media (min-width: 768px) {
  .header-search { display: block; }
}
@media (min-width: 1024px) {
  .header-search { max-width: 340px; }
}
/* 1000px 以下隐藏快捷键提示，把宽度让给占位文案 */
@media (max-width: 1023px) {
  .header-search__key { display: none; }
}
@media (max-width: 1023px) {
  .nav { display: none; }
  .header__actions .btn--primary { display: none; }
}
@media (max-width: 1023px) {
  .burger { display: inline-grid; }
}
@media (max-width: 767px) {
  .header-search { display: none; }
}

/* 1024–1199：导航 + 搜索 + CTA 同时在场的临界区间，整体收紧一档 */
@media (min-width: 1024px) and (max-width: 1199px) {
  .header__inner { gap: var(--sp-3); }
  .nav { margin-inline-start: var(--sp-2); }
  .nav__link { padding: 9px 9px; font-size: var(--fs-xs); }
  .header-search { flex-basis: 170px; max-width: 190px; }
  .header__actions { gap: var(--sp-2); }
  .header__actions .btn--primary { padding: 10px 14px; }
}

/* ==== 4. Language switch =================================================== */
.lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--bg-elev-1);
  border: 1px solid var(--line-default);
}
.lang__btn {
  min-width: 36px;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast);
}
.lang__btn:hover { color: var(--text-primary); }
.lang__btn[aria-pressed="true"] {
  color: var(--text-on-accent);
  background: var(--grad-cta);
  box-shadow: 0 0 14px -4px rgba(124, 92, 255, .9);
}
/* 未提供翻译的语言：置灰但仍可点击查看提示（不做机器翻译页面） */
.lang__btn[data-unavailable="true"] {
  color: var(--text-disabled);
  text-decoration: line-through;
  cursor: not-allowed;
}

/* ==== 5. Mobile nav ======================================================== */
.mnav {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  background: rgba(5, 3, 14, .97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: var(--sp-4) var(--container-pad) calc(var(--sp-6) + env(safe-area-inset-bottom));
  overflow-y: auto;
  transform: translate3d(0, -12px, 0);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.mnav[data-open="true"] {
  opacity: 1;
  transform: none;
  visibility: visible;
}
.mnav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-subtle);
}
.mnav__search { margin-block: var(--sp-4); }
.mnav__list { display: flex; flex-direction: column; }
.mnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 4px;
  border-bottom: 1px solid var(--line-subtle);
  color: var(--text-primary);
  font-size: 1.0625rem;
  font-weight: var(--fw-medium);
}
.mnav__link:hover { color: var(--cyan-500); }
.mnav__foot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.mnav__contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
body[data-nav-open="true"] { overflow: hidden; }

/* ==== 6. Hero ============================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(40px, 6vw, 84px) clamp(48px, 7vw, 104px);
  isolation: isolate;
}
/* Canvas 粒子层：置于内容之下，不接收指针事件 */
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: .75;
  pointer-events: none;
}
/* 一条自上而下的扫描线，仅 1 个元素、只动 transform */
.hero__scan {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 140px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(124, 92, 255, .055) 45%, rgba(124, 92, 255, .16) 50%, rgba(124, 92, 255, .055) 55%, transparent);
  animation: scanline 7.5s linear 1.2s infinite;
  opacity: 0;
}
.hero__inner {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
.hero__copy { max-width: 640px; }

.hero__title {
  margin-top: var(--sp-4);
  letter-spacing: -0.03em;
}
.hero__title .accent { display: block; }

/* H1 顶部品牌引导行：小型全大写行，把品牌名从主诉值里剥出来。
   目的：主诉值那行不再带「ChipWorld — 」前缀，才能在窄容器里完整成行。 */
.hero__title-brand {
  display: block;
  font-size: 0.28em;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.6em;
}
/* 第三行「из Китая」与第二行之间加一点距离，避免两行大字号挤在一起 */
.hero__title .accent { margin-top: 0.06em; }

/* 桌面端：让「Поставка электронных компонентов」完整成一行。
   实测（Chrome 1280）：--fs-display 在该视口为 54.56px，这一行的自然宽度 965px，
   而文案列只有 638px —— 必然折行。两件事同时做：
     1) 文案列加宽（栅格比例 1.14/0.86 → 1.42/0.58，左列 638px → 795px）；
     2) 字号在桌面段收一档（55px → 约 44px），仍明显大于 --fs-h2 的上限 40px。
   两者都用流体公式，不写死 px，视口变化时自动收敛。 */
@media (min-width: 1024px) {
  .hero__copy { max-width: none; }
  .hero__title { font-size: clamp(2rem, 0.05rem + 3.32vw, 2.7rem); }
}

.hero__lead {
  margin-top: var(--sp-5);
  max-width: 560px;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--text-secondary);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* Hero 信任点时标（3 条，图标 + 短语） */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-subtle);
}
.hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: .01em;
}
.hero__trust svg { color: var(--cyan-500); flex: none; }

/* 右侧芯片视觉：纯内联 SVG + CSS，零外部图片 */
.hero__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 260px;
}
.hero-chip {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1;
}
.hero-chip svg { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; }
/* 芯片背后的紫蓝光斑：已迁移到真实 DOM 节点 .hero-chip__glow（见 effects.css），
   JS 需要对它做反向位移来制造景深，伪元素不能单独位移。 */

/* 芯片本体与引脚 */
.chip-body { fill: url(#chipBody); stroke: rgba(124, 92, 255, .35); stroke-width: 1.5; }
.chip-die { fill: rgba(124, 92, 255, .05); stroke: rgba(124, 92, 255, .45); stroke-width: 1; }
.chip-pin { fill: rgba(160, 128, 224, .55); }
.chip-grid line { stroke: rgba(150, 130, 220, .14); stroke-width: 1; }
.chip-trace {
  fill: none;
  stroke: rgba(160, 128, 224, .82);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 6 10;
  animation: trace-flow 3.6s linear infinite;
}
.chip-trace--b { stroke: rgba(122, 150, 255, .68); animation-duration: 5.2s; animation-direction: reverse; }
.chip-node { fill: var(--cyan-500); }
.chip-node--b { fill: var(--blue-500); }
@keyframes trace-flow {
  to { stroke-dashoffset: -64; }
}
/* 芯片外圈光环 */
.hero-chip__ring {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px solid rgba(124, 92, 255, .14);
  pointer-events: none;
}
.hero-chip__ring::after {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px dashed rgba(124, 92, 255, .12);
  animation: spin 34s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 1024px) {
  /* 左列加宽是 H1 单行成行的前提（见 .hero__title 处注释），右侧芯片视觉得到 325px 仍成立 */
  .hero__inner { grid-template-columns: minmax(0, 1.42fr) minmax(0, .58fr); }
}
/* 平板：文字优先（H1 必须先进入视口，视觉放在 CTA 之后） */
@media (max-width: 1023px) {
  .hero__visual { min-height: 200px; margin-top: var(--sp-5); }
  .hero-chip { width: min(70%, 300px); }
}
/* 手机：芯片前置但压缩高度，抢占「第一眼」又不把标题挤出首屏 */
@media (max-width: 767px) {
  .hero__visual { order: -1; min-height: 0; margin-top: 0; margin-bottom: var(--sp-2); }
}

/* ==== 7. Part search (Hero 主控件) ======================================== */
.partsearch {
  position: relative;
  z-index: 2;
  margin-top: var(--sp-6);
  max-width: 600px;
}
.partsearch__box {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px;
  padding-left: var(--sp-4);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(21, 14, 46, .96), rgba(10, 7, 24, .96));
  border: 1px solid var(--line-default);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
/* 聚焦态：整框发光 —— Hero 最重要的视觉反馈 */
.partsearch:focus-within .partsearch__box {
  border-color: var(--line-accent);
  box-shadow: var(--glow-accent-strong);
}
.partsearch__icon { color: var(--cyan-500); flex: none; }
.partsearch input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: .01em;
}
.partsearch input::placeholder {
  font-family: var(--font-body);
  color: var(--text-muted);
  letter-spacing: 0;
}
.partsearch input:focus { outline: none; }
.partsearch__hint {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.partsearch__hint .pn { color: var(--text-secondary); }

/* 联想下拉 */
.suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  padding: var(--sp-2);
  border-radius: var(--r-md);
  background: rgba(16, 10, 36, .92);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line-accent);
  box-shadow: var(--shadow-raise), 0 0 40px -18px rgba(124, 92, 255, .5);
  max-height: 320px;
  overflow-y: auto;
}
.suggest[hidden] { display: none; }
.suggest__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--sp-3);
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  text-align: left;
  transition: background-color var(--dur-fast);
}
.suggest__row:hover,
.suggest__row.is-active { background: rgba(124, 92, 255, .09); }
.suggest__pn {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.suggest__pn b { color: var(--cyan-300); font-weight: var(--fw-semibold); }
.suggest__desc {
  grid-column: 1;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.suggest__brand {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 3px 7px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-xs);
  white-space: nowrap;
}
.suggest__empty {
  padding: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}
.suggest__empty strong { display: block; color: var(--text-primary); margin-bottom: 4px; }

/* ==== 8. Stats ============================================================= */
.stats {
  border-block: 1px solid var(--line-subtle);
  background:
    linear-gradient(180deg, rgba(124, 92, 255, .045), transparent 60%),
    var(--bg-base);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  /* 用 gap + 背景色画 1px 分隔线，比给每个格子加 border 更整齐 */
  background: var(--line-subtle);
}
.stats__item {
  padding: var(--sp-5) var(--sp-4);
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stats__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-stat);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -.03em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--cyan-300);
}
.stats__label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.35;
}
.stats__note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
@media (min-width: 768px) {
  .stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats__item { padding: var(--sp-6) var(--sp-5); }
}

/* ==== 9. Brand marquee ===================================================== */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-4);
  /* 两侧淡出，避免“硬切” */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--sp-3);
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 148px;
  height: 62px;
  padding-inline: var(--sp-5);
  border-radius: var(--r-sm);
  border: 1px solid var(--line-subtle);
  background: linear-gradient(180deg, rgba(28, 19, 64, .55), rgba(10, 7, 24, .55));
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: .1em;
  color: var(--text-secondary);
  transition: color var(--dur-base), border-color var(--dur-base), background-color var(--dur-base);
}
.marquee__item:hover {
  color: #fff;
  border-color: var(--line-accent);
  background: rgba(124, 92, 255, .06);
}
.marquee__item--all { color: var(--cyan-300); }

/* ==== 10. Category grid ==================================================== */
/* 11 个一级品类分三组呈现：主动器件 6 / 被动与分立 3 / 连接与射频 2。
   分组不是为了好看——它让采购在「我要找的器件属于哪一类」上有第一层判断。 */
.cat-groups { display: flex; flex-direction: column; gap: var(--sp-7); }

.cat-group__title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-muted);
}
/* 组标题右侧的渐隐细线，把标题和卡片分隔开，不用加粗也不靠色块 */
.cat-group__title::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--line-default), transparent);
}

.cat-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 只有 2 个品类的分组：桌面端铺成两列等宽，避免右半边留空 */
@media (min-width: 1024px) { .cat-grid--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border);
  background: var(--grad-panel);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
}
/* hover 时从卡片内部透出的电光晕 */
.cat-card::before {
  content: '';
  position: absolute;
  inset: -40% 55% 55% -20%;
  background: radial-gradient(circle, rgba(124, 92, 255, .22), transparent 65%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.cat-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-accent);
  box-shadow: var(--shadow-raise), 0 0 40px -22px rgba(124, 92, 255, .6);
  color: var(--text-primary);
}
.cat-card:hover::before { opacity: 1; }

.cat-card__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 10px;
  background: rgba(124, 92, 255, .08);
  border: 1px solid rgba(124, 92, 255, .22);
  color: var(--cyan-300);
  transition: background-color var(--dur-base), box-shadow var(--dur-base), color var(--dur-base);
}
.cat-card:hover .cat-card__icon {
  background: rgba(124, 92, 255, .14);
  color: #fff;
  box-shadow: 0 0 22px -8px var(--cyan-500);
}
.cat-card__title { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
.cat-card__desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}
.cat-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cat-card:hover .cat-card__foot { color: var(--cyan-300); }
.cat-card__arrow { transition: transform var(--dur-base) var(--ease-out); }
.cat-card:hover .cat-card__arrow { transform: translateX(4px); }

/* ==== 11. Brand chips ====================================================== */
.brand-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.brand-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 16px 12px 18px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-default);
  background: rgba(160, 128, 224, .03);
  color: var(--text-primary);
  transition: border-color var(--dur-base), box-shadow var(--dur-base), background-color var(--dur-base), transform var(--dur-fast);
}
.brand-chip:hover {
  transform: translateY(-2px);
  border-color: var(--line-accent);
  box-shadow: var(--glow-accent-soft);
  color: #fff;
}
.brand-chip__name {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: .06em;
}
.brand-chip__meta { font-size: var(--fs-xs); color: var(--text-muted); }
.brand-chip svg { color: var(--cyan-500); opacity: .7; flex: none; }
.brand-chip:hover svg { opacity: 1; }

.legal-note {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 760px;
}

/* ==== 12. Why us =========================================================== */
.why {
  display: grid;
  gap: var(--sp-4);
  counter-reset: why;
}
@media (min-width: 768px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .why { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.why__item {
  position: relative;
  padding: var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(28, 19, 64, .55), rgba(10, 7, 24, .45));
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.why__item:hover {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 1px rgba(124, 92, 255, .08), 0 24px 48px -32px rgba(0, 0, 0, .9);
}
/* 左上角编号：等宽字体，压低对比度，不抢标题 */
.why__num {
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  color: var(--violet-300);
}
.why__item:hover .why__num { color: var(--glow-100); }
.why__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  margin-bottom: var(--sp-2);
}
.why__text {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ==== 13. Value-added services ============================================= */
.svc-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(124, 92, 255, .12), transparent 60%),
    var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
.svc-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-accent);
  box-shadow: 0 28px 50px -34px rgba(0, 0, 0, .95), 0 0 30px -18px rgba(124, 92, 255, .5);
}
.svc-card__icon { color: var(--cyan-300); }
.svc-card__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}
.svc-card__text {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ==== 14. RFQ form ========================================================= */
.rfq {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 82% 0%, rgba(74, 123, 255, .16), transparent 70%),
    radial-gradient(50% 50% at 6% 100%, rgba(124, 92, 255, .10), transparent 72%),
    var(--bg-base);
  border-top: 1px solid var(--line-subtle);
}
.rfq__grid {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}
@media (min-width: 1024px) {
  .rfq__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}
.rfq__points {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
/* 桌面端左栏跟随滚动：表单较长时左侧说明不会提前“沉底” */
@media (min-width: 1024px) {
  .rfq__intro {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
  }
}
.rfq__point {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}
.rfq__point svg { color: var(--cyan-500); flex: none; margin-top: 2px; }
.rfq__point strong { color: var(--text-primary); }

/* 表单面板 */
.form-panel {
  position: relative;
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(24, 16, 52, .82), rgba(10, 7, 24, .88));
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-raise), 0 0 60px -40px rgba(124, 92, 255, .6);
}

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--sp-4); }
.field__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.field__req { color: var(--violet-300); font-size: var(--fs-xs); }
.field__hint { font-size: var(--fs-xs); color: var(--text-muted); }

.input,
.textarea,
.select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--bg-inset);
  border: 1px solid var(--line-default);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-base), box-shadow var(--dur-base), background-color var(--dur-base);
}
.input::placeholder,
.textarea::placeholder { color: var(--text-muted); }
.input:hover,
.textarea:hover,
.select:hover { border-color: var(--line-strong); }
.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--line-accent);
  box-shadow: var(--glow-accent-soft);
  background: var(--bg-elev-1);
}
.textarea { min-height: 104px; resize: vertical; font-family: var(--font-mono); line-height: 1.7; font-size: var(--fs-sm); }
.select {
  appearance: none;
  /* 自绘箭头，避免各浏览器原生控件在深色下样式不一致 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%237C8CA6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
.select option { background: var(--bg-elev-2); color: var(--text-primary); }

/* 校验错误：只在失焦后出现，不实时刷屏 */
.field.has-error .input,
.field.has-error .textarea,
.field.has-error .select { border-color: var(--danger-500); box-shadow: 0 0 0 1px rgba(255, 92, 122, .35); }
.field__error {
  display: none;
  font-size: var(--fs-xs);
  color: var(--danger-500);
}
.field.has-error .field__error { display: block; }

.form-row {
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 640px) {
  .form-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* BOM 上传区 */
.upload {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--r-sm);
  border: 1px dashed var(--line-strong);
  background: rgba(124, 92, 255, .02);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-base), background-color var(--dur-base), box-shadow var(--dur-base);
}
.upload:hover,
.upload.is-drag {
  border-color: var(--line-accent);
  background: rgba(124, 92, 255, .06);
  box-shadow: var(--glow-accent-soft);
}
.upload__icon { color: var(--cyan-500); }
.upload__title { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-primary); }
.upload__meta { font-size: var(--fs-xs); color: var(--text-muted); }
.upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.upload__file {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: 6px 10px;
  border-radius: var(--r-xs);
  background: rgba(124, 92, 255, .10);
  border: 1px solid rgba(124, 92, 255, .3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--cyan-300);
  word-break: break-all;
}
.upload.has-file .upload__file { display: inline-flex; }

/* 同意勾选 */
.consent {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-muted);
  cursor: pointer;
}
.consent input {
  appearance: none;
  flex: none;
  width: 18px; height: 18px;
  margin-top: 2px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  background: var(--bg-inset);
  cursor: pointer;
  position: relative;
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.consent input:checked {
  background: var(--cyan-500);
  border-color: var(--cyan-500);
}
.consent input:checked::after {
  content: '';
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--text-on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.consent a { text-decoration: underline; text-underline-offset: 2px; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.form-note {
  margin-top: var(--sp-3);
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* 提交成功态：原地替换，不跳页 */
.form-success {
  display: none;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid rgba(61, 217, 160, .35);
  background: rgba(61, 217, 160, .06);
  text-align: center;
  align-items: center;
}
.form-panel.is-done .form-body { display: none; }
.form-panel.is-done .form-success { display: flex; }
.form-success__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(61, 217, 160, .12);
  border: 1px solid rgba(61, 217, 160, .4);
  color: var(--green-500);
}
.form-success h3 { font-size: var(--fs-h3); }
.form-success p { font-size: var(--fs-sm); color: var(--text-secondary); max-width: 420px; }

/* ==== 15. Footer =========================================================== */
.site-footer {
  background: var(--bg-inset);
  border-top: 1px solid var(--line-subtle);
  padding-top: var(--sp-8);
  font-size: var(--fs-sm);
}
.footer__grid {
  display: grid;
  gap: var(--sp-6);
  padding-bottom: var(--sp-7);
}
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--sp-7); } }

.footer__brand { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 320px;
}
.footer__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: var(--sp-4);
}
.footer__list { display: flex; flex-direction: column; gap: 10px; }
.footer__list a {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.footer__list a:hover { color: var(--cyan-300); }
.footer__contact { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__contact-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.footer__contact-item svg { color: var(--cyan-600); flex: none; margin-top: 3px; }
.footer__contact-item .pn { font-size: var(--fs-sm); }

.footer__bottom {
  border-top: 1px solid var(--line-subtle);
  padding-block: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
}
.footer__legal a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.footer__legal a:hover { color: var(--cyan-300); }
@media (min-width: 768px) {
  .footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ==== 16. Mobile bottom bar ================================================ */
.mobile-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-mobilebar);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-default);
  background: rgba(8, 5, 20, .96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--mobilebar-h);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--text-secondary);
}
.mobile-bar__item svg { color: var(--cyan-500); }
.mobile-bar__item--primary { color: var(--text-on-accent); background: var(--grad-cta); }
.mobile-bar__item--primary svg { color: var(--text-on-accent); }
@media (min-width: 768px) { .mobile-bar { display: none; } }
@media (max-width: 767px) {
  body { padding-bottom: var(--mobilebar-h); }
}

/* ==== 17. Toast ============================================================ */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--mobilebar-h) + 16px);
  z-index: var(--z-toast);
  transform: translate3d(-50%, 20px, 0);
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: min(92vw, 480px);
  padding: 12px 18px;
  border-radius: var(--r-sm);
  background: rgba(12, 8, 28, .98);
  border: 1px solid var(--line-accent);
  box-shadow: var(--shadow-raise), var(--glow-accent-soft);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.toast[data-show="true"] { opacity: 1; transform: translate3d(-50%, 0, 0); visibility: visible; }
.toast svg { color: var(--cyan-500); flex: none; }
@media (min-width: 768px) { .toast { bottom: 24px; } }