/* ═══════════════════════════════════════════
   芝宇園藝 ZHIYU BOTANICAL
   ═══════════════════════════════════════════ */

:root{
  --paper:      #FAF8F3;
  --paper-2:    #F2EEE4;
  --ink:        #1A211B;
  --ink-60:     #5A6459;
  --ink-40:     #8A9188;
  --moss:       #2C4531;
  --moss-dark:  #1E3123;
  --sage:       #7E9B80;
  --sage-pale:  #C9D6C6;
  --gold:       #B08D57;
  --line:       rgba(26,33,27,.13);

  --serif: "Noto Serif TC", "Songti TC", "SimSun", serif;
  --latin: "Cormorant Garamond", "Noto Serif TC", serif;

  --shell: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:300;
  line-height:1.85;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* 紙質微噪點 */
body::before{
  content:"";
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
h1,h2,h3{ font-weight:400; letter-spacing:.06em; margin:0; line-height:1.35 }
p{ margin:0 }
.svg-defs{ position:absolute; width:0; height:0 }

.skip{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--moss); color:var(--paper); padding:12px 20px;
}
.skip:focus{ left:12px; top:12px }

::selection{ background:var(--sage-pale); color:var(--moss-dark) }

/* ─── 通用排版元件 ─── */
.eyebrow{
  font-family:var(--latin);
  font-size:.78rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.1rem;
}
.lede{ font-size:clamp(1rem,1.35vw,1.12rem); color:var(--ink-60); max-width:46ch }
.thin{ font-weight:200; color:var(--ink-40) }
em{ font-family:var(--latin); font-style:italic; font-weight:300 }

/* ─── 按鈕 ─── */
.btn{
  --bg:var(--moss); --fg:var(--paper);
  display:inline-flex; align-items:center; gap:.6em;
  padding:.95em 2.1em;
  background:var(--bg); color:var(--fg);
  font-size:.92rem; letter-spacing:.14em;
  border:1px solid var(--bg); border-radius:2px;
  transition:background .45s var(--ease), color .45s var(--ease),
             border-color .45s var(--ease), transform .45s var(--ease);
}
.btn:hover{ background:transparent; color:var(--moss); transform:translateY(-2px) }
.btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--line) }
.btn--ghost:hover{ background:var(--moss); color:var(--paper); border-color:var(--moss) }
.btn--light{ --bg:var(--paper); --fg:var(--moss-dark) }
.btn--light:hover{ background:transparent; color:var(--paper); border-color:rgba(250,248,243,.5) }
.btn--outline{ --bg:transparent; --fg:rgba(250,248,243,.9); border-color:rgba(250,248,243,.3) }
.btn--outline:hover{ background:var(--paper); color:var(--moss-dark); border-color:var(--paper) }
.btn--sm{ padding:.7em 1.5em; font-size:.82rem }

/* ═════════ 佔位圖 ═════════ */
.ph{
  position:relative; overflow:hidden;
  background:var(--paper-2);
  color:var(--sage);
  display:grid; place-items:center;
}
.ph::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(126,155,128,.16) 0 1.5px, transparent 1.6px),
    radial-gradient(circle at 70% 70%, rgba(126,155,128,.12) 0 1.5px, transparent 1.6px),
    linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 45%);
  background-size:26px 26px, 26px 26px, 100% 100%;
}
.ph::after{
  content:attr(data-label);
  position:relative; z-index:1;
  max-width:min(80%, 30ch);
  padding:1.1em 1.4em;
  font-size:.74rem; line-height:1.7; letter-spacing:.1em;
  text-align:center; color:var(--ink-40);
  border:1px dashed rgba(126,155,128,.5);
  background:rgba(250,248,243,.72);
  backdrop-filter:blur(2px);
}
/* 主視覺佔位提示置頂,避免與標題重疊 */
.ph--hero{ align-content:start }
.ph--hero::after{
  position:absolute; top:clamp(88px,14vh,150px); left:50%;
  transform:translateX(-50%);
  font-size:.78rem; max-width:min(88%, 40ch);
}
.ph--16x9{ aspect-ratio:16/9 }
.ph--4x5{ aspect-ratio:4/5 }
.ph--3x4{ aspect-ratio:3/4 }
.ph--1x1{ aspect-ratio:1/1 }
.media-img{
  width:100%; height:auto;
  object-fit:cover;
  background:var(--paper-2);
}

