/* ==========================================================================
   Lazy Dept. 首頁專屬樣式（home.css）
   來源：design/home-b/index.html <style> 區段，扣掉已搬進 site.css 的共用
   段落（tokens／header／nav／btn／wave／section 標題／footer／float-line／
   基礎 reset），只留首頁專屬的 hero、痛點、服務、流程、作品、價格、FAQ、CTA。
   ========================================================================== */

/* ── Hero：午睡場景 ── */
.hero{
  background:linear-gradient(180deg, var(--sky) 0%, var(--day) 100%);
  padding:64px 0 0;overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center;max-width:1080px;margin:0 auto;padding:0 32px}
.hero .eyebrow{
  display:inline-block;font-family:var(--round);font-size:14px;color:var(--navy);
  background:var(--cream);border-radius:999px;padding:5px 16px;margin-bottom:20px;
}
h1{font-size:clamp(38px,5.4vw,62px);line-height:1.35;margin-bottom:18px}
h1 em{font-style:normal;color:var(--tangerine)}
.hero p.sub{font-size:18px;color:var(--navy-soft);max-width:30em;margin-bottom:34px}
.cta-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:56px}
/* 場景插畫 */
.scene{position:relative}
.scene svg{width:100%;height:auto;display:block}
.zzz{animation:zfloat 3.2s ease-in-out infinite}
.zzz.z2{animation-delay:1.1s}
.zzz.z3{animation-delay:2.2s}
@keyframes zfloat{
  0%{transform:translate(0,0);opacity:0}
  25%{opacity:1}
  100%{transform:translate(14px,-30px);opacity:0}
}
.cloud-drift{animation:drift 9s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(16px)}}

/* ── 痛點 ── */
.pains{background:var(--day);padding-top:24px}
.bubbles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:960px;margin:0 auto}
.bubble{
  background:var(--cloud);border-radius:22px;padding:26px 24px;position:relative;
  box-shadow:0 4px 14px rgba(40,64,90,.08);font-size:16.5px;
}
.bubble::after{
  content:"";position:absolute;bottom:-10px;left:36px;
  border:11px solid transparent;border-top-color:var(--cloud);border-bottom:0;
}
.bubble .who{display:block;margin-top:14px;font-size:13.5px;color:var(--navy-soft)}
.pains .answer{
  text-align:center;margin-top:44px;font-family:var(--round);font-size:21px;
}
.pains .answer b{color:var(--tangerine);font-weight:400}

