@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&family=Playfair+Display:wght@400;600;700&display=swap');

:root {
  /* ─── Sapphire Blue palette ───
     Pure, saturated sapphire — evokes official/authoritative while staying vibrant */
  --navy: #0F52BA;
  --navy-deep: #0A3D82;
  --navy-soft: #3574D1;
  --navy-bright: #5A97E8;
  --gold: #C9A84C;
  --gold-light: #E4C870;
  --gold-dark: #9E8435;
  --ivory: #F8F6F1;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: Inter, 'Noto Sans SC', system-ui, sans-serif; background: var(--ivory); color: var(--navy); -webkit-font-smoothing: antialiased; line-height: 1.6; }

.font-serif-en { font-family: 'Playfair Display', Georgia, serif; letter-spacing: .02em; }

/* ─── Shared Utilities ─── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; }
@media(min-width:768px) { .container { padding: 0 2rem; } }

.gold-text {
  background: linear-gradient(90deg,#E4C870,#C9A84C,#E4C870);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes fadeUp { 0%{opacity:0;transform:translateY(28px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { 0%{opacity:0} 100%{opacity:1} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.animate-fade-up { animation: fadeUp .9s ease-out both; }
.animate-fade-in { animation: fadeIn 1.2s ease-out both; }
.animate-float { animation: float 6s ease-in-out infinite; }

.divider-gold { width: 64px; height: 3px; background: linear-gradient(90deg,#C9A84C,#E4C870); border-radius: 2px; }

/* ─── Buttons ─── */
.btn-gold {
  display: inline-flex; align-items: center; gap: .5rem;
  background: linear-gradient(180deg,
    #FBE38A 0%,
    #F0C862 28%,
    #D19A38 55%,
    #E8B958 82%,
    #F6D478 100%);
  color: #0A1A3A; font-weight: 700; cursor: pointer;
  border: 1px solid #FBE08A;
  text-shadow: 0 1px 0 rgba(255,240,190,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,245,200,.75),
    inset 0 -1px 0 rgba(120,80,20,.25),
    0 10px 26px -8px rgba(240,200,98,.6);
  transition: transform .3s, box-shadow .3s;
  text-decoration: none;
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,232,168,.6),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 16px 36px -10px rgba(201,168,76,.75);
}

.btn-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid rgba(255,255,255,.4); color: #fff;
  backdrop-filter: blur(8px); background: transparent;
  text-decoration: none; cursor: pointer;
  transition: all .3s;
}
.btn-outline:hover { background: rgba(255,255,255,.1); border-color: var(--gold); }

.btn-navy {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--navy); color: #fff; font-weight: 600;
  border: none; cursor: pointer; text-decoration: none;
  transition: background .3s, transform .3s;
}
.btn-navy:hover { background: var(--navy-soft); transform: translateY(-2px); }

/* ─── Cards ─── */
.card {
  background: #fff; border-radius: 20px;
  box-shadow: 0 4px 24px rgba(10,35,66,.06);
  transition: transform .4s, box-shadow .4s;
  border: 1px solid rgba(10,35,66,.04);
}
.card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px -20px rgba(10,35,66,.25); }

/* ─── Reveal ─── */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .9s ease-out, transform .9s ease-out; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ─── Nav ─── */
.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: all .5s; }
.site-nav.scrolled { background: rgba(5,37,96,.92); backdrop-filter: blur(12px); box-shadow: 0 4px 30px rgba(0,0,0,.2); }
.nav-link { position: relative; color: rgba(255,255,255,.9); text-decoration: none; font-size: .875rem; }
.nav-link::after { content:''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--gold); transition: width .3s; }
.nav-link:hover::after { width: 100%; }
.nav-link:hover { color: var(--gold); }

/* ── 二级菜单（下拉） ── */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > .nav-link { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.nav-chev { transition: transform .25s; opacity: .75; flex: none; }
.nav-item:hover .nav-chev { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  padding-top: 16px; /* 透明桥，避免移到面板时悬停中断 */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease; z-index: 60;
}
.nav-item:hover .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* 键盘 Tab 到菜单上也展开。别换成 :has(:focus-visible)：Chrome 里焦点从父链接挪到下拉项的瞬间
   它会失配，下拉被藏起来，焦点随即被收回 body，Tab 永远进不了下拉 */
.nav-item:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-item:focus-within .nav-chev { transform: rotate(180deg); }
/* 点过下拉里的项目后先收起，鼠标移出再恢复（shared.js 加减 .nav-dismissed） */
.nav-item.nav-dismissed .nav-dropdown { opacity: 0; visibility: hidden; pointer-events: none; }
.nav-item.nav-dismissed .nav-chev { transform: none; }
.nav-dropdown-inner {
  display: flex; flex-direction: column; min-width: 210px; padding: .55rem;
  background: rgba(7,40,98,.97); backdrop-filter: blur(14px);
  border: 1px solid rgba(201,168,76,.28); border-radius: 12px;
  box-shadow: 0 22px 55px rgba(0,0,0,.4);
}
.nav-dropdown-link {
  color: rgba(255,255,255,.85); text-decoration: none; font-size: .85rem;
  padding: .55rem .9rem; border-radius: 8px; white-space: nowrap;
  transition: background .2s, color .2s, padding-left .2s;
}
.nav-dropdown-link:hover { background: rgba(201,168,76,.16); color: var(--gold); padding-left: 1.15rem; }
.nav-link-parent { color: rgba(255,255,255,.9); }
/* 移动端二级菜单 */
.mobile-nav-parent { color: var(--gold-light); font-weight: 700; }
.mobile-nav-sub { padding-left: 1.6rem !important; font-size: .92rem; opacity: .9; position: relative; }
.mobile-nav-sub::before { content: '·'; position: absolute; left: .7rem; color: var(--gold); }
/* 有子菜单的项：左边照常是链接，右边一颗箭头按钮负责展开 / 收起 */
.mobile-nav-row { display: flex; align-items: center; gap: .25rem; }
.mobile-nav-row > .mobile-nav-link { flex: 1 1 auto; min-width: 0; }
.mobile-nav-toggle {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 0; border-radius: 12px;
  background: none; color: rgba(255,255,255,.7); cursor: pointer;
  transition: background .22s ease-out, color .22s ease-out;
}
.mobile-nav-toggle:hover,
.mobile-nav-toggle:focus-visible,
.mobile-nav-toggle[aria-expanded="true"] { background: rgba(255,255,255,.08); color: var(--gold-light); }
button.mobile-nav-parent {
  width: 100%; justify-content: space-between; text-align: left;
  border: 0; background: none; font: inherit; font-weight: 700; color: var(--gold-light); cursor: pointer;
}
.mobile-nav-chev { flex: none; transition: transform .25s; }
[aria-expanded="true"] > .mobile-nav-chev { transform: rotate(180deg); }
.mobile-nav-subs {
  display: flex; flex-direction: column; gap: .1rem;
  margin: 0 0 .35rem .8rem; border-left: 1px solid rgba(201,168,76,.28);
}
.mobile-nav-subs[hidden] { display: none; }
.mobile-nav-subs .mobile-nav-sub { min-height: 44px; font-weight: 500; }

/* 下拉项跳到的国家页项目区块：让出固定导航的高度。
   目标区块不做入场位移——浏览器按位移中的位置算滚动，停下后标题会钻到导航底下 */
.card[id], .image-split[id] { scroll-margin-top: 6.5rem; }
.reveal:target { opacity: 1; transform: none; transition: none; }

/* ─── Page Hero (subpage) ─── */
.page-hero {
  position: relative; min-height: 520px; display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(135deg, rgba(5,37,96,.78) 0%, rgba(10,61,130,.55) 50%, rgba(28,90,176,.55) 100%),
    var(--hero-img, linear-gradient(135deg, var(--navy-deep), var(--navy), var(--navy-soft)));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff; text-align: center; padding: 8rem 1.25rem 5rem; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(900px at 50% 60%, rgba(5,37,96,.35), transparent 70%),
    linear-gradient(180deg, rgba(2,19,54,.25) 0%, transparent 35%, rgba(2,19,54,.55) 100%);
}
.page-hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(600px at 50% 50%, rgba(201,168,76,.08), transparent 70%);
  pointer-events: none;
}
@media (min-width: 768px) { .page-hero { min-height: 620px; padding: 9rem 1.25rem 6rem; } }

/* Big country-photo hero: headline larger, copy tighter */
.page-hero .hero-eyebrow {
  font-family: 'Playfair Display', serif;
  color: var(--gold-light);
  font-size: .8rem;
  letter-spacing: .4em;
  margin-bottom: 1rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.page-hero h1 {
  font-size: clamp(2.6rem, 6.5vw, 5rem) !important;
  line-height: 1.05;
  text-shadow: 0 4px 32px rgba(0,0,0,.55);
  margin-bottom: 1rem;
}
.page-hero .hero-lead {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 400;
  color: rgba(255,255,255,.92);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.65;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.page-hero .hero-kicker {
  display: inline-block;
  font-size: .95rem;
  color: var(--gold-light);
  margin-top: .75rem;
  letter-spacing: .06em;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

/* ─── Section ─── */
.section { padding: 5rem 0; }
@media(min-width:768px) { .section { padding: 7rem 0; } }
.section-header { text-align: center; margin-bottom: 3.5rem; }
.section-tag { font-family: 'Playfair Display', serif; color: var(--gold); font-size: .8rem; letter-spacing: .4em; margin-bottom: .75rem; }
.section-title { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; }
@media(min-width:768px) { .section-title { font-size: 3rem; } }

/* ─── Grid helpers ─── */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
@media(min-width:768px) {
  .grid-2 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: repeat(3,1fr); }
  .grid-4 { grid-template-columns: repeat(4,1fr); }
}

/* ─── Program card ─── */
.program-card { overflow: hidden; }
.program-card .card-head {
  padding: 1.5rem; color: #fff; min-height: 120px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
}
.program-card .card-body { padding: 1.5rem; }
.program-card .tag {
  display: inline-block; padding: .15rem .6rem; background: var(--gold);
  color: var(--navy); font-size: .65rem; font-weight: 700; border-radius: 999px;
}

/* ─── Info list ─── */
.info-list { list-style: none; }
.info-list li {
  padding: .75rem 0; border-bottom: 1px solid rgba(10,35,66,.06);
  display: flex; gap: .75rem; align-items: flex-start; font-size: .9rem;
}
.info-list li::before {
  content: ''; flex-shrink: 0; width: 8px; height: 8px; margin-top: 6px;
  background: var(--gold); border-radius: 50%;
}

/* ─── Timeline ─── */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--gold), var(--gold-light)); }
.timeline-item { position: relative; margin-bottom: 2rem; padding-left: 1.5rem; }
.timeline-item::before {
  content: ''; position: absolute; left: -2rem; top: 4px; width: 16px; height: 16px;
  background: var(--gold); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 3px rgba(201,168,76,.3);
}