/* ═════════ 導覽 ═════════ */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
  padding:.6rem 0;
}
.nav.is-stuck{
  background:rgba(250,248,243,.9);
  backdrop-filter:blur(14px) saturate(120%);
  box-shadow:0 1px 0 var(--line);
}
.nav__inner{
  max-width:var(--shell); margin:0 auto; padding:0 var(--pad);
  display:flex; align-items:center; gap:2rem;
}
.brand{ display:flex; align-items:center; gap:.75rem; margin-right:auto }
.brand__mark{
  width:42px; height:42px; flex:none;
  display:grid; place-items:center;
  background:var(--moss); color:var(--paper);
  font-size:1.24rem; letter-spacing:0;
  border-radius:2px;
}
.brand__text b{ display:block; font-weight:500; font-size:1.06rem; letter-spacing:.16em }
.brand__text i{
  display:block; font-family:var(--latin); font-style:normal;
  font-size:.6rem; letter-spacing:.3em; color:var(--ink-40); margin-top:.1em;
}
.nav__links{ display:flex; gap:2rem }
.nav__links a{
  position:relative; font-size:.92rem; letter-spacing:.12em; color:var(--ink-60);
  transition:color .35s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background:var(--moss); transition:width .45s var(--ease);
}
.nav__links a:hover{ color:var(--ink) }
.nav__links a:hover::after{ width:100% }

.burger{
  display:none; width:44px; height:44px; padding:0;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:6px;
}
.burger span{
  display:block; width:22px; height:1px; background:var(--ink);
  transition:transform .4s var(--ease), opacity .3s;
}
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg) }

.drawer{
  position:fixed; inset:64px 0 auto; z-index:99;
  background:rgba(250,248,243,.98); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  display:flex; flex-direction:column;
}
.drawer[hidden]{ display:none }
.drawer a{
  padding:1.05rem var(--pad); font-size:1rem; letter-spacing:.14em;
  border-top:1px solid var(--line);
}

/* ═════════ 主視覺 ═════════ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden }
.hero__media{ position:absolute; inset:0 }
.hero__media .ph{ height:100% }
.hero__img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(250,248,243,.97) 0%, rgba(250,248,243,.82) 34%, rgba(250,248,243,.25) 68%, rgba(250,248,243,.5) 100%);
}
.hero__body{
  position:relative; z-index:2;
  width:100%; max-width:var(--shell); margin:0 auto;
  padding:0 var(--pad) clamp(96px,14vh,180px);
}
.hero h1{
  font-size:clamp(2.6rem, 7.2vw, 5.4rem);
  font-weight:300; line-height:1.18; letter-spacing:.05em;
  margin-bottom:1.6rem;
}
.hero h1 em{ color:var(--moss); font-size:.94em }
.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem }

.hero__ticker{
  position:absolute; bottom:0; left:0; right:0; z-index:3;
  border-top:1px solid var(--line);
  background:rgba(250,248,243,.6); backdrop-filter:blur(6px);
  overflow:hidden; padding:.85rem 0;
}
.ticker__track{
  display:flex; gap:1.6rem; width:max-content;
  animation:slide 46s linear infinite;
  font-size:.8rem; letter-spacing:.28em; color:var(--ink-40);
}
.ticker__track i{ color:var(--sage); font-style:normal }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ═════════ 數字 ═════════ */
.stats{ border-bottom:1px solid var(--line); background:var(--paper) }
.stats__grid{
  max-width:var(--shell); margin:0 auto; padding:clamp(40px,5vw,64px) var(--pad);
  list-style:none;
  display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem;
  text-align:center;
}
.stats__grid li + li{ border-left:1px solid var(--line) }
.stats__grid b{
  display:block; font-family:var(--latin);
  font-size:clamp(1.6rem,2.6vw,2.3rem); font-weight:400;
  color:var(--moss); letter-spacing:.02em; line-height:1.2;
}
.stats__grid b i{ font-style:normal; color:var(--gold); font-size:.7em }
.stats__grid span{ font-size:.8rem; letter-spacing:.18em; color:var(--ink-40) }

