:root {
  --ink: #102721;
  --forest: #0d2f27;
  --forest-2: #17463a;
  --cream: #f7f3ea;
  --paper: #fffdf8;
  --gold: #d6ad78;
  --gold-2: #efcf9f;
  --muted: #65736e;
  --line: rgba(16,39,33,.14);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.frame-page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: none;
}



* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* ---- 去掉首页右边的滚动条（仅隐藏滚动条本身，页面滚动保持正常） ----
   视口滚动条挂在 html 上，三条规则分别覆盖各浏览器内核：
   1) scrollbar-width: none     —— Firefox 及 Chromium 121+ 标准写法
   2) ::-webkit-scrollbar 隐藏  —— Chrome / Safari / Edge WebKit 内核写法
   3) -ms-overflow-style: none  —— 旧版 Edge / IE 兼容写法
   注意：若想彻底禁用垂直滚动（页面锁定在第一屏），才需要改用
   body { overflow-y: hidden; }，本站为多屏长页面，故仅藏条、保留滚动 */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { display: none; width: 0; height: 0; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.7; overflow-x: hidden; }
body.is-locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.preloader { position: fixed; inset: 0; z-index: 999; display: grid; place-content: center; justify-items: center; color: var(--cream); background: var(--forest); transition: transform .9s cubic-bezier(.8,0,.2,1), opacity .6s; }
.preloader.is-done { transform: translateY(-100%); opacity: .96; }
.preloader__mark { width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid rgba(239,207,159,.5); border-radius: 50% 50% 48% 52%; font: italic 38px/1 var(--serif); color: var(--gold-2); animation: breathe 1.8s ease-in-out infinite; }
.preloader__word { margin-top: 18px; letter-spacing: .48em; font-size: 12px; }
.preloader__line { width: 168px; height: 1px; margin-top: 17px; overflow: hidden; background: rgba(255,255,255,.18); }
.preloader__line span { display: block; width: 55%; height: 100%; background: var(--gold); animation: load 1.2s ease-in-out infinite; }
.site-header { position: absolute; inset: 0 0 auto; z-index: 20; color: #fff; }
.navbar-wrap { height: 94px; border-bottom: 1px solid rgba(255,255,255,.16); transition: .4s; }
.navbar-wrap.is-sticky { position: fixed; inset: auto 24px 24px auto; z-index: 60; isolation: isolate; overflow: visible; width: min(300px, calc(100% - 48px)); height: 66px; color: var(--ink); background: linear-gradient(135deg, rgba(255,255,255,.36), rgba(240,249,247,.17) 46%, rgba(196,229,222,.24)); border: 1px solid rgba(255,255,255,.66); border-radius: 33px; box-shadow: 0 18px 48px rgba(19,45,40,.18), 0 3px 10px rgba(19,45,40,.1), inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(75,126,116,.12); -webkit-backdrop-filter: blur(30px) saturate(185%) brightness(1.08); backdrop-filter: blur(30px) saturate(185%) brightness(1.08); animation: navFloatIn .45s cubic-bezier(.2,.8,.2,1) both; }
.navbar-wrap.is-sticky::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at 24% 18%, rgba(255,255,255,.96) 0 4%, rgba(255,255,255,.42) 18%, transparent 44%), radial-gradient(ellipse at 88% 82%, rgba(107,202,184,.2), transparent 42%), linear-gradient(112deg, transparent 28%, rgba(255,255,255,.34) 48%, transparent 66%); }
.navbar-wrap.is-sticky::after { content: ''; position: absolute; z-index: 2; inset: 1px; pointer-events: none; border: 1px solid rgba(255,255,255,.34); border-radius: 31px; box-shadow: inset 10px 9px 16px rgba(255,255,255,.2), inset -10px -9px 18px rgba(68,129,117,.07); }
.navbar { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
@media (min-width: 1021px) {
  .navbar-wrap.is-sticky .navbar { position: relative; z-index: 1; width: 100%; height: 100%; padding: 6px; gap: 0; }
  .navbar-wrap.is-sticky .brand, .navbar-wrap.is-sticky .navbar__actions { display: none; }
  .navbar-wrap.is-sticky .main-nav { position: absolute; right: 50%; bottom: calc(100% + 14px); width: 240px; height: auto; display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 10px; overflow: visible; color: var(--ink); background: linear-gradient(135deg, rgba(255,255,255,.36), rgba(240,249,247,.17) 46%, rgba(196,229,222,.24)); border: 1px solid rgba(255,255,255,.66); border-radius: 32px; box-shadow: 0 18px 48px rgba(19,45,40,.18), inset 0 1px 0 rgba(255,255,255,.96); -webkit-backdrop-filter: blur(30px) saturate(185%) brightness(1.08); backdrop-filter: blur(30px) saturate(185%) brightness(1.08); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(50%) translateY(10px) scale(.96); transition: opacity .24s ease, visibility .24s ease, transform .35s cubic-bezier(.22,1,.36,1); }
  .navbar-wrap.is-sticky .main-nav a { position: relative; z-index: 2; min-width: 0; min-height: 44px; display: grid; place-items: center; padding: 8px 12px; border: 0; border-radius: 22px; font-size: 14px; font-weight: 550; line-height: 1.2; text-align: center; white-space: nowrap; text-shadow: 0 1px 1px rgba(255,255,255,.55); transition: color .25s ease; }
  .navbar-wrap.is-sticky .main-nav a::after { display: none; }
  .navbar-wrap.is-sticky .main-nav a:hover { color: #0b5548; }
  .navbar-wrap.is-sticky .main-nav a.is-active { color: #083f35; background: transparent; box-shadow: none; }
}
.floating-nav-footer { display: none; }
.navbar-wrap.is-sticky .floating-nav-footer { position: relative; z-index: 3; width: 100%; height: 100%; display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: center; gap: 6px; }
.navbar-wrap.is-sticky .floating-nav-footer > * { min-width: 0; height: 100%; display: grid; place-items: center; padding: 0 15px; border-radius: 27px; white-space: nowrap; }
.navbar-wrap.is-sticky .floating-nav-footer__current { position: relative; width: 128px; max-width: 32vw; overflow: hidden; border: 0; color: inherit; background: rgba(255,255,255,.24); font: inherit; text-overflow: ellipsis; cursor: pointer; }
.navbar-wrap.is-sticky .floating-nav-footer__current { border-left: 1px solid rgba(16,39,33,.12); }
.floating-nav-label { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 8px; overflow: hidden; pointer-events: none; opacity: 0; text-overflow: ellipsis; transform: translate3d(0,0,0); transition: opacity .34s ease, transform .42s cubic-bezier(.22,1,.36,1); }
.floating-nav-label.is-current { opacity: 1; transform: translate3d(0,0,0); }
.floating-nav-label.is-from-bottom { transform: translate3d(0,120%,0); }
.floating-nav-label.is-from-top { transform: translate3d(0,-120%,0); }
.floating-nav-label.is-to-top { opacity: 0; transform: translate3d(0,-120%,0); }
.floating-nav-label.is-to-bottom { opacity: 0; transform: translate3d(0,120%,0); }
.navbar-wrap.is-sticky.is-floating-open .main-nav { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(50%) translateY(0) scale(1); }
.liquid-tab-lens { position: absolute; z-index: 1; top: 0; left: 0; width: 0; height: 0; overflow: hidden; pointer-events: none; opacity: 0; border: 1px solid rgba(255,255,255,.82); border-radius: 999px; background: linear-gradient(145deg, rgba(255,255,255,.42), rgba(238,250,248,.13) 44%, rgba(174,225,215,.2)); box-shadow: 0 10px 24px rgba(26,68,59,.18), inset 0 1px 1px rgba(255,255,255,.98), inset 0 -2px 3px rgba(73,139,126,.12), inset 8px 6px 18px rgba(255,255,255,.22); -webkit-backdrop-filter: blur(18px) saturate(175%) brightness(1.12); backdrop-filter: blur(18px) saturate(175%) brightness(1.12); transform: translate3d(0,0,0); transition: width .5s cubic-bezier(.22,1,.36,1), height .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1), opacity .18s ease; will-change: width, height, transform; }
.liquid-tab-lens::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(80% 55% at 25% 0%, rgba(255,255,255,.92), transparent 65%), radial-gradient(65% 70% at 92% 95%, rgba(115,211,193,.18), transparent 72%); }
.liquid-tab-lens::after { content: ''; position: absolute; inset: 1px; border: 1px solid rgba(255,255,255,.34); border-radius: inherit; box-shadow: inset -8px -8px 16px rgba(58,122,109,.08); }
.navbar-wrap.is-sticky .liquid-tab-lens.is-ready { opacity: 1; }
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand__crest { width: 44px; height: 50px; display: grid; place-items: center; border: 1px solid rgba(214,173,120,.7); border-radius: 50% 50% 45% 55%; color: var(--gold-2); font: italic 28px/1 var(--serif); }
.brand b, .brand small { display: block; color: #000; }
.brand b { font-family: var(--serif); font-size: 21px; letter-spacing: .18em; }
.brand small { margin-top: 2px; font-size: 8px; letter-spacing: .32em; opacity: .68; }
.main-nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); margin-left: auto; color: #000; }
.main-nav a { position: relative; padding: 10px 0; font-size: 14px; font-weight: 500; }
.main-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px; background: var(--gold); transition: right .3s; }
.main-nav a:hover::after, .main-nav a.is-active::after { right: 0; }

