/* ===== CSS RESET & TOKENS ===== */
:root {
  --bg: #ffffff;
  --surface: #fffefe;
  --muted: #3f4856;
  --text: #0b0f14;
  --brand: #ff6a00;
  --brand-2: #ff9a3d;
  --accent: #ffe7cc;
  --line: #e6e6e6;
  --max: 1200px;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  --nav-h: 70px;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  max-width: 100%; 
  overflow-x: hidden; 
  scroll-padding-top: var(--nav-h);
}
body {
  margin: 0;
  line-height: 1.6;
  font-size: 16px;
  font-family: "Poppins", "Montserrat", "Noto Sans SC", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: #fff7ef;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  padding-top: var(--nav-h);
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
  /* border-radius: 12px; */
}
h1,
h2,
h3,
.brand {
  font-family: "Montserrat", "Noto Sans SC", "PingFang SC", "Microsoft YaHei",
    sans-serif;
}

/* neutralize zebra/banded defaults unless你自己需要 */
section.zebra:nth-of-type(even),
section.zebra:nth-of-type(odd),
.banded {
  background: none !important;
}

img.responsive {
  display: block;
  max-width: 100%;
  height: auto;          /* 关键：按比例缩放 */
  margin: 0 auto;        /* 可选：水平居中 */
}

/* ===== TOPBAR / NAV ===== */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
  height: var(--nav-h);
}
.nav {
  max-width: 1350px;
  margin: auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar {
  display: none;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.brand-logo-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  background: #fff;
}
.spacer {
  flex: 1;
}
.nav a.link {
  opacity: 0.9;
  padding: 10px 12px;
  border-radius: 10px;
}
.nav a.link:hover {
  background: var(--accent);
  opacity: 1;
}
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  padding: 10px 16px;
  font-weight: 800;
  cursor: pointer;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  box-shadow: 0 10px 20px rgba(255, 106, 0, 0.28);
  --ty: 0;
  transform: translateY(var(--ty)) scale(1);
  transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease;
}
.cta-btn:hover {
  --ty: -2px;
}

.cta-btn.breathe {
  animation: btnBreathe 2.4s ease-in-out infinite;
  transform-origin: center;
}

@keyframes btnBreathe {
  0%,
  100% {
    transform: translateY(var(--ty)) scale(1);
  }
  50% {
    transform: translateY(var(--ty)) scale(1.05);
  }
}

