/* =========================================================
   港研荟 · HK MasterHub  —— main stylesheet
   Design language: deep navy + champagne gold + warm cream
   ========================================================= */

:root{
  --c-ink:#0b1733;
  --c-ink-2:#1a2750;
  --c-ink-3:#2b3a66;
  --c-paper:#fbf9f5;
  --c-paper-2:#f3eee3;
  --c-line:#e6e1d4;
  --c-gold:#c8a45c;
  --c-gold-2:#e7c98a;
  --c-gold-soft:#f6ead0;
  --c-accent:#0e4d92;
  --c-accent-2:#1d6fd0;
  --c-mute:#6b7390;
  --c-ok:#0f8f63;
  --c-warn:#d97706;
  --c-bad:#c93636;

  --radius:18px;
  --radius-sm:10px;
  --shadow-sm:0 4px 16px rgba(11,23,51,.06);
  --shadow:0 18px 48px -18px rgba(11,23,51,.25);
  --shadow-lg:0 30px 80px -30px rgba(11,23,51,.45);

  --max:1200px;
  --pad:clamp(16px, 4vw, 32px);

  --font-zh:'Noto Serif SC', 'Songti SC', 'STSong', serif;
  --font-en:'Inter', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;
  font-family:var(--font-en);
  color:var(--c-ink);
  background:var(--c-paper);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .2s ease}
a:hover{color:var(--c-accent)}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

.container{width:100%;max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.container.narrow{max-width:880px}

h1,h2,h3,h4{font-family:var(--font-zh);font-weight:700;letter-spacing:.01em;line-height:1.25;margin:0}
h1{font-size:clamp(34px, 5vw, 60px);font-weight:900}
h2{font-size:clamp(28px, 3.4vw, 44px)}
h3{font-size:clamp(18px, 1.6vw, 22px)}
p{margin:0}

.eyebrow{
  display:inline-block;font-family:var(--font-en);font-weight:600;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--c-accent);
  padding:6px 12px;border:1px solid rgba(14,77,146,.25);border-radius:999px;
  background:rgba(14,77,146,.06);
}
.eyebrow--gold{color:var(--c-gold);border-color:rgba(200,164,92,.4);background:rgba(200,164,92,.1)}

.hl{color:var(--c-accent);position:relative;white-space:nowrap}
.hl::after{content:"";position:absolute;left:0;right:0;bottom:.05em;height:.28em;background:var(--c-gold-soft);z-index:-1;border-radius:4px}
.hl-gold{color:var(--c-gold-2)}
.muted{color:var(--c-mute);font-size:14px}

/* ========== BUTTONS ========== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:999px;font-weight:600;font-size:15px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;cursor:pointer;
}
.btn--primary{background:var(--c-ink);color:#fff}
.btn--primary:hover{background:var(--c-accent);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow)}
.btn--gold{background:linear-gradient(135deg,var(--c-gold) 0%, var(--c-gold-2) 100%);color:#21170a}
.btn--gold:hover{transform:translateY(-1px);box-shadow:0 14px 28px -10px rgba(200,164,92,.55);color:#21170a}
.btn--ghost{border:1.5px solid var(--c-ink);color:var(--c-ink)}
.btn--ghost:hover{background:var(--c-ink);color:#fff}
.btn--lg{padding:15px 28px;font-size:16px}
.btn--block{width:100%}

/* ========== NAV ========== */
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  background:rgba(251,249,245,.78);
  border-bottom:1px solid rgba(11,23,51,.06);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.brand{display:flex;align-items:center;gap:12px}
.brand__mark{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--c-ink) 0%, var(--c-ink-3) 100%);
  color:var(--c-gold-2);font-family:var(--font-zh);font-weight:900;font-size:22px;
  box-shadow:inset 0 0 0 1px rgba(200,164,92,.4);
}
.brand__name{display:flex;flex-direction:column;line-height:1.05}
.brand__name strong{font-family:var(--font-zh);font-size:18px;font-weight:900;letter-spacing:.04em}
.brand__name em{font-style:normal;font-size:11px;letter-spacing:.22em;color:var(--c-mute);font-weight:600}
.nav__links{display:flex;align-items:center;gap:26px;font-size:14.5px}
.nav__links a{color:var(--c-ink-2);font-weight:500}
.nav__links a:hover{color:var(--c-accent)}
.nav__cta{padding:10px 18px;font-size:14px}
@media (max-width:920px){.nav__links{display:none}}