/* ---- 导航二级菜单（鼠标悬浮 / 键盘聚焦显示） ---- */
.nav-item { position: relative; }
.nav-item > a { display: inline-flex; align-items: center; }
.nav-caret { width: 0; height: 0; margin-left: 6px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(1px); transition: transform .25s ease; }
.has-dropdown:hover .nav-caret, .has-dropdown:focus-within .nav-caret { transform: translateY(2px) rotate(180deg); }
/* 悬浮桥接：填补链接与下拉面板之间的空隙，避免鼠标移过去时菜单消失 */
.has-dropdown::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 50%; z-index: 70;
  min-width: 190px; padding: 8px; display: grid; gap: 2px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.36), rgba(240,249,247,.17) 46%, rgba(196,229,222,.24));
  border: 1px solid rgba(255,255,255,.66);
  /* 边框阴影 */
  box-shadow: 0 18px 48px rgba(45, 19, 19, 0.18), 0 3px 10px rgba(19,45,40,.1), inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(75,126,116,.12);
  -webkit-backdrop-filter: blur(30px) saturate(185%) brightness(1.08); backdrop-filter: blur(30px) saturate(185%) brightness(1.08);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.dropdown a {
  display: block; padding: 8px 12px; border-radius: 10px;
  font-size: 13px; font-weight: 550; line-height: 1.6; white-space: nowrap;
  color: var(--ink);
  text-shadow: 0 1px 1px rgba(255,255,255,.55);
  transition: color .25s ease;
}
/* 悬浮效果与顶部导航栏一致：金色下划线从左向右展开，不改底色 */
.dropdown a::after {
  content: ''; position: absolute; left: 12px; right: 100%; bottom: 5px; height: 1px;
  background: var(--gold); transition: right .3s;
}
.dropdown a:hover::after { right: 12px; }
/* 粘性浮动导航模式下的二级菜单（菜单为纵向排布）：
   1) 当前页面项 → 二级菜单在左侧自动展开（is-expanded）
   2) 悬浮其它菜单项 → 二级菜单在该菜单名正下方居中弹出，覆盖后续菜单项 */
