/* Self-hosted so the first paint does not wait on two external domains.
   Google's stylesheet for this pair was 341KB and took 7.3s on test, because
   Noto Sans SC ships as 303 unicode-range subsets — all of it render-blocking.
   Chinese now uses the reader's system font (PingFang on Apple, YaHei on
   Windows), which downloads nothing and is what they read everywhere else. */
@font-face {
  font-family: "Outfit";
  src: url("/static/fonts/outfit.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2070-209F, U+20A0-20CF, U+2190-21FF, U+2200-22FF;
}

/* FastSkill — design system
   Airbnb-learned marketplace UI · rose brand · zh-first bilingual */
:root{
  --brand:#F43F5E; --brand-dark:#E11D48; --brand-soft:#FFF1F3;
  --ink:#222530; --ink2:#5D6473; --ink3:#8A90A0;
  --line:#EBECF0; --bg:#FFFFFF; --bg-soft:#F7F7F9;
  --free:#0E9F6E; --free-bg:#E6F7F0;
  --sub:#B45309;  --sub-bg:#FEF3E2;
  --fee:#475569;  --fee-bg:#EEF1F5;
  --ovs:#7C3AED;  --ovs-bg:#F3EEFD;
  --r-lg:20px; --r-md:14px; --r-pill:999px;
  --shadow:0 1px 2px rgba(20,22,30,.06),0 6px 20px rgba(20,22,30,.06);
  --shadow-lift:0 2px 6px rgba(20,22,30,.08),0 14px 34px rgba(20,22,30,.12);
  --max:1120px;
  --f-display:"Outfit",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC","Segoe UI",sans-serif;
  --f-body:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC","Outfit","Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);color:var(--ink);background:var(--bg);line-height:1.65;font-size:15.5px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}

