/* winkplot 介绍页 D1 Muji 风格 — 重写
 * 设计稿:docs/plans/2026-05-03-landing-redesign-design.md
 */

:root {
  --bg: #F8F5F0;
  --bg-white: #FFFFFF;
  --bg-dark: #1A1A1A;
  --text: #1A1A1A;
  --text-soft: #666666;
  --text-mute: #999999;
  --line: #EAE5DD;
  --font-cn: "PingFang SC", "Source Han Sans CN", sans-serif;
  --font-en: "Inter", "Helvetica Neue", sans-serif;
  --max-w: 1200px;
  --pad-x: 32px;
  --pad-x-mobile: 20px;
  --section-gap: 120px;
  --section-gap-mobile: 60px;
  --topbar-h: 64px;
}

/* landing — 极简个人主页(应付工信部抽查的合规外壳)
 * 背景图 codex 生成,远山晨雾米色调,底部 220px 米白渐变保 footer 文字可读 */
body.landing { background: var(--bg) url(/images/landing-bg.jpg) center / cover no-repeat fixed; min-height: 100vh; display: flex; flex-direction: column; margin: 0; font-family: var(--font-cn); }
.landing-stage { flex: 1; }
.landing-footer { text-align: center; padding: 24px; font-size: 12px; color: var(--text-soft); }
.landing-footer a { color: inherit; text-decoration: underline; }

/* reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--text); font-family: var(--font-cn); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }

/* topbar — full bleed,内容 1200 居中,跟内容一起滚动
 * 背景用纯白跟米白页面区分,跟 Specs section 同色保持一致 */
.topbar { background: var(--bg-white); border-bottom: 1px solid var(--line); height: var(--topbar-h); display: flex; align-items: center; }
.topbar-inner { max-width: var(--max-w); width: 100%; margin: 0 auto; padding: 0 var(--pad-x); display: flex; align-items: center; justify-content: space-between; }
.brand { font-family: var(--font-en); font-size: 20px; font-weight: 500; }
.lang { font-size: 14px; color: var(--text-soft); }

/* hero — 轮播 + CTA 叠图 */
.hero { padding: 32px 0 var(--section-gap); }
/* touch-action: pan-y 让浏览器知道水平 swipe 留给 JS,垂直滚动正常 */
.hero-carousel { position: relative; width: 100%; aspect-ratio: 3/2; touch-action: pan-y; user-select: none; }
.hero-slides { position: relative; width: 100%; height: 100%; overflow: hidden; }
.hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.hero-slide.active { opacity: 1; }
.hero-cta-overlay { position: absolute; left: 24px; bottom: 24px; background: var(--bg); color: var(--text); padding: 12px 24px; font-size: 14px; border-radius: 4px; transition: opacity .2s; }
.hero-cta-overlay:hover { opacity: .85; }
.hero-dots { position: absolute; right: 24px; bottom: 24px; display: flex; gap: 8px; }
.hero-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,.5); cursor: pointer; padding: 0; transition: background .2s; }
.hero-dot.active { background: rgba(255,255,255,1); }

/* features — zig-zag 图文交替 */
.features { padding: var(--section-gap) 0; }
.feature { display: flex; gap: 64px; align-items: center; max-width: var(--max-w); margin: 0 auto var(--section-gap); padding: 0 var(--pad-x); }
.feature:last-child { margin-bottom: 0; }
.feature:nth-child(even) { flex-direction: row-reverse; }
.feature-img { flex: 1; aspect-ratio: 4/3; object-fit: cover; }
.feature-text { flex: 1; }
.feature-title { font-size: 28px; font-weight: 500; margin-bottom: 16px; }
.feature-desc { font-size: 16px; color: var(--text-soft); line-height: 1.7; }

/* lifestyle */
.lifestyle { padding: var(--section-gap) 0; }
.lifestyle-img { width: 100%; max-width: 1600px; margin: 0 auto var(--pad-x); aspect-ratio: 16/9; object-fit: cover; }
.lifestyle-text { font-size: 18px; color: var(--text); }

/* preorder — 唯一 dark 反转,引导单一视觉重心到 CTA */
.preorder { background: var(--bg-dark); color: var(--bg); padding: var(--section-gap) 0; text-align: center; }
.preorder-title { font-size: 32px; font-weight: 500; color: var(--bg); margin-bottom: 16px; }
.preorder-price { font-family: var(--font-en); font-size: 56px; color: var(--bg); margin-bottom: 8px; }
.preorder-meta { font-size: 14px; color: var(--text-mute); margin-bottom: 48px; }
.preorder-cta { display: inline-block; background: var(--bg); color: var(--bg-dark); padding: 16px 48px; font-size: 16px; border-radius: 4px; transition: opacity .2s; }
.preorder-cta:hover { opacity: .85; }

/* footer */
.footer { background: var(--bg); padding: 80px 0 40px; border-top: 1px solid var(--line); }
.footer-brand { font-family: var(--font-en); font-size: 20px; font-weight: 500; margin-bottom: 32px; }
.footer-links { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--text-soft); margin-bottom: 32px; }
.footer-links a { color: inherit; text-decoration: underline; }
.footer-copyright { font-size: 12px; color: var(--text-soft); }

/* mobile <768px */
@media (max-width: 767px) {
  .container { padding: 0 var(--pad-x-mobile); }
  .topbar-inner { padding: 0 var(--pad-x-mobile); }
  .hero { padding: 24px 0 var(--section-gap-mobile); }
  .hero-carousel { aspect-ratio: 4/3; }
  .hero-cta-overlay { left: 16px; bottom: 16px; padding: 10px 20px; font-size: 13px; }
  .hero-dots { right: 16px; bottom: 16px; }
  .features { padding: var(--section-gap-mobile) 0; }
  .feature, .feature:nth-child(even) { flex-direction: column; gap: 24px; padding: 0 var(--pad-x-mobile); margin-bottom: var(--section-gap-mobile); }
  .feature-title { font-size: 24px; }
  .lifestyle { padding: var(--section-gap-mobile) 0; }
  .lifestyle-img { aspect-ratio: 4/3; }
  .preorder { padding: var(--section-gap-mobile) 0; }
  .preorder-title { font-size: 28px; }
  .preorder-price { font-size: 48px; }
  .footer { padding: 60px 0 32px; }
}