/* =========================================================
   鲸末影像 · 前台样式表  |  style.css  v1.0
   =========================================================
   分区：
   01. 设计令牌（CSS 变量）
   02. 重置与基础
   03. 通用按钮 / 图标按钮
   04. 顶部栏（含滚动变色）
   05. Hero 首屏
   06. 瀑布流
   07. 关于
   08. 联系方式
   09. 页脚
   10. Tab 栏
   11. 全屏浏览器
   12. 分类弹层
   13. 微信弹层
   14. Toast / 回顶
   15. 响应式
   ========================================================= */

/* =========================================================
   01. 设计令牌
   ========================================================= */
:root{
  /* 色彩 */
  --ink:#1B2A3A;
  --ink-2:#0F1922;
  --ink-3:#080C12;
  --mist:#F5F3F0;
  --gold:#C8A96E;
  --gold-dk:#B08F52;
  --gold-lt:#E0C089;
  --white:#fff;

  /* 文本 */
  --t1:#1B2A3A;
  --t2:#5A6675;
  --t3:#93A0AE;
  --line:#E6E3DE;

  /* 圆角 */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:18px;
  --r-full:999px;

  /* 阴影 */
  --sh-1:0 2px 12px rgba(27,42,58,.07);
  --sh-2:0 10px 34px rgba(27,42,58,.16);
  --sh-3:0 -6px 30px rgba(27,42,58,.12);

  /* 尺寸 */
  --topbar-h:54px;
  --tabbar-h:56px;
  --gallery-gap:8px;
  --gallery-padding:8px;

  /* 缓动 */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:.18s;
  --dur:.28s;
  --dur-slow:.42s;

  /* 安全区 */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);

  /* 字体 */
  --font-serif:"Noto Serif SC","Songti SC","STSong",Georgia,serif;
  --font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Roboto,sans-serif;
}

/* =========================================================
   02. 重置与基础
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--topbar-h) + var(--safe-t) + 24px);
}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.6;
  color:var(--t1);
  background:var(--mist);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden;}
img{max-width:100%;display:block;border:0;}
button{
  font:inherit;color:inherit;border:0;background:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;padding:0;
}
input,select,textarea{font:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,p,ul,ol{margin:0;}
ul,ol{padding:0;list-style:none;}
svg{width:100%;height:100%;display:block;}
svg path,svg rect,svg circle{fill:none;stroke:currentColor;stroke-width:1.8;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px;}

/* =========================================================
   03. 通用按钮 / 图标按钮
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:46px;padding:0 22px;
  font-size:15px;font-weight:600;letter-spacing:.02em;
  border-radius:var(--r-full);
  transition:transform var(--dur-fast) var(--ease),
             background .2s,
             box-shadow .2s,
             opacity .2s;
  white-space:nowrap;
}
.btn:active{transform:scale(.965);}
.btn-gold{
  background:var(--gold);color:#241B0B;
  box-shadow:0 6px 18px rgba(200,169,110,.34);
}
.btn-gold:hover{background:var(--gold-dk);}
.btn-ghost{
  background:rgba(255,255,255,.1);color:#fff;
  border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.btn-ghost:hover{background:rgba(255,255,255,.2);}
.btn-sm{min-height:38px;padding:0 16px;font-size:13.5px;}

.icon-btn{
  width:36px;height:36px;padding:9px;border-radius:50%;
  border:1px solid currentColor;opacity:.92;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s,opacity .2s,transform var(--dur-fast) var(--ease);
}
.icon-btn svg{width:18px;height:18px;}
.icon-btn:active{transform:scale(.9);}
.topbar.is-solid .icon-btn:hover{background:var(--ink);color:#fff;}

/* =========================================================
   04. 顶部栏
   ========================================================= */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:90;
  height:calc(var(--topbar-h) + var(--safe-t));
  padding:var(--safe-t) calc(16px + var(--safe-r)) 0 calc(16px + var(--safe-l));
  display:flex;align-items:center;justify-content:space-between;
  color:#fff;
  background:transparent;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease);
}
.topbar.is-solid{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  color:var(--ink);
  box-shadow:0 1px 0 rgba(27,42,58,.07);
}
.topbar-left{display:flex;align-items:center;gap:36px;min-width:0;}

/* 品牌名（无 SVG） */
.brand{
  display:flex;align-items:center;
  flex:none;
}
.brand-text{
  font-family:var(--font-serif);
  font-size:17px;font-weight:700;
  letter-spacing:.14em;
  transition:color .3s var(--ease);
  white-space:nowrap;
}
/* 滚动到白底时，文字变深色 */
.topbar.is-solid .brand-text{color:var(--ink);}