/* ═════════ 區塊骨架 ═════════ */
.section{ padding:clamp(80px,11vw,160px) 0 }
.section--tint{ background:var(--paper-2) }
.sec-head, .cards, .usage, .split, .faq, .sec-foot{
  max-width:var(--shell); margin:0 auto; padding:0 var(--pad);
}
.sec-head{ margin-bottom:clamp(48px,6vw,80px); max-width:calc(var(--shell) * .78) }
.sec-head h2{ font-size:clamp(1.9rem,4.2vw,3rem) }
.sec-head__note{ margin-top:1.4rem; color:var(--ink-60); max-width:52ch; font-size:.98rem }
.sec-foot{
  margin-top:clamp(40px,5vw,64px);
  font-size:.94rem; color:var(--ink-40); letter-spacing:.1em;
}
.sec-foot a{ color:var(--moss); border-bottom:1px solid var(--sage-pale); padding-bottom:2px }
.sec-foot a:hover{ border-color:var(--moss) }

/* ═════════ 商品卡 ═════════ */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,40px) }
.card--wide{ grid-column:span 3; display:grid; grid-template-columns:1.35fr 1fr; gap:0; background:#fff }
.card--wide .card__body{ padding:clamp(32px,4vw,56px); align-self:center }
.card--wide h3{ font-size:clamp(1.5rem,2.4vw,2rem) }

.card{ background:#fff; border:1px solid var(--line); overflow:hidden }
.card__media{ position:relative; overflow:hidden }
.card__media :is(.ph,.media-img){ transition:transform 1.1s var(--ease) }
.card:hover .card__media :is(.ph,.media-img){ transform:scale(1.04) }
.card__body{ padding:1.7rem 1.6rem 1.9rem }
.card__kicker{
  font-family:var(--latin); font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-40); margin-bottom:.55rem;
}
.card h3{ font-size:1.24rem; font-weight:500; margin-bottom:.8rem }
.card__desc{ font-size:.9rem; color:var(--ink-60); line-height:1.9 }
.card__meta{
  list-style:none; padding:0; margin:1.2rem 0 0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.card__meta li{
  font-size:.72rem; letter-spacing:.14em; color:var(--ink-60);
  border:1px solid var(--line); padding:.35em .85em; border-radius:2px;
}
.price{
  margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--line);
  font-family:var(--latin); font-size:1.5rem; color:var(--moss); letter-spacing:.02em;
}
.price span{
  font-family:var(--serif); font-size:.76rem; letter-spacing:.12em;
  color:var(--ink-40); margin-left:.7em;
}
.tag{
  position:absolute; top:1rem; left:1rem; z-index:2;
  font-size:.68rem; letter-spacing:.16em;
  background:rgba(250,248,243,.94); color:var(--moss);
  padding:.4em .9em; border-radius:2px;
}
.tag--hot{ background:var(--moss); color:var(--paper) }

/* ═════════ 應用場景 ═════════ */
.usage{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,40px) }
.usage__item h3{
  display:flex; align-items:baseline; gap:.7rem;
  font-size:1.14rem; font-weight:500; margin:1.5rem 0 .7rem;
}
.usage__item h3 span{
  font-family:var(--latin); font-size:.8rem; letter-spacing:.1em; color:var(--gold);
}
.usage__item p{ font-size:.88rem; color:var(--ink-60); line-height:1.9 }
.usage__item :is(.ph,.media-img){ transition:transform 1.1s var(--ease) }
.usage__item:hover :is(.ph,.media-img){ transform:translateY(-6px) }