/* 减少动态偏好时禁用动画 */
@media (prefers-reduced-motion: reduce) {
  .cta-btn.breathe {
    animation: none;
  }
}
.menu-toggle {
  display: none;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 800;
  cursor: pointer;
}
/* ===== NAV — Mobile (≤900px) force hamburger at top-right ===== */
@media (max-width: 900px){
  /* 顶栏行：用 flex，右侧为汉堡 */
  .nav{
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: visible; /* 避免抽屉被裁剪 */
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
  }

  /* 隐藏 spacer，避免把汉堡挤到中间 */
  .spacer{ display: none !important; }

  /* 汉堡按钮：显示并推到最右 */
  .menu-toggle{
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 38px; height: 38px;
    margin-left: auto !important;   /* 关键：推到最右 */
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 10px;
    background: #fff;
    font-size: 20px; line-height: 1;
    cursor: pointer;
    z-index: 102;
  }

  /* 移动端隐藏右上角 WhatsApp CTA */
  .nav .cta-btn{ display: none !important; }

  /* 抽屉式导航（保留你现有效果） */
  .navlinks{
    position: fixed;
    left: 0; right: 0;
    top: var(--nav-h, 56px);
    z-index: 101;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 16px 40px rgba(0,0,0,.12);
    padding: 8px 10px calc(12px + env(safe-area-inset-bottom, 0px));

    display: grid;
    grid-auto-rows: minmax(44px, auto);
    gap: 6px;

    opacity: 0;
    transform: translateY(-8px) scale(.98);
    pointer-events: none;
    transition: transform .22s ease, opacity .22s ease;
  }
  .menu-toggle[aria-expanded="true"] ~ .navlinks,
  .navlinks.open{
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  /* 仅保留四个菜单项：Home/Price/Layout/Contact */
  .navlinks .link{ display: none !important; }
  .navlinks .link[href="#top"],
  .navlinks .link[href="#price"],
  .navlinks .link[href="#layout"],
  .navlinks .link[href="#gallery"],
  .navlinks .link[href="#contact"]{
    display: block !important;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    font-weight: 700;
    text-align: left;
  }
  .navlinks .link:active{
    transform: translateY(1px);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }
}

/* 桌面端维持原状：隐藏汉堡，保留 WhatsApp */
@media (min-width: 901px){
  .menu-toggle{ display: none !important; }
  .nav .cta-btn{ display: inline-flex; }
}

/* ===== HERO ===== */
.hero {
  position: relative;
  padding: 0;
  margin: 32px 0 0;
  background: none;
  box-shadow: none;
}
.hero-img-wrap {
  position: relative;
  width: 100%;
  max-width: 1350px;
  margin: 0 auto;
  /* border-radius: 24px; */
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.hero-main-img {
  width: 100%;
  height: clamp(220px, 48vw, 700px);
  object-fit: cover;
  object-position: center right;
  display: block;
  background: #fff7ef;
  min-height: 220px;
}
@media (max-width: 900px) {
  .hero-main-img {
    height: 50vw; /* Increased from 38vw to 50vw for larger banner */
    min-height: 300px; /* Increased minimum height */
    max-height: 400px; /* Increased maximum height */
  }
}

/* ---------- Hero 下方两块：基础保持不变 ---------- */
.hero-under {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 40px 0;
}
.hero-video {
  flex: 2 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-text {
  flex: 1 1 0;
  background: rgba(255, 255, 255, 0.96);
  /* border-radius: 20px; */
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.12);
  padding: 32px 24px;
  font-size: 0.8em;
  max-width: 380px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---------- Mobile：对调顺序 + 媒体满宽 ---------- */
@media (max-width: 900px) {
  .hero-under {
    flex-direction: column;
    gap: 24px;
    padding: 18px 8px 0; /* 外层保留一点左右留白 */
  }

  /* 顺序：媒体在上，文字在下 */
  .hero-video {
    order: 2;
    padding: 0 !important;
  } /* 去掉给 .hero-video 误加的内边距 */
  .hero-text {
    order: 1;
    padding: 20px 12px; /* Reduced padding */
    max-width: 100%;
    font-size: 0.7em; /* Smaller text size */
  }

  .hero-text h1 {
    font-size: 1.8em; /* Smaller heading */
    margin-bottom: 12px;
  }

  .hero-text p {
    font-size: 0.9em; /* Smaller paragraph text */
    line-height: 1.4;
  }

  /* 媒体元素满宽显示；适配 img / video / iframe */
  .hero-video img,
  .hero-video video,
  .hero-video iframe {
    width: 100%;
    height: auto;
    display: block;
    /* border-radius: 18px; */
  }

  /* 如果是 YouTube 等 iframe，希望固定比例更“满”，可启用这段： */
  .hero-video iframe {
    aspect-ratio: 16/9;
    height: auto; /* 让 aspect-ratio 生效 */
  }
}

/* （可选）想要真正“贴边满屏”的视觉：把手机下的外层左右留白也去掉 */
@media (max-width: 600px) {
  .hero-under {
    padding-left: 0;
    padding-right: 0;
  }
  /* 如需考虑 iPhone 安全区，可加：
     .hero-under { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } */
}

/* HERO 右下角 FAB（两行自适应） */
.hero-fab {
  position: absolute;
  right: clamp(12px, 2.5vw, 22px);
  bottom: clamp(12px, 2.5vw, 22px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
  padding: clamp(12px, 1.8vw, 16px) clamp(16px, 2.4vw, 22px);
  font-weight: 800;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.2;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: 0;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(255, 106, 0, 0.32);
  text-decoration: none;
  inline-size: clamp(140px, 40vw, 220px);
  max-width: calc(100% - clamp(20px, 5vw, 36px));
  white-space: normal;
  text-align: center;
  --y: 0;
  transform: translateY(var(--y)) scale(1);
  transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease;
}
.hero-fab:hover {
  --y: -2px;
  box-shadow: 0 14px 34px rgba(255, 106, 0, 0.38);
}
.hero-fab:active {
  --y: 0;
}
.hero-fab .waz {
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.1));
  flex: 0 0 auto;
}
.hero-fab > span:nth-of-type(2) {
  display: inline-block;
  line-height: 1.25;
  word-break: keep-all;
  text-wrap: balance;
}
.hero-fab.breathe {
  animation: heroBreathe 2.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes heroBreathe {
  0%,
  100% {
    transform: translateY(var(--y)) scale(1);
  }
  50% {
    transform: translateY(var(--y)) scale(1.05);
  }
}
@media (max-width: 853px){
  .hero-fab{
    /* 更精简的占位，减弱对画面的遮挡 */
    padding: 8px 10px;
    gap: 8px;
    font-size: 9px;
    inline-size: auto;              /* 取消两行大按钮 */
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 8px 18px rgba(255,106,0,.28);
    animation: none !important;     /* 关闭“呼吸”动画，避免干扰画面文案 */
    opacity: .96;
  }
  .hero-fab .waz{
    width: 20px; height: 20px;
  }
  /* 隐藏原本的长文字，用 data-attribute 输出短文案 */
  .hero-fab > span{ display: none !important; }
  .hero-fab::after{
    content: attr(data-label-mobile);
    font-weight: 800;
    line-height: 1;
    margin-left: 2px;
  }
}

/* ===== Sections & Grid ===== */
section {
  padding: 64px 20px;
  scroll-margin-top: var(--nav-h);
}
.wrap {
  max-width: var(--max);
  margin: auto;
}
.grid {
  display: grid;
  gap: 24px;
}
.two {
  grid-template-columns: 1.15fr 0.85fr;
}
.three {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1000px) {
  .two,
  .three {
    grid-template-columns: 1fr;
  }
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
h2 {
  font-size: clamp(26px, 3vw, 40px);
  margin: 0 0 10px;
}
.sub {
  color: var(--muted);
  margin-bottom: 24px;
}

/* ===== price / Plans（B/C） ===== */
.plans {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) {
  .plans {
    grid-template-columns: 1fr;
  }
}
/* ===== price: hide “Your Oasis of Relaxation” on mobile ===== */
@media (max-width: 900px){
  /* 只隐藏 #price 两列里的左侧那张直系 .card（即 Oasis 文案卡） */
  #price .wrap.grid.two > .card:first-child{
    display: none !important;
  }
}

.plan-card {
  background: #fff;
  border: 1px solid var(--line);
  /* border-radius: var(--radius); */
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.plan-media {
  background: #fff;
  border-bottom: 1px solid var(--line);
  max-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plan-media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  background: #fff;
  /* border-radius: 0; */
  max-height: 380px;
}
@media (max-width: 900px) {
  .plan-media {
    max-height: 400px;
  }
  .plan-media img {
    max-height: 420px;
  }
}
.plan-body {
  padding: 18px 18px 20px;
}
.plan-title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
}
.plan-meta {
  margin: 0 0 8px;
  color: var(--muted);
}
.plan-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}
.plan-list li {
  margin: 6px 0;
}

@media (max-width: 900px) {
  /* 单列栈叠 */
  #price .wrap.grid.two {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  /* 右栏（包含 Price & Package / Key Facts）提前到第 1 个 */
  #price .wrap.grid.two > .grid {
    order: 1;
  }
  /* 左栏（Your Oasis of Relaxation）排在第 2 个 */
  #price .wrap.grid.two > .card {
    order: 2;
  }
}

