.dev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:64px}
.dev-card{background:#fff;border:1px solid #eef0f4;border-radius:20px;overflow:hidden;text-align:left;
  transition:transform .28s var(--ease,ease),box-shadow .28s ease,border-color .28s ease}
.dev-card:hover{transform:translateY(-7px);box-shadow:0 24px 48px -18px rgba(15,23,42,.2);border-color:#e0e4ec}

/* Photo / illustration panel — a clean square "stage" so a real product
   photo (mostly square source images) shows in full, never cropped, like
   a proper catalog card. object-fit:contain (not cover) is the point:
   the WHOLE device stays visible with breathing room around it. */
.dev-art{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:22px}
.dev-art.has-photo{background:#fff !important}
.dev-art img{width:100%;height:100%;object-fit:contain;object-position:center;transition:transform .35s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 10px 18px rgba(15,23,42,.1))}
.dev-card:hover .dev-art img{transform:scale(1.06)}
.dev-art svg{width:112px;height:112px;filter:drop-shadow(0 14px 20px rgba(15,23,42,.14));
  transition:transform .35s var(--ease,ease)}
.dev-card:hover .dev-art svg{transform:translateY(-4px) scale(1.04)}
.dev-art.has-photo::after{content:none}
.dev-art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.55));pointer-events:none}

.dev-body{padding:22px 24px 26px}
.dev-body h3{font-size:18px;font-weight:750;margin:0 0 8px;color:#0f172a}
.dev-body p{font-size:14px;line-height:1.65;color:#64748b;margin:0 0 16px}
.dev-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#059669;background:#ecfdf5;padding:6px 12px;border-radius:999px}
.dev-badge i{font-size:11px}

.dev-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:linear-gradient(135deg,#4f46e5,#7c3aed);border-radius:22px;padding:38px 42px;color:#fff}
.dev-cta h2{font-size:22px;font-weight:800;margin:0 0 6px}
.dev-cta p{font-size:14.5px;opacity:.92;margin:0;max-width:480px;line-height:1.55}
.dev-cta .btn-primary{background:#fff;color:#4f46e5;white-space:nowrap}
.dev-cta .btn-primary:hover{background:#f5f5ff}

@media (max-width:900px){.dev-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.dev-grid{grid-template-columns:1fr;gap:18px}.dev-cta{flex-direction:column;align-items:flex-start;padding:28px 24px}.dev-cta .btn-primary{width:100%;justify-content:center}}