/* ================================================
   手机外框 Mockup 样式
   ================================================ */

/* ---- 基础手机框 ---- */
.phone-mockup { position: relative; width: 220px; margin: 0 auto; }

.phone-frame {
  width: 220px; height: 440px;
  background: linear-gradient(165deg, #2E2E2E, #191919);
  border-radius: 38px;
  padding: 14px 11px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10),
    0 2px 0 1px rgba(255,255,255,0.06) inset,
    0 24px 64px rgba(0,0,0,0.36);
  position: relative;
}

/* 顶部刘海/药丸 */
.phone-frame::before {
  content: '';
  position: absolute;
  top: 9px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 6px;
  background: rgba(255,255,255,0.13);
  border-radius: 3px; z-index: 5;
}

/* 侧边按钮 */
.phone-frame::after {
  content: '';
  position: absolute;
  right: -3px; top: 90px;
  width: 3px; height: 36px;
  background: #333; border-radius: 0 2px 2px 0;
}

.phone-screen {
  width: 100%; height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: var(--bg);
  position: relative;
}

/* ---- 状态栏 ---- */
.screen-statusbar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 22px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 14px;
  font-size: 9px; font-weight: 700;
  background: rgba(255,255,255,0.85);
  color: var(--text-dark); z-index: 5;
  letter-spacing: 0.02em;
}

/* ---- 截图占位色块 ---- */
.screenshot {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; padding: 20px 14px;
  text-align: center;
}
.screenshot-icon  { font-size: 38px; }
.screenshot-title { font-weight: 600; color: var(--text-dark); font-size: 0.83rem; }
.screenshot-desc  { color: var(--text-muted); font-size: 0.72rem; line-height: 1.55; }

/* 截图背景主题 */
.ss-tree     { background: linear-gradient(145deg, #EEF2F9, #D6E3F5); }
.ss-moments  { background: linear-gradient(145deg, #FDF0F4, #F7DCE8); }
.ss-birthday { background: linear-gradient(145deg, #FDF7E6, #F8EDCA); }
.ss-album    { background: linear-gradient(145deg, #F6F2EC, #EDE5D8); }
.ss-profile  { background: linear-gradient(145deg, #EEF6ED, #D8EDD6); }

/* ---- 轮播用小号手机 ---- */
.carousel-phone { width: 180px; flex-shrink: 0; }
.carousel-phone .phone-frame {
  width: 180px; height: 360px;
  border-radius: 32px; padding: 12px 9px;
}
.carousel-phone .phone-frame::before { width: 52px; height: 5px; top: 7px; }
.carousel-phone .phone-screen { border-radius: 22px; }

/* ---- Hero 区大号手机 ---- */
.hero-visual {
  display: flex; justify-content: center; align-items: center;
}
.hero-phone-wrap {
  position: relative;
  display: inline-flex;
  justify-content: center; align-items: center;
  padding: 24px;
}
.hero-phone-wrap::before {
  content: '';
  position: absolute;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(184,134,11,0.10) 0%, transparent 68%);
  pointer-events: none;
}
.hero-phone { position: relative; z-index: 1; }

/* ---- 浮动提示卡片 ---- */
.hero-float-card {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  padding: 10px 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.13);
  display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 500; color: var(--text-dark);
  z-index: 10; white-space: nowrap;
}
.hero-float-card .fc-icon { font-size: 18px; }
.float-left  { left: -44px; top: 80px;  animation: floatUp   3.2s ease-in-out infinite; }
.float-right { right: -44px; bottom: 90px; animation: floatDown 3.2s ease-in-out 1.6s infinite; }

@keyframes floatUp   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes floatDown { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

/* ---- 响应式 ---- */
@media (max-width: 900px) {
  .phone-mockup { width: 180px; }
  .phone-frame  { width: 180px; height: 360px; border-radius: 32px; }
  .hero-phone-wrap::before { width: 260px; height: 260px; }
  .float-left  { left: -24px; }
  .float-right { right: -24px; }
}
@media (max-width: 620px) {
  .phone-mockup { width: 160px; }
  .phone-frame  { width: 160px; height: 320px; }
}