/* ═════════ 買家口碑 ═════════ */
.reviews{
  background:var(--moss-dark);
  color:var(--paper);
}
.reviews__inner{
  max-width:var(--shell); margin:0 auto; padding:0 var(--pad);
}
.reviews__head{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(40px,7vw,110px); align-items:end;
  padding-bottom:clamp(36px,5vw,64px);
}
.reviews .eyebrow{ color:var(--sage-pale) }
.reviews__head h2{
  max-width:12ch;
  font-size:clamp(1.9rem,4.2vw,3.1rem);
}
.reviews__intro{
  max-width:44ch; margin-top:1.4rem;
  color:rgba(250,248,243,.62); font-size:.96rem;
}
.reviews__score{
  min-width:190px; padding-left:clamp(28px,4vw,56px);
  border-left:1px solid rgba(250,248,243,.18);
}
.reviews__score strong{
  display:block; font-family:var(--latin);
  font-size:clamp(3.4rem,6vw,5.6rem); font-weight:300; line-height:.8;
}
.reviews__score span{
  display:block; margin-top:1.2rem;
  color:var(--gold); letter-spacing:.18em; font-size:.9rem;
}
.reviews__score small{
  display:block; margin-top:.6rem;
  color:rgba(250,248,243,.52); letter-spacing:.12em;
}
.reviews__facts{
  list-style:none; padding:1.6rem 0; margin:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(250,248,243,.16);
  border-bottom:1px solid rgba(250,248,243,.16);
}
.reviews__facts li{ padding:0 clamp(18px,3vw,38px); border-left:1px solid rgba(250,248,243,.12) }
.reviews__facts li:first-child{ padding-left:0; border-left:0 }
.reviews__facts b{
  display:block; font-family:var(--latin);
  font-size:clamp(1.4rem,2.6vw,2rem); font-weight:400;
}
.reviews__facts em{ color:var(--gold); font-size:.6em; font-style:normal }
.reviews__facts span{
  display:block; margin-top:.35rem;
  color:rgba(250,248,243,.52); font-size:.76rem; letter-spacing:.1em;
}
.reviews__feature{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
  gap:clamp(44px,7vw,100px); align-items:center;
  padding:clamp(56px,8vw,110px) 0;
}
.reviews__gallery{
  display:grid; grid-template-columns:1.35fr .8fr;
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:12px; height:clamp(430px,48vw,640px);
}
.reviews__photo{ position:relative; overflow:hidden; margin:0; min-height:0 }
.reviews__photo--main{ grid-row:1/-1 }
.reviews__photo img{ width:100%; height:100%; object-fit:cover }
.reviews__photo figcaption{
  position:absolute; left:1rem; bottom:1rem;
  padding:.55em .9em; background:rgba(29,52,36,.82);
  font-size:.68rem; letter-spacing:.14em; color:var(--paper);
}
.reviews__quote-mark{
  font-family:var(--serif); color:var(--gold);
  font-size:5rem; line-height:.5;
}
.reviews__quote blockquote{
  margin:1.7rem 0 0;
  font-size:clamp(1.35rem,2.7vw,2.05rem);
  line-height:1.8; font-weight:300;
}
.reviews__quote footer{
  display:flex; align-items:center; flex-wrap:wrap; gap:.7rem 1rem;
  margin-top:2rem; color:rgba(250,248,243,.58); font-size:.84rem;
}
.reviews__quote footer b{
  padding-left:1rem; border-left:1px solid rgba(250,248,243,.22);
  color:var(--sage-pale); font-weight:400; letter-spacing:.08em;
}
.reviews__keywords{
  list-style:none; padding:0; margin:1.6rem 0 0;
  display:flex; flex-wrap:wrap; gap:.55rem;
}
.reviews__keywords li{
  padding:.45em .85em;
  border:1px solid rgba(250,248,243,.2);
  color:rgba(250,248,243,.68); font-size:.72rem; letter-spacing:.1em;
}
.reviews__list{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(250,248,243,.16);
}
.reviews__list article{
  padding:clamp(30px,4vw,48px);
  border-left:1px solid rgba(250,248,243,.12);
}
.reviews__list article:first-child{ padding-left:0; border-left:0 }
.reviews__list article > span{
  font-family:var(--latin); color:var(--gold); font-size:.75rem; letter-spacing:.12em;
}
.reviews__list blockquote{
  margin:1.1rem 0 0; color:rgba(250,248,243,.82);
  font-size:.98rem; line-height:2;
}
.reviews__list footer{
  margin-top:1.2rem; color:rgba(250,248,243,.4);
  font-size:.72rem; letter-spacing:.1em;
}
.reviews__source{
  padding-top:1.4rem; border-top:1px solid rgba(250,248,243,.16);
  color:rgba(250,248,243,.36); font-size:.7rem; letter-spacing:.08em;
}