/* 顶部导航 */
.topnav{display:none;align-items:center;gap:30px;}
.topnav a,.topnav button{
  font-size:14px;font-weight:500;letter-spacing:.05em;
  opacity:.86;padding:6px 2px;position:relative;
  transition:opacity .2s,color .3s var(--ease);
}
.topnav a:hover,.topnav button:hover{opacity:1;}
.topnav a::after,.topnav button::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:currentColor;border-radius:2px;
  transform:scaleX(0);transform-origin:center;
  transition:transform var(--dur) var(--ease);
}
.topnav a:hover::after,.topnav button:hover::after{transform:scaleX(1);}
.topbar-cta{display:flex;align-items:center;gap:8px;}

/* =========================================================
   05. Hero 首屏
   ========================================================= */
.hero{
  position:relative;
  height:100vh;height:100svh;
  min-height:520px;
  overflow:hidden;
  background:var(--ink-3);
}
.hero-media{position:absolute;inset:0;}
.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:center 30%;
  transform:scale(1.06);
  animation:heroIn 1.6s var(--ease-out) forwards;
}
@keyframes heroIn{to{transform:scale(1);}}
.hero-veil{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(10,15,22,.5) 0%,
    rgba(10,15,22,.12) 32%,
    rgba(10,15,22,.62) 78%,
    rgba(10,15,22,.86) 100%);
}
.hero-content{
  position:absolute;left:0;right:0;bottom:0;
  padding:0 calc(24px + var(--safe-r)) calc(88px + var(--safe-b)) calc(24px + var(--safe-l));
  color:#fff;
  animation:riseIn .9s .25s var(--ease-out) both;
}
@keyframes riseIn{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}
.hero-eyebrow{
  font-size:10.5px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:14px;
}
.hero-title{
  font-family:var(--font-serif);
  font-size:clamp(32px,9.2vw,46px);
  font-weight:700;line-height:1.22;letter-spacing:.03em;
  margin-bottom:14px;
}
.hero-title em{
  font-style:normal;
  background:linear-gradient(100deg,var(--gold) 10%,#F0DDB6 55%,var(--gold) 90%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-sub{
  font-size:13px;color:rgba(255,255,255,.74);
  letter-spacing:.06em;margin-bottom:26px;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;}
.hero-actions .btn{flex:1 1 auto;min-width:132px;}
.hero-scroll{
  position:absolute;left:50%;bottom:calc(24px + var(--safe-b));
  transform:translateX(-50%);
  width:22px;height:34px;
  border:1.5px solid rgba(255,255,255,.42);
  border-radius:12px;
}
.hero-scroll span{
  position:absolute;left:50%;top:7px;
  width:3px;height:7px;margin-left:-1.5px;border-radius:2px;
  background:var(--gold);
  animation:scrollDot 1.7s infinite var(--ease);
}
@keyframes scrollDot{
  0%{opacity:0;transform:translateY(0);}
  30%{opacity:1;}
  70%{opacity:1;transform:translateY(12px);}
  100%{opacity:0;transform:translateY(14px);}
}

/* =========================================================
   06. 瀑布流
   ========================================================= */
.gallery-wrap{padding:0 0 28px;max-width:1320px;margin:0 auto;}
.section-head{
  padding:30px calc(18px + var(--safe-r)) 16px calc(18px + var(--safe-l));
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.section-title{
  font-family:var(--font-serif);
  font-size:21px;font-weight:700;letter-spacing:.06em;
  position:relative;padding-left:14px;
}
.section-title::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:19px;border-radius:2px;background:var(--gold);
}
.section-desc{
  margin-top:7px;font-size:12.5px;color:var(--t3);letter-spacing:.04em;
}
.section-switch{
  display:inline-flex;align-items:center;gap:6px;
  height:36px;padding:0 14px;
  font-size:13px;font-weight:600;letter-spacing:.04em;
  color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:var(--r-full);
  transition:background .2s,border-color .2s,transform var(--dur-fast) var(--ease);
}
.section-switch svg{width:15px;height:15px;flex:none;}
.section-switch svg path{stroke-width:2;stroke:currentColor;}
.section-switch:active{transform:scale(.95);}
.section-switch:hover{background:#F7F6F4;border-color:#D8D3CB;}

.gallery{
  display:flex;align-items:flex-start;gap:var(--gallery-gap);
  padding:0 calc(var(--gallery-padding) + var(--safe-r))
           0 calc(var(--gallery-padding) + var(--safe-l));
}
.gallery-col{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;gap:var(--gallery-gap);
}

.card{
  position:relative;display:block;width:100%;min-width:0;
  border-radius:var(--r-md);overflow:hidden;background:#E4E1DC;
  box-shadow:var(--sh-1);cursor:pointer;
  transform:translateZ(0);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  animation:cardIn .55s var(--ease-out) both;
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(16px) scale(.98);}
  to{opacity:1;transform:none;}
}
.card:active{transform:scale(.977);}
@media (hover:hover){
  .card:hover{box-shadow:var(--sh-2);}
  .card:hover .card-img{transform:scale(1.045);}
  .card:hover .card-tag{
    background:rgba(200,169,110,.85);
    border-color:transparent;
  }
}
.card-media{
  position:relative;width:100%;overflow:hidden;background:#E4E1DC;
}
.card-img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.02);
  transition:opacity .5s var(--ease),transform .6s var(--ease-out);
}
.card-img.is-loaded{opacity:1;transform:scale(1);}
.card-skeleton{
  position:absolute;inset:0;
  background:linear-gradient(100deg,#E4E1DC 20%,#EFEDE9 40%,#E4E1DC 60%);
  background-size:220% 100%;
  animation:shimmer 1.5s linear infinite;
  transition:opacity .4s var(--ease);
}
.card.is-ready .card-skeleton{opacity:0;pointer-events:none;}
@keyframes shimmer{to{background-position:-220% 0;}}

.card-info{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 10px 9px;
  background:linear-gradient(to top,
    rgba(8,13,20,.82) 0%,
    rgba(8,13,20,.42) 48%,
    transparent 100%);
  color:#fff;pointer-events:none;
}
.card-scene{
  font-family:var(--font-serif);
  font-size:13.5px;font-weight:600;letter-spacing:.04em;
  line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card-meta{
  margin-top:3px;font-size:10.5px;
  color:rgba(255,255,255,.72);letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card-tag{
  position:absolute;top:8px;left:8px;
  height:21px;padding:0 9px;
  display:inline-flex;align-items:center;
  font-size:10.5px;font-weight:600;letter-spacing:.08em;
  color:#fff;background:rgba(27,42,58,.5);
  border:1px solid rgba(255,255,255,.24);
  border-radius:var(--r-full);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:background .25s var(--ease),border-color .25s;
}
.card-tag.tag-client{
  background:rgba(200,169,110,.85);
  border-color:rgba(255,255,255,.4);
  color:#241B0B;
}
.card-count{
  position:absolute;top:8px;right:8px;
  height:21px;padding:0 9px;
  display:inline-flex;align-items:center;gap:3px;
  font-size:10.5px;font-weight:600;letter-spacing:.04em;
  color:#fff;background:rgba(8,13,20,.62);
  border:1px solid rgba(255,255,255,.24);
  border-radius:var(--r-full);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.card-count svg{width:11px;height:11px;flex:none;}
.card-count svg path{stroke-width:2;stroke:currentColor;fill:none;}

.sentinel{
  height:64px;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.sentinel.is-active{opacity:1;}
.spinner{
  width:20px;height:20px;border-radius:50%;
  border:2px solid rgba(200,169,110,.28);
  border-top-color:var(--gold);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.empty-state{
  padding:64px 24px;text-align:center;color:var(--t3);display:none;
}
.empty-state.is-show{display:block;}
.empty-state svg{
  width:56px;height:56px;margin:0 auto 16px;color:#D4D0C8;
}
.empty-state svg path,
.empty-state svg rect,
.empty-state svg circle{stroke-width:1.4;}
.empty-state p{font-size:14px;letter-spacing:.06em;}

/* =========================================================
   07. 关于
   ========================================================= */
.about{
  background:var(--ink);color:#fff;
  padding:60px calc(24px + var(--safe-r)) 60px calc(24px + var(--safe-l));
  position:relative;overflow:hidden;
}
.about::before{
  content:"";position:absolute;right:-60px;top:-40px;
  width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,169,110,.18),transparent 68%);
}
.about-inner{max-width:640px;margin:0 auto;position:relative;}
.about-eyebrow{
  font-size:10.5px;letter-spacing:.42em;color:var(--gold);
  font-weight:600;margin-bottom:12px;
}
.about-title{
  font-family:var(--font-serif);
  font-size:26px;font-weight:700;letter-spacing:.06em;
  margin-bottom:20px;
}
.about-text{
  font-size:14px;line-height:1.9;
  color:rgba(255,255,255,.66);margin-bottom:14px;
}
.about-address{
  color:var(--gold);font-size:13.5px;letter-spacing:.04em;
  margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.1);
}
.about-stats{
  display:flex;gap:12px;margin-top:30px;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.1);
}
.about-stats li{flex:1;text-align:center;}
.about-stats strong{
  display:block;
  font-family:var(--font-serif);
  font-size:24px;color:var(--gold);letter-spacing:.02em;
}
.about-stats span{
  display:block;margin-top:5px;
  font-size:11px;color:rgba(255,255,255,.44);letter-spacing:.04em;
}

/* =========================================================
   08. 联系方式
   ========================================================= */
.contact-section{
  background:var(--ink);padding:0 0 76px;
  position:relative;overflow:hidden;
}
.contact-section::before{
  content:"";position:absolute;left:-80px;bottom:-60px;
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,169,110,.14),transparent 68%);
  pointer-events:none;
}
.contact-inner{
  max-width:720px;margin:0 auto;
  padding:0 calc(20px + var(--safe-r)) 0 calc(20px + var(--safe-l));
  position:relative;z-index:1;
}
.contact-head{text-align:center;margin-bottom:36px;}
.contact-head .eyebrow{
  font-size:10.5px;letter-spacing:.42em;color:var(--gold);
  font-weight:600;text-transform:uppercase;margin-bottom:12px;
}
.contact-head h3{
  font-family:var(--font-serif);
  font-size:24px;font-weight:700;letter-spacing:.1em;color:#fff;
}
.contact-head .line{
  width:44px;height:2px;border-radius:2px;
  background:var(--gold);margin:16px auto 0;opacity:.7;
}

