/* ===== 元域软件 · 设计系统 ===== */
/* 主题色 primary #6366F1 已在各页 tailwind.config 中注册 */

html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: #6366F1; color: #fff; }

/* ===== 入场动效 ===== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ===== CSS 手机样机（小程序界面） ===== */
.phone {
  width: 270px; flex: none;
  background: #0b1220; border-radius: 42px; padding: 11px;
  box-shadow: 0 30px 60px -15px rgba(30, 27, 75, .35), 0 0 0 1px rgba(15, 23, 42, .08);
  position: relative;
}
.phone::before { /* 灵动岛 */
  content: ""; position: absolute; top: 21px; left: 50%; transform: translateX(-50%);
  width: 82px; height: 23px; background: #0b1220; border-radius: 13px; z-index: 20;
}
.phone-screen {
  border-radius: 32px; overflow: hidden; background: #f8fafc;
  display: flex; flex-direction: column; height: 560px; position: relative;
}
.mp-status {
  height: 44px; flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px 0 26px; font-size: 11px; font-weight: 600; color: #0f172a;
}
.mp-nav {
  height: 42px; flex: none; display: flex; align-items: center; justify-content: center;
  position: relative; font-size: 13px; font-weight: 600; color: #0f172a;
}
.mp-capsule {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 72px; height: 27px; border: 1px solid rgba(15, 23, 42, .1); border-radius: 14px;
  display: flex; align-items: center; justify-content: space-evenly; background: rgba(255, 255, 255, .7);
}
.mp-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.mp-tabbar {
  height: 54px; flex: none; background: #fff; border-top: 1px solid #eef2f7;
  display: flex; align-items: stretch;
}
.mp-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 9px; color: #94a3b8; }
.mp-tab.on { color: var(--accent, #6366F1); font-weight: 600; }

/* 案例页用：不同案例的主题色通过 --accent 变量注入 */
.phone { --accent: #6366F1; }

/* ===== 悬浮数据卡（首页 Hero 搭配样机） ===== */
.float-card {
  position: absolute; z-index: 30;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
  border: 1px solid #eef2f7; border-radius: 14px;
  box-shadow: 0 12px 30px -10px rgba(30, 27, 75, .25);
  padding: 10px 14px;
}
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.float-card { animation: floaty 5s ease-in-out infinite; }
.float-card.delay { animation-delay: 2.2s; }