.project-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
}

.project-shot {
  position: relative;
  display: grid;
  place-items: center;
}

.project-cover {
  grid-template-rows: minmax(0, 1fr);
  aspect-ratio: 3 / 2;
  padding: clamp(12px, 2vw, 28px);
  border-radius: 19px 19px 0 0;
}

.project-cover-erp { background: radial-gradient(ellipse at top, #3b5285, #151f38); }
.project-cover-pharmacy { background: radial-gradient(ellipse at top, #633776, #271236); }

.project-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 12px 28px #0004;
}

.project-cover img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  box-shadow: none;
}

.project-zoom {
  position: absolute;
  inset-inline-end: 10px;
  inset-block-end: 10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #ffffff60;
  border-radius: 12px;
  background: #121a2b;
  color: #fff;
  font: 23px/1 var(--latin);
}

.project-shot:hover .project-zoom { background: #264580; }
.project-shot:focus-visible { outline-offset: -4px; }

.project-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 3vw, 28px);
}

.project-category, .project-name, .project-description { margin: 0; }
.project-category { color: var(--blue); font-size: 13px; font-weight: 700; }
.project-name { font-size: clamp(20px, 2.5vw, 30px); line-height: 1.5; }
.project-name bdi { font-family: var(--latin); }
.project-description { color: var(--muted); line-height: 1.8; }

.project-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-block-start: auto;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--line);
}

.project-extra, .project-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 700;
}

.project-extra:hover, .project-link:hover { text-decoration: underline; }
.project-extra img {
  width: 56px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 5px;
  object-fit: cover;
}
html[dir=ltr] .project-link span { transform: scaleX(-1); }

