/* ═══════════════════════════════════════════════════════════════════════
   拍簿官網 — 首頁版面 v3
   結構：Promise（英雄）→ Picture（痛點）→ Proof（實機截圖/影片）→ Push（商店）
   依賴 style.css（全站基調）與 phone.css（機框 + .scr--img 真截圖螢幕）。
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 英雄區 ── */

.hero2 {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero2::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 56% 44% at 6% 0%, rgba(232,128,110,.14), transparent 70%),
    radial-gradient(ellipse 60% 52% at 100% 10%, rgba(91,122,146,.13), transparent 70%);
  pointer-events: none;
}

.hero2-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px;
  padding-top: 58px;
  /* 文案欄的下留白同時是「地面線」：英雄區下緣與吉祥物腳底都對到它。 */
  --hero-floor: 64px;
}

.hero2-copy { display: flex; flex-direction: column; gap: 20px; padding-bottom: var(--hero-floor); }

/* LOGO 鎖定組：App 圖示 + 中文字標 + 拉丁小字 */
.hero2-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero2-lockup img {
  width: 64px; height: 64px;
  border-radius: 16px;
  box-shadow: 0 2px 4px rgba(42,55,68,.1), 0 12px 26px -10px rgba(42,55,68,.3);
}
.hero2-lockup .name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
}
.hero2-lockup .latin {
  display: block;
  font-size: 11.5px;
  letter-spacing: .3em;
  color: var(--ink-fade);
  font-family: var(--serif);
  margin-top: 3px;
}

.hero2-copy h1 {
  font-family: var(--serif);
  font-weight: 700;
  margin: 0;
  letter-spacing: .01em;
  line-height: 1.3;
}
/* SLOGAN 兩段：上句大而輕快，下句略小、把「整理」「回憶」上色墊
   （對齊 App 序幕頁的視覺：兩個詞各一枚柔色膠囊、「拍簿」珊瑚色收尾） */
.hero2-copy h1 .l1 {
  display: block;
  font-size: clamp(34px, 4.8vw, 52px);
}
.hero2-copy h1 .l2 {
  display: block;
  margin-top: 12px;
  font-size: clamp(24px, 3.4vw, 36px);
  color: var(--ink-soft);
}
.hero2-copy h1 .hl {
  color: var(--ink);
  padding: 1px 8px 3px;
  border-radius: 10px;
}
.hero2-copy h1 .hl--blush { background: var(--coral-wash); }
.hero2-copy h1 .hl--blue  { background: var(--blue-wash); }
.hero2-copy h1 .brandword { color: var(--coral); }