/* ─── FAQ ─── */
details.faq-item { border-radius: 16px; overflow: hidden; }
details.faq-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; font-weight: 600; cursor: pointer; padding: 1.25rem 1.5rem; }
details.faq-item summary .chev { transition: transform .3s; width: 20px; height: 20px; color: var(--gold); flex-shrink: 0; }
details.faq-item[open] summary .chev { transform: rotate(180deg); }
details.faq-item .faq-body { padding: 0 1.5rem 1.25rem; color: rgba(10,35,66,.7); font-size: .9rem; line-height: 1.8; }

/* ─── Table ─── */
.compare-table { width: 100%; border-collapse: collapse; border-radius: 16px; overflow: hidden; }
.compare-table th { background: var(--navy); color: var(--gold); padding: 1rem; text-align: left; font-size: .85rem; }
.compare-table td { padding: .85rem 1rem; border-bottom: 1px solid rgba(10,35,66,.06); font-size: .875rem; }
.compare-table tr:nth-child(even) { background: rgba(10,35,66,.02); }

/* ─── Footer ─── */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,.6); font-size: .875rem; }

/* ─── Region chips ─── */
.region-chip {
  padding: .75rem 1rem; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08); border-radius: 9999px;
  font-size: .85rem; color: rgba(255,255,255,.85); text-align: center;
  transition: all .3s; backdrop-filter: blur(8px);
}
.region-chip:hover { border-color: rgba(201,168,76,.6); background: rgba(201,168,76,.08); color: #E4C870; transform: translateY(-2px); }

/* ─── Floating CTA ─── */
.fab-group { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; display: flex; flex-direction: column; gap: .75rem; }
@media(min-width:768px) { .fab-group { right: 1.5rem; bottom: 1.5rem; } }
.fab {
  width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  text-decoration: none; border: none; cursor: pointer; transition: transform .3s;
}
.fab:hover { transform: scale(1.08); }
/* 在线客服（美洽）悬浮球：金色呼吸环，提示这是可点开的对话入口 */
.fab-chat { position: relative; }
.fab-chat::before {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(201,168,76,.55);
  animation: fabChatPulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes fabChatPulse {
  0%   { transform: scale(.92); opacity: .85; }
  70%  { transform: scale(1.28); opacity: 0; }
  100% { transform: scale(1.28); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .fab-chat::before { animation: none; opacity: .5; } }

/* ─── Breadcrumb ─── */
.breadcrumb { display: flex; gap: .5rem; font-size: .8rem; color: rgba(255,255,255,.6); margin-bottom: 1rem; flex-wrap: wrap; }
.breadcrumb a { color: var(--gold); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ─── Lead form ─── */
.lead-section { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.lead-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .1; background: radial-gradient(400px at 20% 30%, var(--gold), transparent), radial-gradient(500px at 80% 70%, var(--gold), transparent); }

/* ═══════════════════════════════════════════════
   PREMIUM REDESIGN ENHANCEMENTS
═══════════════════════════════════════════════ */

:root {
  --teal: #0ABDE3;
  --teal-dark: #0793BC;
  --teal-glow: rgba(10,189,227,0.3);
  --gold-glow: rgba(201,168,76,0.4);
  --deep-space: #030a14;
}

/* ─── Aurora keyframes ─── */
@keyframes auroraShift {
  0%   { transform: scale(1)    rotate(-1.5deg) translate(-1%,  0);   }
  33%  { transform: scale(1.05) rotate( 1.2deg) translate( 1%, -1%);  }
  66%  { transform: scale(0.97) rotate(-0.6deg) translate( 0,   1%);  }
  100% { transform: scale(1.03) rotate( 0.8deg) translate(-0.5%, 0.5%); }
}

@keyframes floatUp {
  0%   { transform: translateY(0)    translateX(0)   scale(0); opacity: 0;   }
  8%   { transform: translateY(-4vh) translateX(2px) scale(1); opacity: 0.6; }
  92%  { transform: translateY(-90vh) translateX(-12px) scale(1); opacity: 0.3; }
  100% { transform: translateY(-100vh) translateX(-18px) scale(0); opacity: 0;  }
}

@keyframes btnShimmer {
  0%      { left: -120%; }
  55%, 100% { left:  160%; }
}

@keyframes ringGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(201,168,76,0.3); }
  50%       { box-shadow: 0 0 45px rgba(201,168,76,0.7), 0 0 90px rgba(201,168,76,0.2); }
}

@keyframes gradientPan {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ─── Hero aurora layers ─── */
.hero-aurora {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none; z-index: 1;
}
.hero-aurora-l1 {
  position: absolute;
  width: 180%; height: 180%;
  top: -40%; left: -40%;
  background:
    radial-gradient(ellipse 60% 50% at 78% 45%, rgba(90,155,230,0.22), transparent 58%),
    radial-gradient(ellipse 55% 45% at 10% 30%, rgba(2,6,18,0.65),     transparent 60%);
  animation: auroraShift 16s ease-in-out infinite alternate;
}
.hero-aurora-l2 {
  position: absolute;
  width: 160%; height: 160%;
  top: -30%; left: -30%;
  background:
    radial-gradient(ellipse 65% 50% at 88% 60%, rgba(60,120,200,0.18), transparent 55%),
    radial-gradient(ellipse 45% 60% at  5% 75%, rgba(3,8,22,0.55),     transparent 60%);
  animation: auroraShift 10s ease-in-out infinite alternate-reverse;
}
.hero-grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 0%, transparent 72%);
}
.hero-particle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--gold-light);
  animation: floatUp linear infinite;
  pointer-events: none;
}

/* ─── Hero gradient — dark-left → bright-right sapphire (matches reference) ─── */
.hero-gradient {
  background:
    radial-gradient(1700px 1200px at 72% 50%, rgba(50,120,210,0.75), transparent 68%),
    radial-gradient(1100px 850px at 88% 48%, rgba(95,165,230,0.48), transparent 62%),
    radial-gradient(900px 800px at 18% 25%, rgba(4,10,28,0.92), transparent 58%),
    linear-gradient(105deg, #060F28 0%, #0A1C46 18%, #102B64 36%, #16428F 56%, #1D5BB8 76%, #2372D3 100%);
}

/* ─── Button shimmer ─── */
.btn-gold {
  position: relative; overflow: hidden;
}
.btn-gold::after {
  content: '';
  position: absolute; top: -2px; left: -120%;
  width: 70px; height: calc(100% + 4px);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent);
  animation: btnShimmer 3.5s ease-in-out infinite;
  border-radius: inherit;
}

/* ─── Globe section ─── */
#globe-section {
  background:
    radial-gradient(ellipse 100% 60% at 50%  0%, rgba(46,125,216,0.12),  transparent 50%),
    radial-gradient(ellipse  80% 40% at 80% 100%, rgba(201,168,76,0.06), transparent 45%),
    linear-gradient(180deg, #052560 0%, #021336 100%);
}

/* ─── Stats numbers ─── */
.stats-number {
  background: linear-gradient(135deg,#FFE090,#E4C870,#C9A84C,#FFD060);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientPan 5s ease infinite;
}

/* ─── Program card header enhanced ─── */
.program-card .card-head {
  background: linear-gradient(135deg, #04204E 0%, #063377 40%, #0A4695 70%, #1356B5 100%);
  position: relative; overflow: hidden;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.program-card:hover .card-head {
  transform: scale(1.04);
}
.program-card .card-head::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.55), transparent);
}

/* ─── Advantage cards ─── */
.adv-card {
  padding: 1.75rem; border-radius: 1.25rem;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.07);
  transition: all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
  position: relative; overflow: hidden;
}
.adv-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(10,189,227,0.04) 0%, rgba(201,168,76,0.04) 100%);
  opacity: 0; transition: opacity 0.4s;
}
.adv-card:hover {
  border-color: rgba(201,168,76,0.45);
  transform: translateY(-5px);
  box-shadow: 0 24px 64px -20px rgba(0,0,0,0.55), 0 0 30px -10px rgba(201,168,76,0.22);
}
.adv-card:hover::before { opacity: 1; }

/* ─── Case card top accent ─── */
.case-card {
  position: relative; overflow: hidden;
}
.case-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
  opacity: 0; transition: opacity 0.3s;
}
.case-card:hover::before { opacity: 1; }

/* ─── FAQ enhanced ─── */
details.faq-item { transition: box-shadow 0.3s; }
details.faq-item:hover {
  box-shadow: 0 8px 40px -15px rgba(201,168,76,0.25);
}
details.faq-item[open] {
  border-left: 3px solid var(--gold);
}

/* ─── Nav glass ─── */
.site-nav.scrolled {
  background: rgba(5,37,96,0.92) !important;
  border-bottom: 1px solid rgba(201,168,76,0.18);
}

/* ─── Section enhanced separators ─── */
.section-tag {
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-dark));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 5s linear infinite;
}

/* ─── Divider gold glow ─── */
.divider-gold {
  box-shadow: 0 0 12px rgba(201,168,76,0.5), 0 0 24px rgba(201,168,76,0.2);
}

/* ═══════════════════════════════════════════════
   HERO WITH 3D GLOBE
═══════════════════════════════════════════════ */
.hero-globe-section {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-globe-canvas {
  position: absolute;
  top: 0; right: 0;
  width: 48%; height: 100%;
  z-index: 2;
  cursor: grab;
  pointer-events: auto;
}
.hero-globe-canvas:active { cursor: grabbing; }

@media (min-width: 1024px) {
  #globe-container.hero-globe-canvas {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    width: 48% !important;
    height: 100% !important;
    opacity: 1;
  }
}