/* ========== HERO ========== */
.hero{position:relative;overflow:hidden;padding:clamp(40px,7vw,100px) 0 0}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55}
.orb--1{width:420px;height:420px;background:#c8a45c;top:-120px;right:-100px}
.orb--2{width:380px;height:380px;background:#1d6fd0;bottom:-160px;left:-100px;opacity:.35}
.orb--3{width:260px;height:260px;background:#f6ead0;top:200px;left:40%;opacity:.6}

.hero__inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;
  padding-bottom:60px;
}
.hero__copy h1{margin-top:18px}
.hero__copy .lede{margin-top:22px;font-size:17px;color:var(--c-ink-2);max-width:580px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero__stats{
  margin:42px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  border-top:1px dashed rgba(11,23,51,.15);padding-top:24px;max-width:640px;
}
.hero__stats li{display:flex;flex-direction:column;gap:2px}
.hero__stats b{font-family:var(--font-zh);font-size:28px;color:var(--c-ink);font-weight:900}
.hero__stats span{font-size:12px;color:var(--c-mute);letter-spacing:.05em}

.hero__card{position:relative}
.card--glass{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:24px;
  padding:32px;
  box-shadow:var(--shadow-lg);
}
.card__badge{
  display:inline-block;padding:6px 12px;border-radius:999px;
  background:var(--c-ink);color:var(--c-gold-2);
  font-size:12px;letter-spacing:.18em;font-weight:600;text-transform:uppercase;
  margin-bottom:18px;
}
.check{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:12px}
.check li{position:relative;padding-left:30px;font-size:15px;color:var(--c-ink-2)}
.check li::before{
  content:"";position:absolute;left:0;top:.55em;width:18px;height:18px;border-radius:50%;
  background:var(--c-gold-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8a45c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/12px no-repeat;
}

.hero__marquee{
  position:relative;z-index:1;overflow:hidden;
  border-top:1px solid rgba(11,23,51,.08);border-bottom:1px solid rgba(11,23,51,.08);
  background:rgba(255,255,255,.4);
  padding:18px 0;
}
.marquee__track{
  display:flex;gap:60px;width:max-content;
  animation:marquee 38s linear infinite;
  font-family:var(--font-zh);font-weight:700;color:var(--c-ink-2);
  font-size:18px;letter-spacing:.04em;
}
.marquee__track span{opacity:.7}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (max-width:900px){
  .hero__inner{grid-template-columns:1fr;gap:32px}
  .hero__stats{grid-template-columns:repeat(2,1fr)}
}

/* ========== SECTIONS ========== */
.section{padding:clamp(60px,9vw,120px) 0;position:relative}
.section--accent{background:linear-gradient(180deg,#fbf9f5 0%, #f3eee3 100%)}
.section--dark{background:linear-gradient(160deg,#0b1733 0%, #1a2750 60%, #20305f 100%);color:#e9ecf3}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--dark .eyebrow{color:var(--c-gold-2);border-color:rgba(231,201,138,.35);background:rgba(231,201,138,.08)}
.section--dark .muted{color:rgba(255,255,255,.55)}
.section--cta{background:linear-gradient(135deg,#0b1733 0%, #1a2750 100%);color:#fff;padding:clamp(60px,8vw,100px) 0}

.section__head{max-width:780px;margin-bottom:48px}
.section__head--center{margin-left:auto;margin-right:auto;text-align:center}
.section__head h2{margin-top:14px}
.section__sub{margin-top:14px;color:var(--c-mute);font-size:16px}
.section--dark .section__sub{color:rgba(255,255,255,.65)}

/* ========== GRIDS ========== */
.grid{display:grid;gap:22px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.grid--3,.grid--4{grid-template-columns:1fr}}

.feature{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);
  padding:26px;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(200,164,92,.35)}
.feature__icon{font-size:28px;margin-bottom:12px}
.feature h3{margin-bottom:8px}
.feature p{color:var(--c-mute);font-size:14.5px}

/* ========== SPLIT (english-friendly) ========== */
.split{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center}
.split h2{margin-top:16px}
.split p{margin-top:18px;color:rgba(255,255,255,.8);font-size:17px;max-width:620px}
.pill-list{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.pill-list li{
  background:rgba(255,255,255,.08);border:1px solid rgba(231,201,138,.25);
  padding:10px 16px;border-radius:999px;font-size:14px;color:#fff;
}
.bigquote{
  background:linear-gradient(140deg,rgba(200,164,92,.18),rgba(231,201,138,.08));
  border:1px solid rgba(231,201,138,.35);
  border-radius:24px;padding:36px;text-align:center;color:#fff;
}
.bigquote__num{
  font-family:var(--font-zh);font-weight:900;font-size:96px;line-height:1;
  background:linear-gradient(135deg,var(--c-gold-2),#fff7df);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.bigquote p{margin:18px 0 22px;font-size:18px;color:rgba(255,255,255,.85)}
@media (max-width:880px){.split{grid-template-columns:1fr}}

/* ========== ADVANTAGE ========== */
.advantage .adv{
  background:#fff;border-radius:var(--radius);padding:30px 26px;border:1px solid var(--c-line);
  position:relative;overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.advantage .adv:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.adv__no{
  font-family:var(--font-en);font-weight:800;font-size:42px;
  color:var(--c-gold);opacity:.55;letter-spacing:-.02em;margin-bottom:6px;
}
.adv h3{margin-bottom:10px}
.adv p{color:var(--c-mute);font-size:14.5px}

/* ========== ASSESSMENT ========== */
.assess{
  display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:start;
  background:#fff;border:1px solid var(--c-line);border-radius:24px;
  padding:clamp(20px,3vw,36px);box-shadow:var(--shadow);
  min-width:0;
}
.assess > *{min-width:0}
@media (max-width:960px){.assess{grid-template-columns:1fr}}
.assess__form .field{margin-bottom:22px;min-width:0}
.assess__form label{
  display:block;font-weight:700;font-family:var(--font-zh);
  font-size:15px;margin-bottom:10px;color:var(--c-ink);
}
.chips{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.chips button{
  padding:9px 14px;border-radius:999px;font-size:13.5px;
  background:#f4f1e9;color:var(--c-ink-2);border:1px solid transparent;
  transition:all .2s ease;font-weight:500;
  white-space:nowrap;max-width:100%;
}
.chips button:hover{background:#ece7d6}
.chips button.active{
  background:var(--c-ink);color:var(--c-gold-2);
  border-color:rgba(200,164,92,.4);
  box-shadow:0 6px 18px -8px rgba(11,23,51,.4);
}
@media (max-width:560px){
  .assess{padding:18px}
  .chips{gap:6px}
  .chips button{padding:8px 11px;font-size:12.5px}
}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}
.field--row input{
  padding:13px 16px;border-radius:12px;border:1.5px solid var(--c-line);
  font-size:14.5px;background:#fbf9f5;color:var(--c-ink);
  transition:border-color .2s ease,background .2s ease;
  min-width:0;width:100%;box-sizing:border-box;
}
.field--row input:focus{outline:none;border-color:var(--c-accent);background:#fff}
.form__tip{font-size:12px;color:var(--c-mute);margin-top:12px;text-align:center}

.assess__result{
  position:sticky;top:96px;
  background:linear-gradient(160deg,#0b1733 0%, #1a2750 100%);
  color:#fff;border-radius:18px;padding:28px;
  min-height:480px;display:flex;flex-direction:column;
}
.result__placeholder{display:grid;place-items:center;text-align:center;flex:1;color:rgba(255,255,255,.7)}
.result__art{font-size:48px;margin-bottom:14px}
.result__placeholder h3{color:#fff;margin-bottom:8px}

/* Result populated state */
.result__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.result__head h3{color:#fff;font-size:20px}
.result__head .tag{background:rgba(200,164,92,.18);color:var(--c-gold-2);padding:4px 10px;border-radius:999px;font-size:11px;letter-spacing:.12em}
.gauge{
  --pct:25;
  display:flex;align-items:center;gap:18px;margin-bottom:20px;
}
.gauge__ring{
  --size:120px;
  width:var(--size);height:var(--size);border-radius:50%;
  background:conic-gradient(var(--c-gold) calc(var(--pct)*1%), rgba(255,255,255,.12) 0);
  display:grid;place-items:center;position:relative;flex-shrink:0;
}
.gauge__ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:#0b1733}
.gauge__num{position:relative;font-family:var(--font-zh);font-weight:900;font-size:30px;color:#fff}
.gauge__num small{font-size:14px;color:rgba(255,255,255,.6);margin-left:2px}
.gauge__text{flex:1}
.gauge__text h4{color:#fff;font-size:14px;margin-bottom:6px;letter-spacing:.04em}
.gauge__text p{color:rgba(255,255,255,.7);font-size:13px}
.uplift{
  background:rgba(200,164,92,.12);
  border:1px solid rgba(200,164,92,.35);
  border-radius:14px;padding:16px 18px;margin-bottom:20px;
  display:flex;align-items:center;gap:14px;
}
.uplift__num{font-family:var(--font-zh);font-weight:900;font-size:28px;color:var(--c-gold-2);line-height:1}
.uplift__txt{font-size:13.5px;color:rgba(255,255,255,.85);line-height:1.5}
.uplift__txt b{color:#fff}
.result__list{flex:1;overflow:auto;margin-bottom:18px}
.result__list h4{color:#fff;font-size:13px;letter-spacing:.06em;margin-bottom:10px}
.result__list ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.result__list li{
  padding:10px 14px;background:rgba(255,255,255,.06);border-radius:10px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13.5px;
  border:1px solid rgba(255,255,255,.06);
}
.result__list li small{color:rgba(255,255,255,.55);font-size:11.5px;letter-spacing:.04em}
.result__list .match{
  background:rgba(200,164,92,.18);color:var(--c-gold-2);
  padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;flex-shrink:0;
}
.result__cta{display:flex;flex-direction:column;gap:8px}

/* ========== PROGRAMS ========== */
.prog{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);
  padding:28px;display:flex;flex-direction:column;gap:10px;
  transition:transform .25s, box-shadow .25s;
}
.prog:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.prog__schools{font-size:13px;color:var(--c-accent);font-weight:600;letter-spacing:.02em}
.prog p:nth-of-type(2){color:var(--c-mute);font-size:14.5px;flex:1}
.tag{
  align-self:flex-start;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;
}
.tag--green{background:#e7f6ee;color:#0f8f63}
.tag--blue{background:#e6efff;color:#1d6fd0}

/* ========== STEPS ========== */
.steps{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:none;
}
.steps li{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);padding:26px;transition:background .2s, border-color .2s;
}
.steps li:hover{background:rgba(200,164,92,.08);border-color:rgba(200,164,92,.3)}
.steps__no{
  font-family:var(--font-en);font-weight:800;font-size:32px;color:var(--c-gold-2);
  margin-bottom:6px;opacity:.85;
}
.steps h3{margin-bottom:8px}
.steps p{color:rgba(255,255,255,.7);font-size:14.5px}
@media (max-width:880px){.steps{grid-template-columns:1fr}}

/* ========== CASES ========== */
.case{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);padding:28px;
  transition:transform .25s, box-shadow .25s;
}
.case:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.case__tag{
  display:inline-block;padding:5px 12px;border-radius:999px;background:var(--c-gold-soft);color:#8b6915;
  font-size:12px;font-weight:600;margin-bottom:14px;
}
.case h3{margin-bottom:10px}
.case p{color:var(--c-mute);font-size:14.5px}
.case b{color:var(--c-ink)}

/* ========== FAQ ========== */
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-sm);
  padding:18px 22px;transition:box-shadow .2s,border-color .2s;
}
.faq details[open]{box-shadow:var(--shadow-sm);border-color:rgba(200,164,92,.4)}
.faq summary{
  font-family:var(--font-zh);font-weight:700;font-size:16px;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;color:var(--c-ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-en);font-size:24px;color:var(--c-gold);font-weight:400;transition:transform .2s}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:12px;color:var(--c-mute);font-size:14.5px}

/* ========== CTA ========== */
.cta{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center}
.cta h2{margin-top:16px}
.cta p{margin-top:18px;color:rgba(255,255,255,.8);font-size:17px}
.cta__card{
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(200,164,92,.1));
  border:1px solid rgba(231,201,138,.3);
  border-radius:24px;padding:32px;text-align:center;
}
.qr{width:200px;height:200px;border-radius:18px;background:#fff;margin:0 auto 18px;display:grid;place-items:center;overflow:hidden;position:relative;padding:10px;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);transition:transform .25s ease, box-shadow .25s ease}
.qr--img{cursor:zoom-in}
.qr--img:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 18px 40px -12px rgba(200,164,92,.5)}
.qr img{width:100%;height:100%;object-fit:contain;display:block;border-radius:10px}
.qr::before,.qr::after{
  content:"";position:absolute;inset:14px;
  background:
    radial-gradient(circle, var(--c-ink) 2px, transparent 3px) 0 0/14px 14px,
    radial-gradient(circle, var(--c-ink) 2px, transparent 3px) 7px 7px/14px 14px;
  opacity:0;
}
.qr__inner{
  position:relative;z-index:1;
  width:56px;height:56px;border-radius:14px;background:#07c160;color:#fff;
  display:grid;place-items:center;font-family:var(--font-zh);font-weight:700;font-size:14px;
}
.cta__card h3{color:#fff;margin-bottom:6px}
.cta__card p{color:rgba(255,255,255,.7);font-size:14px;margin:0 0 18px}
@media (max-width:880px){.cta{grid-template-columns:1fr}}

/* ========== FOOTER ========== */
.footer{background:#070e22;color:rgba(255,255,255,.7);padding-top:60px}
.footer__inner{display:grid;grid-template-columns:1.2fr 2fr;gap:48px;padding-bottom:50px}
.brand--footer .brand__name strong{color:#fff}
.brand--footer .brand__name em{color:rgba(255,255,255,.4)}
.footer__tag{margin-top:14px;font-size:14px;color:rgba(255,255,255,.5);max-width:300px}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.footer__cols h4{color:#fff;font-family:var(--font-zh);font-size:14px;margin-bottom:14px;letter-spacing:.08em}
.footer__cols a,.footer__cols span{display:block;color:rgba(255,255,255,.55);font-size:13.5px;margin-bottom:8px}
.footer__cols a:hover{color:var(--c-gold-2)}
.footer__bottom{border-top:1px solid rgba(255,255,255,.08);padding:18px 0;font-size:12.5px}
.footer__bottom .container{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:rgba(255,255,255,.4)}
@media (max-width:760px){.footer__inner,.footer__cols{grid-template-columns:1fr}}

/* ========== ANIMATIONS ========== */
@media (prefers-reduced-motion:no-preference){
  .feature,.adv,.prog,.case,.steps li,.faq details{
    opacity:0;transform:translateY(16px);
    animation:rise .6s ease-out forwards;
  }
  .feature{animation-delay:.05s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* ========== FEATURE HIGHLIGHT (一人读硕·全家赴港) ========== */
.feature--highlight{
  background:linear-gradient(160deg,#fff9ec 0%, #fbeec7 100%);
  border-color:rgba(200,164,92,.45);
  position:relative;
}
.feature--highlight::before{
  content:"隐藏福利";position:absolute;top:-10px;right:14px;
  background:var(--c-ink);color:var(--c-gold-2);
  font-size:11px;letter-spacing:.16em;padding:4px 10px;border-radius:999px;
}

/* ========== FAMILY MIGRATION SECTION ========== */
.section--family{
  background:
    radial-gradient(1200px 400px at 50% -200px, rgba(200,164,92,.18), transparent 60%),
    linear-gradient(180deg,#fbf9f5 0%, #f3eee3 100%);
  position:relative;overflow:hidden;
}
.section--family::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(11,23,51,.12), transparent);
}

.timeline{position:relative}
.tline{
  position:absolute;left:0;right:0;top:74px;height:2px;
  display:grid;grid-template-columns:repeat(4,1fr);pointer-events:none;z-index:0;
}
.tline span{
  display:block;height:2px;
  background:repeating-linear-gradient(90deg,var(--c-gold) 0 8px, transparent 8px 16px);
  opacity:.55;
}
.timeline__row{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.tnode{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);
  padding:24px;position:relative;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tnode:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(200,164,92,.45)}
.tnode__step{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-en);font-size:11px;letter-spacing:.18em;font-weight:700;
  color:var(--c-accent);background:rgba(14,77,146,.08);
  padding:5px 10px;border-radius:999px;margin-bottom:14px;
}
.tnode h3{font-size:17px;margin-bottom:10px;line-height:1.4}
.tnode p{color:var(--c-mute);font-size:14px;line-height:1.7}
.tnode b{color:var(--c-ink)}

.tnode--gold{
  background:linear-gradient(160deg,#0b1733 0%, #1a2750 100%);
  border-color:rgba(231,201,138,.4);color:#fff;
}
.tnode--gold .tnode__step{
  background:rgba(231,201,138,.18);color:var(--c-gold-2);
}
.tnode--gold h3{color:#fff}
.tnode--gold p{color:rgba(255,255,255,.78)}
.tnode--gold b{color:var(--c-gold-2)}

.family__cta{
  margin-top:36px;text-align:center;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;
}

@media (max-width:1024px){
  .timeline__row{grid-template-columns:repeat(2,1fr)}
  .tline{display:none}
}
@media (max-width:560px){
  .timeline__row{grid-template-columns:1fr}
}