/* ═════════ 左右分欄 ═════════ */
.split{ display:grid; grid-template-columns:.9fr 1fr; gap:clamp(40px,6vw,90px); align-items:center }
.split--rev .split__media{ order:2 }
.split__media{ position:relative }
.stamp{
  position:absolute; right:-18px; bottom:-18px;
  width:112px; height:112px; border-radius:50%;
  background:var(--moss); color:var(--paper);
  display:grid; place-content:center; text-align:center;
  letter-spacing:.14em; line-height:1.5;
}
.stamp b{ font-weight:400; font-size:1.02rem; display:block }
.stamp i{ font-style:normal; font-size:1.02rem; color:var(--sage-pale) }
.split__body h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); margin-bottom:1.5rem }
.split__body > p + p{ margin-top:1.2rem }
.split__body > p{ color:var(--ink-60); font-size:.98rem }

.steps{ list-style:none; margin:2.6rem 0 0; padding:0 }
.steps li{ display:flex; gap:1.6rem; padding:1.5rem 0; border-top:1px solid var(--line) }
.steps b{
  font-family:var(--latin); font-size:1.05rem; font-weight:400;
  color:var(--gold); flex:none; padding-top:.15em;
}
.steps h3{ font-size:1.06rem; font-weight:500; margin-bottom:.4rem }
.steps p{ font-size:.9rem; color:var(--ink-60); line-height:1.9 }

.badges{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2.2rem }
.badges span{
  font-size:.76rem; letter-spacing:.16em; color:var(--moss);
  border:1px solid var(--sage-pale); padding:.45em 1em; border-radius:2px;
}

/* ═════════ 引言 ═════════ */
.quote{ background:var(--moss-dark); color:var(--paper); padding:clamp(80px,10vw,140px) var(--pad) }
.quote blockquote{ max-width:900px; margin:0 auto; text-align:center }
.quote p{
  font-size:clamp(1.3rem,3vw,2.1rem); font-weight:300;
  line-height:1.7; letter-spacing:.06em;
}
.quote cite{
  display:block; margin-top:2.2rem; font-style:normal;
  font-size:.8rem; letter-spacing:.24em; color:var(--sage);
}

/* ═════════ FAQ ═════════ */
.faq{ max-width:920px }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
  list-style:none; cursor:pointer;
  padding:1.6rem 3rem 1.6rem 0; position:relative;
  font-size:1.04rem; letter-spacing:.08em;
  transition:color .35s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color:var(--moss) }
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:50%;
  width:11px; height:11px; margin-top:-6px;
  border-right:1px solid var(--ink-40); border-bottom:1px solid var(--ink-40);
  transform:rotate(45deg); transform-origin:center;
  transition:transform .4s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg) }
.faq details > div{ overflow:hidden }
.faq details p{
  padding:0 3rem 1.9rem 0; font-size:.94rem; color:var(--ink-60); line-height:2;
  max-width:62ch;
}

/* ═════════ CTA ═════════ */
.cta{ background:var(--moss); color:var(--paper); padding:clamp(80px,11vw,150px) var(--pad) }
.cta__inner{ max-width:var(--shell); margin:0 auto }
.cta .eyebrow{ color:var(--sage-pale) }
.cta h2{ font-size:clamp(1.9rem,4.4vw,3.2rem); margin-bottom:1.5rem }
.cta .lede{ color:rgba(250,248,243,.72) }
.cta__btns{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.6rem }
.cta__info{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2rem;
  margin:clamp(56px,7vw,88px) 0 0; padding-top:2.4rem;
  border-top:1px solid rgba(250,248,243,.18);
}
.cta__info dt{ font-size:.72rem; letter-spacing:.24em; color:var(--sage-pale); margin-bottom:.6rem }
.cta__info dd{ margin:0; font-size:.94rem; color:rgba(250,248,243,.9) }