/* ── Globe Labels (always visible, two-line) ── */
.globe-label {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .35rem .65rem .3rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #FFE8A8;
  background: rgba(6,20,44,.88);
  border: 1px solid rgba(201,168,76,.5);
  border-radius: .6rem;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0,0,0,.5), 0 0 14px rgba(201,168,76,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity .25s, box-shadow .25s, background .25s, border-color .25s;
  user-select: none;
  will-change: opacity;
}
.globe-label:hover {
  background: rgba(10,35,66,.98);
  border-color: #FFE090;
  box-shadow: 0 6px 24px rgba(0,0,0,.7), 0 0 32px rgba(228,200,112,.65);
  filter: brightness(1.12);
  z-index: 10;
}
.globe-label .glabel-head {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.globe-label .glabel-flag { font-size: 1em; line-height: 1; }
.globe-label .glabel-name {
  color: #fff;
  font-weight: 700;
  font-family: var(--font-sans);
}
.globe-label .glabel-prog {
  font-size: .58rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: .06em;
  line-height: 1.15;
  opacity: .88;
}
/* Office variant */
.globe-label.office {
  padding: .4rem .75rem .35rem;
  font-size: .78rem;
  background: linear-gradient(135deg, rgba(10,30,60,.94), rgba(25,45,85,.9));
  border-color: #E4C870;
  border-width: 1.5px;
  box-shadow: 0 4px 20px rgba(0,0,0,.65), 0 0 24px rgba(228,200,112,.4);
}
.globe-label.office .glabel-name { color: #FFE8A8; }
.globe-label.office .glabel-tag {
  font-size: .55rem;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  padding: .1rem .4rem;
  background: rgba(228,200,112,.18);
  border-radius: 999px;
  letter-spacing: .1em;
}
.globe-label.office .glabel-prog {
  font-size: .6rem;
  color: #E4C870;
  opacity: .92;
}
@media (max-width: 1023px) {
  .globe-label { font-size: .6rem; padding: .28rem .5rem .24rem; }
  .globe-label .glabel-prog { font-size: .52rem; }
  .globe-label.office { font-size: .68rem; padding: .3rem .6rem .28rem; }
  .globe-label.office .glabel-tag { display: none; }
}
@media (max-width: 640px) {
  .globe-label { font-size: .55rem; padding: .2rem .4rem .18rem; border-radius: .4rem; }
  .globe-label .glabel-prog { font-size: .48rem; }
  .globe-label.office { font-size: .6rem; padding: .24rem .5rem .22rem; }
}

.hero-content {
  position: relative;
  z-index: 5;
  padding: 7rem 1.25rem 4rem;
  pointer-events: none;
}
.hero-text-col {
  max-width: 720px;
  margin-left: 6%;
  pointer-events: auto;
}

.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem 1.1rem;
  border-radius: 9999px;
  border: 1px solid rgba(201,168,76,.45);
  background: rgba(6,24,50,.35);
  backdrop-filter: blur(10px);
  font-size: .7rem;
  color: var(--gold);
  letter-spacing: .15em;
  margin-bottom: 1.5rem;
}
.hero-badge .badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  animation: float 2s ease-in-out infinite;
  box-shadow: 0 0 10px var(--gold);
}

.hero-title {
  font-size: clamp(2.4rem, 5.2vw, 4.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 24px rgba(0,0,0,.55);
  white-space: nowrap;
}
.hero-title .nowrap-line { white-space: nowrap; }

.hero-zh-title {
  font-size: clamp(1.55rem, 3.1vw, 2.35rem);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: .75rem;
  line-height: 1.3;
  letter-spacing: .02em;
  text-shadow: 0 2px 16px rgba(0,0,0,.55);
}

.hero-tag {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 500;
  color: #7EB5F0;
  margin-bottom: 1.6rem;
  line-height: 1.4;
  letter-spacing: .04em;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}

.hero-desc {
  color: rgba(255,255,255,.78);
  max-width: 560px;
  margin-bottom: 2rem;
  line-height: 1.8;
  font-size: .95rem;
  letter-spacing: .02em;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}

.hero-cta {
  display: flex; flex-wrap: wrap; gap: 1rem;
  margin-bottom: 2.5rem;
}
.hero-btn-primary, .hero-btn-secondary {
  padding: .95rem 2.1rem;
  border-radius: 9999px;
  font-size: .9rem;
}
.hero-btn-secondary {
  background: rgba(6,24,50,.4);
  backdrop-filter: blur(10px);
}

.hero-trust {
  display: flex; flex-wrap: wrap; gap: 1.75rem;
  font-size: .8rem;
  color: rgba(255,255,255,.7);
}
.hero-trust .check {
  color: var(--gold);
  font-weight: 700;
  margin-right: .35rem;
}

/* Globe hint badge */
.globe-hint {
  position: absolute;
  bottom: 6rem; right: 2rem;
  z-index: 6;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem;
  border-radius: 9999px;
  background: rgba(3,9,18,.65);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(201,168,76,.3);
  color: rgba(255,255,255,.85);
  font-size: .72rem;
  letter-spacing: .08em;
  pointer-events: none;
}
.globe-hint .hint-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  animation: pulseDot 1.6s ease-in-out infinite;
  box-shadow: 0 0 10px var(--gold);
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(1.4); }
}

/* Scroll indicator */
.scroll-hint {
  position: absolute;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  text-align: center;
  pointer-events: none;
}
.scroll-hint span {
  font-size: .7rem;
  letter-spacing: .4em;
  color: rgba(255,255,255,.4);
}
.scroll-hint .scroll-line {
  width: 1px; height: 40px;
  margin: .5rem auto 0;
  background: linear-gradient(to bottom, var(--gold), transparent);
}

/* Responsive globe placement */
@media(max-width: 1023px) {
  /* 用 #id 提高优先级：index.html 头部内联的 #globe-container{width:100%;height:100%}
     会盖掉纯 class 规则，导致平板宽度下地球铺满整屏、标签压在标题上 */
  .hero-globe-canvas,
  #globe-container.hero-globe-canvas {
    position: absolute;
    top: auto; bottom: 0; right: 0; left: 0;
    width: 100%; height: 55%;
    opacity: .65;
  }
  .hero-text-col {
    max-width: 100%;
    margin-left: 0;
  }
  .globe-hint { display: none; }
}
@media(max-width: 640px) {
  .hero-globe-section {
    min-height: 100svh;
  }
  .hero-globe-canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: .9;
    z-index: 2;
  }
  .hero-content {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-top: 4rem;
    padding-bottom: 1.5rem;
  }
  .hero-text-col {
    padding: 0;
    transform: translateY(-4vh);
    text-shadow: 0 2px 18px rgba(0,0,0,.65);
  }
  .hero-badge {
    font-size: .58rem;
    letter-spacing: .08em;
    margin-bottom: .45rem;
  }
  .hero-title {
    font-size: clamp(2rem, 12vw, 3rem);
    white-space: normal;
    margin-bottom: .5rem;
  }
  .hero-title .nowrap-line {
    white-space: normal;
  }
  .hero-desc {
    display: none;
  }
  .hero-zh-title {
    margin-bottom: .3rem;
  }
  .hero-tag {
    margin-bottom: .7rem;
  }
  .hero-cta {
    margin-bottom: .75rem;
  }
  .hero-trust {
    gap: .7rem 1rem;
  }
}

/* ═══════════════════════════════════════════════
   STATS BAR
═══════════════════════════════════════════════ */
.stats-bar {
  background: linear-gradient(180deg,#021336,#052560);
  color: #fff;
  padding: 3.5rem 0;
  position: relative;
  overflow: hidden;
}
.stat-item { padding: 1rem; }
.stats-number {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
}
.stat-label {
  color: rgba(255,255,255,.45);
  font-size: .75rem;
  letter-spacing: .2em;
  margin-top: .5rem;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════
   HOT PROGRAMS GRID (globevisa-inspired)
═══════════════════════════════════════════════ */
.hot-programs {
  background: linear-gradient(180deg, #fff 0%, var(--ivory) 100%);
}

.hot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media(min-width: 640px) { .hot-grid { grid-template-columns: repeat(2,1fr); } }
@media(min-width: 1024px) { .hot-grid { grid-template-columns: repeat(4,1fr); } }

.hot-card {
  background: #fff;
  border-radius: 20px;
  padding: 1.75rem 1.5rem 1.5rem;
  border: 1px solid rgba(10,35,66,.06);
  box-shadow: 0 4px 24px -8px rgba(10,35,66,.08);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: all .4s cubic-bezier(0.175,0.885,0.32,1.275);
  position: relative;
  overflow: hidden;
}
.hot-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold), var(--gold-dark));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s;
}
.hot-card:hover {
  transform: translateY(-8px);
  border-color: rgba(201,168,76,.3);
  box-shadow: 0 24px 60px -20px rgba(10,35,66,.2), 0 0 30px -10px rgba(201,168,76,.25);
}
.hot-card:hover::before { transform: scaleX(1); }

.hot-image {
  height: 160px;
  margin: -1.75rem -1.5rem 1rem;
  background-size: cover;
  background-position: center;
  border-radius: 20px 20px 0 0;
  position: relative;
  overflow: hidden;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.hot-image::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,35,66,.05) 0%, rgba(10,35,66,.55) 100%);
}
.hot-card:hover .hot-image { transform: scale(1.05); }

.hot-body { flex: 1; display: flex; flex-direction: column; }
.hot-country {
  font-size: .7rem;
  letter-spacing: .25em;
  color: var(--gold-dark);
  text-transform: uppercase;
  margin-bottom: .35rem;
  font-weight: 600;
}
.hot-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1rem;
}
.hot-points {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  flex: 1;
}
.hot-points li {
  position: relative;
  padding: .4rem 0 .4rem 1.2rem;
  font-size: .85rem;
  color: rgba(10,35,66,.7);
  line-height: 1.5;
  border-bottom: 1px dashed rgba(10,35,66,.06);
}
.hot-points li:last-child { border-bottom: none; }
.hot-points li::before {
  content: '';
  position: absolute;
  left: 0; top: .8rem;
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
}
.hot-cta {
  font-size: .8rem;
  font-weight: 700;
  color: var(--gold-dark);
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid rgba(201,168,76,.15);
  transition: letter-spacing .3s;
}
.hot-card:hover .hot-cta { letter-spacing: .05em; }

/* ═══════════════════════════════════════════════
   PROCESS (5-STEP)
═══════════════════════════════════════════════ */
.process-section {
  background: linear-gradient(180deg, #021336 0%, #052560 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.process-section::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(201,168,76,.07), transparent 60%);
  transform: translate(-50%,-50%);
}
.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  position: relative;
}
@media(min-width:640px) { .process-grid { grid-template-columns: repeat(2,1fr); } }
@media(min-width:1024px) { .process-grid { grid-template-columns: repeat(5,1fr); } }

.process-step {
  padding: 1.75rem 1.25rem;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1.25rem;
  position: relative;
  transition: all .4s;
}
.process-step:hover {
  transform: translateY(-5px);
  border-color: rgba(201,168,76,.4);
  box-shadow: 0 20px 50px -20px rgba(201,168,76,.3);
}
.process-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: .75rem;
  opacity: .85;
}
.process-step h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: #fff;
}
.process-step p {
  font-size: .8rem;
  color: rgba(255,255,255,.6);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════
   TEAM
═══════════════════════════════════════════════ */
.team-section { background: var(--ivory); }

.team-card {
  background: #fff;
  padding: 1.6rem 1rem 1.5rem;
  text-align: center;
  border-radius: 20px;
  border: 1px solid rgba(10,35,66,.06);
  box-shadow: 0 4px 20px -5px rgba(10,35,66,.08);
  transition: all .4s;
  position: relative;
  overflow: hidden;
}
.team-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .4s;
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -15px rgba(10,35,66,.18);
}
.team-card:hover::after { transform: scaleX(1); }

/* 圆形顾问头像：后台上传的照片按正方形居中裁切，没传则显示姓名首字母 */
.team-avatar {
  width: 88px; height: 88px;
  flex: none;
  margin: 0 auto .95rem;
  border-radius: 50%;
  background-color: var(--navy);
  background-size: cover;
  background-position: center top;
  /* 金色细环 + 投影，避免白卡上的圆头像显得飘 */
  box-shadow: 0 0 0 3px rgba(201,168,76,.28), 0 8px 20px -10px rgba(10,35,66,.5);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
}
/* 头像改用 <img loading="lazy">，表现与原来的 background:cover center top 一致 */
.team-avatar > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
}
.team-card:hover .team-avatar { transform: scale(1.06); }
.team-avatar-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.team-avatar-empty span {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gold-light);
}

