/* ============================================================
   套組區塊（夜空卡）——★ 三頁共用，不可以各自複製一份 ★

   用在：index.html／sleep-stories.html／articles.html

   ⚠️ 老闆 2026-08-25 的原話：「文字就統一就好，不要再有單獨的版本」。
      在這之前，那三頁各自有一個 journey-cta，各寫各的標題與文案。

   ⚠️ 這幾頁是靜態 HTML、沒有樣板繼承，所以「共用」在這裡只能是
      「同一段 markup ＋ 同一支 CSS」，靠守門逐位元比對三頁那一段。
      ⚠️ 絕對不可以複製之後手改其中一份 —— 那正是這條規則要防的事。

   ⚠️ 標題字級刻意不在這裡定：.home-product h2 交還給 styles.css 的規格
      （clamp(38px,5vw,68px)）。這裡自己訂一份就會又出現兩套尺寸。
   ============================================================ */


/*
  夜空底：深藍底 ＋ 右上月亮 ＋ 底部山丘 ＋ 幾顆星。
  星星直接用 radial-gradient 畫在底色上，不另外加 DOM 元素。

  ⚠️ 2026-08-25：這一整組原本畫在 .product-night —— 一張被 .section-shell 夾住、
     寬 1180 的圓角卡片。老闆要「全版」，所以搬到 .home-product（＝<section> 本身）。
     連帶拿掉 border-radius 與 box-shadow：全版的東西不需要圓角，
     而陰影在滿版底色上看不出來，只會讓上下兩個區塊的交界糊掉。

  overflow:hidden 讓月亮和山丘被 section 的邊界裁齊，不會溢出到相鄰區塊。
*/
.home-product {
  position: relative;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 13% 20%, rgba(255,255,255,.9) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 72% 13%, rgba(255,255,255,.7) 0 1.3px, transparent 2px),
    radial-gradient(circle at 27% 74%, rgba(255,255,255,.65) 0 1.3px, transparent 2px),
    radial-gradient(circle at 88% 52%, rgba(255,255,255,.5) 0 1.2px, transparent 2px),
    var(--night-deep);
}

/* 月亮擺右上角，避開左邊的標題與內文 */
.home-product::before {
  position: absolute;
  top: 40px;
  right: 6%;
  width: 186px;
  height: 186px;
  border-radius: 50%;
  background: rgba(241,215,124,.95);
  box-shadow: 0 0 130px rgba(241,215,124,.22);
  content: "";
}

/* 山丘用 --night，比 --night-deep 淺一階，靠色差形成剪影 */
.home-product::after {
  position: absolute;
  bottom: -170px;
  left: 50%;
  /*
    ⚠️ 寬度不可以寫死，而且要「比畫面寬」。改成全版之後這裡有兩件事一起變：

    ① 950px 在 1440 的畫面上只剩 67%，原本佔卡片 80% 的地平線會縮成中間一顆小丘。
    ② ★ 更要緊的：頁尾是 #071b2b，跟夜空底 --night-deep(#092235) 幾乎同色，
       深藍直接貼上頁尾會糊成一片，看不出區塊在哪裡結束。分界靠的正是這道山丘
       —— 它用淺一階的 --night(#102f46)，與頁尾有明顯色差。
       所以山丘必須橫跨整個寬度：兩側露出底色的話，那兩側就會糊掉。

    118% 讓弧的兩端溢出畫面後被 overflow:hidden 裁掉，
    於是左右邊緣仍有約 60px 高的山丘，中間拱到 270px。
    max() 讓手機維持原狀：畫面比 950px 窄，只露出拱頂那一段平緩的弧。
  */
  width: max(950px, 118%);
  height: 440px;
  border-radius: 50% 50% 0 0;
  background: var(--night);
  transform: translateX(-50%);
  content: "";
}

/* ⚠️ .product-night 這一層現在什麼都不畫，只負責把內容墊到夜空之上。
   夜空底、月亮、山丘全部搬到 .home-product（＝section 本身），
   這一層再出現 background／border-radius／box-shadow／padding 任何一項，
   都會在滿版的夜空上再疊一張卡片出來 —— 那正是改版前的樣子。 */
.product-night, .product-night-inner { position: relative; z-index: 1; }

.product-kicker { margin: 0 0 10px; color: var(--butter); font-size: var(--fs-sm); font-weight: 800; letter-spacing: .14em; }
.home-product h2 { max-width: 12em; margin: 0 0 16px; font-weight: 800; line-height: 1.24; letter-spacing: -.035em; }
.product-desc { max-width: 560px; margin: 0 0 26px; color: rgba(255,255,255,.72); font-size: var(--fs-sm); line-height: 1.9; }

.price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 0 0 26px; }
.price-label { color: rgba(255,255,255,.6); font-size: var(--fs-2xs); }
.price-old { color: rgba(255,255,255,.5); font-size: var(--fs-base); text-decoration: line-through; }
.price-new { color: var(--butter); font-size: var(--fs-2xl); font-weight: 900; letter-spacing: -.02em; }

.wear-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 34px;
  padding: 16px 20px;
  color: #f6e6b6;
  border: 1px solid rgba(241,215,124,.35);
  border-radius: 14px;
  background: rgba(241,215,124,.1);
  font-size: var(--fs-sm);
  line-height: 1.75;
}
.wear-badge i { display: block; flex-shrink: 0; color: var(--butter); }
.wear-badge svg { width: 24px; height: 24px; }

.feature-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 34px; }
.feature-card { padding: 22px 20px; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: rgba(255,255,255,.06); }
.feature-card i { display: block; margin-bottom: 12px; color: var(--butter); }
.feature-card svg { width: 24px; height: 24px; }
.feature-card h3 { margin: 0 0 6px; font-size: var(--fs-md); font-weight: 800; }
.feature-card p { margin: 0; color: rgba(255,255,255,.66); font-size: var(--fs-2xs); line-height: 1.7; }

.product-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.contact-label { margin: 34px 0 12px; color: rgba(255,255,255,.6); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .1em; }
.product-contact { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.product-contact a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  transition: background .25s ease;
}
.product-contact a:hover { background: rgba(255,255,255,.12); }
.product-contact i { display: block; flex-shrink: 0; color: var(--butter); }
.product-contact svg { width: 24px; height: 24px; }
.product-contact strong { font-size: var(--fs-base); }


@media (max-width: 1040px) {
  .home-product::before { width: 128px; height: 128px; top: 30px; }
  .feature-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .home-product::before { display: none; }
  .feature-strip { grid-template-columns: 1fr; }
  .product-contact { grid-template-columns: 1fr; }
  .product-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .step-card, .browse-card, .product-contact a { transition: none; }
}