/* bilingual toggle */
.en{display:none}
html.lang-en .zh{display:none}
html.lang-en .en{display:revert}
html.lang-en body{font-family:var(--f-display)}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:14px;height:64px}
.logo{font-family:var(--f-display);display:flex;align-items:center;gap:10px;line-height:1;text-decoration:none}
.logo-mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;font-size:15px;font-weight:800;letter-spacing:-.04em;box-shadow:0 5px 14px rgba(228,30,72,.24)}
.logo-type{display:flex;flex-direction:column;gap:3px;font-size:23px;font-weight:800;letter-spacing:-.045em;color:var(--ink)}
.logo-type b{color:var(--brand)}
.logo small{font-family:var(--f-body);font-size:10.5px;font-weight:600;color:var(--ink3);letter-spacing:.02em;white-space:nowrap}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{padding:8px 13px;border-radius:var(--r-pill);font-size:14px;color:var(--ink2);font-weight:500}
.nav a.btn-brand{color:#fff}
.nav a:hover{background:var(--bg-soft);color:var(--ink)}
.nav a.btn-brand:hover{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff}
.nav a.active{background:var(--bg-soft);color:var(--ink);font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--r-pill);font-weight:700;font-size:14.5px;padding:11px 20px;transition:transform .15s ease, box-shadow .15s ease}
.btn-brand{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;box-shadow:0 4px 14px rgba(228,30,72,.28)}
.btn-brand:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(228,30,72,.34)}
.btn-ghost{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink3)}
.lang-btn{border:1.5px solid var(--line);background:#fff;border-radius:var(--r-pill);padding:7px 13px;font-size:13px;font-weight:600;color:var(--ink2)}
.lang-btn:hover{border-color:var(--ink3);color:var(--ink)}

/* mobile nav */
.mnav{display:none}
@media(max-width:820px){
  .nav a.hide-m{display:none}
  .hd-in{height:58px}
  .logo-mark{width:34px;height:34px;border-radius:10px;font-size:13px}
  .logo-type{font-size:20px}
  .mnav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;background:#fff;border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
  .mnav a{flex:1;text-align:center;font-size:11.5px;color:var(--ink2);padding:6px 2px;border-radius:10px;font-weight:600}
  .mnav a .mi{display:block;font-size:19px;line-height:1.2}
  .mnav a.active{color:var(--brand)}
  body{padding-bottom:66px}
}

/* ---------- hero ---------- */
.hero{padding:52px 0 40px;background:
  radial-gradient(700px 340px at 85% -60px, var(--brand-soft), transparent 70%),
  radial-gradient(500px 260px at -60px 120px, #F0F4FF, transparent 70%)}
.hero h1{font-family:var(--f-display);font-size:clamp(28px,5vw,44px);line-height:1.18;letter-spacing:-.02em;font-weight:800;max-width:640px}
.hero h1 .hl{color:var(--brand)}
.hero p.sub{margin-top:14px;max-width:560px;color:var(--ink2);font-size:16px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 14px;font-size:13px;font-weight:600;color:var(--ink2);margin-top:18px;box-shadow:var(--shadow)}
.hero-cta{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.trustbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft)}
.trustbar .container{display:flex;gap:8px 28px;flex-wrap:wrap;justify-content:center;padding:13px 20px;font-size:13.5px;color:var(--ink2)}
.trustbar b{color:var(--ink)}

/* ---------- section scaffolding ---------- */
.sec{padding:52px 0 8px}
.eyebrow{color:var(--brand);font-weight:800;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
.sec h2{font-family:var(--f-display);font-size:clamp(22px,3.4vw,30px);font-weight:800;letter-spacing:-.015em;margin-top:6px}
.sec .lead{color:var(--ink2);margin-top:8px;max-width:640px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 18px}
.step .n{width:30px;height:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px}
.step h3{font-size:15.5px;margin:12px 0 6px;font-weight:700}
.step p{font-size:13.5px;color:var(--ink2)}
@media(max-width:820px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.steps{grid-template-columns:1fr 1fr;gap:10px}.step{padding:16px 14px}}

/* ---------- filters (Airbnb pill bar) ---------- */
.filterbar{position:sticky;top:64px;z-index:40;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:12px 0}
@media(max-width:820px){.filterbar{top:58px}}
.filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:2px}
.filters::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1.5px solid var(--line);background:#fff;border-radius:var(--r-pill);padding:8px 15px;font-size:13.5px;font-weight:600;color:var(--ink2);transition:all .12s}
.chip:hover{border-color:var(--ink3)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip.on-brand{background:var(--brand);border-color:var(--brand);color:#fff}
.fdivider{flex:0 0 auto;width:1px;background:var(--line);margin:4px 4px}
.searchwrap{margin-top:10px}
.search{width:100%;max-width:520px;border:1.5px solid var(--line);border-radius:var(--r-pill);padding:11px 18px;font-size:14.5px;font-family:inherit;background:#fff;box-shadow:var(--shadow)}
.search:focus{outline:none;border-color:var(--brand)}
.rescount{font-size:13.5px;color:var(--ink3);margin:14px 0 2px}

/* ---------- course cards ---------- */
.cat-h{margin:30px 0 4px;font-family:var(--f-display);font-size:19px;font-weight:800;display:flex;align-items:center;gap:10px}
.cat-h::after{content:"";flex:1;height:1px;background:var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;margin-top:16px}
@media(max-width:480px){.grid{grid-template-columns:1fr;gap:14px}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:10px;transition:transform .16s ease, box-shadow .16s ease, border-color .16s;position:relative}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:transparent}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{border-radius:var(--r-pill);font-size:11.5px;font-weight:700;padding:4px 10px;letter-spacing:.02em}
.tag-state{background:#EDF2FF;color:#3B5BDB}
.tag-free{background:var(--free-bg);color:var(--free)}
.tag-subsidised{background:var(--sub-bg);color:var(--sub)}
.tag-fee{background:var(--fee-bg);color:var(--fee)}
.tag-oversea{background:var(--ovs-bg);color:var(--ovs)}
.card .code{font-size:11.5px;color:var(--ink3);font-weight:600;letter-spacing:.04em}
.card h3{font-size:16.5px;font-weight:750;line-height:1.4}
.card h3 a::after{content:"";position:absolute;inset:0}
.card .price{font-weight:800;font-size:14.5px;color:var(--ink)}
.card .price.p-free{color:var(--free)}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:12.8px;color:var(--ink2);border-top:1px dashed var(--line);padding-top:10px}
.meta div b{color:var(--ink3);font-weight:600;display:block;font-size:11px;letter-spacing:.03em}
.card-cta{display:flex;gap:8px;margin-top:auto;padding-top:6px;position:relative;z-index:1}
.card-cta .btn{flex:1;padding:9px 10px;font-size:13.5px}

/* ---------- course detail ---------- */
.crumbs{font-size:13px;color:var(--ink3);padding:18px 0 0}
.crumbs a:hover{color:var(--brand)}
.detail{display:grid;grid-template-columns:1fr 380px;gap:36px;padding:16px 0 60px;align-items:start}
@media(max-width:920px){.detail{grid-template-columns:1fr;gap:22px}}
.d-head h1{font-family:var(--f-display);font-size:clamp(22px,3.6vw,32px);font-weight:800;line-height:1.28;letter-spacing:-.015em;margin-top:8px}
.d-head .code{color:var(--ink3);font-weight:600;font-size:13px;letter-spacing:.05em}
.factgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
@media(max-width:560px){.factgrid{grid-template-columns:1fr}}
.fact{background:var(--bg-soft);border-radius:var(--r-md);padding:13px 15px}
.fact b{display:block;font-size:11.5px;color:var(--ink3);letter-spacing:.05em;font-weight:700;margin-bottom:3px}
.fact span{font-size:14px;font-weight:600}
.d-sec{margin-top:30px}
.d-sec h2{font-family:var(--f-display);font-size:19px;font-weight:800;margin-bottom:10px}
.d-sec p{color:var(--ink2)}
.notice{margin-top:26px;background:var(--brand-soft);border:1px solid #FFD9DF;border-radius:var(--r-md);padding:14px 16px;font-size:13px;color:#9F1239}

/* enquiry card — the booking-widget signature */
.ecard{position:sticky;top:96px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);padding:22px;z-index:2}
@media(max-width:920px){.ecard{position:static}}
.ecard .p-line{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ecard .p-line .amount{font-family:var(--f-display);font-size:20px;font-weight:800}
.ecard .p-line .amount.p-free{color:var(--free)}
.ecard .p-sub{font-size:12.5px;color:var(--ink3);margin-top:2px}
.ecard .startrow{display:flex;gap:10px;margin:14px 0 4px}
.srow{flex:1;border:1.5px solid var(--line);border-radius:var(--r-md);padding:9px 12px}
.srow b{display:block;font-size:10.5px;letter-spacing:.06em;color:var(--ink3);font-weight:700}
.srow span{font-size:13px;font-weight:600}
.form{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.form label{font-size:12.5px;font-weight:700;color:var(--ink2)}
.form input,.form select,.form textarea{width:100%;border:1.5px solid var(--line);border-radius:var(--r-md);padding:11px 13px;font-size:14px;font-family:inherit;background:#fff}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--brand)}
.form textarea{min-height:76px;resize:vertical}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form .btn{width:100%;padding:13px;font-size:15px;margin-top:4px}
.form .fineprint{font-size:11.5px;color:var(--ink3);text-align:center}
.form .ok{display:none;background:var(--free-bg);color:var(--free);border-radius:var(--r-md);padding:12px;font-size:13.5px;font-weight:600;text-align:center}
.form .err{display:none;background:#FEF2F2;color:#B91C1C;border-radius:var(--r-md);padding:12px;font-size:13px;text-align:center}
.altcontact{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px;font-size:13px;color:var(--ink2);text-align:center}
.altcontact b{color:var(--ink)}

/* ---------- eligibility quiz ---------- */
.quiz{max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:28px;margin-top:26px}
.q-step{display:none}
.q-step.on{display:block}
.q-step h3{font-family:var(--f-display);font-size:20px;font-weight:800;margin-bottom:16px}
.q-opts{display:flex;flex-direction:column;gap:10px}
.q-opt{border:1.5px solid var(--line);border-radius:var(--r-md);padding:14px 16px;text-align:left;background:#fff;font-size:15px;font-weight:600;transition:all .12s;width:100%}
.q-opt:hover{border-color:var(--brand);background:var(--brand-soft)}
.q-progress{height:5px;background:var(--bg-soft);border-radius:99px;margin-bottom:22px;overflow:hidden}
.q-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-dark));border-radius:99px;transition:width .3s ease}
.q-result{display:none;text-align:center}
.q-result.on{display:block}
.q-result .big{font-size:44px}
.q-result h3{font-family:var(--f-display);font-size:22px;font-weight:800;margin:8px 0 10px}
.q-result p{color:var(--ink2);max-width:460px;margin:0 auto 18px}
.q-back{margin-top:16px;font-size:13px;color:var(--ink3);background:none;border:none;text-decoration:underline}

/* ---------- footer / contact strip ---------- */
.cta-strip{margin-top:60px;background:#1E2129;color:#fff;padding:46px 0 40px}
.cta-strip h2{font-family:var(--f-display);font-size:clamp(20px,3vw,27px);font-weight:800}
.cta-strip p{color:#AAB0BF;margin-top:8px;max-width:520px}
.cta-grid{display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:start}
@media(max-width:860px){.cta-grid{grid-template-columns:1fr}}
.contact-list{margin-top:22px;display:flex;flex-direction:column;gap:0;font-size:14px}
.contact-list .row{display:flex;gap:16px;padding:11px 0;border-bottom:1px solid #33374233}
.contact-list .row b{color:var(--brand);min-width:64px;font-weight:700}
.cta-form{background:#fff;border-radius:var(--r-lg);padding:24px;color:var(--ink);box-shadow:var(--shadow-lift)}
.cta-form h3{font-family:var(--f-display);font-size:17px;font-weight:800;margin-bottom:12px}
.ft{border-top:1px solid #333742;background:#1E2129;color:#8A90A0;font-size:12.5px}
.ft .container{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:18px 20px}
.ft a{color:#C6CBD6}
.smallprint{font-size:11.5px;color:var(--ink3);padding:26px 0 40px;max-width:820px}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- illustrations ---------- */
.card-img{margin:-18px -18px 6px;border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;aspect-ratio:16/7;background:var(--bg-soft)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.card:hover .card-img img{transform:scale(1.04)}
.d-banner{border-radius:var(--r-lg);overflow:hidden;margin-top:18px;aspect-ratio:16/6;box-shadow:var(--shadow)}
.d-banner img{width:100%;height:100%;object-fit:cover}
.hero-stage{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/9;min-height:520px;border-radius:30px;box-shadow:var(--shadow-lift);background:#fff}
.hero-bg{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero-copy{width:49%;min-height:100%;display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,5vw,72px)}
@media(max-width:860px){
  .hero{padding-top:24px}
  .hero-stage{aspect-ratio:auto;min-height:650px}
  .hero-stage::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.94) 46%,rgba(255,255,255,.18) 72%,rgba(255,255,255,0) 100%)}
  .hero-bg{object-position:68% center}
  .hero-copy{width:100%;min-height:auto;padding:34px 26px 300px}
}
@media(max-width:480px){
  .hero-stage{min-height:610px;border-radius:22px}
  .hero-copy{padding:28px 20px 270px}
  .hero-copy h1{font-size:30px}
}