.team-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 .3rem;
  letter-spacing: .01em;
}
.team-role {
  font-size: .78rem;
  color: var(--gold-dark);
  font-weight: 600;
  line-height: 1.5;
  /* 预留两行：职位一行 / 两行的卡片高度保持一致 */
  min-height: 2.34rem;
}
.team-tag {
  display: inline-block;
  align-self: center;   /* .team-card 是 flex column，不加会被拉成整行胶囊 */
  font-size: .68rem;
  line-height: 1.5;
  padding: .2rem .65rem;
  background: rgba(201,168,76,.12);
  color: var(--gold-dark);
  border-radius: 9999px;
  margin-top: .6rem;
}

/* 顾问卡片「在线咨询」：点开美洽对话，填了客服 Token 时直连该顾问 */
.team-chat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  align-self: center;
  margin-top: .8rem;
  padding: .34rem .9rem;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--navy);
  background: transparent;
  border: 1px solid rgba(15,82,186,.28);
  border-radius: 9999px;
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.team-chat svg { width: 13px; height: 13px; }
.team-chat:hover,
.team-chat:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--gold-light);
}

/* ─── 顾问团队 · 横向滚动轨道（深圳 / 香港分组，后台可配） ─── */
.team-rails { display: flex; flex-direction: column; gap: 3rem; }

.team-rail-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.team-rail-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.team-rail-bar {
  width: 4px; height: 24px;
  background: var(--gold);
  border-radius: 2px;
  flex: none;
}
.team-rail-en {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--gold-dark);
  opacity: .8;
}
.team-rail-nav {
  display: none;
  gap: .5rem;
  flex: none;
  /* 标题居中，箭头贴右边缘（仅顾问超过一排时出现） */
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.team-rail.has-overflow .team-rail-nav { display: flex; }
.team-rail-btn {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(10,35,66,.12);
  background: #fff;
  color: var(--navy);
  border-radius: 9999px;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: all .25s;
}
.team-rail-btn:hover:not(:disabled) {
  background: var(--navy);
  color: var(--gold-light);
  border-color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(10,35,66,.5);
}
.team-rail-btn:disabled { opacity: .3; cursor: default; }

.team-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 2px;
  /* 卡片 hover 上浮 + 阴影不被裁掉 */
  padding: .5rem 2px 1.5rem;
  margin: -.5rem -2px -1.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.team-track::-webkit-scrollbar { display: none; }
.team-track.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.team-track.dragging .team-card { pointer-events: none; }
/* 顾问不足一排时整排居中；超过一排（出现滚动）时必须回到左对齐，
   否则浏览器会把轨道开头那段裁掉、滚不回去 */
.team-rail:not(.has-overflow) .team-track { justify-content: center; }

/* 每排列数（gap 1.25rem = 20px）：手机 2 张固定宽 → 3 → 4 → 5 → 大屏 6。
   顾问数 ≤ 每排列数时正好一排，超出后才出现左右滚动与箭头。 */
.team-track .team-card {
  flex: 0 0 min(43vw, 152px);
  scroll-snap-align: start;
}
@media (min-width: 640px)  { .team-track .team-card { flex-basis: calc((100% - 2.5rem) / 3); } }
@media (min-width: 768px)  { .team-track .team-card { flex-basis: calc((100% - 3.75rem) / 4); } }
@media (min-width: 1024px) { .team-track .team-card { flex-basis: calc((100% - 5rem) / 5); } }
@media (min-width: 1200px) { .team-track .team-card { flex-basis: calc((100% - 6.25rem) / 6); } }

@media (prefers-reduced-motion: reduce) {
  .team-track { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════
   OFFICES
═══════════════════════════════════════════════ */
.offices-section {
  background: linear-gradient(180deg, #0A3D82 0%, #052560 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.offices-section::before {
  content: '';
  position: absolute;
  top: 20%; right: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(10,189,227,.08), transparent 60%);
  filter: blur(40px);
}
.offices-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  position: relative;
}
@media(min-width:640px) { .offices-grid { grid-template-columns: repeat(2,1fr); } }
@media(min-width:1024px) { .offices-grid { grid-template-columns: repeat(3,1fr); } }

.office-card {
  padding: 1.75rem 1.5rem;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  transition: all .4s;
  position: relative;
}
.office-card:hover {
  transform: translateY(-5px);
  border-color: rgba(201,168,76,.4);
  background: rgba(255,255,255,.06);
  box-shadow: 0 20px 50px -20px rgba(201,168,76,.3);
}
.office-card { overflow: hidden; }
.office-img {
  height: 150px;
  margin: -1.75rem -1.5rem 1rem;
  background-size: cover;
  background-position: center;
  border-radius: 20px 20px 0 0;
  position: relative;
  overflow: hidden;
}
.office-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2,19,54,.08) 0%, rgba(2,19,54,.75) 100%);
}
.office-img .office-img-tag {
  position: absolute; top: 1rem; right: 1rem;
  padding: .2rem .7rem;
  background: rgba(201,168,76,.95);
  color: var(--navy-deep);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .18em;
  border-radius: 9999px;
  z-index: 2;
}
.office-tag {
  font-size: .7rem;
  letter-spacing: .2em;
  color: rgba(201,168,76,.9);
  text-transform: uppercase;
  margin-bottom: .4rem;
  font-weight: 600;
}
.office-city {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .75rem;
}
.office-addr {
  font-size: .82rem;
  color: rgba(255,255,255,.55);
  line-height: 1.7;
  margin-bottom: .75rem;
  min-height: 44px;
}
.office-phone {
  font-size: .9rem;
  color: var(--gold-light);
  font-weight: 600;
  letter-spacing: .02em;
}
.office-card-cta {
  background: linear-gradient(135deg, rgba(201,168,76,.18), rgba(201,168,76,.08));
  border-color: rgba(201,168,76,.35);
}
.office-btn {
  display: inline-block;
  margin-top: .5rem;
  padding: .55rem 1.25rem;
  background: var(--gold);
  color: var(--navy);
  border-radius: 9999px;
  text-decoration: none;
  font-size: .8rem;
  font-weight: 700;
  transition: all .3s;
}
.office-btn:hover {
  background: var(--gold-light);
  box-shadow: 0 8px 20px -6px rgba(201,168,76,.5);
}

/* ═══════════════════════════════════════════════
   STATS ROW (enhanced)
═══════════════════════════════════════════════ */
.stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  text-align: center;
  flex-wrap: wrap;
}
.stat-divider {
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, transparent, rgba(201,168,76,.35), transparent);
}
@media (max-width: 767px) {
  .stats-row { gap: 1.25rem; }
  .stat-divider { display: none; }
}

/* ═══════════════════════════════════════════════
   CERTIFICATIONS（about 页「资质认证」卡片）
═══════════════════════════════════════════════ */
.cert-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 1040px;
  margin: 0 auto;
}
@media (min-width: 640px)  { .cert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cert-grid { grid-template-columns: repeat(3, 1fr); } }

.cert-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.2rem 1.5rem 1.9rem;
  background: #fff;
  border: 1px solid rgba(10,35,66,.07);
  border-radius: 20px;
  box-shadow: 0 4px 20px -5px rgba(10,35,66,.08);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s;
}
/* 顶部金线：hover 时展开 */
.cert-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
  transform: scaleX(0); transform-origin: center;
  transition: transform .45s;
}
/* 右上角淡金色印章底纹 */
.cert-card::after {
  content: '';
  position: absolute; top: -42px; right: -42px;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,.18) 0%, rgba(201,168,76,0) 70%);
  pointer-events: none;
}
.cert-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px -18px rgba(10,35,66,.22);
  border-color: rgba(201,168,76,.35);
}
.cert-card:hover::before { transform: scaleX(1); }

/* 圆形金环印章 */
.cert-seal {
  width: 76px; height: 76px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
  box-shadow: 0 0 0 3px rgba(201,168,76,.28), 0 10px 24px -12px rgba(10,35,66,.6);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.cert-card:hover .cert-seal { transform: scale(1.06) rotate(-3deg); }
.cert-seal svg { width: 38px; height: 38px; display: block; }

.cert-code {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.4rem; font-weight: 700; letter-spacing: .06em;
  color: var(--navy);
  margin-bottom: .3rem;
}
.cert-name {
  font-size: .95rem; font-weight: 700;
  color: var(--navy);
  margin-bottom: .55rem;
}
.cert-desc {
  font-size: .8rem; line-height: 1.75;
  color: rgba(10,35,66,.6);
}
.cert-meta {
  margin-top: .95rem;
  font-size: .68rem; letter-spacing: .08em; font-weight: 600;
  padding: .24rem .72rem; border-radius: 9999px;
  background: rgba(201,168,76,.12);
  color: var(--gold-dark);
}

/* ═══════════════════════════════════════════════
   AWARDS（about 页「奖项与荣誉」证书墙）
   证书长宽比差异很大（竖版奖状 / 横版牌匾），统一用固定比例的
   相框 + object-fit:contain，保证不裁切、且整排对齐。
═══════════════════════════════════════════════ */
.award-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}
@media (min-width: 640px)  { .award-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .award-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.award-item { margin: 0; }
/* 相框：浅象牙底 + 金色细边，衬托深色证书 */
.award-shot {
  display: block;
  aspect-ratio: 4 / 5;
  padding: 1.1rem;
  border-radius: 18px;
  background: linear-gradient(160deg, #FFFFFF 0%, var(--ivory) 100%);
  border: 1px solid rgba(201,168,76,.28);
  box-shadow: 0 18px 44px -26px rgba(10,35,66,.55);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.award-shot img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
a.award-shot:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 56px -24px rgba(10,35,66,.6);
}
.award-cap { padding: 1rem .25rem 0; }
.award-year {
  font-family: 'Playfair Display', serif;
  font-size: .72rem; letter-spacing: .28em;
  color: var(--gold-dark); margin-bottom: .4rem;
}
.award-name {
  font-size: 1.02rem; font-weight: 700;
  color: var(--navy); line-height: 1.4; margin-bottom: .35rem;
}
.award-issuer {
  font-size: .82rem; line-height: 1.75;
  color: rgba(10,35,66,.6);
}

/* 品牌与公众形象：横版照片，可裁切 */
.award-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1.15rem;
}
@media (min-width: 900px) { .award-media { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.award-media figure { margin: 0; }
.award-media .award-shot {
  aspect-ratio: 4 / 3;
  padding: 0;
  border-radius: 14px;
  border-color: rgba(10,35,66,.1);
}
.award-media .award-shot img { object-fit: cover; }
.award-media figcaption {
  margin-top: .6rem;
  font-size: .78rem; line-height: 1.6;
  color: rgba(10,35,66,.6);
}

/* ═══════════════════════════════════════════════
   HONG KONG PAGE（香港移民页专用小组件）
═══════════════════════════════════════════════ */
.hk-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
  text-align: center;
}
@media (min-width: 768px) { .hk-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hk-fact-num {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.1;
}
.hk-fact-label {
  margin-top: .35rem;
  font-size: .8rem;
  color: rgba(255,255,255,.62);
}

.hk-city-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}
@media (min-width: 640px)  { .hk-city-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hk-city-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hk-city-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem .95rem;
  border: 1px solid rgba(10,35,66,.08);
  border-radius: 12px;
  background: rgba(15,82,186,.03);
}
.hk-city-facts span { font-size: .78rem; color: rgba(10,35,66,.55); }
.hk-city-facts strong { font-size: .9rem; color: var(--navy); font-weight: 700; }

/* ═══════════════════════════════════════════════
   TRUST BADGES BAR
═══════════════════════════════════════════════ */
.trust-bar {
  padding: 2rem 0;
  background: var(--ivory);
  border-bottom: 1px solid rgba(10,35,66,.06);
}
.trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .82rem;
  color: rgba(10,35,66,.7);
  white-space: nowrap;
}
.trust-text strong {
  color: var(--navy);
  font-weight: 700;
}
@media (max-width: 640px) {
  .trust-row { gap: 1rem 2rem; }
  .trust-item { font-size: .75rem; }
}

/* ═══════════════════════════════════════════════
   ABOUT SECTION
═══════════════════════════════════════════════ */
.about-section {
  background: #fff;
  position: relative;
  overflow: hidden;
}
.about-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.2), transparent);
}
.about-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .about-layout { grid-template-columns: 1.1fr 1fr; gap: 4.5rem; }
}
.about-lead {
  font-size: 1.05rem;
  color: var(--navy);
  line-height: 1.85;
  margin-bottom: 1.25rem;
  font-weight: 500;
}
.about-body {
  font-size: .92rem;
  color: rgba(10,35,66,.65);
  line-height: 1.85;
  margin-bottom: 2rem;
}
.about-highlights {
  display: flex;
  gap: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(10,35,66,.08);
}
.about-hl-item { text-align: center; }
.about-hl-num {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold-dark);
  line-height: 1;
  margin-bottom: .35rem;
}
.about-hl-text {
  font-size: .75rem;
  color: rgba(10,35,66,.55);
  letter-spacing: .1em;
}
.about-card-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.about-vision-card {
  padding: 1.75rem;
  border-radius: 20px;
  background: var(--ivory);
  border: 1px solid rgba(10,35,66,.06);
  transition: all .4s;
  position: relative;
  overflow: hidden;
}
.about-vision-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--gold), var(--gold-light));
  border-radius: 2px 0 0 2px;
}
.about-vision-card:hover {
  transform: translateX(6px);
  box-shadow: 0 12px 40px -10px rgba(10,35,66,.12);
  border-color: rgba(201,168,76,.25);
}
.about-vision-card h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .5rem;
}
.about-vision-card p {
  font-size: .88rem;
  color: rgba(10,35,66,.65);
  line-height: 1.75;
}

