/* 海鹦日记首页：一屏讲一件事，文字和带外框的截图左右交替；安全那一屏用北欧冬夜的深色。
   颜色、字体沿用 style.css 的变量，跟随系统的深浅色。 */
:root {
  --glow: #EDE6D8;
  --night: #1E2429;
  --night-ink: #ECEAE4;
  --night-ink2: #AEB6BB;
  --btn: #2C3033;
  --btn-ink: #F4F3EF;
  --shadow: rgba(52, 46, 34, .42);
}
@media (prefers-color-scheme: dark) {
  :root {
    --glow: #2A2F33;
    --night: #14171A;
    --btn: #E6E4DF;
    --btn-ink: #1C1F22;
    --shadow: rgba(0, 0, 0, .6);
  }
}

.home main { overflow-x: clip; }
.home .nav-in, .home .foot { max-width: 1120px; }
@media (max-width: 560px) { .home .nav-links a[href="#features"], .home .nav-links a[href="#privacy"] { display: none; } }

.home h1, .home h2 { font-family: var(--serif); font-weight: 400; color: var(--ink); }
.kicker, .eyebrow { color: var(--accent); font-size: 14px; letter-spacing: .2em; margin: 0 0 14px; }
.caption { text-align: center; color: var(--muted); font-size: 14px; margin: 28px auto 0; max-width: 640px; padding: 0 20px; }

/* 按钮（上架后换成官方的“在 App Store 下载”标识） */
.cta {
  display: inline-block; background: var(--btn); color: var(--btn-ink); border-radius: 999px;
  padding: 14px 30px; font-size: 16px; letter-spacing: .04em; transition: transform .2s ease, opacity .2s ease;
}
.cta:hover { text-decoration: none; transform: translateY(-1px); opacity: .92; }
.cta-note { color: var(--muted); font-size: 13px; margin: 12px 0 0; }

/* 手机外框：截图放进去，圆角、灵动岛、柔和的影子 */
.phone {
  --pw: 280px;
  position: relative; width: var(--pw); flex: none;
  padding: calc(var(--pw) * .034);
  border-radius: calc(var(--pw) * .165);
  background: linear-gradient(150deg, #34383b, #111315 60%);
  box-shadow: 0 calc(var(--pw) * .16) calc(var(--pw) * .26) calc(var(--pw) * -.1) var(--shadow),
              0 0 0 1px rgba(0, 0, 0, .35), inset 0 0 0 1.5px rgba(255, 255, 255, .09);
}
.phone img { width: 100%; height: auto; border-radius: calc(var(--pw) * .132); background: var(--card); }
.phone::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(var(--pw) * .06); width: calc(var(--pw) * .29); height: calc(var(--pw) * .085);
  background: #0A0B0C; border-radius: 999px;
}

/* 首屏 */
.hero {
  position: relative; max-width: 1120px; margin: 0 auto; padding: 72px 24px 40px;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px; min-height: min(88vh, 860px); text-align: left;
}
.hero::before {
  content: ""; position: absolute; z-index: -1; right: -10%; top: 0; width: 70%; height: 100%;
  background: radial-gradient(closest-side, var(--glow), transparent); opacity: .9;
}
.hero h1 { font-size: clamp(40px, 5.6vw, 66px); line-height: 1.22; letter-spacing: .05em; margin: 0 0 22px; }
.lede { color: var(--ink2); font-size: 18px; line-height: 1.9; margin: 0 0 34px; }
.hero-phones { position: relative; display: flex; justify-content: center; align-items: center; height: 640px; }
.hero-phones .phone { position: absolute; }
.hero-phones .front { --pw: 290px; transform: translateX(18%) rotate(2deg); z-index: 2; }
.hero-phones .back { --pw: 256px; transform: translateX(-42%) translateY(36px) rotate(-7deg); z-index: 1; filter: saturate(.92); }

/* 小图标（“只属于你”那一屏用）：圆形浅底 + 线条图标 */
.ic { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--soft); color: var(--accent); }
.ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* 功能：一屏一件事 */
.feature { max-width: 1120px; margin: 0 auto; padding: 120px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.feature.flip .f-text { order: 2; }
.feature h2, .carry h2, .night h2 { font-size: clamp(32px, 4vw, 46px); line-height: 1.3; letter-spacing: .04em; margin: 0 0 20px; }
.f-text { max-width: 470px; }
.feature.flip .f-text { justify-self: end; }
.f-text > p { color: var(--ink2); font-size: 18px; line-height: 1.95; margin: 0; }
.f-media { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 28px; }
.f-media::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 520px; height: 520px; max-width: 120%;
  transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, var(--soft), transparent);
}
.f-media .phone { --pw: 300px; }
.f-media.pair .phone { --pw: 250px; }
.f-media.pair .low { margin-top: 90px; }