.qr-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;margin-bottom:32px;
}
.qr-card{
  background:#fff;border-radius:var(--r-lg);
  padding:14px 14px 12px;
  box-shadow:0 14px 38px rgba(0,0,0,.28);
  display:flex;flex-direction:column;align-items:center;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
@media (hover:hover){
  .qr-card:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 46px rgba(0,0,0,.34);
  }
}
.qr-card .qr-media{
  width:100%;aspect-ratio:1/1;border-radius:10px;
  overflow:hidden;background:#F5F3F0;
}
.qr-card .qr-media img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.qr-card .qr-label{
  margin-top:12px;
  font-family:var(--font-serif);
  font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--t1);
}
.qr-card .qr-sub{
  margin-top:3px;font-size:11px;letter-spacing:.14em;color:var(--t3);
}
.qr-card .qr-badge{
  display:inline-flex;align-items:center;gap:4px;
  margin-top:9px;padding:3px 10px;
  font-size:10.5px;letter-spacing:.08em;
  color:var(--gold-dk);background:rgba(200,169,110,.14);
  border-radius:var(--r-full);
}

.tel-grid{display:grid;grid-template-columns:1fr;gap:12px;}
.tel-card{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:background .22s var(--ease),
             border-color .22s var(--ease),
             transform var(--dur-fast) var(--ease);
  text-decoration:none;
}
@media (hover:hover){
  .tel-card:hover{
    background:rgba(255,255,255,.1);
    border-color:rgba(200,169,110,.4);
  }
}
.tel-card:active{transform:scale(.985);}
.tel-icon{
  width:44px;height:44px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(200,169,110,.16);color:var(--gold);
}
.tel-icon svg{width:20px;height:20px;}
.tel-icon svg path,
.tel-icon svg circle{stroke-width:1.8;stroke:currentColor;fill:none;}
.tel-body{min-width:0;flex:1;text-align:left;}
.tel-role{
  font-size:11.5px;letter-spacing:.16em;
  color:rgba(255,255,255,.42);
  text-transform:uppercase;margin-bottom:3px;
}
.tel-num{
  font-family:var(--font-serif);
  font-size:18px;font-weight:700;
  letter-spacing:.06em;color:#fff;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.tel-num small{
  font-family:var(--font-sans);
  font-size:11px;font-weight:400;letter-spacing:.04em;
  color:rgba(255,255,255,.42);margin-left:6px;
}
.tel-cta{
  flex:none;width:36px;height:36px;padding:9px;border-radius:50%;
  background:var(--gold);color:#241B0B;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(200,169,110,.34);
  transition:transform var(--dur-fast) var(--ease),background .2s;
}
.tel-card:hover .tel-cta{background:var(--gold-lt);}
.tel-cta svg{width:18px;height:18px;}
.tel-cta svg path{stroke-width:2.1;stroke:currentColor;fill:none;}

