/* ==========================================================================
   玥耀 FPGA — Homepage Sections
   ========================================================================== */

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + var(--sp-20));
  padding-bottom: var(--sp-16);
  overflow: hidden;
}
.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(720px 420px at 74% 34%, rgba(59, 130, 246, 0.20), transparent 66%),
    radial-gradient(460px 300px at 88% 74%, rgba(34, 211, 238, 0.10), transparent 70%),
    radial-gradient(380px 280px at 12% 82%, rgba(124, 58, 237, 0.10), transparent 72%);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: var(--sp-12);
  align-items: center;
}
.hero__title { margin-top: var(--sp-5); }
.hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--c-brand-400) 8%, var(--c-accent-400) 92%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.hero__sub { margin-top: var(--sp-6); max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-10); }

/*
 * 底部动作区统一宽度基准：店铺按钮行与标签行共用，保证两者右边缘对齐。
 * min() 让它在窄容器下自动收缩，宽容器下不超过 460px（约等于三个按钮最小可读宽度）。
 */
.hero__copy { --hero-actions-w: min(100%, 460px); }

/* 店铺入口行：主按钮下方独立一行，与主按钮保持呼吸间隔 */
.hero__shops {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  /*
   * 宽度与标签行对齐：两者都用 --hero-actions-w 约束，右边缘落在同一竖直线上。
   * 该变量随列宽伸缩，避免硬编码 px 在不同视口失准。
   */
  max-width: var(--hero-actions-w, 100%);
}
/* 三按钮等分：flex-basis 0 + grow 1，图标宽度差异不再影响格子宽度 */
.hero__shops .btn {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: var(--sp-3);
}
/* 占位态（未配置真实链接）：降一级强调，保留可视但不可点 */
.hero__shops .btn[href="#"] { opacity: 0.72; cursor: default; }
.hero__shops .btn[href="#"]:hover { transform: none; }

/* 能力标签行：与上方按钮群以分隔线区隔 */
.hero__tags {
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border-soft);
  gap: var(--sp-2);
  max-width: var(--hero-actions-w, 100%);
}
.hero__tags .tag { padding-inline: var(--sp-3); gap: var(--sp-2); }

@media (max-width: 1023px) {
  .hero { padding-top: calc(var(--nav-h) + var(--sp-12)); padding-bottom: var(--sp-12); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-12); }
}
@media (max-width: 520px) {
  .hero__copy { --hero-actions-w: 100%; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .hero__shops { flex-direction: column; }
  .hero__shops .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Hero 视觉舞台 —— 板卡产品图
   -------------------------------------------------------------------------- */

.stage {
  position: relative;
  isolation: isolate;
}
.stage__photo {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: var(--c-bg-600);
  box-shadow:
    0 32px 64px -28px rgba(2, 6, 23, 0.55),
    0 10px 24px -16px rgba(2, 6, 23, 0.35);
}
.stage__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 608;
  object-fit: cover;
}

/* 桌面端：图片与左侧文案栅格等高对齐，超出部分按比例裁切 */
@media (min-width: 1024px) {
  .stage__photo img { aspect-ratio: 16 / 10; }
}
/* 移动端：收窄阴影与圆角，保持与整页卡片节奏一致 */
@media (max-width: 767px) {
  .stage__photo {
    border-radius: var(--r-md);
    box-shadow:
      0 20px 40px -24px rgba(2, 6, 23, 0.45),
      0 6px 16px -12px rgba(2, 6, 23, 0.30);
  }
}

/* ==========================================================================
   产品系列
   ========================================================================== */

.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
@media (max-width: 900px) { .product-grid { grid-template-columns: minmax(0, 1fr); } }

/* 产品卡片：整列等高 + 操作区沉底对齐。
   同一行内卡片高度由内容最高的那张决定，底部按钮因此始终处于同一水平线。 */
.product-card { display: flex; flex-direction: column; }
.product-card .card__media { flex: none; }
.product-card .card__body { display: flex; flex-direction: column; flex: 1; }

.product-card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4);
}
/* 名称可换行，徽标不参与压缩，避免窄卡上互相挤压 */
.product-card__head > div { min-width: 0; }
.product-card__head .badge { flex: none; }
.product-card__name { font-size: var(--fs-h4); letter-spacing: var(--ls-tight); overflow-wrap: anywhere; }
.product-card__series {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--c-brand-400);
  letter-spacing: var(--ls-wide);
}
/* 固定三行高度：卡片描述长短不一时仍有统一的正文块 */
.product-card__desc {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-300);
  line-height: var(--lh-normal);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.product-card__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin-top: auto; padding-top: var(--sp-5);
}