/* freebies card */
.freebies-card {
  background: #fff7ef;
  border: 2px solid #ff9a3d;
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(255, 106, 0, 0.08);
  padding: 28px 18px;
  max-width: 1200px;
  margin: 32px auto 0;
}

/* 基础：自适应网格 */
.freebies-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 16px;
  align-items: stretch;
  justify-items: center;
}

/* 卡片：垂直水平居中 + 统一最小高度 + 更好的换行 */
.freebies-list li{
  background:#fff;
  border-radius:12px;
  padding:12px 16px;                 /* 稍加竖向内边距，文字更居中 */
  font-size:1em;
  color:#694f3d;
  font-weight:600;
  box-shadow:0 2px 8px rgba(255,106,0,.08);
  text-align:center;

  display:flex;                      /* 关键：垂直居中 */
  align-items:center;
  justify-content:center;

  min-height: clamp(56px, 7vw, 84px);/* 统一高度，2~3行也不显得挤 */
  line-height: 1.25;                 /* 行高一致 */
  word-break: keep-all;              /* 尽量整词换行 */
  text-wrap: balance;                /* 支持的浏览器更匀称；不支持无影响 */

  min-width:0;                       /* 防止在窄列时把网格撑破 */
}

/* 手机：2 列，读起来更舒适 */
@media (max-width: 599px) {
  .freebies-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 平板：4 列（保持你原来的视觉密度） */
@media (min-width: 600px) and (max-width: 1024px) {
  .freebies-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 桌面：最多 6 列 */
@media (min-width: 1025px) {
  .freebies-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}



/* ===== Gallery & Lightbox ===== */
.gallery-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 80%;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
}
.gallery-item {
  scroll-snap-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fff;
}
.gallery-item img {
  width: 100%;
  height: clamp(220px, 55vw, 520px);
  object-fit: cover;
  display: block;
}
@media (min-width: 900px) {
  .gallery-strip {
    grid-auto-columns: 48%;
  }
}
/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.lightbox.show {
  display: flex;
}

.lightbox img {
  max-width: 90%;
  max-height: 85%;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

.lightbox .close,
.lightbox .prev,
.lightbox .next {
  position: absolute;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  border: none;
  font-size: 32px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
}

.lightbox .close {
  top: 20px;
  right: 30px;
}

.lightbox .prev {
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox .next {
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox button:hover {
  background: rgba(0, 0, 0, .75);
}

/* Gallery Preview */
.gallery-preview {
  position: relative;
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
  max-width: 900px;
  margin: auto;
}

.gallery-preview img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.gallery-preview .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s;
}

.gallery-preview:hover .overlay {
  opacity: 1;
}

/* === Gallery + YouTube：左右并排，严格等高 === */

/* 网格两列（桌面），移动端单列 */
#gallery .wrap.grid.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  #gallery .wrap.grid.two {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* 统一：把“外层容器”做成同一比例的可视盒（16:9） */
#gallery .gallery-preview,
#gallery .youtube-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fff;
  /* 覆盖右侧元素可能的内联尺寸，保持与左侧一致 */
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 左侧：图片铺满容器 */
#gallery .gallery-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 左侧：提示层保留绝对定位（若你已有可忽略此行） */
#gallery .gallery-preview .overlay {
  position: absolute;
  inset: 0;
}

/* 右侧：缩略图容器也铺满“外层可视盒” */
#gallery .youtube-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#gallery .youtube-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 播放键保持居中（如已写过可忽略） */
#gallery .youtube-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
#gallery .youtube-play::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent #fff;
}

/* 可选：标题与媒体之间统一间距 */
#gallery h2 {
  margin: 0 0 12px;
}

