.section-subheading {
  text-align: center;
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  white-space: nowrap;
  margin: 0 auto 3rem;
}

.model-api-section .section-heading {
  margin-bottom: 0.75rem;
}

.model-api-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .model-api-grid {
    grid-template-columns: 1fr;
  }
}

.model-api-intro {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background-image: linear-gradient(180deg, rgba(192, 219, 255, 0.82), rgba(211, 233, 255, 0.9) 27%, rgba(245, 253, 255, 0.9)),
    url('../images/models/image-intro-bg.webp');
  background-size: cover;
  background-position: center;
  color: #0f172a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 22rem;
}

.model-api-intro h3 {
  position: relative;
  z-index: 1;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 1rem;
  max-width: 22rem;
}

.model-api-intro p {
  position: relative;
  z-index: 1;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: #47556b;
  max-width: 24rem;
}

.model-api-intro-deco {
  position: absolute;
  right: -2.5rem;
  bottom: -2.5rem;
  width: 14rem;
  height: 14rem;
  pointer-events: none;
}

.model-api-intro-deco::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.35), transparent 70%);
  filter: blur(10px);
}

.model-api-intro-deco::after {
  content: '';
  position: absolute;
  width: 8rem;
  height: 8rem;
  top: 28%;
  left: 28%;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05));
  border-radius: 1.25rem;
  transform: rotate(20deg);
  box-shadow: 0 20px 40px -10px rgba(79, 70, 229, 0.3);
}

.model-api-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (max-width: 560px) {
  .model-api-cards {
    grid-template-columns: 1fr;
  }
}

.model-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  padding: 1.5rem;
  aspect-ratio: 3 / 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 20px 40px -24px rgba(15, 23, 42, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  isolation: isolate;
}

.model-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.04);
  z-index: 0;
}

.model-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 60%, rgba(15, 23, 42, 0.16) 100%);
  z-index: 0;
}

.model-card:hover {
  transform: translateY(-7px) scale(1.02);
  box-shadow: 0 34px 64px -18px rgba(15, 23, 42, 0.34);
}

.model-card:focus {
  outline: none;
}

.model-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.model-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.model-card-logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 0.625rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(8px);
}

.model-card-logo-chip img {
  display: block;
  height: 1.25rem;
  width: auto;
}

/* GLM 与 DeepSeek 的 logo 素材是白色版本，套在白底胶囊上会隐身，
   反相处理让图形与文字变为深色，在白底上清晰可见 */
.model-card-glm .model-card-logo-chip img,
.model-card-deepseek .model-card-logo-chip img {
  filter: invert(1);
}

.model-card-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.model-card-tags span {
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #334155;
  font-size: 0.75rem;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}

.model-card-deco {
  position: absolute;
  right: -2rem;
  top: -2rem;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.65;
  pointer-events: none;
}

.model-card-qianwen::before {
  background-image: url('../images/models/model-bg-qianwen.webp');
}

.model-card-doubao::before {
  background-image: url('../images/models/model-bg-doubao.webp');
}

.model-card-glm::before {
  background-image: url('../images/models/model-bg-glm.webp');
}

.model-card-deepseek::before {
  background-image: url('../images/models/model-bg-deepseek.webp');
}

.model-card-qianwen .model-card-deco {
  background: radial-gradient(circle, #818cf8, transparent 70%);
}

.model-card-doubao .model-card-deco {
  background: radial-gradient(circle, #22d3ee, transparent 70%);
}

.model-card-glm .model-card-deco {
  background: radial-gradient(circle, #c084fc, transparent 70%);
}

.model-card-deepseek {
  background: linear-gradient(135deg, #1e3a8a, #4338ca 60%, #7c3aed);
  border-color: transparent;
}

.model-card-deepseek .model-card-tags span {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.model-card-deepseek .model-card-deco {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 70%);
}

/* Everything above is styled for a light card — model-api-intro's overlay
   gradient and the qianwen/doubao/glm cards' white background were fixed
   colors, not theme variables, so they stayed bright in dark mode and
   clashed with the rest of the page. deepseek's card was never affected
   because it already carries its own fixed dark gradient. These overrides
   darken the same elements only under [data-theme='dark']; the logo chips
   are left untouched on purpose, matching deepseek's own precedent of
   keeping brand logos on a white capsule regardless of site theme. */
[data-theme='dark'] .model-api-intro {
  background-image: linear-gradient(180deg, rgba(9, 9, 11, 0.78), rgba(9, 9, 11, 0.7) 27%, rgba(9, 9, 11, 0.85)),
    url('../images/models/image-intro-bg.webp');
  color: var(--foreground);
}

[data-theme='dark'] .model-api-intro p {
  color: var(--muted-foreground);
}

[data-theme='dark'] .model-card:not(.model-card-deepseek) {
  background: var(--accent);
}

[data-theme='dark'] .model-card:not(.model-card-deepseek)::before {
  filter: brightness(0.6) saturate(0.85);
}

[data-theme='dark'] .model-card:not(.model-card-deepseek)::after {
  background: linear-gradient(180deg, rgba(9, 9, 11, 0.1) 40%, rgba(9, 9, 11, 0.6) 100%);
}

[data-theme='dark'] .model-card:not(.model-card-deepseek) .model-card-tags span {
  background: rgba(255, 255, 255, 0.14);
  color: #f4f4f5;
  box-shadow: none;
}