/* 卡片内的「暂无产品图片」：媒体框已是固定比例，这里只保留居中标签 */
.card__media .managed-empty { padding: 0; border: 0; border-radius: 0; background: transparent; }
.card__media .managed-empty p { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-300); }

/* ==========================================================================
   DMA 数据架构流程
   ========================================================================== */

.flow {
  --flow-pad-top: 8px;    /* 节点顶部内边距 */
  --flow-idx-h: 18px;     /* NODE 标签固定行高 */
  --flow-dot: 78px;       /* 节点图标方块边长 */
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-12);
}
.flow__track {
  position: absolute;
  /* 精确对齐图标垂直中心：内边距 + 标签高 + 标签下间距 + 半径 - 线宽一半
     = 8 + 18 + 12 + 39 - 1 = 76px；线从图标后方穿过（图标 z-index 更高），不再压住卡片上边缘 */
  top: calc(var(--flow-pad-top) + var(--flow-idx-h) + var(--sp-3) + (var(--flow-dot) / 2) - 1px);
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(90deg, rgba(148,163,184,.10), rgba(59,130,246,.42) 18%, rgba(34,211,238,.42) 82%, rgba(148,163,184,.10));
  z-index: 0;
}
.flow__track::after {
  content: "";
  position: absolute; inset: -1px 0;
  background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(34, 211, 238, 0.85) 12px 20px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  animation: flowSlide 4.6s linear infinite;
  opacity: .55;
}
@keyframes flowSlide { to { background-position: 160px 0; } }
@media (prefers-reduced-motion: reduce) { .flow__track::after { animation: none; } }

.flow__node {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-top: var(--flow-pad-top);
}
.flow__dot {
  width: var(--flow-dot); height: var(--flow-dot);
  margin: 0 auto var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border-brand);
  background: linear-gradient(160deg, rgba(59,130,246,.16), rgba(11,15,24,.9));
  display: grid;
  place-items: center;
  color: var(--c-brand-300);
  box-shadow: 0 0 28px -12px rgba(59, 130, 246, 0.85);
}
.flow__dot svg { width: 32px; height: 32px; stroke-width: 1.4; }
.flow__node:nth-child(5) .flow__dot { border-color: var(--c-border-accent); color: var(--c-accent-300); box-shadow: 0 0 28px -12px rgba(34,211,238,.85); background: linear-gradient(160deg, rgba(34,211,238,.14), rgba(11,15,24,.9)); }
.flow__title { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--c-text-100); }
.flow__role { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-300); line-height: var(--lh-normal); }
.flow__idx {
  font-family: var(--font-mono);
  font-size: 11px;
  height: var(--flow-idx-h);
  line-height: var(--flow-idx-h);   /* 固定行高，避免字体差异导致连接线错位 */
  letter-spacing: var(--ls-wide);
  color: var(--c-text-300);
  margin-bottom: var(--sp-3);
  display: block;
}

.flow__legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-6);
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border-soft);
  font-size: var(--fs-sm);
  color: var(--c-text-300);
}
.flow__legend i {
  display: inline-block; width: 22px; height: 2px; margin-inline-end: var(--sp-2);
  background: linear-gradient(90deg, var(--c-brand-500), var(--c-accent-400));
  vertical-align: middle;
}

@media (max-width: 1023px) {
  .flow { --flow-dot: 60px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
  .flow__track { display: none; }
  .flow__node { text-align: start; padding: var(--sp-4) 0; border-top: 1px solid var(--c-border-soft); }
  .flow__dot { margin: 0 0 var(--sp-4); }
  .flow__dot svg { width: 26px; height: 26px; }
}

/* ==========================================================================
   核心技术优势
   ========================================================================== */

.adv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
@media (max-width: 1023px) { .adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .adv-grid { grid-template-columns: minmax(0, 1fr); } }

.adv-card { padding: var(--sp-6); display: flex; flex-direction: column; }
.adv-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: rgba(59, 130, 246, 0.08);
  display: grid; place-items: center;
  color: var(--c-brand-300);
  margin-bottom: var(--sp-5);
}
.adv-card__icon svg { width: 24px; height: 24px; stroke-width: 1.4; }
.adv-card__idx {
  position: absolute; top: var(--sp-5); right: var(--sp-6);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-text-300);
  letter-spacing: 0.08em;
}
.adv-card h3 { font-size: var(--fs-h4); }
.adv-card p { margin-top: var(--sp-3); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--c-text-300); }
.adv-card__diagram {
  margin-top: auto; padding-top: var(--sp-5);
}
.adv-card__diagram svg { width: 100%; height: 56px; }

