/* FONT */
* { font-family: 'Inter', sans-serif; }

/* CARD */
.product-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #e5e7eb;
}
.product-card:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}

/* Image */
.image-wrapper {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,#667eea,#764ba2);
}
.image-wrapper img {
  transition: transform 0.6s ease;
}
.product-card:hover .image-wrapper img {
  transform: scale(1.08);
}

/* Video */
.video-wrapper { position: relative; overflow: hidden; background:#000; }
.video-wrapper video { transition: transform 0.6s ease; }
.product-card:hover .video-wrapper video {
  transform: scale(1.05);
}

/* Tags */
.tag {
  background:#f3f4f6;
  color:#374151;
  padding:6px 16px;
  border-radius:6px;
  font-size:13px;
  font-weight:500;
  transition:0.3s ease;
}
.tag:hover { background:#e5e7eb; transform:translateY(-1px); }

/* Button */
.btn-primary {
  background:linear-gradient(135deg,#f97316,#ea580c);
  color:#fff;
  padding:14px 32px;
  border-radius:10px;
  font-weight:600;
  transition:0.3s ease;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(249,115,22,0.3);
}

/* Status */
.project-status {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(10px);
  padding:10px 18px;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
}
.status-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  animation:pulse 2s infinite;
}
.status-green { background:#22c55e; }
.status-blue { background:#3b82f6; }

@keyframes pulse {
  0%,100% { opacity:1; }
  50% { opacity:0.5; }
}

/* Section headings */
.section-header { text-align:center; margin-bottom:64px; }
.section-title {
  font-size:48px;
  font-weight:800;
  color:#111827;
  margin-bottom:16px;
}
.section-subtitle {
  font-size:18px;
  color:#6b7280;
  max-width:600px;
  margin:0 auto;
}
.divider {
  width:80px;
  height:4px;
  margin:16px auto;
  background:linear-gradient(90deg,#f97316,#ea580c);
  border-radius:2px;
}

/* Video error box */
.video-error {
  display:none;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:#fff;
  background:rgba(0,0,0,0.8);
  padding:20px;
  border-radius:10px;
  text-align:center;
}
.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 640px) {
    .video-wrapper {
        height: 240px !important; /* or any mobile height */
    }
}