/*
Theme Name: 阿米珠宝 Apple 风
Theme URI: https://fyhjhs.com/
Author: 阿米珠宝
Description: 为阿米珠宝黄金回收定制的 Apple 风格主题，遵循苹果设计标准：分级字距、系统字体光学尺寸、毛玻璃材质、按压即反馈、弹簧缓动、无障碍降级。
Version: 2.0
*/

:root{
  --font: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --muted2: #86868b;
  --line: #d2d2d7;
  --bg: #ffffff;
  --bg2: #f5f5f7;
  --blue: #0071e3;
  --blue-h: #0077ed;
  --link: #06c;
  --radius: 18px;
  --radius-lg: 28px;
  --maxw: 1024px;
  /* 苹果风缓动：平滑收敛 & 轻微弹性 */
  --ease-smooth: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.32,.5,1);
  --shadow-soft: 0 4px 20px rgba(0,0,0,.06);
  --shadow-lift: 0 18px 48px rgba(0,0,0,.10);
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  font-size:17px; line-height:1.47; letter-spacing:-.003em;
  font-optical-sizing:auto; text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; height:auto; }

/* 分级字距/行高：字号越大字距越紧、行高越小 */
h1,h2,h3,h4{ font-weight:700; margin:0 0 .4em; font-optical-sizing:auto; }
h1{ line-height:1.06; letter-spacing:-.025em; }
h2{ line-height:1.1;  letter-spacing:-.02em; }
h3{ line-height:1.2;  letter-spacing:-.014em; }
small,.fineprint,.lab,.meta{ letter-spacing:0; }

:focus-visible{ outline:3px solid rgba(0,113,227,.5); outline-offset:3px; border-radius:6px; }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 22px; }

