.showcase-section,
.showcase-live { overflow-x: hidden; }

.app-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  padding: var(--space-app) 0;
  position: relative;
  max-width: 100%;
  overflow: hidden;
}
.app-editorial:not(:last-child)::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px; background: var(--color-border);
}
.app-editorial.is-flipped .app-visual { order: 2; }
.app-editorial.is-flipped .app-text { order: 1; }

.app-visual {
  position: relative;
  overflow: hidden;
  padding: 32px;
  max-width: 100%;
}
.app-visual .tilt-inner {
  display: flex; gap: 12px;
  justify-content: center; align-items: center;
  max-width: 100%;
}
.app-visual-tint {
  position: absolute; inset: -40%; z-index: -1;
  border-radius: 50%; filter: blur(80px);
  opacity: 0.08; pointer-events: none;
}

.app-screenshot {
  height: clamp(320px, 40vw, 480px);
  width: auto;
  max-width: calc(50% - 6px);
  min-width: 0;
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-soft);
  background: var(--color-surface-alt);
  object-fit: cover;
}
.app-screenshot:first-of-type {
  transform: rotateZ(-3deg) translateX(-6px);
}
.app-screenshot:last-of-type {
  transform: rotateZ(3deg) translateX(6px);
}

.app-icon-solo {
  width: clamp(180px, 22vw, 260px);
  aspect-ratio: 1;
  border-radius: 32px;
  box-shadow: var(--shadow-soft);
  transform: rotateZ(-3deg);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.app-icon-solo:hover { transform: rotateZ(0deg) scale(1.03); }

.app-text {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 100%;
  overflow-wrap: break-word;
  min-width: 0;
}
.app-name {
  font-size: var(--text-app-name);
  font-family: var(--font-display);
  font-weight: 400; letter-spacing: -0.02em;
  line-height: var(--lh-display);
  overflow-wrap: break-word;
  word-break: break-word;
}
.app-tagline {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--color-text-secondary);
}
.app-body {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--lh-body);
}
.app-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

.showcase-live { padding: var(--space-section) 0; }

.trust-line {
  font-size: var(--text-small);
  color: var(--color-text-muted); margin-top: 8px;
}
.trust-line a {
  text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.2s;
}
.trust-line a:hover { color: var(--color-text); }

.stat-strip {
  display: flex; gap: 32px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 20px;
  border-top: 1px solid var(--color-border);
}
.stat-item { text-align: left; }
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted); margin-top: 4px;
}