:root {
  --home-dark: #07070a;
  --home-purple: #a29bfe;
  --home-paper: #fafaf7;
  --home-rule: #deded8;
}

.site-top {
  background: var(--home-dark);
  color: #fff;
}
.site-top .preview-note {
  background: #101016;
  border-color: #26232f;
  color: #bbb8ca;
}
.header {
  padding-top: 18px;
  padding-bottom: 18px;
  max-width: 1320px;
  min-height: 84px;
}
.header .brand { color: #fff; }
.brand-official {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  letter-spacing: 0;
}
.brand-official .brand-chinese {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .02em;
}
.brand-official .brand-english {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .22em;
  color: #aaa5bf;
}
.header nav { gap: 29px; color: #e5e2ed; }
.header nav > a { min-height: 44px; display: flex; align-items: center; }
.header .services-menu > div { color: #252722; z-index: 12; }
.header-cta > .project-review-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #c7c1e5;
  font-size: 12px;
  border-bottom: 1px solid #4a405f;
}
.site-top .menu-toggle { color: #fff; }
.site-top .mobile-nav { background: #111019; color: #ece9f6; border-color: #2c2639; }
.site-top .mobile-nav > a { min-height: 48px; border-bottom: 1px solid #292334; }
.site-top .mobile-nav .project-review-link { color: var(--home-purple); }
.site-top a:focus-visible, .site-top summary:focus-visible { outline-color: var(--home-purple); }

.home-hero {
  color: #f8f7fc;
  background: radial-gradient(ellipse at 55% 62%, #21142c 0, #100c18 28%, var(--home-dark) 68%);
}
.hero-layout {
  max-width: 1320px;
  margin: auto;
  padding: 48px 40px 55px;
  display: grid;
  grid-template-columns: 1.04fr 1fr;
  gap: 65px;
  align-items: start;
}
.hero-copy-v3 > .eyebrow { font-size: 10px; letter-spacing: .1em; margin-bottom: 23px; color: #c5bfd5; }
.hero-copy-v3 .dot { background: var(--home-purple); }
.hero-copy-v3 h1 { font-size: 85px; margin-bottom: 24px; line-height: .99; letter-spacing: -.055em; }
.hero-copy-v3 h1 em { color: var(--home-purple); }
.hero-intro { max-width: 490px; font-size: 15px; line-height: 1.7; color: #cac6d5; margin-bottom: 27px; }
.hero-action-row { display: flex; gap: 23px; align-items: flex-start; }
.hero-payment { flex: 1; min-width: 0; max-width: 365px; }
.hero-payment .button {
  width: 100%;
  padding: 16px 14px;
  gap: 12px;
  background: var(--home-purple);
  border-color: var(--home-purple);
  color: #111018;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 4px;
}
.hero-payment .button:hover { background: #b7b1ff; }
.review-benefit { font-size: 12px; line-height: 1.65; color: #c2bdce; margin: 12px 0 0; }
.work-text-link { display: inline-flex; gap: 9px; align-items: center; min-height: 52px; border-bottom: 1px solid #6b627d; font-size: 12px; white-space: nowrap; }
.hero-case { min-width: 0; padding-top: 3px; }
.hero-case-image { display: block; height: 460px; border: 1px solid #43364c; padding: 7px; border-radius: 7px; background: #15111c; overflow: hidden; }
.hero-case-image img { width: 100%; height: 100%; object-fit: cover; object-position: 49% 50%; border-radius: 3px; }
.hero-case figcaption { padding-top: 20px; }
.hero-case figcaption .eyebrow { color: #b8b0cb; font-size: 9px; margin-bottom: 9px; }
.hero-case figcaption h2 { font: 400 23px/1.3 Georgia, serif; letter-spacing: -.02em; margin-bottom: 9px; }
.hero-case figcaption h2 a { display: flex; justify-content: space-between; gap: 20px; }
.hero-case figcaption h2 span { color: var(--home-purple); }
.hero-case figcaption > p:last-child { font-size: 12px; color: #bdb6cc; line-height: 1.65; margin-bottom: 0; }

.home-section { max-width: 1320px; margin: auto; padding: 73px 40px; }
.home-section-heading { margin-bottom: 30px; }
.home-section-heading .eyebrow { color: #707067; margin-bottom: 14px; }
.home-section-heading h2 { font-size: 48px; margin-bottom: 0; }
.heading-with-link { display: flex; justify-content: space-between; gap: 30px; align-items: end; }
.heading-with-link > .text-link { font-size: 12px; flex-shrink: 0; }
.home-services { padding-top: 55px; padding-bottom: 63px; }
.service-grid-v3 { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--home-rule); border-bottom: 1px solid var(--home-rule); }
.service-card-v3 { padding: 25px 24px; border-right: 1px solid var(--home-rule); display: flex; flex-direction: column; }
.service-card-v3:first-child { padding-left: 0; }
.service-card-v3:last-child { border-right: 0; padding-right: 0; }
.service-card-v3 h3 { font-size: 22px; font-weight: 500; min-height: 58px; margin-bottom: 14px; max-width: 240px; }
.service-card-v3 > p { font-size: 13px; color: #65655f; margin-bottom: 23px; line-height: 1.7; flex-grow: 1; }
.service-card-v3 > a { display: flex; justify-content: space-between; font-size: 12px; min-height: 44px; align-items: center; color: #563ab1; }
.service-card-v3 > a:hover { text-decoration: underline; }
.home-insights { padding-top: 45px; border-top: 1px solid var(--home-rule); }
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.insight-card { min-width: 0; }
.insight-cover { display: block; aspect-ratio: 4/5; position: relative; overflow: hidden; border-radius: 5px; background: #201b2a; border: 1px solid #d2ced9; }
.insight-cover img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 46%; transition: transform .25s ease; }
.insight-cover:hover img { transform: scale(1.025); }
.watch-icon { position: absolute; bottom: 18px; left: 18px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fafaf7; color: #252722; font-size: 23px; }
.duration { position: absolute; right: 16px; bottom: 20px; color: #fff; background: #100c18d9; font-size: 12px; padding: 7px 10px; border-radius: 3px; }
.insight-card > .eyebrow { margin: 20px 0 10px; color: #6b646f; font-size: 10px; }
.insight-card h3 { font-size: 25px; line-height: 1.3; margin-bottom: 11px; font-weight: 500; }
.insight-card h3 a { display: block; }
.insight-card h3 a:hover { color: #6544cf; }
.insight-language { color: #73736b; font-size: 11px; line-height: 1.6; }
.home-learn { padding-top: 45px; padding-bottom: 85px; border-top: 1px solid var(--home-rule); }
.course-feature { display: grid; grid-template-columns: 1.1fr 1fr; border: 1px solid #d7d5dc; border-radius: 5px; overflow: hidden; background: #f0edf4; }
.course-image { display: block; min-height: 350px; position: relative; background: #14151b; }
.course-image img { width: 100%; height: 100%; object-fit: cover; }
.course-image > span { position: absolute; bottom: 16px; left: 16px; right: 16px; color: #fff; background: #15101ec7; font-size: 8px; line-height: 1.5; letter-spacing: .1em; padding: 9px 11px; width: fit-content; }
.course-feature-copy { padding: 40px; align-self: center; }
.course-feature-copy .eyebrow { font-size: 9px; color: #67606d; }
.course-feature-copy h3, .course-feature-copy h2 { font: 400 40px/1.08 Georgia, serif; letter-spacing: -.04em; margin-bottom: 22px; }
.course-feature-copy > p:not(.eyebrow) { font-size: 14px; color: #5d5865; line-height: 1.7; }
.outline-link { display: inline-flex; gap: 20px; justify-content: space-between; align-items: center; color: #4d329e; border: 1px solid #9f91bb; padding: 15px 18px; min-height: 50px; border-radius: 4px; font-size: 13px; line-height: 1.5; }
.outline-link:hover { background: #e5dff0; }
.course-feature-copy .course-status { font-size: 11px !important; margin: 15px 0 0; }
footer { background: #07070a; }
.footer-bio { max-width: 340px; font: 400 13px/1.8 Arial, sans-serif !important; color: #c8c3d4; }
.footer-grid .footer-about { color: #c5bcfa; margin-top: 15px; }

.video-heading h1 { max-width: 950px; font-size: 68px; }
.original-title { color: #716b7d; font-size: 13px; line-height: 1.7; }
.video-detail-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 75px; align-items: start; }
.on-demand-player { max-width: 430px; width: 100%; }
.player-screen { width: 100%; position: relative; aspect-ratio: 9/16; background: #100d16; overflow: hidden; border-radius: 5px; border: 1px solid #6e627e; }
.player-screen > img { width: 100%; height: 100%; object-fit: contain; }
.load-video { position: absolute; bottom: 26px; left: 24px; right: 24px; padding: 17px 20px; border: 1px solid #fff7; color: #fff; background: #14101ee0; border-radius: 4px; font-size: 15px; line-height: 1.5; }
.load-video span { margin-left: 20px; }
.player-screen video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.player-actions { margin-top: 13px; display: flex; gap: 12px; }
.player-actions button { border: 1px solid #a89cb8; min-height: 44px; padding: 10px 15px; border-radius: 4px; background: #f3f0f6; font-size: 13px; }
.video-error { color: #922f38; font-size: 13px; line-height: 1.7; padding: 12px; background: #f6e9ec; }
.media-language { font-size: 12px; line-height: 1.75; color: #6a6472; margin-top: 16px; }
.video-reading h2 { font-size: 40px; margin-bottom: 35px; }
.video-reading h3 { font-size: 23px; margin: 29px 0 12px; }
.video-reading section p { font-size: 15px; color: #615c68; }
.reading-source { font-size: 12px; line-height: 1.7; color: #726b7a; margin-top: 32px; }
.reading-source a { text-decoration: underline; }
.course-heading h1 { max-width: 1050px; }
.course-heading .outline-link { margin-top: 10px; }
.course-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; padding-bottom: 20px; }
.course-intro h2 { font-size: 35px; }
.course-intro p { font-size: 15px; color: #68616e; }
.course-outline > h2 { max-width: 780px; margin-bottom: 40px; }
.lesson-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.lesson-grid article { padding: 30px; background: #efedf3; border-top: 2px solid #a29bfe; border-radius: 3px; }
.lesson-index { color: #6c52a3; font: 400 30px Georgia, serif; }
.lesson-grid h3 { font: 400 31px/1.15 Georgia, serif; letter-spacing: -.03em; margin-top: 22px; }
.lesson-grid ol { padding-left: 20px; }
.lesson-grid li { padding: 7px 0 7px 4px; font-size: 14px; line-height: 1.7; color: #5c5667; }
.lesson-output { margin: 25px 0 0; border-top: 1px solid #cfc8db; padding-top: 20px; font-size: 12px; color: #655577; }
.course-reference { display: grid; grid-template-columns: .9fr 1.1fr; gap: 65px; align-items: center; padding-top: 25px; }
.course-reference h2 { font-size: 45px; }
.course-reference p { font-size: 14px; color: #68616e; }
.course-reference .reference-status { padding: 15px; font-size: 12px; border-left: 2px solid #a29bfe; background: #eeebf2; }
.course-reference img { width: 100%; height: auto; border-radius: 5px; }
.course-registration { display: flex; align-items: center; justify-content: space-between; gap: 65px; background: #eeebf2; max-width: none; padding-left: max(40px, calc((100vw - 1240px)/2)); padding-right: max(40px, calc((100vw - 1240px)/2)); }
.course-registration h2 { font-size: 47px; }
.course-registration p:not(.eyebrow) { font-size: 14px; color: #635c6b; max-width: 700px; }
.course-registration .outline-link { flex-shrink: 0; }

@media (max-width: 1100px) {
  .header nav { gap: 20px; }
  .hero-layout { gap: 35px; }
  .hero-copy-v3 h1 { font-size: 73px; }
  .hero-action-row { flex-direction: column; gap: 12px; }
  .hero-payment { max-width: 100%; }
  .work-text-link { min-height: 40px; }
  .hero-case-image { height: 470px; }
  .service-card-v3 { padding: 22px 19px; }
  .service-card-v3 h3 { font-size: 20px; }
  .course-feature-copy { padding: 28px; }
  .course-feature-copy h3 { font-size: 34px; }
}
@media (max-width: 800px) {
  .header { min-height: 76px; padding: 14px 24px; }
  .hero-layout { padding: 35px 24px 42px; grid-template-columns: 1fr; gap: 33px; }
  .hero-copy-v3 h1 { font-size: 72px; }
  .hero-intro { max-width: 600px; }
  .hero-payment { width: 100%; max-width: 450px; }
  .hero-action-row { gap: 12px; }
  .hero-case-image { height: 420px; }
  .home-section { padding: 56px 24px; }
  .home-section-heading h2 { font-size: 42px; }
  .home-services { padding-top: 42px; padding-bottom: 46px; }
  .service-grid-v3 { grid-template-columns: repeat(2, 1fr); }
  .service-card-v3 { padding: 23px 20px; border-bottom: 1px solid var(--home-rule); }
  .service-card-v3:first-child { padding-left: 20px; }
  .service-card-v3:nth-child(2) { border-right: 0; }
  .service-card-v3:nth-child(3), .service-card-v3:nth-child(4) { border-bottom: 0; }
  .service-card-v3:last-child { padding-right: 20px; }
  .service-card-v3 h3 { min-height: 52px; font-size: 23px; }
  .insight-grid { gap: 20px; }
  .insight-card h3 { font-size: 21px; }
  .course-feature { grid-template-columns: 1fr; }
  .course-image { min-height: 0; aspect-ratio: 1.6; }
  .course-feature-copy { padding: 30px; }
  .course-feature-copy h3 { font-size: 38px; }
  .video-detail-layout { gap: 38px; grid-template-columns: .9fr 1.1fr; }
  .video-heading h1 { font-size: 53px; }
  .video-reading h2 { font-size: 33px; }
  .video-reading h3 { font-size: 21px; }
  .course-intro { gap: 35px; }
  .lesson-grid { gap: 20px; }
  .lesson-grid article { padding: 23px; }
  .lesson-grid h3 { font-size: 28px; }
  .course-reference { grid-template-columns: 1fr; gap: 25px; }
  .course-registration { padding: 45px 24px; align-items: flex-start; flex-direction: column; gap: 25px; }
}
@media (max-width: 500px) {
  .header { padding: 12px 22px; min-height: 70px; }
  .brand-official .brand-chinese { font-size: 16px; }
  .brand-official .brand-english { font-size: 8px; }
  .hero-layout { padding: 28px 22px 35px; gap: 30px; }
  .hero-copy-v3 > .eyebrow { font-size: 8px; letter-spacing: .08em; margin-bottom: 22px; }
  .hero-copy-v3 h1 { font-size: 57px; line-height: 1.01; margin-bottom: 23px; }
  .hero-intro { font-size: 14px; line-height: 1.75; margin-bottom: 23px; }
  .hero-payment .button { padding: 16px 11px; font-size: 11.5px; gap: 10px; min-height: 52px; }
  .review-benefit { font-size: 12px; line-height: 1.65; margin-top: 11px; }
  .hero-action-row { gap: 7px; }
  .work-text-link { font-size: 12px; min-height: 42px; }
  .hero-case-image { height: 295px; padding: 5px; }
  .hero-case figcaption { padding-top: 17px; }
  .hero-case figcaption h2 { font-size: 23px; }
  .hero-case figcaption > p:last-child { font-size: 12px; }
  .home-section { padding: 45px 22px; }
  .home-section-heading { margin-bottom: 26px; }
  .home-section-heading h2 { font-size: 39px; }
  .home-section-heading .eyebrow { font-size: 9px; }
  .service-grid-v3 { grid-template-columns: 1fr; }
  .service-card-v3, .service-card-v3:first-child, .service-card-v3:last-child { padding: 23px 0; border-right: 0; }
  .service-card-v3:nth-child(3) { border-bottom: 1px solid var(--home-rule); }
  .service-card-v3 h3 { min-height: 0; font-size: 26px; max-width: 290px; margin-bottom: 12px; }
  .service-card-v3 > p { font-size: 14px; max-width: 310px; margin-bottom: 5px; }
  .service-card-v3 > a { font-size: 12px; }
  .heading-with-link { flex-direction: column; align-items: flex-start; gap: 17px; }
  .insight-grid { grid-template-columns: 1fr; gap: 32px; }
  .insight-card h3 { font-size: 25px; }
  .insight-cover { aspect-ratio: 4/5; }
  .insight-card > .eyebrow { margin-top: 16px; }
  .course-image { aspect-ratio: 1.24; }
  .course-image img { object-position: 44% center; }
  .course-image > span { font-size: 7px; }
  .course-feature-copy { padding: 24px; }
  .course-feature-copy h3, .course-feature-copy h2 { font-size: 36px; }
  .course-feature-copy .outline-link { width: 100%; }
  .video-heading h1 { font-size: 47px; }
  .video-detail-layout { grid-template-columns: 1fr; gap: 37px; }
  .on-demand-player { max-width: 430px; }
  .video-reading h2 { font-size: 37px; }
  .video-reading h3 { font-size: 23px; }
  .video-reading section p { font-size: 15px; }
  .course-intro { grid-template-columns: 1fr; gap: 20px; padding-bottom: 10px; }
  .course-intro h2 { font-size: 33px; }
  .course-outline > h2 { font-size: 39px; }
  .lesson-grid { grid-template-columns: 1fr; gap: 22px; }
  .lesson-grid article { padding: 25px; }
  .lesson-grid h3 { font-size: 31px; }
  .course-reference h2 { font-size: 39px; }
  .course-registration h2 { font-size: 41px; }
  .course-registration .outline-link { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .insight-cover img { transition: none; }
}

.revision-home .mobile-cta { display: none; }

.revision-course .mobile-cta { display: none; }

/* Standalone English launch candidate: English wordmark has first visual priority. */
.brand-official .brand-english {font:600 22px/1.1 Arial,sans-serif;letter-spacing:.09em;color:#fff;}
.brand-official .brand-chinese {font-size:10px;font-weight:400;letter-spacing:.1em;color:#aaa5bf;}
@media(max-width:500px){
 .brand-official .brand-english {font-size:20px;}
 .brand-official .brand-chinese {font-size:9px;}
 .home-insights .insight-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 14px;}
 .home-insights .insight-card:first-child {grid-column:1/-1;}
 .home-insights .insight-card:not(:first-child) h3 {font-size:19px;line-height:1.3;}
 .home-insights .insight-card:not(:first-child) .eyebrow {font-size:8px;margin-top:12px;}
 .home-insights .insight-card:not(:first-child) .insight-language {font-size:10px;}
 .home-insights .insight-card:not(:first-child) .watch-icon {width:30px;height:30px;left:10px;bottom:12px;font-size:18px;}
 .home-insights .insight-card:not(:first-child) .duration {right:8px;bottom:14px;font-size:10px;padding:4px 6px;}
}

.service-timing {font-size:13px;line-height:1.7;padding:14px 16px;border-left:2px solid #a29bfe;background:#eeebf2;color:#514b5e;margin:16px 0;}