/* ===== HK Premium 高端增强 (2026-08-11) =====
   香港页高端化：深色 hero 光晕层次 + 网格纹理 + 渐变标题，
   浅色内容区卡片质感，CTA 光斑。追加在页面内联样式之后加载。 */

/* 字体：Inter + 负字距（Google Fonts link 在各页面 head） */
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;letter-spacing:-0.01em}

/* ===== Hero：光晕层次 + 网格纹理 ===== */
.hero{position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-55%;left:-20%;width:140%;height:230%;background:
  radial-gradient(ellipse at 28% 32%,rgba(233,69,96,0.16) 0%,transparent 52%),
  radial-gradient(ellipse at 72% 66%,rgba(245,166,35,0.10) 0%,transparent 46%),
  radial-gradient(ellipse at 55% 20%,rgba(80,140,255,0.10) 0%,transparent 40%);pointer-events:none}
.hero{background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:46px 46px;background-color:transparent}
.hero h1{font-size:2.9em;line-height:1.12;letter-spacing:-0.03em;margin-bottom:16px}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1{background:linear-gradient(135deg,#ffffff 25%,#c9d4e8 70%,#f5a623 105%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
.hero p{color:#fff;max-width:760px;margin:14px auto 0;line-height:1.85}

/* ===== 玻璃徽章 ===== */
.hero-badges .badge{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.16);padding:9px 18px;border-radius:980px;font-size:13px;color:rgba(255,255,255,0.92);transition:all .35s ease}
.hero-badges .badge:hover{background:rgba(255,255,255,0.14);border-color:rgba(245,166,35,0.55);transform:translateY(-2px)}

/* ===== 内容区标题：渐变字 ===== */
.section-title{letter-spacing:-0.02em}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .section-title{background:linear-gradient(120deg,#1a1a2e 30%,#e94560 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}

/* ===== 卡片：质感升级（与主站 v3 语言一致） ===== */
.service-card,.delivery-card{position:relative;border-radius:16px;transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s,border-color .4s}
.service-card::before,.delivery-card::before{content:'';position:absolute;top:0;left:22px;right:22px;height:1px;background:linear-gradient(90deg,transparent,rgba(233,69,96,0.5),rgba(245,166,35,0.5),transparent);opacity:0;transition:opacity .4s}
.service-card:hover,.delivery-card:hover{transform:translateY(-5px);border-color:rgba(233,69,96,0.25);box-shadow:0 14px 40px rgba(26,26,46,0.12),0 4px 14px rgba(233,69,96,0.06)}
.service-card:hover::before,.delivery-card:hover::before{opacity:1}
.service-card h3{letter-spacing:-0.01em}

/* ===== CTA：光斑 + 网格 ===== */
.cta-section{position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;top:-60%;right:-15%;width:55%;height:230%;background:radial-gradient(ellipse at center,rgba(245,166,35,0.18) 0%,transparent 60%);pointer-events:none}
.cta-section{background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);background-size:46px 46px}
.cta-whatsapp{box-shadow:0 8px 28px rgba(37,211,102,0.35);position:relative;z-index:1}
.cta-whatsapp:hover{box-shadow:0 12px 36px rgba(37,211,102,0.45)}

/* ===== FAQ ===== */
.faq-item{border-radius:12px;transition:border-color .3s,box-shadow .3s}
.faq-item:hover{border-color:rgba(233,69,96,0.35);box-shadow:0 6px 20px rgba(26,26,46,0.06)}

/* ===== Footer 渐变顶线 ===== */
footer{position:relative}
footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(245,166,35,0.5),rgba(233,69,96,0.5),transparent)}

/* ===== 图片圆角 ===== */
img{border-radius:12px}

/* ===== 响应式微调 ===== */
@media(max-width:640px){.hero h1{font-size:1.7em;line-height:1.15}}

/* ===== AI 客服浮动入口美化（左下角） ===== */
#chatbot-btn-wrap{position:fixed!important;bottom:22px!important;left:22px!important;right:auto!important;z-index:9999!important;display:flex!important;align-items:center!important;gap:10px!important}
#chatbot-btn{
  position:static!important;width:54px!important;height:54px!important;border-radius:50%!important;border:none!important;
  background:linear-gradient(135deg,#4ECDC4 0%,#0077B6 100%)!important;color:#fff!important;font-size:24px!important;
  cursor:pointer!important;box-shadow:0 6px 22px rgba(0,119,182,.35),0 0 0 4px rgba(78,205,196,.15)!important;
  transition:transform .25s ease,box-shadow .25s ease!important;display:flex!important;align-items:center!important;justify-content:center!important;
  animation:chatbot-pulse-hk 2.6s ease-in-out infinite!important
}
#chatbot-btn:hover{transform:scale(1.1)!important;box-shadow:0 8px 28px rgba(0,119,182,.45),0 0 0 8px rgba(78,205,196,.08)!important}
#chatbot-btn:active{transform:scale(.95)!important}
#chatbot-btn .chatbot-btn-close{display:none!important}
#chatbot-btn.active .chatbot-btn-icon{display:none!important}
#chatbot-btn.active .chatbot-btn-close{display:inline!important}
#chatbot-btn-label{
  background:rgba(255,255,255,.95)!important;color:#0077B6!important;padding:6px 14px!important;border-radius:20px!important;
  font-size:13px!important;font-weight:600!important;box-shadow:0 4px 14px rgba(0,0,0,.1)!important;white-space:nowrap!important;
  backdrop-filter:blur(10px)!important;border:1px solid rgba(0,119,182,.12)!important
}
#chatbot-btn-wrap.active #chatbot-btn-label{display:none!important}
#chatbot-panel{
  position:fixed!important;bottom:88px!important;left:22px!important;right:auto!important;width:min(360px,calc(100vw - 44px))!important;
  height:500px!important;background:#fff!important;border-radius:20px!important;box-shadow:0 12px 40px rgba(0,0,0,.15)!important;
  display:none;flex-direction:column!important;z-index:9998!important;overflow:hidden!important;border:1px solid rgba(0,0,0,.08)!important
}
#chatbot-panel.open{display:flex!important}
#chatbot-panel .chatbot-header{
  background:linear-gradient(135deg,#4ECDC4 0%,#0077B6 100%)!important;color:#fff!important;padding:14px 16px!important;display:flex!important;
  align-items:center!important;justify-content:space-between!important;flex-shrink:0!important
}
#chatbot-panel .chatbot-header-title{font-weight:700!important;font-size:15px!important}
#chatbot-panel .chatbot-header-status{font-size:12px!important;opacity:.9!important}
#chatbot-panel .chatbot-clear-btn,#chatbot-panel .chatbot-close-btn{
  background:rgba(255,255,255,.2)!important;border:none!important;color:#fff!important;width:28px!important;height:28px!important;
  border-radius:50%!important;cursor:pointer!important;display:flex!important;align-items:center!important;justify-content:center!important
}
#chatbot-msgs{flex:1!important;overflow-y:auto!important;padding:16px!important;background:#f8f9fb!important}
.chatbot-msg-bubble{
  display:inline-block!important;padding:10px 14px!important;border-radius:16px!important;font-size:14px!important;line-height:1.65!important;
  max-width:92%!important;box-shadow:0 2px 8px rgba(0,0,0,.05)!important;word-break:break-word!important;overflow-wrap:anywhere!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;min-width:0!important
}
.chatbot-msg.bot .chatbot-msg-bubble{background:#fff!important;color:#222!important;border:1px solid #eef0f3!important}
.chatbot-msg.user{text-align:right!important}
.chatbot-msg.user .chatbot-msg-bubble{background:linear-gradient(135deg,#4ECDC4 0%,#0077B6 100%)!important;color:#fff!important}
.chatbot-msg-label{font-size:12px!important;font-weight:600!important;color:#555!important;margin-bottom:4px!important}
.chatbot-quick-btn{white-space:normal!important;word-break:break-word!important;overflow-wrap:anywhere!important;height:auto!important;min-height:32px!important;line-height:1.4!important}
.chatbot-quick{display:flex!important;flex-wrap:wrap!important;gap:8px!important;padding:0 16px 12px!important;background:#f8f9fb!important}
.chatbot-quick-btn{background:#fff!important;border:1px solid #e5e7eb!important;border-radius:14px!important;padding:6px 12px!important;font-size:12px!important;color:#333!important;cursor:pointer!important;transition:all .2s!important}
.chatbot-quick-btn:hover{border-color:#0077B6!important;color:#0077B6!important}
.chatbot-input-wrap{padding:12px 14px!important;background:#fff!important;border-top:1px solid #eef0f3!important;display:flex!important;gap:8px!important;align-items:center!important}
#chatbot-input{flex:1!important;border:1px solid #e5e7eb!important;border-radius:14px!important;padding:10px 12px!important;font-size:14px!important;resize:none!important;outline:none!important;max-height:80px!important}
#chatbot-input:focus{border-color:#0077B6!important}
#chatbot-send{background:#0077B6!important;color:#fff!important;border:none!important;border-radius:12px!important;padding:8px 14px!important;font-size:13px!important;cursor:pointer!important}
#chatbot-send:disabled{background:#c5c5c7!important;cursor:not-allowed!important}
@keyframes chatbot-pulse-hk{0%{box-shadow:0 6px 22px rgba(0,119,182,.35),0 0 0 4px rgba(78,205,196,.15)}70%{box-shadow:0 6px 22px rgba(0,119,182,.35),0 0 0 14px rgba(78,205,196,0)}100%{box-shadow:0 6px 22px rgba(0,119,182,.35),0 0 0 4px rgba(78,205,196,.15)}}
@media(max-width:480px){
  #chatbot-btn-wrap{bottom:16px!important;left:16px!important}
  #chatbot-btn-label{display:none!important}
  #chatbot-panel{bottom:78px!important;left:16px!important;width:calc(100vw - 32px)!important;height:420px!important}
}