.navbar-wrap.is-sticky .main-nav .dropdown { top: 100%; left: 50%; right: auto; transform: translateX(-50%) translateY(6px); }
.navbar-wrap.is-sticky .has-dropdown.is-expanded .dropdown {
  top: 0; left: auto; right: calc(100% + 8px);
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0) translateY(0);
  transition: opacity .25s ease, visibility .25s; /* 左侧展开只做淡入，不做位移动画 */
}
.navbar-wrap.is-sticky .has-dropdown:not(.is-expanded):hover .dropdown,
.navbar-wrap.is-sticky .has-dropdown:not(.is-expanded):focus-within .dropdown {
  top: 100%; left: 50%; right: auto;
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
/* 悬浮弹出的二级菜单若会超出页面底部（flip-up），改为居中向上展开 */
.navbar-wrap.is-sticky .has-dropdown:not(.is-expanded).flip-up:hover .dropdown,
.navbar-wrap.is-sticky .has-dropdown:not(.is-expanded).flip-up:focus-within .dropdown {
  top: auto; bottom: 100%;
}
/* 悬浮桥接：仅左侧自动展开的项需要向左桥接；居中弹出的面板紧贴菜单名，无需桥接 */
.navbar-wrap.is-sticky .has-dropdown.is-expanded::after { top: 0; bottom: 0; left: 100%; right: auto; width: 14px; height: auto; }
.navbar-wrap.is-sticky .has-dropdown:not(.is-expanded)::after { height: 0; }
.navbar-wrap.is-sticky .main-nav .dropdown a {
  display: block; min-height: 0; padding: 8px 12px; border-radius: 10px;
  font: 550 13px/1.6 var(--sans); text-align: left; white-space: nowrap; color: var(--ink);
  text-shadow: 0 1px 1px rgba(255,255,255,.55);
}
/* 粘性模式下重新启用金色下划线（胶囊链接默认隐藏 ::after） */
.navbar-wrap.is-sticky .main-nav .dropdown a::after { display: block; }
/* 展开菜单时自动展开当前页面对应的二级菜单（可见性样式已并入上面的悬浮规则） */
.navbar-wrap.is-sticky .has-dropdown.is-expanded .nav-caret { transform: translateY(2px) rotate(180deg); }

.navbar__actions { display: flex; align-items: center; gap: 14px; }
.icon-btn, .menu-toggle { border: 0; background: none; cursor: pointer; }
.icon-btn { width: 34px; height: 34px; position: relative; }
.icon-btn span { position: absolute; width: 15px; height: 15px; border: 1.5px solid currentColor; border-radius: 50%; inset: 7px auto auto 6px; }
.icon-btn span::after { content: ''; position: absolute; width: 8px; height: 1.5px; background: currentColor; transform: rotate(45deg); right: -6px; bottom: -3px; }
.nav-cta { padding: 13px 21px; color: var(--forest); background: var(--gold-2); font-size: 13px; letter-spacing: .04em; transition: .3s; }
.nav-cta:hover { color: #fff; background: var(--forest-2); }
.menu-toggle { width: 38px; height: 38px; display: none; place-content: center; gap: 6px; }
.menu-toggle i { width: 22px; height: 1px; display: block; background: currentColor; transition: .3s; }
.hero { min-height: 0; height: calc(100vh - 100px); height: calc(100svh - 100px); position: relative; overflow: visible; color: #fff; background: var(--forest); }
.hero::after { content: ''; position: absolute; z-index: 3; right: 0; bottom: -1px; left: 0; height: 120px; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.03) 22%, rgba(255,255,255,.12) 42%, rgba(255,255,255,.32) 62%, rgba(255,255,255,.68) 82%, #fff 100%); }
/* 背景缩放拆成两层独立属性（互不覆盖、自动叠乘）：
   - scale 独立属性 = 静止倍率 1.3125（≈background-size:131.25%），登录层打开时
     由下方 body.is-login-open 规则过渡到 1.2（≈120%），带 .8s 过渡与飞机/小船
     离场同速；关闭浮层自动缩回 1.3125
   - transform + heroZoom 动画 = 开场推进感（1.08→1，叠乘后视觉 1.4175→1.3125，
     与旧版纯 transform 方案观感一致）
   注意不能用 transform 写登录层缩放——heroZoom 动画占用 transform（fill both
   常驻），普通规则写了会被动画盖掉；app.js 视差写的 translate 也是独立属性，
   三者各自叠加 */
.hero__media { position: absolute; inset: 0; background: url('img/login.webp') center/cover no-repeat; background-position: 50% 50%; scale: 1.3125; transform: scale(1.08); animation: heroZoom 12s ease-out both; transition: scale .8s ease; }
.hero__veil { position: absolute; inset: 0; /* background: linear-gradient(90deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.72) 43%, rgba(255,255,255,.10) 72%, rgba(255,255,255,.25) 100%); */ }
.hero-layers { position: absolute; inset: 0; z-index: 19; overflow: hidden; pointer-events: none; }
.hero-layer { position: absolute; opacity: 0; will-change: transform, opacity; transform: translate3d(0, 0, 0) rotate(0deg); transition: opacity 1.3s ease; }
.hero-layer span, .hero-layer img { display: block; width: 100%; }
.hero-layer span { will-change: transform; }
.hero-layer img { -webkit-mask-image: radial-gradient(ellipse at center, #000 45%, rgba(0,0,0,.8) 62%, transparent 83%); mask-image: radial-gradient(ellipse at center, #000 45%, rgba(0,0,0,.8) 62%, transparent 83%); }
.hero-layer--orchid { width: clamp(350px, 40vw, 650px); right: -15%; top: 2%; mix-blend-mode: screen; }
.hero-layer--orchid img { opacity: .17; filter: saturate(.65) brightness(.72); }
.hero-layer--orchid span { animation: botanicalFloatA 7.5s 2.4s ease-in-out infinite alternate; }
.hero-layer--foliage { z-index: 18; width: clamp(310px, 35vw, 560px); left: 3%; bottom: -20%; mix-blend-mode: normal; pointer-events: none; }
.hero-layer--foliage img { filter: saturate(.55) brightness(.62); --webkit-mask-image: none; mask-image: none; filter: none;}
.hero-layer--foliage span { animation: botanicalFloatB 9s 2.8s ease-in-out infinite alternate; }
body.is-ready .hero-layer { opacity: 1; }
.hero-flower { position: absolute; opacity: 0; mix-blend-mode: screen; will-change: transform, opacity; transform: translate3d(0, 0, 0) rotate(0deg); transition: opacity 1.15s ease var(--reveal-delay, 0s); }
.hero-flower span, .hero-flower img { display: block; width: 100%; }
.hero-layers .hero-layer img, .hero-layers .hero-flower img { transform: scale(2.0); transform-origin: center; }
.hero-flower img { mix-blend-mode: screen; -webkit-mask-image: radial-gradient(circle, #000 48%, rgba(0,0,0,.96) 62%, transparent 76%); mask-image: radial-gradient(circle, #000 48%, rgba(0,0,0,.96) 62%, transparent 76%); }
/* ============================================================
   纸飞机（.hero-flower）坐标说明
   ------------------------------------------------------------
   每架飞机 absolute 定位，left/top 相对 .hero-layers 容器
   （即首屏 hero 区域，0% = 容器最左/最顶，100% = 最右/最底）
     - left:     X 轴（水平）位置
     - top:      Y 轴（垂直）位置
     - width:    飞机尺寸（px 固定值）
     - --reveal-delay: 页面载入后延迟多久淡入（秒）
   ============================================================ */
.hero-flower--1 { --reveal-delay: 1.05s; left: 42%; top: 21%; width: 82px; }  /* 1 号：中部偏左（X 42% Y 21%），大图 plane (2).svg */
.hero-flower--2 { --reveal-delay: 1.25s; left: 17%; top: 39%; width: 65px; }  /* 2 号：左侧（X 17% Y 39%），plane (7).svg */
.hero-flower--3 { --reveal-delay: 1.4s;  left: 38%; top: 68%; width: 58px; }  /* 3 号：左下（X 38% Y 68%），plane (3).svg */
.hero-flower--4 { --reveal-delay: 1.55s; left: 61%; top: 39%; width: 40px; }  /* 4 号：中右偏小（X 61% Y 39%），plane (5).svg */
.hero-flower--5 { --reveal-delay: 1.15s; left: 84%; top: 14%; width: 136px; } /* 5 号：右上最大一架（X 84% Y 14%），plane (7).svg */
/* 每架飞机的漂浮轻转：动画名 时长 延迟，alternate = 来回摆动；--3 用 reverse 反向起步 */
.hero-flower--1 span { animation: flowerFloatA 4.8s 2.2s ease-in-out infinite alternate; }      /* 1 号：A 轨迹，4.8s 一个来回 */
.hero-flower--2 span { animation: flowerFloatB 5.6s 2.6s ease-in-out infinite alternate; }      /* 2 号：B 轨迹，5.6s */
.hero-flower--3 span { animation: flowerFloatA 6.1s 2.1s ease-in-out infinite alternate-reverse; } /* 3 号：A 轨迹反向，6.1s */
.hero-flower--4 span { animation: flowerFloatB 4.3s 2.9s ease-in-out infinite alternate; }      /* 4 号：B 轨迹，4.3s（最快） */
.hero-flower--5 span { animation: flowerFloatA 7s 2.4s ease-in-out infinite alternate; }        /* 5 号：A 轨迹，7s（最慢） */
.hero-layer span, .hero-flower span { animation-fill-mode: both; }
body.is-ready .hero-flower { opacity: .92; }
.hero__inner { position: relative; z-index: 4; height: 100%; display: flex; align-items: center; padding-top: 128px; will-change: transform; transition: opacity .8s ease, visibility .8s ease; } /* 淡出/淡回时长 0.8s（登录浮层开合时与导航栏同步），transform 由视差 JS 控制，不冲突 */
.hero__copy { max-width: 690px; }
.eyebrow { margin: 0 0 20px; color: var(--gold-2); font-size: 12px; letter-spacing: .28em; font-weight: 600; }
.hero__eyebrow { display: flex; align-items: center; gap: 14px; opacity: 0; animation: rise .8s .9s forwards; }
.hero__eyebrow span { width: 44px; height: 1px; background: currentColor; }
.hero h1 { margin: 0; font: 400 clamp(54px, 6.2vw, 91px)/1.03 var(--serif); letter-spacing: -.045em; opacity: 0; animation: rise .9s 1.05s forwards; }
.hero h1 em { color: var(--gold-2); font-weight: 400; }
.hero__copy > .auth__lead { max-width: 42ch; margin-top: 24px; color: rgba(255,255,255,.74); font-size: 15px; line-height: 1.9; animation: rise .9s .36s var(--ease) both; }
.hero__lead { max-width: 585px; margin: 30px 0 0; 
  /* color: rgba(255,255,255,.74);  */
  color: rgb(0, 0, 0); 
  font-size: 17px; line-height: 1.9; opacity: 0; animation: rise .9s 1.2s forwards; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 25px; min-height: 56px; padding: 0 25px; font-size: 14px; letter-spacing: .06em; transition: .35s; }
.button--gold { color: var(--forest); background: var(--gold-2); }
.button--gold:hover { color: #fff; background: var(--forest-2); transform: translateY(-3px); }
.button b { font-size: 18px; font-weight: 400; }
.hero__rail { position: absolute; z-index: 5; right: 38px; top: 50%; display: grid; justify-items: center; gap: 12px; color: rgba(255,255,255,.62); font-size: 10px; letter-spacing: .15em; transform: translateY(-50%); }
.hero__rail div { width: 1px; height: 140px; background: rgba(255,255,255,.23); }
.hero__rail i { display: block; width: 1px; height: 46%; background: var(--gold-2); animation: rail 4s ease-in-out infinite; }
.hero__scroll { position: absolute; z-index: 5; left: 38px; bottom: 35px; display: flex; align-items: center; gap: 13px; transform: rotate(-90deg); transform-origin: left center; font-size: 9px; letter-spacing: .25em; color: rgba(255,255,255,.55); }
.hero__scroll i { width: 54px; height: 1px; background: rgba(255,255,255,.45); }
.hero__orb { position: absolute; z-index: 1; border: 1px solid rgba(239,207,159,.17); border-radius: 50%; }
.hero__orb--one { width: 400px; height: 400px; left: -170px; bottom: -210px; }
.hero__orb--two { width: 260px; height: 260px; left: -100px; bottom: -140px; }
.hero__petal { position: absolute; z-index: 2; width: 14px; height: 22px; border: 1px solid rgba(239,207,159,.36); border-radius: 80% 20% 75% 25%; animation: drift 8s linear infinite; }
.hero__petal--a { left: 55%; top: 18%; }
.hero__petal--b { left: 42%; top: 66%; animation-delay: -4s; }
.search-panel { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; color: #fff; background: rgba(7,34,28,.96); opacity: 0; visibility: hidden; transition: .45s; }
.search-panel.is-open { opacity: 1; visibility: visible; }
.search-panel > div { width: min(650px, calc(100% - 48px)); transform: translateY(24px); transition: .45s; }
.search-panel.is-open > div { transform: translateY(0); }
.search-panel span { display: block; margin-bottom: 18px; color: var(--gold-2); font: 28px var(--serif); }
.search-panel label { display: flex; border-bottom: 1px solid rgba(255,255,255,.38); }
.search-panel input { flex: 1; padding: 18px 0; border: 0; outline: 0; color: #fff; background: none; font: 32px var(--serif); }
.search-panel input::placeholder { color: rgba(255,255,255,.35); }
.search-panel label button, .search-panel__close { border: 0; color: #fff; background: none; cursor: pointer; }
.search-panel label button { padding: 0 10px; font-size: 30px; }
.search-panel__close { position: absolute; right: 5vw; top: 5vh; font-size: 42px; font-weight: 200; }
.section { padding: 120px 0; }
.section-heading { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 80px; margin-bottom: 60px; }
.section-heading .eyebrow, .story__copy .eyebrow, .booking .eyebrow, .testimonial-intro .eyebrow { color: #9a7347; }
.section-heading h2, .story__copy h2, .testimonial-intro h2, .booking h2 { margin: 0; font: 400 clamp(42px, 4.6vw, 66px)/1.08 var(--serif); letter-spacing: -.035em; }
.section-heading h2 em, .story__copy h2 em, .testimonial-intro h2 em { color: #9a7347; font-weight: 400; }
.section-heading > p { max-width: 470px; margin: 0 0 4px; color: var(--muted); }
.section-heading--center { display: block; max-width: 700px; margin-inline: auto; text-align: center; }
.section-heading--center > p:last-child { max-width: 600px; margin: 20px auto 0; }
.reveal { opacity: 0; transform: translateY(38px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.services { position: relative; scroll-margin-top: -100px; background: #fff; }
.services::before { content: 'A'; position: absolute; left: 1vw; top: 20px; color: rgba(13,47,39,.035); font: 330px/1 var(--serif); }
.services .shape1 { left: 10%; top: -80px; z-index: 19; width: 421px; pointer-events: none; }
.services .shape1 img { display: block; width: 100%; height: auto; }
.services .shape1.d-none { display: none; }
.position-absolute { position: absolute; }
.ani-moving-x { animation: moving-x 5s linear infinite; }
/* 小船（hero 叶层 & services 叶图标）离场位移：用独立 translate 属性实现。
   为什么不能用 transform：视差 JS 会给 .hero-layer/.hero-flower 持续写入
   内联 style.transform（内联样式优先级高于任何类选择器规则），
   services 小船的 moving-x 无限动画也占着 transform（动画优先级同样高于
   普通规则）——写在 transform 上的离场位移永远轮不到生效。
   translate 与 transform 是两个独立属性、渲染时自动叠加，谁也不覆盖谁。
   transition 列表须带上 opacity（.hero-layer 原有 1.3s 入场淡入），避免整条覆盖 */
.boat { transition: opacity 1.3s ease, translate .8s ease; }
.service-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.service-card { min-height: 390px; padding: 38px 30px 34px; background: rgba(255,253,248,.65); border-right: 1px solid var(--line); transition: .45s; }
.service-card:last-child { border-right: 0; }
.service-card:hover, .service-card--featured { color: #fff; background: var(--forest); transform: translateY(-12px); box-shadow: 0 28px 55px rgba(13,47,39,.18); }
.service-card__number { color: #a67c50; font: italic 15px var(--serif); }
.service-card__icon { height: 104px; display: flex; align-items: center; color: var(--gold); font-size: 54px; }
.service-card h3 { margin: 0 0 18px; font: 27px var(--serif); }
.service-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.9; transition: .3s; }
.service-card:hover p, .service-card--featured p { color: rgba(255,255,255,.68); }
.service-card a { display: inline-flex; gap: 20px; margin-top: 28px; padding-bottom: 5px; border-bottom: 1px solid currentColor; font-size: 12px; letter-spacing: .08em; }
.service-card a span { transition: transform .3s; }
.service-card a:hover span { transform: translateX(5px); }
.story { overflow: hidden; background: var(--paper); scroll-margin-top: -30px;}
.story__grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: clamp(60px, 8vw, 120px); }
.story__visual { position: relative; padding: 0 0 42px 42px; }
.story__visual::before { content: ''; position: absolute; left: 0; bottom: 0; width: 65%; height: 70%; border: 1px solid rgba(166,124,80,.45); }
.story__image { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.story__image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 1s; }
.story__visual:hover img { transform: scale(1.035); }
.story__seal { position: absolute; right: -45px; top: 70px; width: 118px; height: 118px; display: grid; place-content: center; justify-items: center; border-radius: 50%; color: var(--cream); background: var(--forest); box-shadow: 0 15px 40px rgba(13,47,39,.2); }
.story__seal::after { content: ''; position: absolute; inset: 8px; border: 1px dashed rgba(239,207,159,.58); border-radius: 50%; animation: spin 18s linear infinite; }
.story__seal span, .story__seal small { font-size: 8px; letter-spacing: .23em; }
.story__seal b { color: var(--gold-2); font: 26px var(--serif); }
.story__caption { position: absolute; left: 74px; bottom: 14px; padding: 16px 24px; color: #fff; background: var(--forest); font: 17px/1.5 var(--serif); letter-spacing: .06em; }
.story__copy h2 { margin-bottom: 27px; }
.story__intro { color: var(--muted); font-size: 17px; line-height: 1.9; }
.story__points { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 35px 0 40px; }
.story__points > div { position: relative; padding: 25px 0 0 36px; border-top: 1px solid var(--line); }
.story__points span { position: absolute; left: 0; top: 24px; color: #a67c50; font: italic 12px var(--serif); }
.story__points h3 { margin: 0 0 8px; font: 21px var(--serif); }
.story__points p { margin: 0; color: var(--muted); font-size: 13px; }
.button--dark { color: #fff; background: var(--forest); }
.button--dark:hover { color: var(--forest); background: var(--gold-2); transform: translateY(-3px); }
.facts { position: relative; padding: 82px 0; overflow: hidden; color: #fff; background: var(--forest); }
.facts::before { content: ''; position: absolute; inset: 0; opacity: .05; background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 22px 22px; }
.facts__watermark { position: absolute; right: -35px; bottom: -55px; color: rgba(255,255,255,.035); font: 150px/1 var(--serif); letter-spacing: -.04em; }
.facts__inner { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
.fact { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: start; padding: 0 30px; border-right: 1px solid rgba(255,255,255,.14); }
.fact:last-child { border-right: 0; }
.fact strong { font: 55px/1 var(--serif); }
.fact sup { margin: 1px 0 0 6px; color: var(--gold-2); font: 21px var(--serif); }
.fact span { grid-column: 1/-1; margin-top: 13px; color: rgba(255,255,255,.58); font-size: 12px; letter-spacing: .12em; }
.offers { padding-bottom: 40px; }
.offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.offer { position: relative; min-height: 450px; overflow: hidden; color: #fff; background: var(--forest); }
.offer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.offer:hover img { transform: scale(1.06); }
.offer__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,30,24,.85), rgba(6,30,24,.12)); }
.offer--light .offer__shade { background: linear-gradient(90deg, rgba(44,22,18,.72), rgba(44,22,18,.08)); }
.offer__copy { position: absolute; left: 52px; top: 50%; width: 55%; transform: translateY(-50%); }
.offer__copy p { margin: 0 0 13px; color: var(--gold-2); font-size: 10px; letter-spacing: .24em; }
.offer__copy h3 { margin: 0 0 28px; font: 38px/1.18 var(--serif); }
.offer__copy a { display: inline-flex; gap: 20px; padding-bottom: 6px; border-bottom: 1px solid currentColor; font-size: 12px; letter-spacing: .08em; }
.gallery { padding-bottom: 0; }
.gallery-grid { display: grid; grid-template-columns: 1.2fr .8fr 1fr; grid-template-rows: 280px 340px; gap: 8px; padding: 0 8px; }
.gallery-item { position: relative; overflow: hidden; padding: 0; border: 0; cursor: zoom-in; background: var(--forest); }
.gallery-item--tall { grid-row: 1/3; }
.gallery-item--wide { grid-column: 2/4; }
.gallery-item img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.8); transition: transform .8s, filter .5s; }
.gallery-item::after { content: '+'; position: absolute; right: 24px; top: 22px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: #fff; font-size: 20px; opacity: 0; transform: scale(.7); transition: .4s; }
.gallery-item > span { position: absolute; left: 28px; bottom: 23px; color: #fff; font: 21px var(--serif); opacity: 0; transform: translateY(15px); transition: .4s; }
.gallery-item > span i { margin-right: 11px; color: var(--gold-2); font: italic 10px var(--serif); }
.gallery-item:hover img { transform: scale(1.06); filter: saturate(1); }
.gallery-item:hover::after, .gallery-item:hover > span { opacity: 1; transform: translateY(0) scale(1); }
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 5vw; background: rgba(5,22,18,.96); opacity: 0; visibility: hidden; transition: .35s; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 84vh; box-shadow: 0 30px 90px rgba(0,0,0,.35); transform: scale(.93); transition: .45s; }
.lightbox.is-open img { transform: scale(1); }
.lightbox button { position: absolute; right: 4vw; top: 3vh; border: 0; color: #fff; background: none; font-size: 46px; cursor: pointer; }
.testimonials { color: #fff; background: var(--forest); }
.testimonial-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: 70px; align-items: center; }
.testimonial-intro h2 em { color: var(--gold-2); }
.testimonial-controls { display: flex; gap: 8px; margin-top: 40px; }
.testimonial-controls button { width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.2); color: #fff; background: none; cursor: pointer; transition: .3s; }
.testimonial-controls button:hover { color: var(--forest); background: var(--gold-2); border-color: var(--gold-2); }
.quote-window { overflow: hidden; }
.quote-track { display: flex; transition: transform .65s cubic-bezier(.2,.8,.2,1); }
.quote { min-width: 100%; padding: 10px 8% 10px 0; }
.quote__mark { height: 65px; color: var(--gold-2); font: 90px/1 var(--serif); }
.quote > p { margin: 0; color: rgba(255,255,255,.78); font: 27px/1.72 var(--serif); }
.quote__guest { display: flex; align-items: center; gap: 15px; margin-top: 30px; }
.quote__guest > span { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(239,207,159,.5); border-radius: 50%; color: var(--gold-2); font: 16px var(--serif); }
.quote__guest b, .quote__guest small { display: block; }
.quote__guest b { font: 19px var(--serif); }
.quote__guest small { color: rgba(255,255,255,.45); font-size: 11px; letter-spacing: .06em; }
.team { background: var(--cream); scroll-margin-top: -100px;}
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.team-card { background: var(--paper); box-shadow: 0 12px 35px rgba(16,39,33,.06); }
.team-card__portrait { position: relative; aspect-ratio: .85; display: grid; place-content: center; justify-items: center; overflow: hidden; color: rgba(255,255,255,.9); background: linear-gradient(145deg, #345a4d, #0c2b23); }
.team-card__portrait::before, .team-card__portrait::after { content: ''; position: absolute; border: 1px solid rgba(239,207,159,.25); border-radius: 50%; }
.team-card__portrait::before { width: 220px; height: 220px; right: -60px; top: -60px; }
.team-card__portrait::after { width: 150px; height: 150px; left: -70px; bottom: -40px; }
.team-card__portrait--2 { background: linear-gradient(145deg, #bd966d, #654b38); }
.team-card__portrait--3 { background: linear-gradient(145deg, #58756f, #263f3a); }
.team-card__portrait--4 { background: linear-gradient(145deg, #815d51, #3f2c28); }
.team-card__portrait span { font: italic 72px/1 var(--serif); letter-spacing: -.06em; transition: transform .5s; }
.team-card__portrait small { margin-top: 14px; color: var(--gold-2); font-size: 9px; letter-spacing: .3em; }
.team-card:hover .team-card__portrait span { transform: scale(1.09) rotate(-3deg); }
.team-card__info { position: relative; padding: 25px 25px 27px; }
.team-card__info h3 { margin: 0; font: 24px var(--serif); }
.team-card__info p { margin: 4px 0 20px; color: var(--muted); font-size: 12px; }
.team-card__info a { display: flex; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; letter-spacing: .07em; }
.booking { min-height: 720px; display: grid; grid-template-columns: 1.05fr .95fr; position: relative; color: #fff; background: var(--forest); }
.booking__image { position: absolute; inset: 0 50% 0 0; background: linear-gradient(rgba(9,37,30,.2),rgba(9,37,30,.35)), url('img/background.webp') center/cover; }
.booking__hours { position: relative; z-index: 1; align-self: end; margin: 0 8vw 80px; padding: 48px; background: rgba(8,40,32,.88); backdrop-filter: blur(8px); }
.booking__hours h2 { margin-bottom: 35px; }
.booking__hours > div { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.16); font-size: 13px; }
.booking__hours > div b { color: var(--gold-2); font-weight: 500; }
.booking__note { margin: 24px 0 0; color: rgba(255,255,255,.55); font-size: 12px; }
.booking__form { grid-column: 2; display: flex; flex-direction: column; justify-content: center; padding: 80px clamp(40px, 8vw, 120px); }
.booking__form h2 { margin-bottom: 35px; }
.booking__form form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.booking__form label { display: block; }
.booking__form label span { display: block; margin-bottom: 7px; color: rgba(255,255,255,.56); font-size: 11px; letter-spacing: .1em; }
.booking__form input, .booking__form select { width: 100%; padding: 13px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.25); border-radius: 0; outline: 0; color: #fff; background: transparent; }
.booking__form option { color: var(--ink); }
.booking__form .button { grid-column: 1/-1; margin-top: 12px; border: 0; cursor: pointer; }
.form-status { grid-column: 1/-1; min-height: 24px; margin: 0; color: var(--gold-2); font-size: 13px; }
.aboot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.aboot-card { background: var(--paper); border: 1px solid var(--line); }
.aboot-card__image { position: relative; aspect-ratio: 1.45; overflow: hidden; }
.aboot-card__image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .7s; }
.aboot-card:hover img { transform: scale(1.06); }
.aboot-card__image > span { position: absolute; left: 0; bottom: 0; padding: 10px 15px; color: var(--forest); background: var(--gold-2); font: 13px var(--serif); }
.aboot-card__body { padding: 28px; }
.aboot-card__body > p { margin: 0 0 11px; color: #9a7347; font-size: 10px; letter-spacing: .08em; }
.aboot-card__body h3 { min-height: 66px; margin: 0 0 25px; font: 24px/1.4 var(--serif); }
.aboot-card__body a { display: flex; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; }
.marquee { overflow: hidden; padding: 25px 0; color: var(--forest); background: var(--gold-2); }
.marquee div { width: max-content; display: flex; align-items: center; gap: 35px; animation: marquee 28s linear infinite; }
.marquee span { font: 29px var(--serif); letter-spacing: .09em; }
.marquee i { font-style: normal; font-size: 16px; }
.footer { padding: 90px 0 25px; color: #fff; background: #071e19; }
.footer__grid { display: grid; grid-template-columns: 1.3fr .65fr .8fr 1.1fr; gap: 70px; }
.footer .brand { margin-bottom: 25px; }
.footer__brand > p { max-width: 280px; color: rgba(255,255,255,.5); }
.footer__brand > a:not(.brand) { display: block; color: var(--gold-2); font-family: var(--serif); }
.footer h3 { margin: 5px 0 25px; color: var(--gold-2); font: 18px var(--serif); }
.footer__grid > div:not(:first-child) > a { display: block; margin: 10px 0; color: rgba(255,255,255,.6); font-size: 13px; }
.footer__grid > div > p { color: rgba(255,255,255,.5); font-size: 13px; }
.newsletter { display: flex; margin-top: 25px; border-bottom: 1px solid rgba(255,255,255,.23); }
.newsletter input { width: 100%; padding: 13px 0; border: 0; outline: 0; color: #fff; background: none; }
.newsletter button { border: 0; color: var(--gold-2); background: none; cursor: pointer; font-size: 20px; }
.footer__bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 70px; padding-top: 23px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.34); font-size: 11px; letter-spacing: .05em; }
@keyframes load { from { transform: translateX(-120%); } to { transform: translateX(220%); } }
@keyframes breathe { 50% { transform: scale(1.08) rotate(4deg); } }
@keyframes navIn { from { transform: translateY(-100%); } }
@keyframes navFloatIn { from { opacity: 0; transform: translate3d(14px,18px,0) scale(.94); } }
/* 开场推进：transform 1.08→1（静止倍率由 .hero__media 的 scale 属性承担，见其注释） */
@keyframes heroZoom { to { transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rail { 0%,100% { transform: translateY(0); } 50% { transform: translateY(115%); } }
@keyframes drift { 0% { transform: translate(0,0) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(80px,180px) rotate(240deg); opacity: 0; } }
@keyframes botanicalFloatA { from { transform: translate3d(0,-9px,0) rotate(-1.5deg); } to { transform: translate3d(-14px,15px,0) rotate(2deg); } }
@keyframes botanicalFloatB { from { transform: translate3d(-8px,10px,0) rotate(-2deg); } to { transform: translate3d(18px,-13px,0) rotate(2.5deg); } }
@keyframes botanicalDrift { from { transform: translate3d(0,20px,0) rotate(-8deg) scale(.92); } to { transform: translate3d(-42px,-48px,0) rotate(9deg) scale(1.04); } }
/* 纸飞机漂浮轻转轨迹（rotate 即"轻转"角度，负 = 逆时针、正 = 顺时针） */
/* A 轨迹：从左上 -4° 摆到右下 +5°（位移 左上-3px,-8px → 右下+7px,+11px） */
@keyframes flowerFloatA { from { transform: translate3d(-3px,-8px,0) 
  /* rotate(-4deg);  */
} to { transform: translate3d(7px,11px,0) 
  /* rotate(5deg); */
 } }
/* B 轨迹：从右下 +5° 摆到左上 -6°（与 A 方向相反，交替使用让飞机错开） */
@keyframes flowerFloatB { from { transform: translate3d(5px,7px,0) 
  /* rotate(5deg); */
 } to { transform: translate3d(-8px,-9px,0) 
  /* rotate(-6deg); */
 } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes moving-x { 0% { transform: translate(0,0); } 50% { transform: translate(-60px,0); } 100% { transform: translate(0,0); } }



@media (prefers-reduced-motion: reduce) {
  .floating-nav-label { transition: none; }
}
@media (min-width: 1200px) {
  .services .shape1.d-xl-inline-block { display: inline-block; }
}
@media (max-width: 1020px) {
  .navbar-wrap.is-sticky { right: 16px; bottom: max(12px, env(safe-area-inset-bottom)); left: auto; width: min(320px, calc(100% - 32px)); height: 64px; border-radius: 32px; }
  .navbar-wrap.is-sticky::after { border-radius: 30px; }
  .navbar-wrap.is-sticky .navbar { position: relative; z-index: 1; width: 100%; height: 100%; padding: 6px; }
  .navbar-wrap.is-sticky .brand, .navbar-wrap.is-sticky .navbar__actions { display: none; }
  .navbar-wrap.is-sticky .main-nav { position: absolute; inset: auto 50% calc(100% + 12px) auto; width: min(260px, calc(100vw - 48px)); height: auto; display: flex; flex-direction: column; align-items: stretch; place-content: normal; gap: 0; margin: 0; padding: 10px; overflow: visible; color: var(--ink); background: linear-gradient(135deg, rgba(255,255,255,.36), rgba(240,249,247,.17) 46%, rgba(196,229,222,.24)); border: 1px solid rgba(255,255,255,.66); border-radius: 32px; box-shadow: 0 18px 48px rgba(19,45,40,.18), inset 0 1px 0 rgba(255,255,255,.96); -webkit-backdrop-filter: blur(30px) saturate(185%) brightness(1.08); backdrop-filter: blur(30px) saturate(185%) brightness(1.08); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(50%) translateY(10px) scale(.96); transition: opacity .24s ease, visibility .24s ease, transform .35s cubic-bezier(.22,1,.36,1); }
  .navbar-wrap.is-sticky .main-nav a { position: relative; z-index: 2; min-width: 0; min-height: 44px; display: grid; place-items: center; padding: 8px 12px; border: 0; border-radius: 22px; font: 550 14px/1.2 var(--sans); text-align: center; white-space: nowrap; text-shadow: 0 1px 1px rgba(255,255,255,.55); }
  .navbar-wrap.is-sticky .main-nav a::after { display: none; }
  .navbar-wrap.is-sticky .main-nav a.is-active { color: #083f35; background: transparent; box-shadow: none; }
  .main-nav { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; gap: 13px; margin: 0; color: #fff; background: rgba(7,34,28,.98); opacity: 0; visibility: hidden; transition: .4s; }
  .main-nav.is-open { opacity: 1; visibility: visible; }
  .main-nav a { font: 34px var(--serif); text-align: center; }
  .menu-toggle { position: relative; z-index: 51; display: grid; }
  .menu-toggle.is-open i:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle.is-open i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .nav-cta { display: none; }
  .section { padding: 90px 0; }
  .section-heading { gap: 35px; }
  .service-grid, .team-grid { grid-template-columns: 1fr 1fr; }
  .service-card:nth-child(2) { border-right: 0; }
  .service-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .story__grid { gap: 55px; }
  .facts__inner { grid-template-columns: 1fr 1fr; gap: 45px 0; }
  .fact:nth-child(2) { border-right: 0; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 300px; }
  .gallery-item--tall { grid-row: auto; }
  .gallery-item--wide { grid-column: auto; }
  .testimonial-layout { gap: 35px; }
  .booking { min-height: 0; grid-template-columns: 1fr; }
  .booking__image { position: relative; inset: auto; min-height: 540px; }
  .booking__hours { position: absolute; left: 0; top: 120px; width: min(470px, calc(100% - 48px)); margin: 0; }
  .booking__form { grid-column: 1; padding: 85px 10vw; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .shell { width: min(100% - 32px, 1180px); }
  .icon-btn { display: none; }
  .navbar-wrap { height: 78px; }
  .brand__crest { width: 38px; height: 42px; }
  .brand b { font-size: 17px; }
  .hero { min-height: 720px; }
  .hero__media { background-position: 62% center; }
  /* .hero__veil { background: linear-gradient(90deg, rgba(255,255,255,.94), rgba(255,255,255,.62)); } */
  .hero-layer--orchid { width: 520px; right: -75%; top: 8%; }
  .hero-layer--orchid img { opacity: .3; }
  .hero-layer--foliage { width: 340px; left: -48%; bottom: -4%; }
  .hero-flower--2, .hero-flower--3 { display: none; }  /* 窄屏隐藏 2/3 号，只留 3 架防挡内容 */
  .hero-flower--1 { left: 67%; top: 28%; width: 56px; }  /* 1 号移到中右，缩小 */
  .hero-flower--4 { left: 51%; top: 48%; width: 34px; }  /* 4 号移到中部，缩小 */
  .hero-flower--5 { left: 74%; top: 8%; width: 90px; }   /* 5 号移到右上，缩小 */
  .hero__inner { align-items: flex-end; padding: 0 0 100px; }
  .hero h1 { font-size: clamp(45px, 13vw, 65px); }
  .hero__lead { font-size: 15px; }
  .hero__rail, .hero__scroll { display: none; }
  .section { padding: 78px 0; }
  .section-heading { display: block; margin-bottom: 42px; }
  .section-heading > p { margin-top: 20px; }
  .service-grid, .team-grid, .story__grid, .offer-grid, .aboot-grid, .testimonial-layout { grid-template-columns: 1fr; }
  .service-card { min-height: 340px; border-right: 0; border-bottom: 1px solid var(--line); }
  .service-card:last-child { border-bottom: 0; }
  .story__visual { padding-left: 0; }
  .story__visual::before { display: none; }
  .story__seal { right: -5px; top: 45px; }
  .story__caption { left: 18px; }
  .story__points { grid-template-columns: 1fr; }
  .facts__inner { grid-template-columns: 1fr; gap: 0; }
  .fact { padding: 28px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .fact:last-child { border-bottom: 0; }
  .offer { min-height: 390px; }
  .offer__copy { left: 30px; width: 70%; }
  .gallery-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 330px); }
  .testimonial-layout { gap: 50px; }
  .quote > p { font-size: 22px; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .team-card__info { padding: 18px; }
  .team-card__info h3 { font-size: 19px; }
  .team-card__portrait span { font-size: 54px; }
  .booking__image { min-height: 620px; }
  .booking__hours { top: 120px; padding: 35px 25px; }
  .booking__form { padding: 70px 24px; }
  .booking__form form { grid-template-columns: 1fr; }
  .booking__form .button, .form-status { grid-column: 1; }
  .aboot-card__body h3 { min-height: 0; }
  .footer { padding-top: 70px; }
  .footer__grid { grid-template-columns: 1fr; gap: 42px; }
  .footer__bottom { flex-direction: column; margin-top: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero-layer span, .hero-flower span { animation: none !important; transform: none !important; }
}

/* ---- 移动端全屏菜单：二级菜单改为常驻显示（触屏无 hover） ---- */
@media (max-width: 1020px) {
  .has-dropdown::after { display: none; }
  .has-dropdown > a { justify-content: center; }
  .main-nav .dropdown {
    position: static; min-width: 0; margin: 2px 0 4px; padding: 5px; gap: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(240,249,247,.66) 46%, rgba(196,229,222,.74));
    border: 1px solid rgba(255,255,255,.66);
    box-shadow: 0 18px 48px rgba(19,45,40,.18), inset 0 1px 0 rgba(255,255,255,.96);
    -webkit-backdrop-filter: blur(30px) saturate(185%) brightness(1.08); backdrop-filter: blur(30px) saturate(185%) brightness(1.08);
    border-radius: 16px;
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none;
  }
  .main-nav .dropdown a {
    display: block; width: fit-content; margin-inline: auto; padding: 5px 12px; border-radius: 10px;
    font: 550 15px/1.9 var(--sans); color: var(--ink); white-space: normal;
    text-shadow: 0 1px 1px rgba(255,255,255,.55);
  }
  /* 与顶部导航栏一致的金色下划线（随文字宽度展开） */
  .main-nav .dropdown a::after { display: block; left: 12px; bottom: 6px; }
  .main-nav .dropdown a:hover::after { right: 12px; }
}
/* 移动端粘性浮动胶囊内：二级菜单纵向堆叠，左对齐小字号 */
@media (max-width: 1020px) {
  .navbar-wrap.is-sticky .main-nav .dropdown { margin: 0; }
  .navbar-wrap.is-sticky .main-nav .dropdown a { font: 550 12px/1.5 var(--sans); padding: 5px 12px; }
  /* 小屏下二级菜单为静态内联排布，中和桌面端的居中/左移位移动画 */
  .navbar-wrap.is-sticky .main-nav .dropdown,
  .navbar-wrap.is-sticky .has-dropdown.is-expanded .dropdown,
  .navbar-wrap.is-sticky .has-dropdown:not(.is-expanded):hover .dropdown,
  .navbar-wrap.is-sticky .has-dropdown:not(.is-expanded):focus-within .dropdown { transform: none; }
}

/* ---- 登录页 iframe 层（demo3 预加载方案：iframe 早已加载，仅切换可见性） ---- */
/* 浮层整体淡入/淡出时长 0.8s（“慢慢淡入”），关闭时同样 0.8s 淡出 */
.login-layer { position: fixed; inset: 0; z-index: 300; background: transparent; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s ease; }
.login-layer.is-open { opacity: 1; visibility: visible; }
/* iframe 缩放过渡时长 0.8s，与浮层淡入同步 */
.login-layer__frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; transform: scale(.94); transition: transform .8s cubic-bezier(.22,1,.36,1); }
.login-layer.is-open .login-layer__frame { transform: scale(1); }
/* 预加载状态胶囊（对齐 demo3 的加载状态条，展示预加载耗时与零重载说明） */
.login-layer__status { position: absolute; left: 24px; bottom: 20px; z-index: 2; margin: 0; padding: 7px 14px; border: 1px dashed rgba(247,243,234,.28); border-radius: 999px; color: rgba(247,243,234,.55); background: rgba(13,47,39,.55); font-size: 11px; letter-spacing: .08em; pointer-events: none; transition: color .4s, border-color .4s, opacity .4s; }
.login-layer__status.is-ready { color: rgba(214,173,120,.85); border-color: rgba(214,173,120,.45); }
.login-layer.is-open .login-layer__status { opacity: 0; }
.login-layer__close { position: absolute; right: 4vw; top: 3vh; z-index: 3; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(247,243,234,.25); border-radius: 50%; color: #fff; background: rgba(13,47,39,.5); font-size: 30px; line-height: 1; cursor: pointer; opacity: 0; visibility: hidden; transition: .35s; }
.login-layer.is-open .login-layer__close { opacity: 1; visibility: visible; }
.login-layer__close:hover { color: var(--gold-2); border-color: rgba(214,173,120,.7); transform: rotate(90deg); }

/* 登录浮层打开时：首页导航栏慢慢淡出（淡出时长 0.8s），关闭浮层时以同样 0.8s 淡回 */
.site-header { transition: opacity .8s ease, visibility .8s ease; }
body.is-login-open .site-header { opacity: 0; visibility: hidden; pointer-events: none; }

/* 登录浮层打开时：hero 左侧文案（.shell.hero__inner）与导航栏同步慢慢淡出
   （淡出时长 0.8s），关闭浮层时以同样 0.8s 淡回；过渡声明见上方 .hero__inner 基础规则 */
body.is-login-open .hero__inner { opacity: 0; visibility: hidden; }
/* 登录层打开：小船向左滑出视口（translate 属性，原理见上方 .boat 注释） */
body.is-login-open .boat {
	translate: -120vw 0;
}
/* 登录层打开：首页背景随纸飞机离场同步缩小到 110%（scale 独立属性，
   与 heroZoom 的 transform 动画、视差 translate 各自独立互不覆盖；
   cover + scale(1.1) 等效 background-size:110%，且窄窗口下仍铺满不留白），
   .8s ease 与飞机/小船离场同速；关闭浮层时同样 .8s 缩回 131.25% */
body.is-login-open .hero__media { scale: 1.1; }

/* ---------- 纸飞机三段位移（translate 属性，避开视差 JS 的内联 transform） ----------
   ① 打开首页（body.is-ready，app.js 在 window load 后添加）：
      从屏幕左下角外沿 45° 右上飞抵各自坐标；translate 与 opacity 共用
      --reveal-delay，边淡入边飞、交错入场（1.4s）
   ② 打开登录层（body.is-login-open）：0.8s 左上 45° 离场
      （该规则自带 transition，否则会套用 is-ready 的 1.4s+延迟列表）
   ③ 返回首页（body.is-returning，app.js 关闭登录层时添加）：
      keyframes 重放入场——动画优先级高于 transition，
      无需先撤销 ② 的离场位移即可直接从左下角飞回（0.95s） */
.air {
  translate: -110vw 110vw; /* 起点在左下角外：两分量等长 = 严格 45° */
  transition: opacity 1.15s ease var(--reveal-delay, 0s), translate 1.4s cubic-bezier(.22,.9,.3,1) var(--reveal-delay, 0s);
}
body.is-ready .air { translate: 0 0; }
body.is-login-open .air {
  
  translate: 110vw -110vw;
  transition: translate .8s ease;
}
body.is-returning .air { animation: air-fly-in .95s cubic-bezier(.22,.9,.3,1) both; }
@keyframes air-fly-in { from { translate: -110vw 110vw; } }

/* 纸飞机左右镜像。
   注意 .hero-flower img 原本带 scale(2.0)，直接覆盖会把飞机缩小，
   所以这里把两个变换叠加，并让 .hero-layers 内的规则保持更高优先级。 */
.hero-flower img { transform: scaleX(-1); }
.hero-layers .hero-flower img { transform: scale(2.0) scaleX(-1); }

/* 纸飞机放到文字下面一层。
   .hero-layers 原来 z-index: 19，比文字容器 .hero__inner（4）高，
   飞机就压在标题文字上了。降到 2 之后：
   1 = .hero__orb，2 = 纸飞机/叶层，3 = .hero::after 底部渐变，4 = 文字 */
.hero-layers { z-index: 2; }