/* ===== Location ===== */
/* 桌面：文字 | 地图 */
#location .wrap.grid.two {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-areas: "text map";
  align-items: start;
}
#location .wrap.grid.two > :first-child {
  grid-area: text;
}
#location .wrap.grid.two .map {
  grid-area: map;
}

/* 地图：按图片原比例自适应（仅作用于 Location） */
#location .map,
#location .map-responsive {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  aspect-ratio: auto; /* 关键：不强制 16:9 */
}
#location .map img,
#location .map-responsive img {
  position: static; /* 不用绝对定位 */
  display: block;
  width: 100%;
  height: auto; /* 按原比例缩放 */
  object-fit: contain;
  margin: 0 auto;
}

/* 移动端：先 map 再 text */
@media (max-width: 900px) {
  #location .wrap.grid.two {
    grid-template-columns: 1fr;
    grid-template-areas:
      "map"
      "text";
    gap: 18px;
  }
}

/* ===== Awards Card（暖橙系配色，四图并排，静态显示） ===== */
#awards .awards-card {
  background: #fff8f1; /* 与 freebies/brand 协调的浅橙底 */
  border: 1px solid #ffe1c2;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(255, 106, 0, 0.06);
  padding: 20px 18px;
}
#awards .awards-card h2 {
  color: #000000;
  font-weight: 800;
  margin: 0 0 10px;
}
#awards .awards-card p {
  color: #000000; /* 与站内暖棕文字一致 */
  margin: 0 0 12px;
}

