.demo-grid{display:grid;gap:var(--card-gap)}@media(min-width:768px){.demo-grid{grid-template-columns:repeat(2,1fr)}.demo-card--wide{grid-column:span 2}}.demo-card{position:relative;display:flex;flex-direction:column;gap:12px}.demo-card--highlighted{border-color:var(--cta-primary);box-shadow:var(--shadow-cta)}.demo-card__badge{position:absolute;top:-12px;left:24px;background:var(--cta-primary);color:var(--bg-base);font-size:var(--text-label);font-weight:600;padding:4px 12px;border-radius:var(--radius-pill)}.demo-card__service{font-family:var(--font-mono);font-size:var(--text-label);color:var(--accent)}.demo-card__body{display:flex;gap:24px;align-items:flex-start}.demo-card__content{flex:1}.demo-card__content .btn{margin-top:16px}.demo-card__qr{flex-shrink:0;width:80px;height:80px;padding:8px;border-radius:var(--radius-btn);background:var(--bg-elevated);border:1px solid var(--border-subtle);color:var(--text-muted)}.demo-card__qr--pulse{animation:qr-pulse 3s ease-in-out infinite}@keyframes qr-pulse{0%,to{box-shadow:0 0 #22d3ee33}50%{box-shadow:0 0 20px 4px #22d3ee26}}@media(prefers-reduced-motion:reduce){.demo-card__qr--pulse{animation:none}}.demo-card__soon-badge{display:inline-block;margin-top:16px;font-family:var(--font-mono);font-size:var(--text-label);padding:6px 14px;border-radius:var(--radius-pill);background:var(--bg-elevated);border:1px dashed var(--border-glow);color:var(--text-muted)}.demo-card__video{position:relative;height:140px;border-radius:var(--radius-btn);overflow:hidden;background:var(--bg-elevated)}.demo-card__video-thumb{width:100%;height:100%;background:linear-gradient(135deg,var(--bg-base) 0%,#1a2a3a 100%)}.demo-card__play{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--accent);background:#0006;transition:background var(--transition-fast)}.demo-card__play:hover{background:#0000008c;color:var(--accent-strong)}.demo-card__soon{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:var(--text-caption);color:var(--text-muted)}.portfolio-links{display:grid;gap:var(--card-gap)}@media(min-width:768px){.portfolio-links{grid-template-columns:repeat(3,1fr)}}.portfolio-link{text-decoration:none;color:inherit}@media(max-width:767px){.demo-card__body{flex-direction:column}.demo-card__qr{align-self:flex-start}}