/* ==========================================================================
   应用场景（Bento）
   ========================================================================== */

.scene-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-5); }
.scene { grid-column: span 3; }
.scene--wide { grid-column: span 6; }

.scene__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  overflow: hidden;
  border-bottom: 1px solid var(--c-border-soft);
  background:
    radial-gradient(360px 200px at 30% 10%, rgba(59, 130, 246, 0.16), transparent 68%),
    linear-gradient(160deg, #0B1220, #080B12);
}
.scene--wide .scene__media { aspect-ratio: 21 / 9; }
.scene__media svg { width: 100%; height: 100%; }
.scene__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 46%, rgba(8, 11, 18, 0.86));
}
.scene__index {
  position: absolute; top: var(--sp-4); left: var(--sp-5);
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-wide);
  color: var(--c-text-300);
}
.scene__body { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.scene__body h3 { font-size: var(--fs-body); }
.scene__body p { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-300); line-height: var(--lh-normal); }
.scene__body .link-arrow { margin-top: var(--sp-4); }

@media (max-width: 1023px) {
  .scene, .scene--wide { grid-column: span 6; }
  .scene--wide .scene__media { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .scene, .scene--wide { grid-column: span 12; }
}

/* ==========================================================================
   条目列表（联系页响应说明等）
   ========================================================================== */

.dev-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-6); }
@media (max-width: 600px) { .dev-list { grid-template-columns: minmax(0, 1fr); } }
.dev-item {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--c-border-soft);
}
.dev-item svg { color: var(--c-brand-400); margin-top: 2px; }
.dev-item__t { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text-100); }
.dev-item__d { margin-top: var(--sp-1); font-size: var(--fs-caption); color: var(--c-text-300); line-height: var(--lh-normal); }

.wave-card {
  margin-top: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: #05070C;
  padding: var(--sp-4) var(--sp-5);
}
.wave-card__title {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--c-text-300);
  margin-bottom: var(--sp-3);
}
.wave-card svg { width: 100%; height: 74px; }

/* ==========================================================================
   信任与服务
   ========================================================================== */

.svc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: 1px solid var(--c-border); border-radius: var(--r-xl); overflow: hidden; background: var(--c-bg-700); }
.svc {
  padding: var(--sp-6);
  border-inline-end: 1px solid var(--c-border-soft);
  transition: background var(--t-base);
}
.svc:last-child { border-inline-end: 0; }
.svc:hover { background: rgba(59, 130, 246, 0.05); }
.svc svg { color: var(--c-brand-300); margin-bottom: var(--sp-4); width: 24px; height: 24px; stroke-width: 1.4; }
.svc h3 { font-size: var(--fs-body); }
.svc p { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-300); line-height: var(--lh-normal); }
@media (max-width: 1023px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc:nth-child(2n) { border-inline-end: 0; }
}
@media (max-width: 560px) { .svc-grid { grid-template-columns: minmax(0, 1fr); } .svc { border-inline-end: 0; } }

/* 资质与认证面板（关于页使用） */
.placeholder-panel {
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-xl);
  padding: var(--sp-10);
  text-align: center;
  background: rgba(148, 163, 184, 0.03);
}

/* ==========================================================================
   底部转化区
   ========================================================================== */

.cta-band {
  position: relative;
  margin-top: var(--sp-16);
  padding-block: var(--sp-20);
  overflow: hidden;
  background:
    linear-gradient(115deg, #0D1B36 0%, #12295C 42%, #0B1834 100%);
  border-top: 1px solid var(--c-border-brand);
  border-bottom: 1px solid var(--c-border-soft);
}
.cta-band__art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
}
.cta-band__art svg { width: 100%; height: 100%; }
.cta-band__inner { position: relative; z-index: 1; max-width: 720px; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); }
.cta-band .t-body { color: #C7D7EE; }

@media (max-width: 767px) {
  .cta-band { padding-block: var(--sp-12); }
  .cta-band__actions .btn { width: 100%; }
}

/* ==========================================================================
   数值递增
   ========================================================================== */

.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-12);
  padding: var(--sp-6) var(--sp-8);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg-700);
}
.metric { border-inline-end: 1px solid var(--c-border-soft); padding-inline-end: var(--sp-6); }
.metric:last-child { border-inline-end: 0; }
.metric__v { font-family: var(--font-mono); font-size: var(--fs-h2); color: var(--c-text-100); letter-spacing: var(--ls-tight); }
.metric__k { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-300); }
@media (max-width: 767px) {
  .metric-strip { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); padding: var(--sp-5); }
  .metric { border-inline-end: 0; padding-inline-end: 0; }
}