/* ═══════════════════════════════════════════════
   ADVANTAGES (redesigned 2×3)
═══════════════════════════════════════════════ */
.adv-section {
  background: linear-gradient(180deg, #052560, #021336);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.adv-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.adv-bg-glow-1 {
  top: -80px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(201,168,76,.1), transparent 65%);
}
.adv-bg-glow-2 {
  bottom: -80px; left: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(10,189,227,.07), transparent 65%);
}
.adv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  position: relative;
}
@media (min-width: 768px) { .adv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .adv-grid { grid-template-columns: repeat(3, 1fr); } }

.adv-card {
  padding: 2rem 1.75rem;
  background: rgba(255,255,255,.035);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  position: relative;
  transition: all .4s;
  overflow: hidden;
}
.adv-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transition: all .4s;
  transform: translateX(-50%);
}
.adv-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201,168,76,.35);
  background: rgba(255,255,255,.06);
  box-shadow: 0 24px 60px -20px rgba(201,168,76,.2);
}
.adv-card:hover::after { width: 80%; }

.adv-num {
  position: absolute;
  top: 1.25rem; right: 1.5rem;
  font-size: 2.8rem;
  font-weight: 700;
  color: rgba(201,168,76,.08);
  line-height: 1;
}
.adv-icon-wrap {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(10,189,227,.15), rgba(201,168,76,.1));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--gold);
  box-shadow: 0 4px 20px rgba(10,189,227,.12);
}
.adv-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: .6rem;
  color: #fff;
}
.adv-card p {
  font-size: .85rem;
  color: rgba(255,255,255,.55);
  line-height: 1.75;
}

/* ═══════════════════════════════════════════════
   CASES (redesigned)
═══════════════════════════════════════════════ */
.cases-section {
  background: #fff;
  position: relative;
}
.cases-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) { .cases-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cases-grid { grid-template-columns: repeat(3, 1fr); } }

.case-card {
  background: var(--ivory);
  border-radius: 20px;
  padding: 2rem 1.75rem 1.5rem;
  border: 1px solid rgba(10,35,66,.06);
  position: relative;
  transition: all .4s;
  overflow: hidden;
}
.case-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
  transform: scaleX(0);
  transition: transform .4s;
  transform-origin: left;
}
.case-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px -15px rgba(10,35,66,.15);
}
.case-card:hover::before { transform: scaleX(1); }

.case-image {
  height: 150px;
  margin: -2rem -1.75rem 1.5rem;
  background-size: cover;
  background-position: center;
  border-radius: 20px 20px 0 0;
  position: relative;
  overflow: hidden;
}
.case-image::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,35,66,.08) 0%, rgba(10,35,66,.45) 100%);
}
.case-image .case-img-flag {
  position: absolute; top: .75rem; left: .85rem;
  padding: .2rem .65rem;
  background: rgba(255,255,255,.92);
  color: var(--navy-deep);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .1em;
  border-radius: 9999px;
  z-index: 2;
}
.case-card:hover .case-image { transform: none; }

.case-quote-mark {
  position: absolute;
  top: .75rem; right: 1.25rem;
  font-family: 'Playfair Display', serif;
  font-size: 5rem;
  line-height: 1;
  color: rgba(201,168,76,.12);
  pointer-events: none;
}
.case-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}
.case-name {
  font-weight: 700;
  font-size: .95rem;
  color: var(--navy);
}
.case-program {
  font-size: .72rem;
  color: rgba(10,35,66,.5);
  margin-top: .15rem;
}
.case-stars {
  color: var(--gold);
  font-size: .8rem;
  letter-spacing: .15em;
  margin-bottom: .75rem;
}
.case-quote {
  font-size: .88rem;
  color: rgba(10,35,66,.7);
  line-height: 1.8;
  margin-bottom: 1.25rem;
  min-height: 80px;
}
.case-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(10,35,66,.06);
}
.case-tag {
  padding: .25rem .85rem;
  background: rgba(201,168,76,.12);
  color: var(--gold-dark);
  border-radius: 9999px;
  font-weight: 600;
}
.case-meta {
  color: rgba(10,35,66,.4);
}

/* ═══════════════════════════════════════════════
   CTA BANNER
═══════════════════════════════════════════════ */
.cta-banner {
  padding: 5rem 0;
  background: linear-gradient(135deg, #0A3D82, #1C5AB0);
  position: relative;
  overflow: hidden;
}
.cta-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px at 30% 50%, rgba(201,168,76,.12), transparent 60%),
    radial-gradient(400px at 70% 50%, rgba(10,189,227,.08), transparent 60%);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════
   ECOSYSTEM / VALUE-ADDED SERVICES
═══════════════════════════════════════════════ */
.eco-section {
  background: linear-gradient(180deg, #021336, #0A3D82);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.eco-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) { .eco-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .eco-grid { grid-template-columns: repeat(3, 1fr); } }

.eco-card {
  padding: 2rem 1.5rem;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  text-align: center;
  transition: all .4s;
  position: relative;
}
.eco-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity .4s;
}
.eco-card:hover {
  transform: translateY(-5px);
  border-color: rgba(201,168,76,.35);
  background: rgba(255,255,255,.07);
  box-shadow: 0 20px 50px -20px rgba(201,168,76,.25);
}
.eco-card:hover::after { opacity: 1; }
.eco-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .6rem;
}
.eco-card p {
  font-size: .85rem;
  color: rgba(255,255,255,.55);
  line-height: 1.75;
}

/* ═══════════════════════════════════════════════
   SECTION SUBTITLE UTILITY
═══════════════════════════════════════════════ */
.section-subtitle {
  color: rgba(10,35,66,.55);
  max-width: 600px;
  margin: 0 auto;
  font-size: .95rem;
}

/* ═══════════════════════════════════════════════
   3D GLOBE LOGO (nav + footer)
═══════════════════════════════════════════════ */
@keyframes globeSpin {
  0%   { background-position: 0% 50%, 0% 50%, 0% 50%, 0 0; }
  100% { background-position: 300% 50%, 300% 50%, 300% 50%, 0 0; }
}
@keyframes logoGlow {
  0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85), 0 0 0 3px rgba(255,255,255,.14), 0 0 22px rgba(228,200,112,.35), 0 6px 16px rgba(0,0,0,.4); }
  50%      { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85), 0 0 0 3px rgba(255,255,255,.22), 0 0 36px rgba(228,200,112,.55), 0 6px 18px rgba(0,0,0,.45); }
}

.logo-link {
  display: flex; align-items: center; gap: .75rem;
  text-decoration: none; color: #fff;
}
.logo-globe {
  position: relative;
  width: 44px; height: 44px; border-radius: 50%;
  background:
    /* horizontal meridian */
    radial-gradient(ellipse 110% 16% at 50% 50%, transparent 47%, rgba(255,255,255,.22) 48%, rgba(255,255,255,.22) 52%, transparent 53%),
    /* equator */
    radial-gradient(ellipse 110% 40% at 50% 50%, transparent 48%, rgba(255,255,255,.14) 49%, rgba(255,255,255,.14) 51%, transparent 52%),
    /* vertical prime meridian */
    radial-gradient(ellipse 30% 110% at 50% 50%, transparent 47%, rgba(255,255,255,.18) 48%, rgba(255,255,255,.18) 52%, transparent 53%),
    /* sphere base — ocean blue with directional light */
    radial-gradient(circle at 32% 28%, #7FB8FF 0%, #2E7DD8 18%, #1C5AB0 38%, #0A3D82 65%, #02194A 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.85),
    0 0 0 3px rgba(255,255,255,.14),
    0 0 22px rgba(228,200,112,.35),
    0 6px 16px rgba(0,0,0,.4);
  animation: logoGlow 3.2s ease-in-out infinite;
  flex-shrink: 0;
}
/* Specular highlight (light glint) */
.logo-globe::before {
  content: '';
  position: absolute;
  top: 10%; left: 15%;
  width: 32%; height: 24%;
  background: radial-gradient(ellipse, rgba(255,255,255,.85) 0%, rgba(255,255,255,.25) 55%, transparent 72%);
  border-radius: 50%;
  filter: blur(.5px);
  pointer-events: none;
}
/* Subtle gold "P" mark on sphere */
.logo-globe::after {
  content: 'P';
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--gold-light);
  text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 8px rgba(228,200,112,.4);
  letter-spacing: 0;
  z-index: 1;
}
.logo-globe:hover { transform: scale(1.05); transition: transform .3s; }