/* 封面墙 */
.covers { padding: 0 0 40px; margin-top: -40px; }
.cover-row { display: flex; justify-content: center; gap: 22px; padding: 30px 24px 40px; }
.cover-row img {
  width: 118px; aspect-ratio: 1 / 1.4; object-fit: cover; flex: none;
  border-radius: 3px 9px 9px 3px;
  box-shadow: -3px 0 0 rgba(0, 0, 0, .08) inset, 0 18px 30px -14px var(--shadow), 0 2px 4px rgba(0, 0, 0, .08);
  transition: transform .3s ease;
}
.cover-row img:nth-child(odd) { transform: translateY(14px); }
.cover-row img:hover { transform: translateY(-6px); }
@media (max-width: 1120px) {
  .cover-row { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .cover-row::-webkit-scrollbar { display: none; }
  .cover-row img { scroll-snap-align: center; }
}

/* 安全：深色的一屏 */
.night { background: var(--night); color: var(--night-ink); margin: 40px 0; }
.night-in { max-width: 1120px; margin: 0 auto; padding: 120px 24px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 72px; align-items: center; }
.night h2 { color: var(--night-ink); }
.night .kicker { color: #9FB3BE; }
.night .f-text { max-width: 560px; }
.points { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 34px; margin-top: 34px; }
.points > div { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; }
.points .ic { grid-row: span 2; width: 46px; height: 46px; }
.points b { display: block; font-family: var(--serif); font-weight: 400; font-size: 20px; margin: 8px 0 6px; }
.points p { margin: 0; color: var(--night-ink2); font-size: 15px; line-height: 1.8; }
.night .ic { background: rgba(255, 255, 255, .07); color: #C9D4DA; }
.night .f-media::before { background: radial-gradient(closest-side, rgba(130, 153, 166, .22), transparent); }
.night .phone { --pw: 290px; }

/* 随时可以带走 */
.carry { max-width: 1040px; margin: 0 auto; padding: 100px 24px; }
.head { text-align: center; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 30px 28px; }
.card b { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-weight: 400; font-size: 21px; color: var(--ink); }
.card em { font-style: normal; font-family: var(--sans); font-size: 12px; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 0 8px; line-height: 20px; }
.card p { color: var(--ink2); margin: 10px 0 0; font-size: 15px; }

/* 承诺：四条短句 */
.promise { max-width: 900px; margin: 0 auto; padding: 60px 24px 40px; text-align: center; }
.promise h2 { font-size: 30px; letter-spacing: .06em; margin: 0 0 34px; }
.promise ol { list-style: none; counter-reset: p; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.promise li { counter-increment: p; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 28px 24px; }
.promise li::before { content: counter(p, cjk-ideographic); display: block; font-size: 12px; color: var(--accent); letter-spacing: .2em; margin-bottom: 8px; }
.promise b { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--ink); letter-spacing: .04em; }
.promise span { display: block; color: var(--muted); font-size: 15px; margin-top: 4px; }

/* 结尾 */
.final { text-align: center; padding: 100px 24px 40px; }
.final img { width: 88px; height: 88px; border-radius: 20px; margin: 0 auto 26px; box-shadow: 0 14px 30px -12px var(--shadow); }
.final h2 { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.35; letter-spacing: .06em; margin: 0 0 30px; }

/* 往下滑时轻轻浮现 */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* 平板和手机 */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 48px; min-height: 0; }
  .hero::before { right: 0; width: 100%; }
  .lede br { display: none; }
  .hero-phones { height: 560px; }
  .hero-phones .front { --pw: 250px; }
  .hero-phones .back { --pw: 220px; }
  .feature, .night-in { grid-template-columns: 1fr; gap: 48px; padding: 80px 24px; text-align: center; }
  .feature.flip .f-text { order: 0; justify-self: auto; }
  .f-text, .night .f-text { max-width: 560px; margin: 0 auto; }
  .points { text-align: left; }
  .cards { grid-template-columns: 1fr; }
  .f-media.pair .phone { --pw: 200px; }
  .f-media.pair .low { margin-top: 60px; }
}
@media (max-width: 520px) {
  .hero-phones { height: 480px; }
  .hero-phones .front { --pw: 210px; }
  .hero-phones .back { --pw: 186px; }
  .f-media .phone, .night .phone { --pw: 250px; }
  .f-media.pair { gap: 14px; }
  .f-media.pair .phone { --pw: 160px; }
  .points { grid-template-columns: 1fr; }
  .promise ol { grid-template-columns: 1fr; }
  .cover-row img { width: 104px; }
}