.erp-screen { min-width: 0; margin: 0; }
.erp-screen .project-shot { border: 1px solid #50668e; border-radius: 13px; padding: 10px; background: #1b2a45; }
.erp-screen figcaption { color: #c7d3e9; margin-block-start: 10px; text-align: center; font-size: 13px; }

.erp-gallery { padding-block-end: clamp(42px, 6vw, 72px); }
.erp-gallery h3 { margin-block-end: 16px; font-size: clamp(18px, 2.6vw, 26px); }
.erp-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.erp-gallery-grid a {
  display: block;
  border: 1px solid #354762;
  border-radius: 12px;
  overflow: hidden;
  background: #1b2a45;
  color: #edf3ff;
}
.erp-gallery-grid a:hover { border-color: #91b7ff; }
.erp-gallery-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top;
}
.erp-gallery-grid span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  font-weight: 600;
}
@media (max-width: 560px) {
  .erp-gallery-grid { grid-template-columns: 1fr; }
}

.project-iot {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: stretch;
  margin-block-start: 30px;
}
.project-iot .project-cover {
  width: 100%;
  min-width: 0;
  aspect-ratio: auto;
}
.project-cover-iot {
  background: radial-gradient(ellipse at top, #32656e, #112a30);
  border-radius: 0;
  border-start-start-radius: 19px;
  border-end-start-radius: 19px;
}
.project-iot .project-body { justify-content: center; }
.project-iot .project-link { align-self: flex-start; }
@media (max-width: 760px) {
  .project-iot { grid-template-columns: 1fr; }
  .project-iot .project-cover { aspect-ratio: 16 / 9; }
  .project-cover-iot { border-radius: 19px 19px 0 0; }
}

.project-dialog {
  width: max-content;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  color: var(--text);
}
.project-dialog::backdrop { background: #060d1be6; }
.project-dialog figure { margin: 0; }
.project-dialog img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 110px);
  margin-inline: auto;
}
.project-dialog figcaption { padding: 12px 16px; text-align: center; font-size: 14px; }
.project-dialog button {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  width: 44px;
  height: 44px;
  border: 1px solid #ffffff60;
  border-radius: 12px;
  background: #121a2b;
  color: #fff;
  font: 28px/1 var(--latin);
}
html:has(.project-dialog[open]) { overflow: hidden; }

.mobile-showcase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 4vw, 64px);
  margin-block-start: 30px;
  padding: clamp(24px, 4vw, 52px);
  border: 1px solid #385b8d;
  border-radius: 24px;
  overflow: hidden;
  background: radial-gradient(ellipse at 0% 0%, #194ca451, transparent 65%), radial-gradient(ellipse at 90% 100%, #32266f77, transparent 60%), #0c172b;
  color: #f1f6ff;
}
.mobile-showcase-copy { position: relative; z-index: 1; min-width: 0; }
.mobile-showcase .eyebrow { color: #aacaff; font-family: var(--latin); font-size: 11px; letter-spacing: 1.2px; }
.mobile-showcase h3 { font-size: clamp(30px, 3.7vw, 50px); line-height: 1.6; letter-spacing: -1px; margin-block-end: 20px; }
.mobile-showcase h3 > span { color: #a4c1ff; }
html[lang=en] .mobile-showcase h3 { font: 700 clamp(32px,3.6vw,50px)/1.2 var(--latin); letter-spacing: -1.3px; }
.mobile-description { color: #bdcce4; font-size: 16px; line-height: 1.95; margin-block-end: 24px; }
.mobile-feature-list { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 28px; }
.mobile-feature-list span { padding: 6px 11px; border: 1px solid #94b8f43b; border-radius: 100px; background: #b1ceff09; color: #d7e5ff; font-size: 12px; }
.mobile-showcase .button { min-height: 54px; padding-inline: 18px; gap: 16px; font-size: 14px; background: #1c61ed; color: #fff; border-color: #6396ff; }
.mobile-showcase .button:hover { background: #3675ef; }
.mobile-erp-link { display: flex; align-items: center; gap: 10px; min-height: 44px; width: fit-content; margin-block-start: 12px; color: #b5d1ff; font-size: 13px; font-weight: 600; }
.mobile-erp-link:hover { text-decoration: underline; }
.mobile-demo-note { color: #9db1d2; font-size: 12px; margin: 16px 0 0; }
.mobile-stage { position: relative; min-width: 0; min-height: 790px; display: grid; place-items: center; perspective: 1200px; }
.mobile-orbit { position: absolute; inset: 15% -12%; border: 1px solid #789eef25; border-radius: 50%; transform: rotate(-25deg); pointer-events: none; }
.mobile-orbit::before { content: ''; position: absolute; inset: 32px; border: 1px dashed #8caafa25; border-radius: 50%; }
.mobile-device { position: relative; margin: 0; width: min(294px, 100%); z-index: 1; }
.mobile-phone {
  position: relative;
  padding: 22px 7px;
  border: 2px solid #77879d;
  border-radius: 39px;
  background: linear-gradient(110deg, #253044, #080d16 30%, #0b101a 85%, #3e4c60);
  box-shadow: 0 0 0 3px #03070b, 0 30px 60px #0008, 0 0 50px #2669e321;
  transform: translate3d(0, var(--phone-shift, 0px), 0) rotateX(var(--phone-tilt, 0deg)) rotateY(var(--phone-turn, 0deg)) rotateZ(var(--phone-roll, 0deg));
  transform-style: preserve-3d;
  transition: transform .14s linear;
}
.mobile-phone::after { content: ''; position: absolute; inset-inline-end: -5px; top: 150px; width: 3px; height: 54px; border-radius: 3px; background: #8793a5; }
.mobile-speaker { position: absolute; top: 8px; left: calc(50% - 28px); width: 56px; height: 5px; border-radius: 6px; background: #03060c; box-shadow: inset 0 1px 0 #e3edff22; }
.mobile-screen { display: block; overflow: hidden; border-radius: 26px; background: #0f172a; }
.mobile-screen img { display: block; width: 100%; height: auto; }
.mobile-screen:focus-visible { outline-offset: -5px; }
.mobile-home-bar { position: absolute; bottom: 8px; left: calc(50% - 38px); width: 76px; height: 4px; border-radius: 6px; background: #c5ccdb; }
.mobile-device figcaption { color: #a6bbdc; font: 500 10px/1.8 var(--latin); letter-spacing: 1px; text-align: center; margin-block-start: 20px; }
.mobile-float-label { position: absolute; z-index: 2; inset-inline-end: 0; top: 18%; padding: 9px 12px; border: 1px solid #6f92c861; border-radius: 10px; background: #152843; color: #c5ddff; font: 600 10px/1.4 var(--latin); box-shadow: 0 12px 30px #0004; }
html[data-motion=reduced] .mobile-phone { transform: none; }
@media (max-width: 1050px) and (min-width: 761px) {
  .mobile-showcase { padding: 30px 22px; }
  .mobile-stage { min-height: 720px; }
  .mobile-device { width: min(258px, 90%); }
}
@media (max-width: 760px) {
  .mobile-showcase { grid-template-columns: 1fr; padding: 28px 22px; gap: 24px; }
  .mobile-stage { min-height: 740px; }
  .mobile-device { width: min(270px, 95%); }
  .mobile-float-label { top: 10%; inset-inline-end: -6px; }
}
@media (max-width: 380px) {
  .mobile-showcase { padding-inline: 17px; }
  .mobile-stage { min-height: 650px; }
  .mobile-device { width: min(246px, 92%); }
  .mobile-showcase .button { padding-inline: 12px; font-size: 12px; gap: 10px; }
}