.logo-text { line-height: 1.2; }
.logo-text .logo-en {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem; font-weight: 700; letter-spacing: .1em;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.3);
}
.logo-text .logo-cn {
  font-size: .6rem; letter-spacing: .3em;
  color: var(--gold-light);
}

/* Footer variant (sits on deep navy) */
.footer-logo .logo-globe { width: 40px; height: 40px; }
.footer-logo .logo-globe::after { font-size: 1rem; }

/* ═══════════════════════════════════════════════
   COUNTRY LIFESTYLE GALLERY (big-image mosaic)
   Drives the "image-heavy / foreign style" look.
═══════════════════════════════════════════════ */
.country-gallery {
  padding: 4.5rem 0 5rem;
  background: var(--ivory);
}
.country-gallery-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2rem;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.country-gallery-head h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
}
.country-gallery-head h2 .en {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: .72rem;
  letter-spacing: .35em;
  color: var(--gold-dark);
  margin-bottom: .5rem;
  font-weight: 600;
}
.country-gallery-head p {
  color: rgba(10,35,66,.55);
  font-size: .9rem;
  max-width: 480px;
  line-height: 1.7;
}
.gallery-mosaic {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: .9rem;
  height: 540px;
}
.gallery-mosaic .g-item:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}
.g-item {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
  box-shadow: 0 10px 30px -12px rgba(5,37,96,.3);
  isolation: isolate;
}
.g-item::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(2,19,54,.72) 0%, rgba(2,19,54,.25) 35%, transparent 55%);
  z-index: 1;
  transition: opacity .4s;
}
.g-item::after {
  content: attr(data-caption);
  position: absolute;
  left: 1.1rem; right: 1.1rem; bottom: 1rem;
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
  z-index: 2;
  line-height: 1.35;
}
.g-item .g-tag {
  position: absolute;
  top: 1rem; left: 1rem;
  padding: .25rem .75rem;
  background: rgba(228,200,112,.95);
  color: var(--navy-deep);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .15em;
  border-radius: 9999px;
  z-index: 2;
}
.g-item:hover {
  transform: scale(1.015);
  box-shadow: 0 20px 50px -12px rgba(5,37,96,.45);
}
.g-item:hover::before { opacity: .85; }
@media (max-width: 1023px) {
  .gallery-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; height: 620px; }
  .gallery-mosaic .g-item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 2; }
  .gallery-mosaic .g-item:nth-child(4) { grid-column: 1 / 3; }
}
@media (max-width: 640px) {
  .gallery-mosaic { grid-template-columns: 1fr; grid-template-rows: repeat(4, 180px); height: auto; }
  .gallery-mosaic .g-item:nth-child(n) { grid-column: 1 / 2; grid-row: auto; }
  .country-gallery-head { flex-direction: column; align-items: flex-start; }
}

/* ─── Full-bleed image banner (mid-page visual punctuation) ─── */
.fullbleed-banner {
  position: relative;
  min-height: 420px;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  padding: 5rem 1.25rem;
  overflow: hidden;
}
.fullbleed-banner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(5,37,96,.55), rgba(10,61,130,.45) 60%, rgba(28,90,176,.35)),
    radial-gradient(800px at 50% 50%, rgba(2,19,54,.35), transparent 70%);
}
.fullbleed-banner > * { position: relative; z-index: 1; }
.fullbleed-banner .fb-eyebrow {
  font-family: 'Playfair Display', serif;
  color: var(--gold-light);
  letter-spacing: .4em;
  font-size: .75rem;
  margin-bottom: 1rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.fullbleed-banner h2 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  max-width: 820px;
  margin: 0 auto 1rem;
  text-shadow: 0 4px 22px rgba(0,0,0,.6);
}
.fullbleed-banner p {
  color: rgba(255,255,255,.85);
  max-width: 620px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.7;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
@media (max-width: 768px) {
  .fullbleed-banner { background-attachment: scroll; min-height: 340px; }
}

/* ─── Image-split feature (image left, brief copy right) ─── */
.image-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
.image-split-media {
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 24px 60px -20px rgba(5,37,96,.4);
  min-height: 320px;
}
.image-split-copy h3 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1rem;
  line-height: 1.2;
}
.image-split-copy .eyebrow {
  font-family: 'Playfair Display', serif;
  color: var(--gold-dark);
  font-size: .72rem;
  letter-spacing: .3em;
  margin-bottom: .75rem;
}
.image-split-copy p {
  color: rgba(10,35,66,.7);
  line-height: 1.8;
  font-size: .92rem;
}
@media (min-width: 1024px) {
  .image-split { grid-template-columns: 1.15fr 1fr; gap: 3.5rem; }
  .image-split.reverse .image-split-media { order: 2; }
}

/* 图文排版正文段：项目页用「一段图 + 一段文」交错铺陈，取代整屏的卡片矩阵 */
.image-split + .image-split { margin-top: 3.25rem; }
.image-split-media { position: relative; }
/* 图上左下角的一枚要点徽标（周期 / 门槛 / 身份类型） */
.split-badge {
  position: absolute; left: 1rem; bottom: 1rem;
  display: inline-flex; align-items: baseline; gap: .4rem;
  padding: .5rem 1.05rem; border-radius: 9999px;
  background: rgba(255,255,255,.94); color: var(--navy);
  font-size: .78rem; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 10px 28px -14px rgba(5,37,96,.75);
}
.split-badge b { font-size: 1.05rem; color: var(--gold-dark); }
.image-split-copy .info-list { margin-top: 1.15rem; }
.image-split-copy .split-cta { margin-top: 1.6rem; }
/* 段内的小标题（如「三个类别」「项目速览」） */
.image-split-copy h4 {
  font-weight: 700; color: var(--gold-dark);
  font-size: .95rem; margin: 1.4rem 0 .2rem;
}
@media (max-width: 767px) {
  .image-split-media { min-height: 220px; aspect-ratio: 16 / 10; }
  .image-split + .image-split { margin-top: 2.5rem; }
}

/* ═══════════════════════════════════════════════
   TEXT-DENSITY COMPRESSION
   Applied sitewide to tilt the balance toward images.
═══════════════════════════════════════════════ */
.info-list li {
  font-size: .84rem;
  padding: .55rem 0;
  line-height: 1.55;
}
.info-list li::before { width: 6px; height: 6px; margin-top: 8px; }
.compare-table th,
.compare-table td { font-size: .78rem; padding: .7rem .85rem; }

/* Tighter section rhythm on subpages so images get priority */
body:not(:has(.hero-globe-section)) .section { padding: 3.5rem 0; }
@media(min-width: 768px) {
  body:not(:has(.hero-globe-section)) .section { padding: 4.5rem 0; }
}
body:not(:has(.hero-globe-section)) .section-title {
  font-size: 1.6rem;
}
@media(min-width: 768px) {
  body:not(:has(.hero-globe-section)) .section-title {
    font-size: 2.2rem;
  }
}
body:not(:has(.hero-globe-section)) .section-header { margin-bottom: 2.25rem; }

/* Tighter copy inside cards on subpages */
body:not(:has(.hero-globe-section)) .card h4 { font-size: .95rem; margin-bottom: .75rem; }
body:not(:has(.hero-globe-section)) .card p { font-size: .86rem; line-height: 1.7; }
body:not(:has(.hero-globe-section)) .card > div[style*="padding:2rem"] { padding: 1.5rem !important; }

/* Reduce gradient-card heading size slightly so headline doesn't dwarf images */
body:not(:has(.hero-globe-section)) .card h3[style*="1.5rem"] {
  font-size: 1.2rem !important;
}

/* Immigration news */
.news-section {
  background: #fff;
  position: relative;
}
.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .news-grid { grid-template-columns: repeat(3, 1fr); }
}
.news-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(10,35,66,.08);
  box-shadow: 0 18px 45px -28px rgba(5,37,96,.45);
  text-decoration: none;
  transition: transform .35s, box-shadow .35s, border-color .35s;
}
.news-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201,168,76,.35);
  box-shadow: 0 26px 60px -30px rgba(5,37,96,.55);
}
.news-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
}
.news-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2,19,54,.58), transparent 58%);
}
.news-card-media span {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 1;
  padding: .28rem .75rem;
  border-radius: 9999px;
  background: rgba(228,200,112,.96);
  color: var(--navy-deep);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.news-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.25rem;
}
.news-card-body time {
  color: var(--gold-dark);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.news-card-body h3 {
  color: var(--navy);
  font-size: 1.08rem;
  line-height: 1.45;
  margin: .55rem 0 .65rem;
}
.news-card-body p {
  color: rgba(10,35,66,.62);
  font-size: .88rem;
  line-height: 1.75;
  margin: 0 0 1rem;
}
.news-card-link {
  margin-top: auto;
  color: var(--navy);
  font-size: .82rem;
  font-weight: 700;
}
.news-empty {
  grid-column: 1 / -1;
  padding: 2rem;
  border: 1px dashed rgba(10,35,66,.18);
  border-radius: 14px;
  color: rgba(10,35,66,.58);
  text-align: center;
  background: var(--ivory);
}
.news-detail-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  padding: 8rem 0 5rem;
  color: #fff;
  background-image: linear-gradient(180deg, rgba(2,19,54,.3), rgba(2,19,54,.88)), var(--hero-img);
  background-size: cover;
  background-position: center;
}
.news-detail-hero h1 {
  max-width: 900px;
  margin: 1rem 0;
  font-size: clamp(2rem, 4.4vw, 4rem);
  line-height: 1.15;
  color: #fff;
}
.news-detail-hero p {
  max-width: 760px;
  color: rgba(255,255,255,.82);
  line-height: 1.8;
}
.news-detail-hero time {
  color: var(--gold-light);
  font-weight: 700;
  letter-spacing: .08em;
}
.news-detail-body {
  max-width: 860px;
  padding-top: 4rem;
  padding-bottom: 4rem;
  color: rgba(10,35,66,.78);
  line-height: 1.9;
  font-size: 1rem;
}
.news-detail-body h2,
.news-detail-body h3 {
  color: var(--navy);
  line-height: 1.35;
  margin: 2rem 0 1rem;
}
.news-detail-body img {
  max-width: 100%;
  border-radius: 14px;
}

/* ═══════════════════════════════════════════════
   UX POLISH PASS
   Keeps the existing PremierVisa color system intact.
═══════════════════════════════════════════════ */
html { overflow-x: hidden; }
body { min-width: 320px; }

a, button, input, select, textarea, summary {
  touch-action: manipulation;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 10px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: .75rem;
  z-index: 1000;
  transform: translateY(-140%);
  padding: .65rem 1rem;
  border-radius: 9999px;
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  transition: transform .22s ease-out;
}
.skip-link:focus { transform: translateY(0); }

