.showcase-section{background-color:var(--white);content-visibility:auto;contain-intrinsic-size:auto 1200px}.showcase-rows{display:flex;flex-direction:column;gap:5rem}.showcase-row{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.showcase-row.reversed{direction:rtl}.showcase-row.reversed>*{direction:ltr}.showcase-row .showcase-image{opacity:0;transform:translate(-40px);transition:opacity .6s ease,transform .6s ease}.showcase-row .showcase-text{opacity:0;transform:translate(40px);transition:opacity .6s ease,transform .6s ease;transition-delay:.15s}.showcase-row.reversed .showcase-image{transform:translate(40px)}.showcase-row.reversed .showcase-text{transform:translate(-40px)}.showcase-row.in-view .showcase-image,.showcase-row.in-view .showcase-text{opacity:1;transform:translate(0)}.showcase-image .browser-frame{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);overflow:hidden}.showcase-image .browser-frame-header{padding:.75rem 1rem;background:var(--gray-100);border-bottom:1px solid var(--gray-200);display:flex;gap:.5rem}.showcase-image .browser-dot{width:12px;height:12px;border-radius:50%}.showcase-image .browser-dot.red{background:#ef4444}.showcase-image .browser-dot.yellow{background:#f59e0b}.showcase-image .browser-dot.green{background:#10b981}.showcase-image .browser-frame-body{line-height:0}.showcase-image .browser-frame-body img{width:100%;height:auto;display:block}.showcase-text h3{font-size:1.75rem;font-weight:700;color:var(--gray-900);margin-bottom:1rem}.showcase-text p{font-size:1.0625rem;color:var(--gray-600);line-height:1.8}@media(max-width:968px){.showcase-rows{gap:3.5rem}.showcase-row,.showcase-row.reversed{grid-template-columns:1fr;direction:ltr;gap:2rem}.showcase-text h3{font-size:1.5rem}.showcase-row .showcase-image,.showcase-row.reversed .showcase-image{transform:translateY(30px)}.showcase-row .showcase-text,.showcase-row.reversed .showcase-text{transform:translateY(20px)}.showcase-row.in-view .showcase-image,.showcase-row.in-view .showcase-text{transform:translateY(0)}}@media(max-width:576px){.showcase-rows{gap:2.5rem}.showcase-text h3{font-size:1.25rem}.showcase-text p{font-size:.9375rem}.showcase-image .browser-frame-header{padding:.5rem .75rem}.showcase-image .browser-dot{width:8px;height:8px}}