/* 四张 logo 静态网格：桌面 4 列，平板 2 列，手机 2 列 */
#awards .award-rotator {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 18px;
  align-items: center;
  justify-items: center;
  margin-top: 6px;
  height: auto; /* 移除轮播容器的固定高度 */
}

/* 统一 logo 外观尺寸与风格（白底小卡、轻阴影） */
#awards .award-rotator img {
  position: static; /* 不再绝对定位 */
  width: auto;
  max-width: 100%;
  max-height: 100px; /* 控制“logo size” */
  object-fit: contain;
  opacity: 1;
  animation: none !important; /* 关闭之前的轮播动画 */
  filter: saturate(0.95) contrast(1.02) brightness(0.98);

  background: #fff;
  border: 1px solid #f3e1d1;
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 2px 8px rgba(255, 106, 0, 0.06);
}

/* 响应式列数与尺寸微调 */
@media (max-width: 900px) {
  #awards .award-rotator {
    grid-template-columns: repeat(2, minmax(0, 1fr 1fr));
  }
}
@media (max-width: 520px) {
  #awards .award-rotator {
    gap: 10px 12px;
  }
  #awards .award-rotator img {
    max-height: 52px;
    padding: 6px 8px;
  }
}

/* ===== Footer：左=logo+名字+copyright；右=Sales Gallery（无额外框） ===== */
footer {
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
  border-top: 1px solid var(--line);
  backdrop-filter: saturate(140%) blur(10px);
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 16px 22px;

  display: grid;
  grid-template-columns: minmax(320px, 1.2fr) minmax(280px, 1fr);
  gap: 16px 18px;
  align-items: start;
}
.footer-top {
  grid-column: 1 / 2;
  display: block;
  margin-bottom: 0;
}
footer .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
footer .brand .brand-text {
  color: var(--text);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.2px;
}
.footer-meta {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.footer-meta p {
  margin: 0;
}
.footer-meta::before {
  content: none !important;
}
.footer-grid {
  grid-column: 2 / 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.footer-card.footer-gallery {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  color: var(--text);
}
.footer-card.footer-gallery h3 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
}
.footer-card.footer-gallery .muted {
  color: var(--muted);
  margin: 0 0 6px;
}
.footer-card.footer-gallery .footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  font-size: 14px;
  color: var(--text);
}

@media (max-width: 880px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }
  .footer-top {
    grid-column: 1 / -1;
  }
  .footer-grid {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .footer-inner {
    padding: 14px 12px 18px;
  }
}