.contact-note{
  margin-top:22px;text-align:center;
  font-size:12px;letter-spacing:.08em;
  color:rgba(255,255,255,.34);
}
.contact-note strong{color:var(--gold);font-weight:600;}

/* =========================================================
   09. 页脚
   ========================================================= */
.site-footer{
  background:var(--ink-3);color:rgba(255,255,255,.5);
  padding:44px calc(24px + var(--safe-r))
          calc(var(--tabbar-h) + 40px + var(--safe-b))
          calc(24px + var(--safe-l));
  text-align:center;
}
.footer-name{
  font-family:var(--font-serif);
  font-size:16px;font-weight:700;letter-spacing:.2em;
  color:rgba(255,255,255,.9);margin-bottom:6px;
}
.footer-line{
  font-size:12px;letter-spacing:.1em;
  color:rgba(255,255,255,.34);
}
.footer-contact{
  display:flex;flex-direction:column;gap:6px;
  margin-top:22px;font-size:12.5px;
  color:rgba(255,255,255,.5);
}
.footer-contact a{color:var(--gold);}
.footer-copy{
  margin-top:26px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:11px;line-height:1.7;
  color:rgba(255,255,255,.28);
}

/* =========================================================
   10. Tab 栏
   ========================================================= */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:flex;
  padding:6px calc(6px + var(--safe-r))
          calc(6px + var(--safe-b))
          calc(6px + var(--safe-l));
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid rgba(27,42,58,.07);
  box-shadow:var(--sh-3);
}
.tab{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;
  min-height:44px;padding:5px 0;
  color:var(--t3);font-size:10px;letter-spacing:.04em;
  border-radius:var(--r-sm);
  transition:color .2s,transform var(--dur-fast) var(--ease);
}
.tab svg{width:21px;height:21px;transition:transform .22s var(--ease);}
.tab svg path,.tab svg rect,.tab svg circle{stroke-width:1.7;}
.tab:active{transform:scale(.9);}
.tab.is-active{color:var(--ink);}
.tab.is-active svg{transform:translateY(-1px) scale(1.06);}
.tab-cta{color:var(--gold-dk);font-weight:600;}
.tab-cta svg{stroke-width:1.9;}