/* 進場：序幕式的逐段浮現（尊重 reduced-motion） */
@keyframes pb-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.hero2 .rise { opacity: 0; animation: pb-rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
.hero2 .rise-1 { animation-delay: .05s; }
.hero2 .rise-2 { animation-delay: .22s; }
.hero2 .rise-3 { animation-delay: .42s; }
.hero2 .rise-4 { animation-delay: .58s; }
.hero2 .rise-5 { animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .hero2 .rise { animation: none; opacity: 1; }
}

.hero2-copy .lede {
  font-size: clamp(16px, 1.8vw, 17.5px);
  color: var(--ink-soft);
  margin: 0;
  max-width: 42ch;
  line-height: 1.95;
}

.hero2-stage {
  position: relative;
  align-self: end;
  --hero-ps: .84;
}
.hero2-stage .phone-fit { --ps: var(--hero-ps); height: calc(891px * var(--ps) * .8); }
.hero2-stage .spark { position: absolute; z-index: 3; }
/* 吉祥物坐在英雄區的地面線上（.hero2-stage 的底就是區塊底）。
   舊版 bottom:-6px 加上 .hero2 的 overflow:hidden，腳底會被切掉。
   手機圖故意出題外、吉祥物不行——它是完整的形體。 */
.hero2-mascot {
  position: absolute;
  z-index: 4;
  /* 往左退到只剩肩膀搭在手機邊上 —— 再往右就會蓋掉「今天 33」那張卡，
     而那個數字正是這張圖要講的事。 */
  left: -108px;
  bottom: 0;
  width: min(164px, 19vw);
  filter: drop-shadow(0 14px 26px rgba(42,55,68,.24));
}

/* ── 圖庫：整理標記的圖例與放大特寫 ── */

.mark-legend {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.mark-legend li { display: inline-flex; align-items: center; gap: 8px; }
.lg-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  box-shadow: 0 0 0 2.5px rgba(255,255,255,.9), 0 1px 3px rgba(42,55,68,.35);
  flex: none;
}
.lg-dot--keep { background: #5B7A92; }
.lg-dot--drop { background: #E8806E; }
/* 圖例的相簿戳記要跟圖庫格子上看到的**完全一樣**（含相簿圖示）——
   少了圖示，使用者對不起來這條在指畫面上的哪個東西。 */
.lg-badge {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 3px;
  min-width: 22px; height: 19px;
  padding: 0 6px 0 5px;
  border-radius: 9.5px;
  background: rgba(20,26,32,.78);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  flex: none;
}
.lg-badge svg {
  width: 11px; height: 11px;
  fill: currentColor;
  display: block;
}

.mark-closeup {
  margin: 34px 0 0;
  text-align: center;
}
.mark-closeup img {
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(42,55,68,.08), 0 24px 48px -28px rgba(42,55,68,.45);
}
.mark-closeup figcaption {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--ink-fade);
}

/* 內文連結：跟著區塊的文字色，不要用瀏覽器預設的蓝。 */
.promise2 p a,
.feat-copy p a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(232,128,110,.65);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.promise2 p a:hover,
.feat-copy p a:hover { text-decoration-color: var(--coral); }

/* ── 商店徽章（依 Apple / Google 官方徽章的黑底規格）── */

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 18px 0 15px;
  border-radius: 10px;
  /* 官方徽章在深色背景上帶一道白色細框 —— 少了它會糊進背景，看起來像
     隨手畫的黑色方塊而不是商店徽章。 */
  border: 1px solid rgba(255,255,255,.26);
  background: #000;
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: 0 1px 2px rgba(20,26,32,.28), 0 14px 28px -16px rgba(0,0,0,.9);
}
.store-badge .sb-glyph { width: 26px; height: 26px; flex: none; }
.store-badge--play .sb-glyph { width: 23px; height: 23px; }
.sb-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.sb-text small {
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .01em;
  opacity: .95;
}
.store-badge--play .sb-text small { font-size: 9px; letter-spacing: .13em; }
.sb-text strong {
  font-size: 19.5px;
  font-weight: 500;
  letter-spacing: .005em;
  margin-top: 4px;
}
.badge-note {
  margin: 0;
  font-size: 13px;
  color: var(--ink-fade);
}

/* ── 痛點：三段小劇場 ── */

.pains { padding: 76px 0 10px; }

.sec-h {
  font-family: var(--serif);
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 700;
  margin: 0 0 8px;
  text-wrap: balance;
}
.sec-sub {
  margin: 0 0 30px;
  color: var(--ink-soft);
  font-size: 15.5px;
}

.pain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.pain {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px 20px 22px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pain p { margin: 0; font-size: 15px; color: var(--ink-soft); line-height: 1.85; }
.pain strong { color: var(--ink); font-weight: 700; }

/* 承上啟下：痛點段的收束句，把讀者交給功能段 */
.pains-bridge {
  margin: 44px 0 0;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 700;
  color: var(--ink);
}
.pains-bridge small {
  display: block;
  margin-top: 8px;
  font-family: var(--sans, inherit);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-fade);
}

/* 小劇場共用舞台 */
.pv {
  position: relative;
  height: 148px;
  border-radius: 14px;
  background: var(--sunken);
  overflow: hidden;
}

/* ① 連拍四張，哪張才是最好的？ */
.pv--burst { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pv--burst img {
  width: 62px; height: 62px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid #fff;
  box-shadow: 0 4px 10px -4px rgba(42,55,68,.35);
}
.pv--burst img:nth-child(2) { transform: rotate(-3deg) translateY(4px); }
.pv--burst img:nth-child(3) { transform: rotate(2.5deg) translateY(-3px); }
.pv--burst img:nth-child(4) { transform: rotate(-2deg) translateY(5px); opacity: .78; }
.pv-q {
  position: absolute;
  top: 10px; right: 12px;
  background: #fff;
  color: var(--coral);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 14px -6px rgba(42,55,68,.35);
}

/* ② 好照片被淹在截圖和連拍裡 */
.pv--buried { padding: 12px; }
.pv--buried .tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6px;
  height: 100%;
}
.pv--buried .t {
  border-radius: 7px;
  background: #E4E7EC;
  position: relative;
  overflow: hidden;
}
/* 「截圖」磚：淺灰底＋幾條字行 */
.pv--buried .t--shot::before,
.pv--buried .t--shot::after {
  content: "";
  position: absolute;
  left: 15%; right: 15%;
  height: 3px;
  border-radius: 2px;
  background: #C6CCD4;
}
.pv--buried .t--shot::before { top: 28%; }
.pv--buried .t--shot::after { top: 50%; right: 38%; }
.pv--buried .t img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.96); }
.pv--buried .t--good {
  outline: 2.5px solid var(--coral);
  outline-offset: -2.5px;
  z-index: 2;
}
.pv--buried .t--good img { filter: none; }
.pv--buried .t--good::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 46%, rgba(228,231,236,.94) 47%);
}

