:root{
  --bg:#f8f9f2; --fg:#3f5974; --muted:#545454; --brand:#baafb7; --brand-2:#3f5974;
  --container:1120px; --radius:16px;
  --h1:clamp(28px,5vw,56px); --h2:clamp(22px,3.5vw,36px); --h3:clamp(18px,2.4vw,24px); --lead:1.12rem;
  --space-1:8px; --space-2:14px; --space-3:22px; --space-4:36px; --space-5:20px;
}
*{box-sizing:border-box} html,body{height:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;line-height:1.7}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(100% - 32px, var(--container));margin-inline:auto}
.narrow{width:min(100% - 32px, 840px);margin-inline:auto}
.section{padding:var(--space-3) 0}
.site-header{position:sticky;top:0;z-index:100;background:#baafb7; border-bottom:1px solid rgba(63,89,116,.15)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;min-height:66px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700}
.brand__dot{width:10px;height:10px;border-radius:50%;background:var(--brand);display:inline-block}
.nav-toggle{display:none;background:none;border:none;font-size:24px}
.site-nav{display:flex;gap:22px}
.site-nav a{padding:10px 0;position:relative}
.site-nav a[aria-current="page"]{color:var(--brand);font-weight:800}
.site-nav a:after{content:'';position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.site-nav a:hover:after{transform:scaleX(1)}
@media (max-width:860px){.nav-toggle{display:inline-block}.site-nav{display:none;position:absolute;top:66px;right:16px;background:var(--bg);border:1px solid #eee;border-radius:12px;padding:10px 14px;flex-direction:column}.site-nav[data-open=true]{display:flex}}
h1{font-size:var(--h1);line-height:1.1;margin:0 0 var(--space-3)}
h2{font-size:var(--h2);line-height:1.2;margin:0 0 var(--space-3)}
h3{font-size:var(--h3);margin:var(--space-2) 0 var(--space-1)}
.lead{font-size:var(--lead);color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:1000px;border:1px solid transparent;font-weight:700;cursor:pointer}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{filter:brightness(1.06)}
.btn--ghost{background:transparent;border-color:var(--brand);color:var(--brand)}
.hero{padding-top:calc(var(--space-5) + 24px)}
.hero__grid{display:grid;gap:var(--space-4);grid-template-columns:1.05fr .95fr;align-items:center}
.hero__img{border-radius:var(--radius);box-shadow:0 10px 30px rgba(63,89,116,.15)}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr}}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.card{border:1px solid rgba(63,89,116,.15);border-radius:var(--radius);padding:var(--space-2);background:#fff;box-shadow:0 6px 16px rgba(63,89,116,.08)}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.slider{position:relative}
.slider__viewport{position:relative;overflow:hidden;border-radius:var(--radius)}
.slider__track{display:flex;transition:transform .4s ease}
.slider__slide{flex:0 0 100%;user-select:none}
.slider__arrow{position:absolute;top:50%;transform:translateY(-50%);border:none;width:40px;height:40px;border-radius:50%;background:rgba(186,175,183,.94);color:#fff;box-shadow:0 6px 12px rgba(63,89,116,.18);cursor:pointer;display:grid;place-items:center}
.slider__arrow[disabled]{opacity:.4;cursor:not-allowed}
.slider__arrow--prev{left:10px}.slider__arrow--next{right:10px}
.pager{display:flex;align-items:center;gap:10px}
.pager__btn{border:none;background:transparent;font-size:22px;cursor:pointer;padding:6px 10px;border-radius:8px}
.pager__btn:disabled{opacity:.4;cursor:not-allowed}
.toy-text{min-height:7lh}
.site-footer{padding:var(--space-4) 0;border-top:1px solid rgba(63,89,116,.15);text-align:center;color:var(--muted)}
.accent{background:linear-gradient(180deg,rgba(186,175,183,.08),transparent 70%)}
/* ==== Contact Section (match the screenshot) ==== */
:root{
  --contact-bg: #bfb4bd;           /* 淺灰紫底色 */
  --contact-label: #ffffff;         /* 標籤文字白色 */
  --contact-input-bg: #ffffff;      /* 輸入框白底 */
  --contact-input-text: #333;       /* 輸入框文字 */
  --contact-btn-bg: #3c4043;        /* 按鈕深灰 */
  --contact-btn-text: #ffffff;      /* 按鈕白字 */
  --contact-focus: 0 0 0 3px rgba(60,64,67,.25);
}

#contact { padding-top: 0; }

/* 外層卡片 */
.contact-pane{
  background: var(--contact-bg);
  border-radius: 40px;
  padding: 36px 32px 56px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 標題置中（沿用你原本的 .caption .center 亦可） */
#contact .caption.center{
  text-align: center;
  margin-bottom: 20px;
  color: #bfb4bd
}

/* 表單為單欄縱向排列 */
.contact-grid{
  display: grid;
  gap: 24px;
  width: 100%;
  margin: 0 auto;
}

/* 標籤 & 內距 */
.contact-grid label{
  display: grid;
  gap: 10px;
  font-size: 22px;                 /* 左側標籤字大 */
  color: var(--contact-label);
}

/* 輸入框樣式（白底、大圓角、高度厚實） */
.contact-grid input,
.contact-grid textarea{
  background: var(--contact-input-bg);
  color: var(--contact-input-text);
  border: none;
  border-radius: 14px;
  padding: 18px 20px;
  font-size: 20px;
  line-height: 1.4;
  outline: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05) inset;
}

.contact-grid textarea{
  min-height: 220px;               /* 近似截圖高度 */
  resize: vertical;
}

/* 焦點環 */
.contact-grid input:focus,
.contact-grid textarea:focus{
  box-shadow: var(--contact-focus);
}

/* 送出按鈕：置中、膠囊、放大字體 */
.contact-actions{
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.contact-actions .btn{
  background: var(--contact-btn-bg);
  color: var(--contact-btn-text);
  border: none;
  border-radius: 999px;             /* 膠囊 */
  font-size: 28px;                  /* 截圖般的大字 */
  padding: 14px 32px;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.contact-actions .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

.contact-actions .btn:active{
  transform: translateY(0);
  box-shadow: none;
}

/* 下方 email 文字（你已經有 .center + inline style，可補強一下） */
#contact .center{
  text-align: center;
  margin-top: 10px;
  color: #fff;
  font-size: 24px;                  /* 與截圖一致的大字 */
}

/* 手機調整：避免過大 */
@media (max-width: 640px){
  .contact-pane{ border-radius: 28px; padding: 28px 20px 44px; }
  .contact-grid label{ font-size: 18px; }
  .contact-grid input,
  .contact-grid textarea{ font-size: 18px; padding: 14px 16px; }
  .contact-actions .btn{ font-size: 22px; padding: 12px 24px; }
  #contact .center{ font-size: 18px; }
}
/* Toy Description 輪播 */
.toy-text p { display: none; }          /* 預設全部隱藏 */
.toy-text p.is-active { display: block; } /* 只有當前段落顯示 */

  /* Toy Description 文字置中 */
.toy-text {
  text-align: center;
}

.toy-text p {
  margin: 0 auto;
  max-width: 700px;   /* 讓段落不會太寬，排版更美觀 */
  line-height: 1.8;
}

/* 只縮小 Highlight 頁面的四個區塊間距 */
.page-highlight .section {
  padding: 20px 0; /* 原本 64px → 縮小一半 */
}

.site-header a { color:#fff; } /* 讓文字改成白色比較清楚 */

.page-highlight .slider__viewport {
  overflow: hidden;       /* 保持左右切換時遮擋 */
  border-radius: var(--radius);
}
.page-highlight .slider__slide img {
  width: 100%;
  height: 100%;
  max-height: 800px;      /* ⬅ 想更矮就改小一點，例如 360px */
  object-fit: cover;    /* 不裁切，若比例不合會留白 */
  display: block;
}