.site-nav .container {
  min-height: 5rem;
}
.menu-toggle {
  min-width: 44px;
  min-height: 44px;
  border-radius: 9999px;
}
.menu-toggle[aria-expanded="true"] {
  background: rgba(255,255,255,.1) !important;
}
.mobile-menu {
  background: rgba(6,24,50,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.1);
  /* 菜单挂在固定定位的顶栏里，超出一屏时自己滚，否则底部几项（含电话）永远点不到 */
  max-height: calc(100vh - 5rem);
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .9rem 1.25rem 1.25rem;
  color: #fff;
}
.mobile-nav-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: .65rem .8rem;
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: background .22s ease-out, color .22s ease-out, transform .22s ease-out;
}
.mobile-nav-link:hover,
.mobile-nav-link:focus-visible {
  background: rgba(255,255,255,.08);
  color: var(--gold-light);
}
.mobile-phone-link {
  color: var(--gold-light);
  border: 1px solid rgba(201,168,76,.24);
  margin-top: .35rem;
}

/* ─── 顶部导航搜索按钮 + 移动菜单搜索行 ─── */
.nav-search-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9); cursor: pointer; flex: none;
  transition: background .25s, border-color .25s, color .25s;
}
.nav-search-btn:hover, .nav-search-btn:focus-visible {
  background: rgba(201,168,76,.18); border-color: rgba(201,168,76,.55); color: var(--gold-light);
}
.nav-search-btn svg { width: 17px; height: 17px; }
.mobile-search { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; }
.mobile-search input[type="search"] {
  flex: 1 1 auto; min-width: 0; padding: .7rem .9rem; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08);
  color: #fff; font-size: .9rem; outline: none;
}
.mobile-search input[type="search"]::placeholder { color: rgba(255,255,255,.45); }
.mobile-search input[type="search"]:focus { border-color: rgba(201,168,76,.6); }
.mobile-search button {
  flex: none; width: 42px; height: 42px; border-radius: 10px; border: none;
  background: var(--gold); color: var(--navy); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.mobile-search button svg { width: 18px; height: 18px; }

.btn-gold,
.btn-outline,
.btn-navy,
.tab-btn,
.fab,
.hot-card,
.program-card,
.news-card,
details.faq-item summary {
  -webkit-tap-highlight-color: transparent;
}
.btn-gold,
.btn-outline,
.btn-navy,
.tab-btn {
  min-height: 44px;
  justify-content: center;
}
.btn-gold:active,
.btn-outline:active,
.btn-navy:active,
.fab:active,
.hot-card:active,
.program-card:active,
.news-card:active {
  transform: translateY(0) scale(.985);
}

.hero-content {
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
}
.hero-text-col {
  max-width: min(720px, 92vw);
}
.hero-badge,
.section-tag,
.page-hero .hero-eyebrow,
.fullbleed-banner .fb-eyebrow,
.country-gallery-head h2 .en {
  overflow-wrap: anywhere;
}
.hero-cta a {
  text-align: center;
}
.hero-trust span {
  line-height: 1.45;
}

.card,
.hot-card,
.team-card,
.office-card,
.adv-card,
.case-card,
.eco-card,
.news-card {
  border-radius: 18px;
}
.program-card,
.hot-card,
.news-card {
  height: 100%;
}
.program-card .card-body,
.hot-card,
.team-card,
.office-card,
.adv-card,
.case-card,
.eco-card {
  display: flex;
  flex-direction: column;
}
.program-card .card-body .btn-navy,
.hot-card .hot-link,
.news-card-link {
  margin-top: auto;
}

.stats-row {
  flex-wrap: wrap;
}
.stat-item {
  min-width: 120px;
}
.stats-number {
  font-variant-numeric: tabular-nums;
}

.country-gallery-head {
  align-items: end;
}
.gallery-mosaic {
  min-height: 420px;
}
.g-item,
.image-split-media,
.news-card-media {
  background-color: rgba(10,35,66,.08);
}
.g-item {
  min-height: 180px;
}

/* 表格本身保持 block：圆角裁切、窄屏横向滚动都靠它。
   但 block 化的 <table> 里，行会被包进一个按内容收缩的匿名表格盒，width:100% 管不到它，
   宽屏下列只占内容宽度、右边空出一大块——所以让 tbody 自己当表格并撑满。
   前提是别拆 <thead>/<tbody>：拆开就成了两张各算各列宽的表，表头和内容对不齐。 */
.compare-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare-table > tbody {
  display: table;
  width: 100%;
}
/* 贴着卡片边缘铺满的表格（卡片 > 滚动容器 > 表格）：圆角交给卡片自己裁。
   表格再圆一次的话，上面压着同色标题栏时两端各露一个白色缺角（欧洲页对比表） */
.card > div > .compare-table { border-radius: 0; }

.lead-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2rem 2.5rem;
  border-radius: 1.5rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lead-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.lead-field label {
  display: block;
  color: rgba(255,255,255,.72);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.lead-field input,
.lead-field select {
  width: 100%;
  min-height: 48px;
  margin-top: .5rem;
  padding: .75rem 0;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.26);
  background: transparent;
  color: #fff;
  outline: none;
  font-size: 1rem;
  border-radius: 0;
  transition: border-color .22s ease-out, box-shadow .22s ease-out;
}
.lead-field input::placeholder {
  color: rgba(255,255,255,.46);
}
.lead-field input:focus,
.lead-field select:focus {
  border-bottom-color: var(--gold-light);
  box-shadow: 0 1px 0 var(--gold-light);
}
.lead-submit {
  width: 100%;
  padding: 1rem;
  border-radius: 9999px;
  font-size: 1rem;
  margin-top: .5rem;
}
.lead-privacy {
  color: rgba(255,255,255,.56);
  font-size: .75rem;
  line-height: 1.65;
  text-align: center;
}

/* ─── 免费评估弹窗（shared.js 的 pvOpenLeadModal）───
   全站指向 #lead 的「评估 / 咨询」按钮就地弹出，不再跳回首页；字段沿用上面的 .lead-field */
html.lead-modal-open { overflow: hidden; }
.lead-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
/* 弹窗和里面的块都有自己的 display，UA 的 [hidden] 压不住 */
.lead-modal[hidden],
.lead-modal [hidden] { display: none !important; }
.lead-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(3,16,42,.62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .22s ease-out;
}
.lead-modal-panel {
  position: relative; width: 100%; max-width: 480px;
  max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 2rem 2rem 1.6rem; border-radius: 1.5rem; color: #fff; outline: none;
  background:
    radial-gradient(360px at 0% 0%, rgba(201,168,76,.2), transparent 70%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  border: 1px solid rgba(201,168,76,.3);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.65);
  opacity: 0; transform: translateY(18px) scale(.98);
  transition: opacity .22s ease-out, transform .22s ease-out;
}
.lead-modal.is-open .lead-modal-backdrop { opacity: 1; }
.lead-modal.is-open .lead-modal-panel { opacity: 1; transform: none; }
.lead-modal-close {
  position: absolute; top: .85rem; right: .85rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; border-radius: 9999px;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); cursor: pointer;
  transition: background .2s, color .2s;
}
.lead-modal-close:hover { background: rgba(255,255,255,.16); color: #fff; }
.lead-modal-tag { font-family: 'Playfair Display', Georgia, serif; color: var(--gold); font-size: .72rem; letter-spacing: .32em; }
.lead-modal-title { margin-top: .45rem; padding-right: 2.5rem; font-size: 1.4rem; font-weight: 700; line-height: 1.35; }
.lead-modal-sub { margin-top: .45rem; color: rgba(255,255,255,.66); font-size: .85rem; line-height: 1.65; }
.lead-modal-topic {
  margin-top: .9rem; padding: .6rem .9rem; border-radius: .8rem;
  background: rgba(201,168,76,.12); border: 1px solid rgba(201,168,76,.3);
  color: rgba(255,255,255,.78); font-size: .82rem; line-height: 1.5;
}
.lead-modal-topic b { color: var(--gold-light); font-weight: 700; }
.lead-modal-form { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.25rem; }
.lead-modal-form .lead-form-grid { gap: 1rem; }
.lead-modal .lead-field select option { color: var(--navy); }
.lead-modal-form .lead-submit { margin-top: .25rem; }
.lead-modal-form .lead-privacy a { color: var(--gold-light); text-decoration: none; white-space: nowrap; }
.lead-modal-done { padding: 1.25rem 0 .25rem; text-align: center; }
.lead-modal-done .lead-modal-title { padding-right: 0; margin-top: 1rem; }
.lead-modal-done-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 9999px;
  background: rgba(201,168,76,.16); border: 1px solid rgba(201,168,76,.4); color: var(--gold-light);
}
.lead-modal-done .lead-submit { margin-top: 1.4rem; }
/* 手机上贴底弹出，拇指够得着 */
@media (max-width: 480px) {
  .lead-modal { align-items: flex-end; padding: .75rem; }
  .lead-modal-panel { padding: 1.6rem 1.25rem 1.25rem; border-radius: 1.25rem; }
  .lead-modal-title { font-size: 1.25rem; }
}

@media (max-width: 767px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
  .section { padding: 4rem 0; }
  .section-header { margin-bottom: 2.25rem; }
  .section-tag { letter-spacing: .24em; }
  .section-title { font-size: clamp(1.75rem, 8vw, 2.25rem); line-height: 1.15; }
  .page-hero {
    min-height: 520px;
    padding: 7rem 1rem 4.5rem;
  }
  .page-hero .hero-eyebrow {
    letter-spacing: .22em;
  }
  .hero-btn-primary,
  .hero-btn-secondary,
  .hero-cta a {
    width: 100%;
  }
  .hero-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem .8rem;
  }
  .lead-form {
    padding: 1.4rem;
    border-radius: 1.1rem;
  }
  .lead-form-grid {
    grid-template-columns: 1fr;
  }
  .fab-group {
    right: max(.75rem, env(safe-area-inset-right));
    bottom: max(.75rem, env(safe-area-inset-bottom));
  }
  .country-gallery { padding: 3.5rem 0; }
  .country-gallery-head p { max-width: none; }
  .fullbleed-banner { padding: 4rem 1rem; }
  .image-split-media { min-height: 240px; border-radius: 16px; }
}

@media (max-width: 420px) {
  .hero-badge {
    max-width: 100%;
    padding: .45rem .85rem;
  }
  .hero-trust {
    grid-template-columns: 1fr;
  }
  .stats-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }
  .stat-item {
    min-width: 0;
    padding: .75rem .4rem;
  }
  .stats-number {
    font-size: 2.25rem;
  }
}