/* ===== Utils ===== */
.tag {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: #3a220f;
  background: #ffe1bf;
  font-weight: 800;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
}
.row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.muted {
  color: var(--muted);
}
.iframe-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== WhatsApp Floating Button (bottom-right) ===== */
.wa-fab{
  position: fixed;
  right: max(8px, env(safe-area-inset-right, 0px) + 8px);
  bottom: max(8px, env(safe-area-inset-bottom, 0px) + 8px);
  z-index: 999999; /* Increased z-index for maximum visibility */

  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, #25D366, #1ebe57);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 12px 24px rgba(37,211,102,.3), 0 0 0 2px rgba(255,255,255,.1);
  cursor: pointer;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
  animation: waBreathe 3s ease-in-out infinite;
  /* Ensure it's always visible */
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}
.wa-fab:hover{ transform: translateY(-1px); box-shadow: 0 14px 28px rgba(37,211,102,.4), 0 0 0 2px rgba(255,255,255,.2); }
.wa-fab:active{ transform: translateY(0); }
.wa-fab .wa-ico{ width: 32px; height: 32px; display: inline-block; }
.wa-fab .wa-label{ font-size: 13px; letter-spacing: .2px; }

/* Desktop/Web mode: Position closer to cards */
@media (min-width: 769px) {
  .wa-fab {
    right: 24px; /* Closer to content area */
    bottom: 24px; /* Closer to content area */
    padding: 12px 16px; /* Slightly larger for desktop */
    font-size: 14px;
  }
  .wa-fab .wa-ico {
    width: 36px;
    height: 36px;
  }
  .wa-fab .wa-label {
    font-size: 15px;
  }
}

/* Mobile-specific styles: Keep current position, effect and size */
@media (max-width: 768px) {
  .wa-fab {
    right: max(12px, env(safe-area-inset-right, 0px) + 12px);
    bottom: max(12px, env(safe-area-inset-bottom, 0px) + 12px);
    padding: 10px 12px;
    font-size: 13px;
    z-index: 1000000; /* Even higher z-index on mobile */
  }
  .wa-fab .wa-ico {
    width: 36px;
    height: 36px;
  }
  .wa-fab .wa-label {
    font-size: 14px;
  }
}

@keyframes waBreathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 12px 28px rgba(37,211,102,.28);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 16px 36px rgba(37,211,102,.4);
  }
}

/* Dialog：跟随更大的 FAB 往上偏移一些 */
.wa-panel[hidden]{ display: none; }
.wa-panel{
  position: fixed;
  right: clamp(12px, 3vw, 24px);
  bottom: calc(clamp(12px, 3vw, 24px) + 78px); /* ← FAB 变大后，面板上移更多 */
  z-index: 1001;
  width: min(92vw, 420px);
}

/* 卡片主体与指示三角（右侧对齐） */
.wa-card{
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
  padding:16px 16px 18px !important;
}
.wa-card::after{
  content:"";
  position: absolute;
  right: 18px; bottom: -10px;
  border: 10px solid transparent;
  border-top-color: #fff;
  filter: drop-shadow(0 -1px 0 rgba(0,0,0,.05));
}

.wa-close{
  position: absolute; right: 8px; top: 8px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.08); background:#fff; color:#333;
  cursor: pointer;
}

.wa-head{ display:flex; align-items:center; gap:12px; margin: 4px 0 10px; }


.wa-avatar{
  width: 48px; height: 48px;            
  display: block;
  border-radius: 50%;
  object-fit: cover;
  background-color: #fff !important;      
  padding: 3px;                            
  box-shadow:
    0 0 0 1px rgba(0,0,0,.06),            
    0 1px 2px rgba(0,0,0,.05);
  mix-blend-mode: normal;                  
  image-rendering: -webkit-optimize-contrast;
}

.wa-meta .wa-title{ font-weight: 800; font-size: 15px; color: var(--text); }
.wa-meta .wa-sub{ font-size: 12px; color: var(--muted); margin-top: 2px; }
.wa-msg{ font-size: 16px; line-height: 1.5; color: var(--text); margin: 6px 2px 12px; margin: 10px 2px 22px !important;}
.wa-actions .cta-btn{
  display: inline-flex; justify-content:center; width: 100%;
  padding: 12px 14px; font-weight: 800;
  border-radius: 10px;
  background: linear-gradient(135deg, #25D366, #1ebe57);
  box-shadow: 0 8px 20px rgba(37,211,102,.22);
}

@media (max-width: 480px){
  .wa-fab .wa-label{ display:none; }      
  .wa-panel{ width: min(95vw, 350px); }
}


/* ===== Contact：布局与卡片皮肤 ===== */
#contact .wrap.grid.two{
  display:grid;
  grid-template-columns: minmax(280px,440px) minmax(360px,640px);
  gap:20px 24px;
  align-items:stretch;                 /* 两列等高 */
  justify-content:center;
}
@media (max-width:900px){
  #contact .wrap.grid.two{ grid-template-columns:1fr; gap:14px; }
}