/* =========================================================
   11. 全屏浏览器
   ========================================================= */
.viewer{
  position:fixed;inset:0;z-index:200;background:#08090B;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease),visibility .3s;
  overscroll-behavior:contain;
  touch-action:manipulation;
  user-select:none;-webkit-user-select:none;
}
.viewer.is-open{opacity:1;visibility:visible;pointer-events:auto;}
.viewer-track{display:flex;height:100%;will-change:transform;}
.viewer-slide{
  flex:0 0 100%;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.viewer-slide img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;
  user-select:none;-webkit-user-drag:none;
  will-change:transform;transform-origin:center center;
  touch-action:manipulation;
  -webkit-touch-callout:none;
}

.viewer-top{
  position:absolute;top:0;left:0;right:0;z-index:3;
  padding:calc(var(--safe-t) + 12px) calc(16px + var(--safe-r)) 34px calc(16px + var(--safe-l));
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(to bottom,rgba(0,0,0,.66),transparent);
  color:#fff;
}
.viewer-close{
  width:42px;height:42px;padding:11px;border-radius:50%;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
  transition:background .2s,transform var(--dur-fast) var(--ease);
}
.viewer-close:active{transform:scale(.9);background:rgba(255,255,255,.22);}
.viewer-close:hover{background:rgba(255,255,255,.22);}
.viewer-counter{
  font-size:12.5px;letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.85);
  padding:6px 12px;background:rgba(0,0,0,.32);
  border-radius:var(--r-full);backdrop-filter:blur(8px);
}
.viewer-watermark{
  position:absolute;
  right:calc(16px + var(--safe-r));
  bottom:calc(112px + var(--safe-b));
  z-index:3;
  font-family:var(--font-serif);
  font-size:11px;letter-spacing:.24em;
  color:rgba(255,255,255,.4);
  pointer-events:none;
}