/* ③ 空間滿了 */
.pv--full {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 0 22px;
}
.pv--full .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13.5px;
  font-weight: 700;
}
.pv--full .row span:last-child {
  color: #A83B36;
  font-variant-numeric: tabular-nums;
}
.pv--full .bar {
  height: 10px;
  border-radius: 6px;
  background: #E4E0D6;
  overflow: hidden;
}
.pv--full .bar i {
  display: block; height: 100%; width: 98%;
  border-radius: 6px;
  background: linear-gradient(90deg, #E8A971, #D8615C 70%);
}
.pv--full .hint {
  font-size: 12px;
  color: var(--ink-fade);
}
.pv--full .hint b { color: #A83B36; font-weight: 700; }

/* ── 功能段 ── */

.feat { padding: 84px 0 0; position: relative; }

/* 每段一種柔和色相，頁面不再一片素 */
.feat--blush::before, .feat--blue::before, .feat--emerald::before {
  content: "";
  position: absolute; inset: 40px 0 -44px;
  pointer-events: none;
}
.feat--blush::before  { background: radial-gradient(ellipse 62% 66% at 84% 40%, rgba(232,128,110,.09), transparent 70%); }
.feat--blue::before   { background: radial-gradient(ellipse 62% 66% at 14% 40%, rgba(91,122,146,.10), transparent 70%); }
.feat--emerald::before{ background: radial-gradient(ellipse 62% 66% at 84% 40%, rgba(109,168,144,.11), transparent 70%); }

.feat-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 56px;
}

.feat--flip .feat-grid { grid-template-columns: auto minmax(0, 1fr); }
.feat--flip .feat-copy { order: 2; }
.feat--flip .feat-stage { order: 1; }

.feat-copy { display: flex; flex-direction: column; gap: 16px; }

.feat-copy .kicker {
  font-size: 12px;
  letter-spacing: .24em;
  font-weight: 700;
  color: var(--coral);
}

.feat-copy h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3.5vw, 35px);
  line-height: 1.42;
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

.feat-copy p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.95;
  max-width: 40ch;
}
.feat-copy p b { color: var(--ink); font-weight: 700; }

.feat-stage { position: relative; --feat-ps: .7; }
.feat-stage .phone-fit { --ps: var(--feat-ps); }
.feat-stage .spark { position: absolute; z-index: 4; }

.feat-mascot {
  position: absolute;
  z-index: 5;
  right: -30px;
  top: -44px;
  width: min(120px, 15vw);
  transform: rotate(-6deg);
  filter: drop-shadow(0 12px 22px rgba(42,55,68,.22));
}

/* 相似照片段：UI 特寫卡＋浮出膠囊 */
.feat-stage--panel {
  display: flex; flex-direction: column; align-items: center;
  width: min(420px, 92vw);
}
.feat-panel {
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 2px 5px rgba(42,55,68,.08), 0 30px 60px -26px rgba(42,55,68,.4);
}
.feat-panel img { display: block; width: 100%; }
.feat-chip--green { color: var(--green, #3F7A63); }
.feat-chip {
  position: relative; z-index: 5;
  margin-top: -22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 15px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 2px 4px rgba(42,55,68,.08), 0 18px 38px -14px rgba(42,55,68,.35);
}

/* 回憶段：整段收進深色圓角面板（App 沉浸底），實錄影片在其中播放 */
.feat--dark { padding-top: 96px; }
.feat--dark .feat-shell {
  background: linear-gradient(165deg, #24374C 0%, #17273A 60%, #131F2E 100%);
  border-radius: 32px;
  padding: 56px 48px;
  overflow: hidden;
  position: relative;
}
.feat--dark .feat-shell::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 86% 0%, rgba(246,196,83,.12), transparent 70%),
    radial-gradient(ellipse 70% 46% at 6% 100%, rgba(142,174,198,.16), transparent 72%);
  pointer-events: none;
}
.feat--dark .kicker { color: #F6C453; }
.feat--dark h2 { color: #F4F1EA; }
.feat--dark p { color: rgba(244,241,234,.78); }
.feat--dark p b { color: #F4F1EA; }

.scr--img video.shot {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  display: block;
  background: #0E1218;
}

/* ── 隱私承諾 ── */

.promise2 {
  margin-top: 96px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 68px 0;
  position: relative;
}
.promise2::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 88% 50%, rgba(251,221,211,.35), transparent 70%);
  pointer-events: none;
}

.promise2-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px;
}

.promise2 .kicker {
  font-size: 12px;
  letter-spacing: .24em;
  font-weight: 700;
  color: var(--coral);
  margin-bottom: 14px;
}

.promise2 blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(21px, 3vw, 28px);
  line-height: 1.65;
  max-width: 24ch;
  text-wrap: balance;
}