/* 左右两卡统一底色与阴影 */
#contact .contact-copy,
#contact .form-card{
  background:#fff8f1;
  border:1px solid #ffe1c2;
  border-radius:14px;
  box-shadow:0 8px 26px rgba(255,106,0,.08);
  display:flex;                        /* 等高容器 */
  flex-direction:column;
}

/* ===== 左侧文案卡：桌面更疏朗，移动保持紧凑 ===== */
#contact .contact-copy{
  padding:16px 18px;                   /* mobile */
  font-size:15px;
  line-height:1.55;
}
@media (min-width:900px){
  #contact .contact-copy{
    padding:26px 24px;                 /* desktop 放大内边距 */
    font-size:16px;
    line-height:1.7;                   /* 读感更松 */
  }
}
#contact .contact-copy::before{ content:none !important; }

/* 文案容器与段落节奏 */
#contact .contact-copy .inner{
  margin:auto 0;                        /* 垂直居中 */
  text-align:left;
  max-width:62ch;
}
#contact .contact-copy .inner br{ display:none; }     /* 用段落 margin 控制空行 */
#contact .contact-copy .inner p{ margin:0 0 10px; }
#contact .contact-copy .inner p.or{ margin:10px 0; font-weight:700; opacity:.75; }
@media (min-width:900px){
  #contact .contact-copy .inner p{ margin:0 0 14px; } /* desktop 段落间距更大 */
  #contact .contact-copy .inner p.or{ margin:12px 0; }
}

/* 强调链接（保持你原有风格） */
#contact .contact-copy .hl-link{
  color:var(--brand);
  font-weight:900;
  text-decoration:none;
  letter-spacing:.1px;
}
#contact .contact-copy .hl-link:hover{ color:#ff7e2a; text-decoration:underline; }
#contact .contact-copy .hl-link:focus-visible{
  outline:2px solid rgba(255,106,0,.45); outline-offset:2px; border-radius:4px;
}

/* ===== 右侧表单卡 ===== */
#contact .form-card{ padding:22px 18px; }
@media (min-width:900px){ #contact .form-card{ padding:26px 22px; } }

#contact .form-card h2{
  margin:0 0 8px;
  font-weight:800;
  font-size:clamp(22px,3.6vw,30px);
  line-height:1.2;
  color:var(--text);
}
#contact .form-card .sub{
  color:#6e5a4a; opacity:.9; margin:0 0 14px;
}
#contact .form-card input,
#contact .form-card textarea{
  width:100%;
  background:#fff;
  border:1px solid #f2e2d6;
  border-radius:12px;
  padding:12px;
  font:inherit; color:var(--text);
  box-shadow:0 2px 6px rgba(255,106,0,.06) inset;
}
#contactForm .cta-btn{
  width:100%;
  font-size:1.05em;
  padding:14px 0;
  border-radius:12px;
  box-shadow:0 8px 22px rgba(255,106,0,.25);
}

/* ===== Mobile 顺序：表单在上、文案在下 ===== */
@media (max-width:900px){
  #contact .form-card{ order:1; }
  #contact .contact-copy{ order:2; }
}