.viewer-bottom{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  padding:46px calc(18px + var(--safe-r))
          calc(22px + var(--safe-b))
          calc(18px + var(--safe-l));
  background:linear-gradient(to top,rgba(0,0,0,.82),transparent);
  color:#fff;pointer-events:auto;
}
.viewer-info{min-width:0;flex:1;}
.viewer-info h3{
  font-family:var(--font-serif);
  font-size:17px;font-weight:600;letter-spacing:.05em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.viewer-info p{
  margin-top:5px;font-size:12px;color:rgba(255,255,255,.7);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.viewer-actions{display:flex;gap:8px;flex:none;}
.viewer-actions .btn{min-height:38px;padding:0 16px;font-size:13.5px;}

.viewer-thumbs{
  position:absolute;left:0;right:0;
  bottom:calc(96px + var(--safe-b));
  z-index:3;
  display:flex;gap:6px;
  padding:6px calc(18px + var(--safe-r)) 6px calc(18px + var(--safe-l));
  overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  pointer-events:auto;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent);
}
.viewer-thumbs::-webkit-scrollbar{display:none;}
.viewer-thumb{
  flex:none;width:44px;height:44px;
  border-radius:6px;overflow:hidden;
  border:2px solid transparent;opacity:.6;
  transition:opacity .2s,border-color .2s,transform var(--dur-fast) var(--ease);
  cursor:pointer;background:#1a1a1a;padding:0;
}
.viewer-thumb img{
  width:100%;height:100%;object-fit:cover;
  display:block;pointer-events:none;
}
.viewer-thumb:active{transform:scale(.92);}
.viewer-thumb.is-active{opacity:1;border-color:var(--gold);}

.viewer-hint{
  position:absolute;left:50%;bottom:calc(158px + var(--safe-b));
  transform:translateX(-50%);z-index:3;
  padding:8px 18px;font-size:11.5px;letter-spacing:.06em;
  color:rgba(255,255,255,.85);background:rgba(0,0,0,.5);
  border-radius:var(--r-full);
  backdrop-filter:blur(10px);
  white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .4s;
}
.viewer-hint.is-show{opacity:1;}

.viewer-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:52px;height:52px;padding:14px;border-radius:50%;
  color:#fff;background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);
  opacity:0;visibility:hidden;
  transition:all var(--dur) var(--ease);
}
.viewer-nav:hover{background:rgba(255,255,255,.2);}
.viewer-nav.is-show{opacity:1;visibility:visible;}
.viewer-nav[data-dir="prev"]{left:24px;}
.viewer-nav[data-dir="next"]{right:24px;}
.viewer.is-ui-hidden .viewer-nav{opacity:0;pointer-events:none;}

.viewer-toast{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.94);z-index:4;
  padding:12px 22px;font-size:13.5px;letter-spacing:.06em;
  color:#fff;background:rgba(0,0,0,.78);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-full);
  backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur) var(--ease),
             transform var(--dur) var(--ease),
             visibility var(--dur);
  white-space:nowrap;
}
.viewer-toast.is-show{
  opacity:1;visibility:visible;
  transform:translate(-50%,-50%) scale(1);
}

/* =========================================================
   12. 分类弹层
   ========================================================= */