/* ═════════ 頁尾 ═════════ */
.footer{ background:var(--moss-dark); color:rgba(250,248,243,.7); padding:clamp(48px,6vw,72px) var(--pad) }
.footer__inner{
  max-width:var(--shell); margin:0 auto;
  display:grid; grid-template-columns:auto 1fr; gap:2rem 3rem; align-items:center;
}
.footer__brand{ display:flex; align-items:center; gap:1rem }
.footer__brand .brand__mark{ background:var(--sage); color:var(--moss-dark) }
.footer__brand b{ font-weight:500; letter-spacing:.16em; color:var(--paper) }
.footer__brand i{ font-family:var(--latin); font-style:normal; font-size:.62rem; letter-spacing:.24em }
.footer__nav{ display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:flex-end }
.footer__nav a{ font-size:.85rem; letter-spacing:.12em; transition:color .35s var(--ease) }
.footer__nav a:hover{ color:var(--paper) }
.footer__copy{
  grid-column:1/-1; padding-top:1.8rem; border-top:1px solid rgba(250,248,243,.13);
  font-size:.75rem; letter-spacing:.16em; color:rgba(250,248,243,.45);
}

/* ═════════ 進場動畫 ═════════ */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .95s var(--ease) var(--d,0s), transform .95s var(--ease) var(--d,0s);
}
.reveal.is-in{ opacity:1; transform:none }

/* ═════════ 響應式 ═════════ */
@media (max-width:1080px){
  .nav__links{ display:none }
  .burger{ display:flex }
  .cards{ grid-template-columns:repeat(2,1fr) }
  .card--wide{ grid-column:span 2; grid-template-columns:1fr }
  .usage{ grid-template-columns:repeat(2,1fr) }
  .reviews__feature{ grid-template-columns:1fr; }
  .reviews__gallery{ height:clamp(420px,70vw,620px) }
  .stats__grid{ grid-template-columns:repeat(3,1fr); gap:2rem 1rem }
  .stats__grid li:nth-child(4){ border-left:0 }
  .cta__info{ grid-template-columns:repeat(2,1fr) }
}

@media (max-width:760px){
  body{ line-height:1.8 }
  .nav .btn--sm{ display:none }
  .hero{ min-height:92svh }
  .hero__body{ padding-bottom:clamp(110px,18vh,160px) }
  .cards{ grid-template-columns:1fr }
  .card--wide{ grid-column:span 1 }
  .usage{ grid-template-columns:1fr; gap:2.6rem }
  .reviews__head{ grid-template-columns:1fr; align-items:start }
  .reviews__score{
    display:grid; grid-template-columns:auto 1fr; column-gap:1.2rem; align-items:center;
    min-width:0; padding:1.5rem 0 0; border-left:0; border-top:1px solid rgba(250,248,243,.16);
  }
  .reviews__score strong{ grid-row:span 2 }
  .reviews__score span,.reviews__score small{ margin-top:0 }
  .reviews__facts{ grid-template-columns:repeat(2,1fr); gap:1.5rem 0 }
  .reviews__facts li:nth-child(3){ padding-left:0; border-left:0 }
  .reviews__gallery{
    height:auto; grid-template-columns:1fr 1fr;
    grid-template-rows:280px 140px;
  }
  .reviews__photo--main{ grid-column:1/-1; grid-row:auto }
  .reviews__list{ grid-template-columns:1fr }
  .reviews__list article{ padding:1.8rem 0; border-left:0; border-top:1px solid rgba(250,248,243,.12) }
  .reviews__list article:first-child{ border-top:0 }
  .split, .split--rev .split__media{ grid-template-columns:1fr; order:0 }
  .split{ gap:2.6rem }
  .stats__grid{ grid-template-columns:repeat(2,1fr) }
  .stats__grid li{ border-left:0 !important }
  .stats__grid li:last-child{ grid-column:span 2 }
  .cta__info{ grid-template-columns:1fr; gap:1.6rem }
  .footer__inner{ grid-template-columns:1fr }
  .footer__nav{ justify-content:flex-start }
  .stamp{ width:88px; height:88px; right:-8px; bottom:-8px }
  .stamp b,.stamp i{ font-size:.86rem }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .reveal{ opacity:1; transform:none; transition:none }
  .ticker__track{ animation:none }
  *{ transition-duration:.01ms !important }
}