/* YouTube Card */
.youtube-card {
  display: block;
  max-width: 640px;
  margin: 24px auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  text-align: center;
  background: #fff;
  transition: box-shadow 0.2s;
}
.youtube-card:hover {
  box-shadow: 0 12px 32px rgba(255, 106, 0, 0.18);
}
.youtube-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
}
.youtube-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.youtube-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.youtube-play::before {
  content: "";
  display: block;
  margin-left: 8px;
  border-style: solid;
  border-width: 16px 0 16px 28px;
  border-color: transparent transparent transparent #fff;
}
.youtube-title {
  font-size: 1.2em;
  font-weight: 700;
  padding: 18px 0;
  color: #ff6a00;
}

/* Price highlight */
.price-highlight {
  display: inline-block;
  font-size: 2em;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #ff6a00 60%, #ff9a3d 100%);
  padding: 10px 24px;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(255, 106, 0, 0.12);
  margin-bottom: 8px;
  letter-spacing: 1px;
}

/* Inline styles moved from HTML */

/* --- Gallery preview --- */
.gallery-preview {
  position: relative;
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
  max-width: 900px;
  margin: auto;
}

.gallery-preview img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.gallery-preview .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s;
}

.gallery-preview:hover .overlay {
  opacity: 1;
}

/* --- Lightbox --- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.lightbox.show {
  display: flex;
}

.lightbox img {
  max-width: 90%;
  max-height: 85%;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

.lightbox .close,
.lightbox .prev,
.lightbox .next {
  position: absolute;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  border: none;
  font-size: 32px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
}

.lightbox .close {
  top: 20px;
  right: 30px;
}

.lightbox .prev {
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox .next {
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox button:hover {
  background: rgba(0, 0, 0, .75);
}

/* YouTube Modal */
#youtubeModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, .85);
  align-items: center;
  justify-content: center;
}

#youtubeModal iframe {
  max-width: 900px;
  width: 90vw;
  height: 56.25vw;
  max-height: 506.25px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
}

/* Success Popup */
#successPopup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, .55);
  align-items: center;
  justify-content: center;
  overflow: auto;
}

#successPopup > div {
  background: #fff;
  border-radius: 18px;
  padding: 26px 22px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
  max-width: 420px;
  width: 92%;
  text-align: center;
  max-height: 80vh;
  overflow: auto;
}

#successPopup h3 {
  margin: 0 0 8px;
  color: #ff6a00;
}

#successPopup p {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
}

#successPopup button {
  margin-top: 16px;
  padding: 10px 18px;
  border: 0;
  border-radius: 12px;
  background: #ff6a00;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* WhatsApp Panel */
.wa-panel {
  position: fixed;
  right: clamp(12px, 3vw, 24px);
  bottom: calc(clamp(12px, 3vw, 24px) + 78px);
  z-index: 1001;
  width: min(92vw, 420px);
}

.wa-panel[hidden] {
  display: none;
}

.wa-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .16);
  padding: 16px 16px 18px !important;
}

.wa-card::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -10px;
  border: 10px solid transparent;
  border-top-color: #fff;
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .05));
}

.wa-close {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .08);
  background: #fff;
  color: #333;
  cursor: pointer;
}

.wa-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 10px;
}

.wa-avatar {
  width: 48px;
  height: 48px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  background-color: #fff !important;
  padding: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .05);
  mix-blend-mode: normal;
  image-rendering: -webkit-optimize-contrast;
}

.wa-meta .wa-title {
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
}

.wa-meta .wa-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.wa-msg {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  margin: 6px 2px 12px;
  margin: 10px 2px 22px !important;
}

.wa-actions .cta-btn {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  padding: 12px 14px;
  font-weight: 800;
  border-radius: 10px;
  background: linear-gradient(135deg, #25D366, #1ebe57);
  box-shadow: 0 8px 20px rgba(37, 211, 102, .22);
}

@media (max-width: 480px) {
  .wa-fab .wa-label {
    display: none;
  }
  .wa-panel {
    width: min(95vw, 350px);
  }
}

/* Contact Form Styles */
#contactForm .cta-btn {
  width: auto !important;
  min-width: 200px;
  font-size: 1em;
  padding: 10px 28px;
  margin: 0 auto;
  display: block;
  box-shadow: 0 4px 12px rgba(59, 178, 115, .12);
}