@layer components {

  .tech-showcase {
    container-type: inline-size;
    container-name: tech-showcase;
  }

  .tech-showcase__header { margin-bottom: var(--space-3xl); }

  /* ---- Split (image | stats) ---- */
  .tech-showcase__split {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-3xl);
  }

  .tech-showcase__image-wrapper {
    border-radius: var(--radius-l);
    overflow: hidden;
    height: 100%;
    min-height: 44rem;
  }

  .tech-showcase__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .tech-showcase__stats-col {
    display: flex;
    align-items: stretch;
  }

  .tech-showcase__stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-m);
    width: 100%;
  }

  .tech-showcase__stat-card {
    padding: var(--space-m) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
  }

  .tech-showcase__stat-card + .tech-showcase__stat-card {
    border-top: 1px solid var(--border-primary);
  }

  .tech-showcase__stat-icon {
    width: 2.2rem;
    height: 2.2rem;
    color: var(--primary);
    flex-shrink: 0;
  }

  .tech-showcase__stat-value {
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    color: var(--primary);
    line-height: 1;
  }

  .tech-showcase__stat-unit {
    font-size: var(--text-m);
    font-weight: var(--weight-medium);
    opacity: 0.7;
  }

  .tech-showcase__stat-label {
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    color: var(--text-title);
  }

  .tech-showcase__stat-desc {
    font-size: var(--text-xs);
    color: var(--text-body);
    opacity: 0.7;
    line-height: 1.5;
    margin-top: var(--space-3xs);
  }

  /* ---- Capability row ---- */
  .tech-showcase__capabilities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-l);
    margin-bottom: var(--space-3xl);
  }

  .tech-showcase__cap-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-m);
    padding: var(--space-l) 0;
  }

  .tech-showcase__cap-icon { flex-shrink: 0; width: 4rem; height: 4rem; }
  .tech-showcase__cap-icon .icon { width: 3.2rem; height: 3.2rem; }

  .tech-showcase__cap-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
  }

  .tech-showcase__cap-title {
    font-size: var(--text-m);
    font-weight: var(--weight-semibold);
    color: var(--text-title);
  }

  .tech-showcase__cap-text {
    font-size: var(--text-s);
    color: var(--text-body);
    line-height: 1.55;
  }

  /* ---- CTAs ---- */
  .tech-showcase__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-m);
  }

  .tech-showcase__cta .icon { width: 1.6rem; height: 1.6rem; }

  /* ---- Responsive ---- */
  @container tech-showcase (max-width: 968px) {
    .tech-showcase__capabilities { grid-template-columns: 1fr; }
  }

  @container tech-showcase (max-width: 768px) {
    .tech-showcase__split { grid-template-columns: 1fr; gap: var(--space-l); }
    .tech-showcase__image-wrapper { min-height: 30rem; }
  }

  @container tech-showcase (max-width: 480px) {
    .tech-showcase__image-wrapper { min-height: 22rem; }
    .tech-showcase__cta { flex-direction: column; align-items: stretch; }
  }
}