.cat-modal{
  position:fixed;inset:0;z-index:260;
  display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(10,15,22,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur) var(--ease),visibility var(--dur);
}
.cat-modal.is-open{opacity:1;visibility:visible;pointer-events:auto;}
.cat-modal-inner{
  position:relative;width:100%;max-width:440px;max-height:82vh;
  background:#fff;border-radius:22px;padding:26px 22px 22px;
  box-shadow:0 24px 60px rgba(0,0,0,.42);
  transform:scale(.94);
  transition:transform var(--dur-slow) var(--ease-out);
  display:flex;flex-direction:column;
}
.cat-modal.is-open .cat-modal-inner{transform:scale(1);}
.cat-modal-close{
  position:absolute;top:12px;right:12px;
  width:34px;height:34px;padding:8px;
  color:var(--t3);border-radius:50%;
  transition:background .2s,color .2s;
}
.cat-modal-close:hover{background:#F0EEEB;color:var(--t1);}
.cat-modal-head{
  text-align:center;padding:0 24px 18px;
  border-bottom:1px solid var(--line);
}
.cat-modal-head .eyebrow{
  font-size:10px;letter-spacing:.42em;
  color:var(--gold);font-weight:600;
  text-transform:uppercase;margin-bottom:8px;
}
.cat-modal-head h3{
  font-family:var(--font-serif);
  font-size:20px;font-weight:700;letter-spacing:.08em;
  color:var(--t1);
}
.cat-modal-head p{
  margin-top:6px;font-size:12px;
  color:var(--t3);letter-spacing:.04em;
}
.cat-list{
  margin-top:16px;display:flex;flex-direction:column;gap:10px;
  overflow-y:auto;padding:4px 2px;
  -webkit-overflow-scrolling:touch;
}
.cat-item{
  display:flex;align-items:center;gap:14px;
  padding:10px;border-radius:14px;
  background:#F7F6F4;border:1.5px solid transparent;
  transition:background .2s var(--ease),
             border-color .2s var(--ease),
             transform var(--dur-fast) var(--ease);
  cursor:pointer;text-align:left;width:100%;
}
.cat-item:active{transform:scale(.985);}
.cat-item:hover{background:#F0EEEB;}
.cat-item.is-active{
  background:var(--ink);border-color:var(--ink);
  color:#fff;box-shadow:0 6px 18px rgba(27,42,58,.24);
}
.cat-body{flex:1;min-width:0;text-align:left;}
.cat-name{
  font-family:var(--font-serif);
  font-size:15px;font-weight:600;letter-spacing:.06em;
  color:var(--t1);line-height:1.3;
}
.cat-item.is-active .cat-name{color:#fff;}
.cat-sub{
  margin-top:2px;font-size:11.5px;letter-spacing:.04em;
  color:var(--t3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cat-item.is-active .cat-sub{color:rgba(255,255,255,.55);}
.cat-count{
  flex:none;font-size:12px;letter-spacing:.04em;
  color:var(--t3);font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.cat-item.is-active .cat-count{color:rgba(255,255,255,.55);}
.cat-arrow{
  flex:none;width:18px;height:18px;color:var(--t3);
  transition:transform .22s var(--ease),color .2s;
}
.cat-arrow svg{width:18px;height:18px;}
.cat-arrow svg path{stroke-width:2.2;stroke:currentColor;fill:none;}
.cat-item.is-active .cat-arrow{color:var(--gold);transform:translateX(2px);}
.cat-modal-foot{margin-top:18px;display:flex;gap:10px;}
.cat-modal-foot .btn{flex:1;min-height:46px;font-size:14px;}
.cat-reset{background:#F0EEEB;color:var(--t2);font-weight:600;}
.cat-reset:hover{background:#E5E2DD;}

/* 分类缩量图 */
.cat-thumb{
  width:56px;
  height:56px;
  flex:none;
  border-radius:10px;
  overflow:hidden;
  background:#E4E1DC;
}
.cat-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================================================
   13. 微信弹层
   ========================================================= */
.wx-modal{
  position:fixed;inset:0;z-index:250;
  display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(10,15,22,.72);
  backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur) var(--ease),visibility var(--dur);
}
.wx-modal.is-open{opacity:1;visibility:visible;pointer-events:auto;}
.wx-modal-inner{
  position:relative;background:#fff;border-radius:20px;
  padding:26px 26px 22px;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  width:100%;max-width:320px;text-align:center;
  transform:scale(.94);
  transition:transform var(--dur-slow) var(--ease-out);
}
.wx-modal.is-open .wx-modal-inner{transform:scale(1);}
.wx-modal-close{
  position:absolute;top:12px;right:12px;
  width:34px;height:34px;padding:8px;
  color:var(--t3);border-radius:50%;
  transition:background .2s,color .2s;
}
.wx-modal-close:hover{background:#F0EEEB;color:var(--t1);}
.wx-modal-title{
  font-family:var(--font-serif);
  font-size:18px;font-weight:700;letter-spacing:.06em;
  color:var(--t1);
}
.wx-modal-sub{
  margin-top:6px;margin-bottom:16px;
  font-size:12.5px;color:var(--t3);
}
.wx-modal-qr{
  width:100%;aspect-ratio:1/1;border-radius:var(--r-md);
  overflow:hidden;border:1px solid var(--line);background:#F5F3F0;
}
.wx-modal-qr img{width:100%;height:100%;object-fit:cover;}
.wx-modal-tip{
  margin-top:14px;font-size:12.5px;
  color:var(--t2);line-height:1.6;
}
.wx-modal-tip strong{color:var(--gold-dk);}

/* =========================================================
   14. Toast / 回顶
   ========================================================= */
.toast{
  position:fixed;left:50%;
  bottom:calc(var(--tabbar-h) + 34px + var(--safe-b));
  z-index:300;transform:translate(-50%,14px);
  max-width:82vw;padding:12px 22px;
  font-size:13.5px;line-height:1.5;text-align:center;
  color:#fff;background:rgba(27,42,58,.94);
  backdrop-filter:blur(10px);
  border-radius:var(--r-full);box-shadow:var(--sh-2);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur) var(--ease),
             transform var(--dur) var(--ease),
             visibility var(--dur);
}
.toast.is-show{
  opacity:1;visibility:visible;transform:translate(-50%,0);
}

.to-top{
  position:fixed;
  right:calc(14px + var(--safe-r));
  bottom:calc(var(--tabbar-h) + 18px + var(--safe-b));
  z-index:75;width:42px;height:42px;padding:11px;
  color:var(--ink);background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  border-radius:50%;box-shadow:var(--sh-2);
  opacity:0;visibility:hidden;
  transform:translateY(12px) scale(.9);
  transition:all .3s var(--ease);
  pointer-events:none;
}
.to-top.is-show{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
}
.to-top:active{transform:scale(.9);}

/* =========================================================
   15. 响应式
   ========================================================= */
@media (min-width:600px){
  :root{--gallery-gap:10px;--gallery-padding:14px;}
  .hero-content{padding-bottom:calc(100px + var(--safe-b));}
  .hero-actions .btn{flex:0 0 auto;min-width:150px;}
  .section-head{padding-left:calc(20px + var(--safe-l));}
  .tel-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (min-width:900px){
  :root{--gallery-gap:16px;--gallery-padding:40px;}
  body{font-size:15.5px;}
  .topbar{padding-left:32px;padding-right:32px;}
  .topnav{display:flex;}
  .hero{height:88vh;min-height:620px;max-height:820px;}
  .hero-content{padding:0 80px 90px;max-width:820px;}
  .hero-title{font-size:52px;}
  .hero-sub{font-size:14px;}
  .section-head{padding:48px 40px 22px;}
  .section-title{font-size:26px;}
  .section-desc{font-size:13px;}
  .card-info{padding:44px 14px 14px;}
  .card-scene{font-size:15px;}
  .card-meta{font-size:11.5px;}
  .card-tag{height:24px;padding:0 11px;font-size:11px;top:10px;left:10px;}
  .card-count{height:24px;padding:0 11px;font-size:11px;top:10px;right:10px;}
  .about{padding:90px 40px;}
  .about-title{font-size:34px;}
  .about-text{font-size:15px;}
  .contact-section{padding-bottom:100px;}
  .contact-inner{max-width:820px;}
  .contact-head{margin-bottom:48px;}
  .contact-head h3{font-size:30px;}
  .qr-grid{gap:24px;margin-bottom:40px;}
  .qr-card{padding:20px 20px 18px;border-radius:20px;}
  .qr-card .qr-label{font-size:15px;margin-top:16px;}
  .qr-card .qr-sub{font-size:11.5px;}
  .qr-card .qr-badge{font-size:11px;margin-top:11px;padding:4px 12px;}
  .tel-grid{gap:18px;}
  .tel-card{padding:18px 22px;}
  .tel-icon{width:50px;height:50px;}
  .tel-icon svg{width:22px;height:22px;}
  .tel-num{font-size:20px;}
  .tel-cta{width:40px;height:40px;padding:10px;}
  .contact-note{font-size:12.5px;margin-top:28px;}
  .cat-modal-inner{max-width:520px;padding:30px 28px 26px;}
  .cat-item{padding:12px;gap:16px;}
  .cat-name{font-size:16px;}
  .cat-sub{font-size:12px;}
  .tabbar{display:none;}
  .site-footer{padding-bottom:48px;}
  .toast{bottom:60px;}
  .to-top{bottom:32px;right:32px;}
  .viewer-nav{display:block;}
  .viewer-nav.is-show{opacity:1;visibility:visible;}
  .viewer-hint{display:none;}
  .viewer-bottom{padding:60px 40px 32px;}
  .viewer-info h3{font-size:20px;}
  .viewer-info p{font-size:13px;}
  .viewer-thumbs{bottom:calc(112px + var(--safe-b));}
  .viewer-thumb{width:56px;height:56px;}
}

@media (min-width:1200px){
  :root{--gallery-gap:18px;--gallery-padding:56px;}
  .hero-content{padding-left:110px;}
}

@media (min-width:1500px){
  .gallery-wrap{max-width:1440px;}
  .gallery{padding:0 20px;}
}

/* 横屏矮屏 */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:100vh;height:100vh;max-height:none;}
  .hero-content{padding:0 40px calc(50px + var(--safe-b));}
  .hero-title{font-size:30px;}
  .hero-scroll{display:none;}
  .viewer-bottom{padding-top:26px;padding-bottom:calc(14px + var(--safe-b));}
  .viewer-hint{display:none;}
  .viewer-nav{width:44px;height:44px;padding:12px;}
}

/* 降低动效 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}