@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+HK:wght@400;500;700;900&display=swap');

:root { --ink:#17231f; --muted:#60706a; --paper:#f7f5ef; --cream:#ede9de; --mint:#bce8c8; --mint-dark:#72bf8a; --orange:#f27b52; --line:#d8d8ca; --white:#fffdf8; }
* { box-sizing:border-box; }
html, body { overflow-x:hidden; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans','Noto Sans HK',sans-serif; line-height:1.55; }
a { color:inherit; text-decoration:none; }
.section-wrap { width:min(1160px, calc(100% - 64px)); margin-inline:auto; }
.site-header { height:82px; display:flex; align-items:center; justify-content:space-between; width:min(1280px, calc(100% - 64px)); margin:auto; }
.brand { display:flex; align-items:center; gap:10px; font-size:17px; font-weight:700; letter-spacing:-.03em; }
.brand-mark { display:grid; place-items:center; width:46px; height:30px; color:var(--ink); background:var(--orange); border-radius:3px; font-size:11px; font-weight:900; letter-spacing:-.08em; }
.main-nav { display:flex; gap:34px; margin-left:80px; color:var(--muted); font-size:13px; }
.main-nav a:hover,.text-link:hover,.site-footer a:hover { color:var(--orange); }
.header-cta { padding:11px 16px; border:1px solid var(--ink); border-radius:4px; font-size:13px; font-weight:700; }
.header-cta span { color:var(--orange); padding-left:8px; }
.hero { min-height:650px; display:grid; grid-template-columns:1.03fr .97fr; align-items:center; gap:30px; padding:68px 0 92px; }
.eyebrow { margin:0 0 21px; color:var(--orange); font-size:14px; font-weight:700; letter-spacing:.15em; }
.eyebrow-dot { width:8px; height:8px; display:inline-block; margin-right:8px; background:var(--orange); border-radius:50%; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { letter-spacing:-.06em; line-height:1.08; }
h1 { max-width:620px; margin-bottom:28px; font-size:clamp(49px,6.1vw,80px); font-weight:900; }
h1 em,h2 em { color:var(--orange); font-style:normal; }
.hero-intro { max-width:530px; margin-bottom:30px; color:var(--muted); font-size:16px; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:23px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:25px; padding:14px 18px; border-radius:4px; font-size:13px; font-weight:700; transition:transform .2s, box-shadow .2s; }
.button:hover { transform:translateY(-3px); box-shadow:0 8px 18px #17231f1b; }
.button-primary { color:var(--paper); background:var(--ink); }
.button-primary span { color:var(--mint); font-size:19px; line-height:0; }
.text-link { font-size:13px; font-weight:700; border-bottom:1px solid var(--ink); padding-bottom:3px; }
.text-link span { padding-left:7px; color:var(--orange); }
.hero-note { margin-top:31px; color:var(--muted); font-size:14px; }
.hero-note span { color:var(--mint-dark); margin-right:4px; }
.hero-visual { position:relative; height:470px; overflow:hidden; }
.orbit { position:absolute; border:1px solid #c7d0c4; border-radius:50%; transform:rotate(-25deg); }
.orbit-one { width:490px; height:220px; top:110px; left:0; }
.orbit-two { width:380px; height:170px; top:130px; left:45px; border-style:dashed; }
.visual-card { position:absolute; box-shadow:0 15px 40px #17231f15; }
.card-main { width:300px; height:300px; left:100px; top:70px; padding:31px; display:flex; flex-direction:column; justify-content:space-between; color:var(--ink); background:var(--mint); transform:rotate(-5deg); }
.card-label { font-size:10px; font-weight:700; letter-spacing:.15em; }
.card-main strong { font-size:42px; letter-spacing:-.07em; line-height:1.03; }
.card-arrow { align-self:flex-end; font-size:33px; }
.card-float { background:var(--white); }
.card-trend { display:flex; align-items:center; gap:11px; top:38px; right:10px; padding:13px 15px; transform:rotate(5deg); }
.card-trend b,.card-trend small { display:block; font-size:11px; }.card-trend small { color:var(--muted); font-size:10px; margin-top:2px; }.mini-icon { display:grid; place-items:center; width:32px; height:32px; color:var(--paper); background:var(--orange); border-radius:50%; font-weight:700; }
.card-path { bottom:36px; right:34px; padding:17px 19px; transform:rotate(4deg); }.path-line { display:block; margin-bottom:9px; color:var(--orange); font-size:10px; letter-spacing:.1em; }.card-path b { font-size:12px; }
.visual-sticker { position:absolute; left:8px; bottom:75px; width:74px; height:74px; display:grid; place-content:center; color:var(--paper); background:var(--orange); border-radius:50%; text-align:center; font-size:10px; font-weight:700; line-height:1.2; transform:rotate(-12deg); }
.pain-band { padding:78px 0; color:var(--paper); background:var(--ink); }
.pain-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }.eyebrow-dark { color:#17231f; }.pain-band h2 { margin:0; font-size:clamp(34px,4vw,53px); }.pain-list { border-top:1px solid #ffffff3d; }.pain-item { display:grid; grid-template-columns:54px 1fr; gap:13px; align-items:center; padding:18px 0; border-bottom:1px solid #ffffff3d; }.pain-item span { color:var(--mint); font-size:11px; }.pain-item p { margin:0; font-size:14px; }
.pain-band .eyebrow { font-size:13px; }
.section { padding-top:120px; padding-bottom:120px; }.section-heading { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:end; margin-bottom:48px; }.section-heading h2,.trend-copy h2,.contact-section h2 { margin-bottom:0; font-size:clamp(38px,4.7vw,62px); }.section-lead { max-width:430px; margin:0; color:var(--muted); font-size:14px; }
.career-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.career-card { min-height:352px; padding:25px; border:1px solid var(--line); background:var(--white); transition:transform .25s, border-color .25s; }.career-card:hover { transform:translateY(-7px); border-color:var(--orange); }.career-card.featured { background:var(--cream); }.career-top { display:flex; justify-content:space-between; align-items:center; }.number { color:var(--orange); font-size:12px; font-weight:700; }.tag { padding:4px 8px; color:var(--muted); border:1px solid var(--line); font-size:9px; letter-spacing:.12em; }.career-card h3 { margin:58px 0 12px; font-size:24px; }.career-card p { min-height:92px; color:var(--muted); font-size:13px; }.skill-row { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:26px; }.skill-row span { padding:5px 8px; background:#e9e9de; color:var(--muted); font-size:10px; }.demand { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:10px; }.demand i { display:flex; gap:3px; }.demand b { display:block; width:15px; height:5px; background:var(--mint-dark); }.demand b.off { background:var(--line); }.data-note { margin:15px 0 0; color:#89928b; font-size:10px; }
.trend-section { display:grid; grid-template-columns:1.1fr .9fr; gap:110px; padding-top:100px; padding-bottom:100px; color:var(--paper); background:var(--orange); }.trend-section.section-wrap { width:100%; padding-left:max(32px, calc((100% - 1160px) / 2)); padding-right:max(32px, calc((100% - 1160px) / 2)); }.trend-copy { max-width:570px; }.trend-copy p:not(.eyebrow) { max-width:490px; margin:26px 0 32px; font-size:15px; }.trend-copy .eyebrow { color:var(--ink); }.button-light { color:var(--ink); background:var(--paper); }.button-light span { color:var(--orange); font-size:19px; }.trend-stats { display:grid; align-content:center; }.stat { display:grid; grid-template-columns:68px 1fr; gap:20px; align-items:center; padding:21px 0; border-bottom:1px solid #ffffff66; }.stat strong { font-size:31px; color:var(--mint); }.stat span { font-size:14px; line-height:1.4; }
.process-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:38px; border-top:1px solid var(--line); }.process-step { padding:25px 0; border-bottom:1px solid var(--line); }.process-step span { color:var(--orange); font-size:12px; }.process-step h3 { margin:52px 0 10px; font-size:23px; }.process-step p { max-width:260px; margin:0; color:var(--muted); font-size:13px; }
.contact-section { padding:96px 0; background:var(--cream); }.contact-grid { display:grid; grid-template-columns:1fr .8fr; gap:110px; align-items:center; }.contact-section h2 { margin-bottom:25px; }.contact-section > .contact-grid > div:first-child > p:last-child { max-width:430px; color:var(--muted); font-size:14px; }.contact-panel { padding:30px; background:var(--white); border-top:4px solid var(--orange); }.panel-kicker { color:var(--orange); font-size:10px; font-weight:700; letter-spacing:.14em; }.contact-link { display:block; width:max-content; max-width:100%; margin:14px 0; border-bottom:1px solid var(--ink); font-size:18px; font-weight:700; }.panel-note { margin:24px 0; color:var(--muted); font-size:10px; }.full-button { width:100%; }
.privacy-section { border-top:1px solid var(--line); }.privacy-toggle { display:flex; justify-content:space-between; width:100%; padding:24px 0; border:0; color:var(--ink); background:transparent; font:inherit; font-size:13px; font-weight:700; text-align:left; cursor:pointer; }.privacy-toggle span { color:var(--orange); font-size:22px; font-weight:400; }.privacy-content { display:none; max-width:720px; padding:0 0 25px; color:var(--muted); font-size:12px; }.privacy-content.is-open { display:block; }.disclaimer { margin:0; padding:18px 0 25px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }.site-footer { display:flex; justify-content:space-between; gap:18px; padding:24px 0 34px; color:var(--muted); font-size:10px; }
.reveal { animation:rise .75s both; }.delay-1 { animation-delay:.18s; } @keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@media (max-width:1000px) and (min-width:761px) { .career-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px) { .section-wrap,.site-header { width:calc(100% - 36px); }.site-header { height:70px; }.main-nav { display:none; }.header-cta { padding:8px 10px; font-size:11px; }.hero { display:block; padding:54px 0 70px; }.hero-intro { font-size:14px; }.hero-visual { height:390px; margin-top:32px; transform:scale(.82); transform-origin:top left; width:122%; }.card-main { left:75px; }.pain-grid,.section-heading,.trend-section,.contact-grid { grid-template-columns:1fr; gap:38px; }.pain-band { padding:58px 0; }.section { padding-top:78px; padding-bottom:78px; }.career-grid,.process-grid { grid-template-columns:1fr; }.career-card { min-height:0; }.career-card h3 { margin-top:40px; }.career-card p { min-height:0; }.trend-section.section-wrap { padding:70px 18px; }.trend-stats { margin-top:12px; }.contact-section { padding:70px 0; }.site-footer { flex-wrap:wrap; }.site-footer span:last-child { width:100%; order:3; }.contact-link { font-size:16px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.reveal { animation:none; }.button,.career-card { transition:none; } }