.project-card .project-visual.project-screenshot {
  min-height: 0;
  aspect-ratio: 16 / 10;
  background: radial-gradient(ellipse at 80% 12%, var(--project-accent), transparent 75%), #0c1116;
}

.project-screenshot::before,
.project-screenshot::after { display: none; }

.project-browser {
  position: absolute;
  inset: 28px 76px 42px 28px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 12px;
  background: #080c11;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
}

.project-window-bar { display: flex; flex: 0 0 28px; align-items: center; gap: 5px; padding: 0 10px; border-bottom: 1px solid var(--border); background: #11171e; }
.project-window-bar i { width: 5px; height: 5px; border-radius: 50%; background: #63707d; }
.project-window-bar i:first-child { background: var(--accent); }
.project-window-bar span { margin-left: 8px; color: #a6adb5; font-size: 10px; letter-spacing: 0.03em; }
.project-browser img { display: block; flex: 1; min-height: 0; width: 100%; object-fit: contain; object-position: top; }

.project-phone {
  position: absolute;
  right: 20px;
  bottom: 18px;
  width: clamp(96px, 24%, 156px);
  overflow: hidden;
  border: 6px solid #17202a;
  border-radius: 22px;
  background: #080c11;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.project-phone img { display: block; width: 100%; height: auto; }
.project-featured .project-phone { width: clamp(120px, 22%, 184px); }

@media (max-width: 900px) {
  .project-featured .project-content { min-height: 0; }
}

@media (max-width: 640px) {
  .project-card .project-visual.project-screenshot { aspect-ratio: 4 / 3; }
  .project-browser { inset: 16px 42px 30px 14px; border-radius: 8px; }
  .project-window-bar { flex-basis: 22px; padding-inline: 7px; gap: 4px; }
  .project-window-bar span { font-size: 8px; margin-left: 4px; }
  .project-card .project-phone { right: 12px; bottom: 12px; width: 90px; border-width: 4px; border-radius: 15px; }
}