/* 麦吉软件工作室 - 共享样式 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body { font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif; }

.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

.nav-link { transition: color 0.2s ease; }
.nav-link:hover { color: #2563eb; }
.nav-link.active { color: #2563eb; font-weight: 600; }

.card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.1); }

/* 轮播：默认仅显示激活态图片，通过 .active 类控制切换 */
.gallery-slide { display: none; }
.gallery-slide.active { display: block; }
.gallery-dot { cursor: pointer; }
.gallery-dot.active { background-color: #2563eb; }

/* 小程序：竖屏手机样机 */
.phone-frame {
  position: relative;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 36px;
  border: 10px solid #0f172a;
  background: #0f172a;
  box-shadow: 0 20px 40px -16px rgba(15, 23, 42, 0.45);
}
.phone-frame::before {
  content: '';
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 90px; height: 22px;
  background: #0f172a;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  z-index: 2;
}
.phone-screen {
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
}
.phone-screen img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* Web：横屏浏览器样机 */
.browser-frame {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 32px -18px rgba(15, 23, 42, 0.35);
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}
.browser-bar .dot { width: 10px; height: 10px; border-radius: 50%; }
.browser-bar .addr {
  flex: 1;
  margin-left: 6px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  color: #94a3b8;
}
.browser-screen img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* 详情页大图轮播 */
.gallery-stage { position: relative; overflow: hidden; }
.gallery-stage img { width: 100%; }

/* 详情页截图瀑布流 */
.masonry { column-count: 1; column-gap: 1rem; }
@media (min-width: 768px) { .masonry { column-count: 2; } }
@media (min-width: 1024px) { .masonry { column-count: 3; } }
.masonry > * { break-inside: avoid; margin-bottom: 1rem; display: block; }
.masonry img { width: 100%; height: auto; border-radius: 0.75rem; border: 1px solid #e2e8f0; display: block; }

/* 案例中心列表瀑布 */
.cases-masonry { column-count: 1; column-gap: 1.25rem; }
@media (min-width: 640px) { .cases-masonry { column-count: 2; } }
@media (min-width: 1024px) { .cases-masonry { column-count: 3; } }
.cases-masonry > * { break-inside: avoid; margin-bottom: 1.25rem; display: block; }

html { scroll-behavior: smooth; }