/* ===== 顶部导航（毛玻璃材质 + 滚动边缘渐隐） ===== */
.nav{
  position:sticky; top:0; z-index:9999;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid rgba(0,0,0,.10);
}
.nav-inner{ max-width:1100px; margin:0 auto; padding:0 22px; height:52px; display:flex; align-items:center; justify-content:space-between; }
.brand{ font-size:19px; font-weight:600; color:var(--ink); letter-spacing:-.015em; white-space:nowrap; transition:opacity .2s var(--ease-smooth); }
.brand:hover{ text-decoration:none; opacity:.7; }
.brand:active{ opacity:.5; }
.nav-menu{ list-style:none; display:flex; gap:30px; margin:0; padding:0; align-items:center; }
.nav-menu a{ color:var(--ink); font-size:14.5px; font-weight:400; opacity:.82; transition:opacity .18s var(--ease-smooth); }
.nav-menu a:hover{ opacity:1; text-decoration:none; }
.nav-menu a:active{ opacity:.55; }
.nav-cta{ display:inline-flex; align-items:center; gap:6px; background:var(--blue); color:#fff!important; padding:6px 15px; border-radius:980px; font-size:14px; font-weight:500; opacity:1!important; transition:transform .12s var(--ease-smooth), background .2s var(--ease-smooth); }
.nav-cta:hover{ background:var(--blue-h); text-decoration:none!important; }
.nav-cta:active{ transform:scale(.95); }
.nav-toggle{ display:none; background:none; border:0; font-size:22px; cursor:pointer; color:var(--ink); padding:6px; }

/* ===== 按钮：按下即反馈 ===== */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 24px; border-radius:980px; font-size:16px; font-weight:500; cursor:pointer; border:1px solid transparent; transition:transform .12s var(--ease-smooth), background .2s var(--ease-smooth), border-color .2s var(--ease-smooth); }
.btn:active{ transform:scale(.96); }
.btn-primary{ background:var(--blue); color:#fff!important; }
.btn-primary:hover{ background:var(--blue-h); text-decoration:none!important; }
.btn-ghost{ background:transparent; color:var(--blue)!important; }
.btn-ghost:hover{ text-decoration:underline!important; }
.btn-dark{ background:var(--ink); color:#fff!important; }
.btn-dark:hover{ background:#000; text-decoration:none!important; }
.btn-light{ background:#fff; color:var(--ink)!important; border:1px solid var(--line); }
.btn-light:hover{ border-color:#b0b0b5; text-decoration:none!important; }
.btn-row{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:26px; }

/* ===== Hero ===== */
.hero{ text-align:center; padding:92px 22px 78px; background:linear-gradient(180deg,#fbfbfd 0%,#f5f5f7 100%); }
.hero h1{ font-size:clamp(36px,6.2vw,60px); font-weight:700; letter-spacing:-.03em; line-height:1.04; }
.hero .sub{ font-size:clamp(19px,2.6vw,26px); color:var(--muted); font-weight:400; max-width:720px; margin:18px auto 0; line-height:1.36; letter-spacing:-.01em; }
.hero .eyebrow{ color:var(--blue); font-weight:600; font-size:19px; letter-spacing:-.01em; margin-bottom:10px; }
.hero .fineprint{ margin-top:22px; color:var(--muted2); font-size:14px; letter-spacing:0; }

/* ===== 通用板块 ===== */
.section{ padding:82px 0; }
.section.alt{ background:var(--bg2); }
.section-head{ text-align:center; max-width:760px; margin:0 auto 52px; }
.section-head h2{ font-size:clamp(28px,4.4vw,42px); letter-spacing:-.022em; }
.section-head p{ font-size:19px; color:var(--muted); margin:.5em 0 0; letter-spacing:-.008em; }

/* 特性卡片 */
.grid{ display:grid; gap:20px; grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; transition:transform .4s var(--ease-spring), box-shadow .4s var(--ease-smooth); }
.section.alt .card{ background:#fff; }
.card:hover{ box-shadow:var(--shadow-lift); transform:translateY(-4px); }
.card:active{ transform:translateY(-1px) scale(.995); }
/* emoji 放进圆角色块，更"有意为之" */
.card .ico{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:14px; background:linear-gradient(180deg,#f5f7fa,#eef1f5); font-size:26px; margin-bottom:16px; }
.card h3{ font-size:21px; margin:0 0 8px; letter-spacing:-.015em; }
.card p{ margin:0; color:var(--muted); font-size:15.5px; line-height:1.5; }
.card .more{ display:inline-block; margin-top:14px; color:var(--link); font-size:15px; font-weight:500; }
a.card, a.card:hover{ text-decoration:none; }
a.card:hover .more{ text-decoration:underline; }

/* 服务大卡 */
.svc{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.svc a.tile{ display:block; background:var(--bg2); border-radius:var(--radius-lg); padding:40px 32px; text-align:center; color:var(--ink); transition:transform .4s var(--ease-spring), box-shadow .4s var(--ease-smooth); }
.svc a.tile:hover{ text-decoration:none; box-shadow:var(--shadow-lift); transform:translateY(-5px); }
.svc a.tile:active{ transform:translateY(-1px) scale(.99); }
.svc .tile h3{ font-size:24px; letter-spacing:-.018em; }
.svc .tile p{ color:var(--muted); font-size:15.5px; margin:.4em 0 16px; }
.svc .tile .go{ color:var(--blue); font-weight:500; font-size:15px; }

/* 价格示例 */
.stat{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; text-align:center; }
.stat .item{ padding:20px; }
.stat .num{ font-size:clamp(32px,5vw,46px); font-weight:700; letter-spacing:-.03em; color:var(--ink); }
.stat .lab{ color:var(--muted); font-size:15px; margin-top:6px; }

/* CTA */
.cta{ text-align:center; padding:86px 22px; background:linear-gradient(180deg,#f5f5f7,#ededf0); }
.cta h2{ font-size:clamp(28px,4.5vw,40px); letter-spacing:-.022em; }
.cta .phone{ font-size:clamp(26px,5vw,40px); font-weight:700; color:var(--ink); letter-spacing:-.02em; margin:6px 0 4px; }
.cta .hours{ color:var(--muted); font-size:16px; }

/* ===== 文章/页面排版 ===== */
.page-hero{ text-align:center; padding:74px 22px 40px; background:linear-gradient(180deg,#fbfbfd,#f5f5f7); }
.page-hero h1{ font-size:clamp(30px,5vw,48px); letter-spacing:-.025em; }
.prose{ max-width:720px; margin:0 auto; padding:54px 22px 20px; font-size:18px; line-height:1.7; }
.prose h1{ font-size:clamp(28px,5vw,40px); letter-spacing:-.025em; margin-top:0; }
.prose h2{ font-size:26px; letter-spacing:-.018em; margin:1.7em 0 .5em; }
.prose h3{ font-size:20px; margin:1.4em 0 .4em; }
.prose p{ color:#333; margin:0 0 1.1em; }
.prose ul,.prose ol{ color:#333; padding-left:1.25em; margin:0 0 1.2em; }
.prose li{ margin:.45em 0; }
.prose strong{ color:var(--ink); }
.prose h2:first-of-type{ margin-top:.2em; }

/* 门店实拍配图 */
.shopshot{ margin:2.2em 0; }
.shopshot img{ width:100%; display:block; border-radius:var(--radius); box-shadow:var(--shadow-soft); }
.shopshot figcaption{ text-align:center; color:var(--muted2); font-size:14px; margin-top:10px; letter-spacing:0; line-height:1.5; }

/* 首页门店实拍band */
.shopband{ display:grid; grid-template-columns:1.15fr 1fr; gap:20px; align-items:stretch; }
.shopband figure{ margin:0; }
.shopband img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); }
@media (max-width:900px){ .shopband{ grid-template-columns:1fr; } .shopband img{ height:auto; } }

/* 文章列表 */
.postlist{ max-width:820px; margin:0 auto; padding:48px 22px; display:grid; gap:18px; }
.post-item{ border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; transition:transform .4s var(--ease-spring), box-shadow .4s var(--ease-smooth); }
.post-item:hover{ box-shadow:var(--shadow-lift); transform:translateY(-3px); }
.post-item h2{ font-size:22px; letter-spacing:-.016em; margin:0 0 8px; }
.post-item h2 a{ color:var(--ink); }
.post-item .meta{ color:var(--muted2); font-size:14px; }
.post-item .excerpt{ color:var(--muted); font-size:15.5px; margin:10px 0 0; }

/* ===== 页脚 ===== */
.footer{ background:#f5f5f7; color:var(--muted); font-size:13.5px; border-top:1px solid var(--line); }
.footer-in{ max-width:var(--maxw); margin:0 auto; padding:44px 22px; }
.footer .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; margin-bottom:26px; }
.footer h4{ font-size:14px; color:var(--ink); margin:0 0 12px; letter-spacing:-.01em; }
.footer a{ color:var(--muted); display:block; margin:7px 0; transition:color .18s var(--ease-smooth); }
.footer a:hover{ color:var(--ink); text-decoration:none; }
.footer .store{ line-height:1.7; }
.footer .bar{ border-top:1px solid var(--line); padding-top:18px; color:var(--muted2); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* 悬浮拨号 */
.callfab{ position:fixed; right:18px; bottom:18px; z-index:9998; background:var(--blue); color:#fff!important; padding:14px 20px; border-radius:980px; font-weight:600; font-size:16px; box-shadow:0 8px 24px rgba(0,113,227,.4); display:none; transition:transform .14s var(--ease-smooth); }
.callfab:hover{ text-decoration:none; }
.callfab:active{ transform:scale(.94); }

/* ===== 入场揭示（克制、仅JS开启、reduced-motion自动关闭） ===== */
.reveal-on [data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease-smooth), transform .7s var(--ease-smooth); will-change:opacity,transform; }
.reveal-on [data-reveal].is-in{ opacity:1; transform:none; }

/* ===== 响应式 ===== */
@media (max-width:900px){
  .grid,.grid-2,.svc,.stat{ grid-template-columns:1fr; }
  .footer .cols{ grid-template-columns:1fr; }
}
@media (max-width:768px){
  .nav-toggle{ display:block; }
  .nav-menu{
    position:absolute; top:52px; left:0; right:0; flex-direction:column; gap:0;
    background:rgba(255,255,255,.94); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-bottom:.5px solid var(--line); padding:8px 0; display:none;
  }
  .nav-menu.open{ display:flex; }
  .nav-menu li{ width:100%; }
  .nav-menu a{ display:block; padding:13px 22px; font-size:16px; width:100%; }
  .nav-menu .nav-cta{ margin:10px 22px; justify-content:center; }
  .section{ padding:58px 0; }
  .hero{ padding:64px 22px 54px; }
  .callfab{ display:inline-block; }
}

/* ===== 无障碍：三信号降级 ===== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms!important; animation-duration:.01ms!important; }
  .card:hover,.svc a.tile:hover,.post-item:hover{ transform:none; }
  .reveal-on [data-reveal]{ opacity:1!important; transform:none!important; }
}
@media (prefers-reduced-transparency: reduce){
  .nav{ background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .nav-menu{ background:#fff; }
}
@media (prefers-contrast: more){
  :root{ --muted:#4a4a4f; --muted2:#5a5a60; --line:#8a8a90; }
  .nav{ background:#fff; backdrop-filter:none; border-bottom:1px solid #000; }
  .card,.post-item{ border-color:#8a8a90; }
}