.promise2 p {
  margin: 18px 0 0;
  color: var(--ink-soft);
  max-width: 54ch;
  line-height: 1.9;
}

.promise2-mascot {
  width: min(210px, 26vw);
  filter: drop-shadow(0 16px 30px rgba(42,55,68,.22));
  justify-self: center;
}

/* ── 印製預告 ── */

.printtease { padding: 68px 0 92px; }

.printtease-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 28px 34px;
  box-shadow: var(--shadow);
}

.printtease-inner img { width: 104px; flex: 0 0 auto; }

.printtease h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
}

.printtease p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }

.soon-tag {
  display: inline-block;
  margin-left: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--coral);
  background: var(--coral-wash);
  padding: 3px 10px;
  border-radius: 999px;
  vertical-align: 1px;
}

/* ── 響應式 ── */

@media (max-width: 1060px) {
  .hero2-stage { --hero-ps: .72; }
  .feat-stage { --feat-ps: .62; }
}

@media (max-width: 880px) {
  .hero2-grid { grid-template-columns: 1fr; gap: 8px; }
  .hero2-copy { padding-bottom: 8px; }
  .hero2-stage { justify-self: center; --hero-ps: .64; margin-top: 16px; }
  .hero2-mascot { left: -26px; width: 124px; }

  .feat { padding-top: 64px; }
  .feat-grid, .feat--flip .feat-grid { grid-template-columns: 1fr; gap: 26px; }
  .feat--flip .feat-copy { order: 1; }
  .feat--flip .feat-stage { order: 2; }
  .feat-stage { justify-self: center; --feat-ps: .6; }
  .feat-mascot { right: -14px; top: -38px; width: 98px; }
  .feat--dark .feat-shell { padding: 40px 26px; border-radius: 26px; }

  .promise2-grid { grid-template-columns: 1fr; }
  .promise2-mascot { width: 170px; }

  .printtease-inner { flex-direction: column; text-align: center; padding: 26px 22px; }
}

@media (max-width: 430px) {
  .hero2-stage { --hero-ps: .54; }
  .feat-stage { --feat-ps: .52; }
  .hero2-lockup img { width: 52px; height: 52px; border-radius: 13px; }
  .hero2-lockup .name { font-size: 22px; }
}

/* ── 一進來就懂：三句話取代原本的痛點小劇場 ──
   舊版是三張插畫卡＋三段情境文，讀完要花力氣，而真正能說服人的是「實際畫面」。
   這一段只留下「它替你做哪三件事」，把第一支實機錄影往上拉一整屏。 */

.quickstrip {
  padding: 58px 0 8px;
}
.qs-lead {
  margin: 0 auto 26px;
  max-width: 620px;
  text-align: center;
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.qs-lead b { color: var(--ink); font-weight: 700; }

.qs-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.qs-list li {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 22px 20px 24px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(42,55,68,.04), 0 16px 34px -26px rgba(42,55,68,.4);
}
.qs-n {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--accent);
  font-weight: 700;
}
.qs-t {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
.qs-d {
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-fade);
}
.qs-foot {
  margin: 24px auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-fade);
}

@media (max-width: 720px) {
  .quickstrip { padding-top: 44px; }
  .qs-lead { font-size: 15.5px; margin-bottom: 20px; }
  .qs-list { grid-template-columns: 1fr; gap: 11px; }
  .qs-list li { padding: 18px 17px 19px; border-radius: 17px; }
  .qs-t { font-size: 17.5px; }
}