/* ═══════════════════════════════════════════════
   窄桌面导航防挤压（1024-1535px）
   导航条目由 CMS 配置，条目多时窄屏会把标签压成两行（"移民项 目"）。
   统一禁止折行，并按宽度收紧间距/字号，必要时收起电话号码。
═══════════════════════════════════════════════ */
/* 默认间距写在这里而不是 shared.js 的行内 style：行内样式压过样式表，下面按宽度收紧的 gap 以前一直没生效 */
.site-nav .desktop-nav { flex-wrap: nowrap; gap: 2rem; }
.site-nav .logo-link { flex: none; }
.nav-link,
.nav-link-parent,
.nav-dropdown-link,
.site-nav .btn-gold,
.phone-link span { white-space: nowrap; }

/* 一级菜单目前 10 项（含香港 / 英国 / 亚洲），其中 7 个国家菜单带下拉箭头，按宽度分三档收紧。
   分档跟着容器宽度走：Tailwind CDN 的 .container 在 1024 / 1280 / 1536 把最大宽度卡成
   1024 / 1280 / 1536，所以 1200-1279 实际只有 1024 宽的容器，1440-1535 只有 1280 宽。 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-nav .desktop-nav { gap: .8rem; }
  .nav-link { font-size: .76rem; }
  /* 容器内宽只剩约 950px，十个菜单再加箭头放不下：箭头收起，悬停照样展开下拉 */
  .desktop-nav .nav-chev { display: none; }
  /* 电话号码收起：右下角悬浮按钮与移动端菜单仍可直接拨号 */
  .site-nav .phone-link { display: none !important; }
  /* 搜索按钮也收起：这一档只剩约 40px 余量，36px 按钮加间距放不下；首页新闻区仍有搜索栏 */
  .site-nav .nav-search-btn { display: none !important; }
}
@media (min-width: 1280px) and (max-width: 1535px) {
  .site-nav .desktop-nav { gap: 1.1rem; }
  .nav-link { font-size: .8rem; }
  .site-nav .phone-link { display: none !important; }
}
@media (min-width: 1536px) and (max-width: 1679px) {
  .site-nav .desktop-nav { gap: 1.4rem; }
  .nav-link { font-size: .84rem; }
}
/* 地球提示气泡避开右下角悬浮按钮列 */
@media (min-width: 1024px) and (max-width: 1439px) {
  .globe-hint { right: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .fullbleed-banner {
    background-attachment: scroll;
  }
}

/* ─── 窄桌面（1024-1439px）首页 Hero：地球与文案分区，避免压字与标签出屏 ───
   地球画布是右侧竖长条，窗口越窄球体横向越容易溢出；
   JS 侧已按宽高比拉远相机，这里再收一收文案宽度与画布占比。 */
@media (min-width: 1024px) and (max-width: 1439px) {
  #globe-container.hero-globe-canvas { width: 52% !important; }
  .hero-text-col { margin-left: 3%; max-width: 600px; }
  .hero-title { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
  .hero-zh-title { font-size: clamp(1.35rem, 2.5vw, 1.9rem); }
  .hero-desc { max-width: 480px; font-size: .88rem; }
  .hero-trust { gap: 1rem 1.25rem; font-size: .75rem; }
}

/* ═══════════════════════════════════════════════
   移民新闻：分类筛选条 + 紧凑卡片列表 + 正文排版
   （首页 #news 仍用原来的 3 列大卡片，紧凑样式只作用于 .news-grid-compact）
═══════════════════════════════════════════════ */

/* ─── 分类筛选条 ─── */
.news-cats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin: 0 0 2rem;
}
.news-cats-label {
  color: rgba(10,35,66,.5);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  margin-right: .25rem;
}
.news-cat {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.05rem;
  border-radius: 9999px;
  border: 1px solid rgba(10,35,66,.14);
  background: #fff;
  color: var(--navy);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  transition: border-color .25s, background .25s, color .25s, transform .25s;
}
.news-cat span {
  color: rgba(10,35,66,.42);
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.news-cat:hover {
  transform: translateY(-2px);
  border-color: rgba(201,168,76,.55);
  color: var(--navy-deep);
}
.news-cat.is-active {
  background: linear-gradient(135deg, var(--navy), var(--navy-deep));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 26px -16px rgba(10,61,130,.9);
}
.news-cat.is-active span { color: rgba(255,255,255,.65); }
.news-cat-all { color: var(--gold-dark); border-style: dashed; }

/* ─── 新闻搜索栏 ─── */
.news-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  position: relative;
  max-width: 560px;
  margin: 0 auto 2.25rem;
}
.news-search-icon {
  position: absolute;
  left: 1rem;
  color: rgba(10,35,66,.4);
  pointer-events: none;
}
.news-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: .8rem 1rem .8rem 2.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(10,35,66,.16);
  background: #fff;
  color: var(--navy-deep);
  font-size: .9rem;
  outline: none;
  transition: border-color .25s, box-shadow .25s;
}
.news-search input[type="search"]::placeholder { color: rgba(10,35,66,.4); }
.news-search input[type="search"]:focus {
  border-color: rgba(201,168,76,.6);
  box-shadow: 0 0 0 3px rgba(201,168,76,.15);
}
.news-search .btn-gold {
  flex: 0 0 auto;
  padding: .72rem 1.5rem;
  border-radius: 9999px;
  font-size: .85rem;
}

/* 详情页正文上方的分类条：与正文同宽（860）居中，避免比文章还宽 */
.news-cats-detail {
  max-width: 860px;
  margin: 2.5rem auto -1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(10,35,66,.08);
}
.news-cats-detail .news-cat { padding: .42rem .9rem; font-size: .8rem; }

/* ─── 紧凑卡片：手机 1 列 → 平板 3 列 → 桌面 4 列 → 宽屏 5/6 列 ─── */
.news-grid-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 768px)  { .news-grid-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .news-grid-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .news-grid-compact { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .news-grid-compact { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.1rem; } }

.news-grid-compact .news-card { border-radius: 14px; }
.news-grid-compact .news-card:hover { transform: translateY(-4px); }
.news-grid-compact .news-card-media { aspect-ratio: 3 / 2; }
.news-grid-compact .news-card-media span {
  left: .55rem;
  bottom: .55rem;
  padding: .2rem .55rem;
  font-size: .6rem;
  letter-spacing: .06em;
  max-width: calc(100% - 1.1rem);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.news-grid-compact .news-card-body { padding: .8rem .85rem .9rem; }
.news-grid-compact .news-card-body time { font-size: .68rem; letter-spacing: .06em; }
.news-grid-compact .news-card-body h3 {
  font-size: .92rem;
  line-height: 1.5;
  margin: .35rem 0 .4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-grid-compact .news-card-body p {
  font-size: .78rem;
  line-height: 1.65;
  margin: 0 0 .7rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-grid-compact .news-card-link { font-size: .74rem; }
/* 一行 5/6 个时卡片更窄，摘要再收一点 */
@media (min-width: 1280px) {
  .news-grid-compact .news-card-body p { font-size: .76rem; line-height: 1.6; }
}

/* 列表页 hero 比详情页矮一些 */
.news-list-hero { min-height: 380px; padding: 7rem 0 3.5rem; }

/* ─── 正文排版（后台粘贴的 HTML / 纯文本都能读） ─── */
.news-detail-body > *:first-child { margin-top: 0; }
.news-detail-body p {
  margin: 0 0 1.35rem;
  font-size: 1.02rem;
  line-height: 1.95;
}
.news-detail-body h2 {
  font-size: 1.5rem;
  padding-left: .85rem;
  border-left: 4px solid var(--gold);
  margin: 2.6rem 0 1.1rem;
}
.news-detail-body h3 { font-size: 1.2rem; margin: 2rem 0 .9rem; }
.news-detail-body h4 { color: var(--navy); font-size: 1.05rem; margin: 1.6rem 0 .7rem; line-height: 1.5; }
.news-detail-body ul,
.news-detail-body ol { margin: 0 0 1.35rem; padding-left: 1.4rem; }
.news-detail-body li { margin: 0 0 .55rem; line-height: 1.9; }
.news-detail-body li::marker { color: var(--gold-dark); }
.news-detail-body strong, .news-detail-body b { color: var(--navy-deep); font-weight: 700; }
.news-detail-body a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.news-detail-body a:hover { color: var(--gold-dark); }
.news-detail-body blockquote {
  margin: 1.8rem 0;
  padding: 1.1rem 1.35rem;
  border-left: 4px solid var(--navy-soft);
  border-radius: 0 12px 12px 0;
  background: var(--ivory);
  color: rgba(10,35,66,.8);
}
.news-detail-body blockquote p:last-child { margin-bottom: 0; }
.news-detail-body hr { margin: 2.4rem 0; border: 0; border-top: 1px solid rgba(10,35,66,.12); }
.news-detail-body figure { margin: 1.8rem 0; }
.news-detail-body figcaption { margin-top: .6rem; color: rgba(10,35,66,.55); font-size: .82rem; text-align: center; }
.news-detail-body img { display: block; margin: 1.8rem auto; }
.news-detail-body table {
  width: 100%;
  margin: 1.8rem 0;
  border-collapse: collapse;
  font-size: .9rem;
}
.news-detail-body table th,
.news-detail-body table td {
  padding: .7rem .85rem;
  border: 1px solid rgba(10,35,66,.12);
  text-align: left;
  vertical-align: top;
}
.news-detail-body table th { background: var(--ivory); color: var(--navy); font-weight: 700; }
.news-detail-body table tr:nth-child(even) td { background: rgba(248,246,241,.6); }
/* 宽表格在手机上横向滚动而不是撑破版心 */
.news-detail-body { overflow-x: hidden; }
.news-detail-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ─── 相关阅读 ─── */
.news-related {
  max-width: 860px;
  margin: 0 auto 4rem;
  padding: 1.6rem 1.8rem;
  border: 1px solid rgba(10,35,66,.1);
  border-radius: 16px;
  background: var(--ivory);
}
.news-related h2 { color: var(--navy); font-size: 1.05rem; margin: 0 0 1rem; }
.news-related ul { list-style: none; margin: 0; padding: 0; }
.news-related li + li { border-top: 1px solid rgba(10,35,66,.08); }
.news-related a {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: .7rem 0;
  color: var(--navy);
  font-size: .92rem;
  text-decoration: none;
  transition: color .25s;
}
.news-related a:hover { color: var(--gold-dark); }
.news-related time { color: rgba(10,35,66,.45); font-size: .76rem; white-space: nowrap; }

@media (max-width: 767px) {
  .news-cats { gap: .45rem; margin-bottom: 1.5rem; }
  .news-cat { padding: .42rem .8rem; font-size: .8rem; }
  /* 手机上一行两个，摘要放不下，只留封面+日期+标题 */
  .news-grid-compact { gap: .75rem; }
  .news-grid-compact .news-card-body { padding: .65rem .7rem .75rem; }
  .news-grid-compact .news-card-body p { display: none; }
  .news-grid-compact .news-card-body h3 { font-size: .86rem; margin: .3rem 0 .45rem; }
  .news-detail-body p { font-size: .96rem; line-height: 1.9; }
  .news-detail-body h2 { font-size: 1.28rem; }
  .news-related { padding: 1.2rem 1.1rem; }
}