/* ── 服務 ── */
.services{background:var(--cloud)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.svc{
  background:var(--day);border-radius:26px;padding:34px 28px;text-align:center;
  transition:transform .15s ease;
}
.svc:hover{transform:translateY(-6px)}
.svc .icon{width:84px;height:84px;margin:0 auto 18px}
.svc h3{font-size:22px;margin-bottom:10px}
.svc p{font-size:15px;color:var(--navy-soft);text-align:left}
.svc .for{
  display:inline-block;margin-top:16px;font-size:13px;color:var(--navy);
  background:var(--cream);border-radius:999px;padding:4px 14px;
}

/* ── 流程 ── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
.step{
  background:var(--cloud);border-radius:22px;padding:28px 24px;position:relative;
  box-shadow:0 4px 14px rgba(40,64,90,.07);
}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;top:-16px;left:22px;
  width:36px;height:36px;border-radius:50%;background:var(--tangerine);color:#fff;
  font-family:var(--round);font-size:18px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 0 var(--tangerine-deep);
}
.step h3{font-size:20px;margin:8px 0 8px}
.step p{font-size:14.5px;color:var(--navy-soft)}
.flow .note{text-align:center;margin-top:40px;font-family:var(--round);font-size:19px;color:var(--navy)}
.flow .note em{font-style:normal;color:var(--tangerine)}

/* ── 作品 ── */
.works{background:var(--cloud)}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.work{border-radius:22px;overflow:hidden;background:var(--day);box-shadow:0 4px 14px rgba(40,64,90,.07)}
.work .shot{height:180px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--round);font-size:17px;letter-spacing:2px}
/* 真圖與佔位色塊同尺寸：img.shot 需額外補 object-fit（設計稿只有 div 佔位，沒有 img） */
img.shot{object-fit:cover;width:100%}
.work:nth-child(1) .shot{background:#6FA8C9}
.work:nth-child(2) .shot{background:#E8A87C}
.work:nth-child(3) .shot{background:#8FBC94}
.work .meta{padding:20px 24px 24px}
.work .type{font-size:12.5px;color:var(--tangerine);font-weight:700;letter-spacing:1px}
.work h3{font-size:19px;margin:6px 0 4px}
.work p{font-size:14px;color:var(--navy-soft)}
.works .more{display:block;text-align:center;margin-top:40px;font-family:var(--round);font-size:17px}
.works .more span{border-bottom:3px solid var(--cream);padding-bottom:3px}

/* ── 價格 ── */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.plan{
  background:var(--cloud);border-radius:26px;padding:36px 30px;text-align:center;
  box-shadow:0 4px 14px rgba(40,64,90,.07);display:flex;flex-direction:column;
}
.plan.hot{background:var(--navy);color:#fff;position:relative}
.plan.hot .ribbon{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--tangerine);color:#fff;font-family:var(--round);font-size:13px;
  border-radius:999px;padding:4px 18px;white-space:nowrap;
}
.plan h3{font-size:22px;margin-bottom:6px}
.plan .amount{font-family:var(--round);font-size:32px;color:var(--tangerine);margin:12px 0 2px}
.plan.hot .amount{color:var(--cream)}
.plan .per{font-size:13px;color:var(--navy-soft);margin-bottom:20px}
.plan.hot .per{color:#B9C7D6}
.plan ul{list-style:none;text-align:left;font-size:14.5px;flex:1}
.plan ul li{padding:7px 0 7px 26px;position:relative}
.plan ul li::before{content:"✓";position:absolute;left:2px;color:var(--tangerine);font-weight:700}
.plan.hot ul li::before{color:var(--cream)}
.plan .go{
  margin-top:24px;font-family:var(--round);font-size:16px;
  border-radius:999px;padding:11px 0;display:block;
  background:var(--cream);color:var(--navy);
}
.plan.hot .go{background:var(--tangerine);color:#fff;box-shadow:0 4px 0 var(--tangerine-deep)}
.price-note{text-align:center;margin-top:26px;font-size:13.5px;color:var(--navy-soft)}

/* ── FAQ ── */
.faq{background:var(--cloud)}
.faq details{max-width:760px;margin:0 auto 14px;background:var(--day);border-radius:18px}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 26px;font-weight:700;font-size:16.5px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq summary::after{content:"＋";font-family:var(--round);color:var(--tangerine);font-size:20px}
.faq details[open] summary::after{content:"－"}
.faq details p{padding:0 26px 20px;color:var(--navy-soft);font-size:15px}

/* ── CTA ── */
.cta{
  background:linear-gradient(180deg, var(--day) 0%, var(--sky) 100%);
  text-align:center;padding:90px 0 80px;
}
.cta h2{font-size:clamp(28px,4.2vw,42px);margin-bottom:12px}
.cta p{color:var(--navy-soft);font-size:17px;margin-bottom:34px}
.cta .alt{margin-top:22px;font-size:14.5px;color:var(--navy-soft)}
.cta .alt a{border-bottom:2px dotted var(--navy-soft);padding-bottom:2px;margin:0 6px}
.cta .alt a:hover{color:var(--navy);border-color:var(--navy)}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .scene{max-width:420px;margin:0 auto}
  .bubbles,.svc-grid,.steps,.work-grid,.plans{grid-template-columns:1fr}
  .steps{row-gap:32px}
  .plan.hot{order:-1}
}