:root { --ink:#172823; --forest:#1d302a; --forest-2:#27483e; --cream:#f5f1e7; --paper:#fffdf8; --line:rgba(23,40,35,.14); --muted:#68736e; --gold:#a98b50; --mint:#9ccfc2; --sky:#c8dceb; --shadow:0 20px 60px rgba(37,47,43,.1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:140px; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { font:inherit; }
.shell { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
.global-bar { height:72px; padding:0 max(24px,calc((100vw - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; background:var(--forest); color:#fff; }
.brand { display:flex; align-items:center; gap:12px; }
.brand img { width:46px; height:46px; border-radius:50%; object-fit:cover; }
.brand span { display:grid; gap:2px; }
.brand strong { font-size:18px; letter-spacing:.03em; }
.brand small { font-size:9px; letter-spacing:.24em; opacity:.7; }
.global-actions { display:flex; align-items:center; gap:24px; font-size:13px; }
.global-actions>span { opacity:.65; }
.back-home { padding:10px 16px; border:1px solid rgba(255,255,255,.25); border-radius:999px; transition:.2s ease; }
.back-home:hover { background:#fff; color:var(--forest); }
.back-home i,.button i { font-style:normal; }
.career-nav-wrap { position:sticky; top:0; z-index:20; padding:14px 20px; background:rgba(245,241,231,.78); backdrop-filter:blur(16px); }
.career-nav { width:min(1220px,100%); margin:0 auto; min-height:62px; padding:0 26px; display:flex; align-items:center; justify-content:space-between; gap:28px; background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:16px; box-shadow:0 10px 32px rgba(35,42,39,.08); }
.career-title { font-weight:750; white-space:nowrap; }
.career-links { display:flex; gap:26px; align-items:center; overflow-x:auto; scrollbar-width:none; }
.career-links::-webkit-scrollbar { display:none; }
.career-links a { padding:21px 0; white-space:nowrap; font-size:14px; color:#45534e; border-bottom:2px solid transparent; }
.career-links a:hover { color:var(--forest); border-color:var(--gold); }
.hero { min-height:680px; padding:64px 0 86px; background:radial-gradient(circle at 88% 14%,rgba(156,207,194,.36),transparent 31%),radial-gradient(circle at 20% 0%,rgba(200,220,235,.28),transparent 34%),radial-gradient(circle at 54% 46%,rgba(231,211,167,.16),transparent 42%),linear-gradient(180deg,#fbfaf5 0%,#f5f8f5 72%,var(--paper) 100%); overflow:hidden; }
.hero-inner { display:grid; grid-template-columns:1.08fr .92fr; gap:70px; align-items:center; }
.breadcrumbs { display:flex; gap:10px; align-items:center; font-size:13px; color:#5f6a66; margin-bottom:50px; }
.breadcrumbs a { text-decoration:underline; text-underline-offset:4px; }
.eyebrow { margin:0 0 16px; color:var(--gold); font-size:12px; font-weight:800; letter-spacing:.18em; }
.hero h1 { margin:0; max-width:720px; font-size:clamp(40px,4.5vw,64px); line-height:1.12; letter-spacing:-.055em; }
.hero-line { display:block; white-space:nowrap; }
.hero h1 .hero-accent { color:var(--forest-2); }
.hero-lead { margin:28px 0 0; max-width:720px; color:#4c5a55; font-size:17px; line-height:1.9; }
.hero-actions { margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
.button { min-height:50px; padding:0 24px; display:inline-flex; align-items:center; justify-content:center; gap:14px; border-radius:999px; font-weight:700; transition:transform .2s ease,box-shadow .2s ease; }
.button:hover { transform:translateY(-2px); }
.button.primary { color:#fff; background:var(--forest); box-shadow:0 14px 30px rgba(29,48,42,.2); }
.button.secondary { border:1px solid var(--ink); background:rgba(255,255,255,.48); }
.career-map { padding:30px; border-radius:28px; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.86); box-shadow:var(--shadow); backdrop-filter:blur(14px); }
.map-head { display:flex; justify-content:space-between; padding-bottom:22px; border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.15em; color:var(--muted); }
.map-route { padding:8px 0; }
.map-route article { position:relative; display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:center; padding:18px 0; }
.map-route article:not(:last-child)::after { content:""; position:absolute; left:21px; top:54px; width:1px; height:40px; background:linear-gradient(var(--gold),rgba(169,139,80,.12)); }
.map-route article>span { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:var(--forest); color:#fff; font-size:12px; }
.map-route div { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.map-route strong { font-size:18px; }
.map-route small { color:var(--muted); }
.map-note { display:flex; gap:12px; padding:16px; border-radius:16px; background:var(--cream); color:#55615d; font-size:13px; line-height:1.7; }
.map-note i { width:8px; height:8px; margin-top:7px; flex:0 0 auto; border-radius:50%; background:var(--gold); }
.stats { position:relative; margin-top:-34px; display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); overflow:hidden; }
.stats article { padding:28px 30px; display:grid; gap:8px; }
.stats article:not(:last-child) { border-right:1px solid var(--line); }
.stats strong { font-family:Georgia,serif; font-size:34px; }
.stats span { color:var(--muted); font-size:13px; }
.section { padding:108px 0; }
.section-heading { max-width:760px; margin-bottom:44px; }
.section-heading.centered { margin-inline:auto; text-align:center; }
.section-heading h2,.about-copy h2,.portfolio-copy h2,.video-copy h2,.course-copy h2,.channel-panel h2 { margin:0; font-size:clamp(34px,4vw,52px); line-height:1.18; letter-spacing:-.04em; }
.section-heading>p:last-child,.portfolio-copy>p,.video-copy>p,.course-copy>p,.channel-panel>div>p:last-child { margin:18px 0 0; color:var(--muted); font-size:16px; line-height:1.85; }
.stage-picker { display:grid; grid-template-columns:repeat(6,1fr); border:1px solid var(--line); border-radius:18px 18px 0 0; overflow:hidden; }
.stage-tab { min-height:72px; padding:12px; border:0; border-right:1px solid var(--line); background:#fff; color:#4f5c57; cursor:pointer; transition:.2s ease; }
.stage-tab:last-child { border-right:0; }
.stage-tab:hover,.stage-tab.is-active { background:var(--forest); color:#fff; }
.stage-panel { min-height:328px; display:grid; grid-template-columns:90px 1.25fr .85fr; gap:36px; padding:48px; border-radius:0 0 24px 24px; background:radial-gradient(circle at 88% 14%,rgba(200,220,235,.28),transparent 34%),linear-gradient(135deg,#f3f8f5 0%,#fbf9f2 100%); border:1px solid var(--line); border-top:0; }
.stage-number { font:54px Georgia,serif; color:var(--gold); }
.stage-label,.method-label { margin:0 0 14px; font-size:12px; font-weight:800; letter-spacing:.16em; color:var(--gold); }
.stage-copy h3 { margin:0; font-size:30px; line-height:1.35; }
.stage-summary { margin:20px 0 0; color:var(--muted); line-height:1.85; }
.stage-details { display:grid; align-content:center; gap:16px; }
.stage-details div { padding:15px 18px; border-radius:14px; background:rgba(255,255,255,.72); }
.stage-details span { display:block; margin-bottom:5px; color:var(--muted); font-size:11px; }
.stage-details strong { font-size:14px; }
.problem-section { background:var(--cream); }
.problem-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.problem-grid article { min-height:255px; padding:28px; border-radius:18px; background:#fff; border:1px solid rgba(23,40,35,.1); transition:.25s ease; }
.problem-grid article:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.problem-grid span { color:var(--gold); font:22px Georgia,serif; }
.problem-grid h3 { margin:34px 0 14px; font-size:20px; }
.problem-grid p { margin:0; color:var(--muted); line-height:1.75; font-size:14px; }
.method-section { color:var(--ink); background:radial-gradient(circle at 92% 10%,rgba(156,207,194,.22),transparent 26%),radial-gradient(circle at 8% 78%,rgba(200,220,235,.22),transparent 30%),linear-gradient(180deg,#f5f8f6 0%,#fbf8f1 100%); }
.section-heading.light p:last-child { color:var(--muted); }
.method-steps { margin-top:24px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.method-steps article { position:relative; overflow:hidden; padding:22px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.82); box-shadow:0 10px 30px rgba(37,47,43,.05); }
.method-steps article::before { position:absolute; top:0; right:0; left:0; height:4px; content:""; background:linear-gradient(90deg,var(--mint),var(--sky),#e7d3a7); opacity:.72; }
.method-steps article>span { color:var(--gold); font:18px Georgia,serif; }
.method-steps h3 { margin:14px 0 8px; font-size:18px; }
.method-steps p { margin:0; color:var(--muted); font-size:13px; line-height:1.75; }
.method-principle { margin:18px 0 0; padding:16px 20px; border-left:3px solid var(--gold); border-radius:0 12px 12px 0; background:rgba(255,255,255,.58); color:var(--ink); line-height:1.75; }
.method-boundary { max-width:900px; margin:18px auto 0; color:var(--muted); font-size:12px; line-height:1.8; text-align:center; }
.method-tabs { margin-top:34px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.method-tab { min-height:70px; padding:0 20px; display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:14px; color:var(--muted); background:rgba(255,255,255,.58); cursor:pointer; transition:transform .2s ease,background .2s ease,color .2s ease; }
.method-tab span { font-family:Georgia,serif; }
.method-tab.is-active,.method-tab:hover { color:#fff; background:var(--forest); transform:translateY(-2px); }
.method-panel { min-height:250px; margin-top:14px; padding:42px; display:grid; grid-template-columns:1.25fr .75fr; gap:60px; border:1px solid rgba(23,40,35,.08); border-radius:20px; background:#fff; color:var(--ink); box-shadow:0 18px 48px rgba(37,47,43,.08); }
.method-panel h3 { margin:0; font-size:30px; }
.method-panel p:not(.method-label) { color:var(--muted); line-height:1.85; }
.method-panel ul { margin:0; padding:0; list-style:none; display:grid; align-content:center; gap:16px; }
.method-panel li { position:relative; padding-left:26px; }
.method-panel li::before { content:"→"; position:absolute; left:0; color:var(--gold); }
.about-section { background:#fff; }
.about-grid { display:grid; grid-template-columns:.92fr 1.08fr; gap:74px; align-items:stretch; }
.about-visual { display:flex; flex-direction:column; justify-content:space-between; gap:16px; }
.about-visual img { width:100%; border-radius:28px; box-shadow:var(--shadow); }
.about-visual>div { padding:20px 22px; display:grid; gap:8px; color:#fff; background:var(--forest); border-radius:16px; box-shadow:0 12px 34px rgba(29,48,42,.14); }
.about-visual span { font-size:10px; letter-spacing:.16em; color:var(--mint); }
.about-copy { display:flex; flex-direction:column; }
.about-copy>p:not(.eyebrow) { color:var(--muted); line-height:1.86; }
.about-copy blockquote { margin:28px 0 0; margin-top:auto; padding:20px 0 20px 24px; border-left:3px solid var(--gold); font-size:20px; line-height:1.6; }
.portfolio-section { background:radial-gradient(circle at 90% 10%,rgba(200,220,235,.28),transparent 30%),linear-gradient(135deg,#f1f7f4 0%,#fcf9f0 100%); }
.portfolio-grid { display:grid; grid-template-columns:1.07fr .93fr; gap:70px; align-items:center; }
.portfolio-preview { overflow:hidden; border-radius:20px; background:#fbf7f0; border:1px solid rgba(75,54,64,.16); box-shadow:0 32px 70px rgba(54,43,49,.16); transform:rotate(-1.2deg); transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease; }
.portfolio-preview:hover { transform:rotate(0) translateY(-9px) scale(1.012); box-shadow:0 38px 82px rgba(39,72,62,.2); }
.browser-bar { height:44px; padding:0 16px; display:flex; align-items:center; gap:7px; color:#7e6971; background:#e9dde1; font-size:10px; }
.browser-bar i { width:9px; height:9px; border-radius:50%; background:#b9919f; }
.browser-bar span { margin-left:10px; }
.portfolio-screen { padding:26px; }
.portfolio-profile { display:grid; grid-template-columns:100px 1fr; gap:22px; align-items:center; }
.portfolio-profile img { width:100px; height:124px; object-fit:cover; object-position:top; border-radius:12px; filter:saturate(.78); }
.portfolio-profile div { display:grid; gap:7px; }
.portfolio-profile small { color:#b2748b; letter-spacing:.16em; }
.portfolio-profile strong { color:#4e3841; font:27px/1.22 Georgia,serif; }
.portfolio-profile span { color:#8b707a; font-size:12px; }
.portfolio-images { margin-top:22px; display:grid; grid-template-columns:1.2fr .8fr; gap:10px; }
.portfolio-images img { width:100%; height:170px; object-fit:cover; border-radius:10px; transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s ease; }
.portfolio-preview:hover .portfolio-images img:first-child { transform:scale(1.045) translateX(3px); }
.portfolio-preview:hover .portfolio-images img:last-child { transform:scale(1.045) translateX(-3px); filter:saturate(1.08); }
.case-pill { display:inline-flex; margin-bottom:16px; padding:7px 12px; border-radius:999px; color:#6f4d59; background:rgba(178,116,139,.13); font-size:12px; }
.portfolio-copy h2 { font-size:clamp(33px,3.35vw,47px); }
.portfolio-copy h2 span { display:block; }
.portfolio-copy h2 .portfolio-title { margin-bottom:12px; color:var(--forest-2); }
.portfolio-copy h2 .portfolio-subline { font-size:clamp(27px,2.5vw,38px); line-height:1.22; letter-spacing:-.045em; white-space:nowrap; }
.portfolio-points { margin:30px 0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.portfolio-points li { display:flex; gap:12px; }
.portfolio-points b { color:var(--gold); font-family:Georgia,serif; }
.portfolio-points span { color:var(--muted); font-size:13px; line-height:1.6; }
.portfolio-points strong { display:block; color:var(--ink); font-size:15px; }
.outcomes-section { background:#fff; }
.logo-groups { display:grid; gap:18px; }
.logo-group { padding:28px; border:1px solid var(--line); border-radius:18px; }
.logo-group h3 { margin:0 0 22px; font-size:15px; }
.logo-row { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.logo-row.compact { grid-template-columns:repeat(6,1fr); }
.logo-row figure { margin:0; min-height:88px; padding:14px; display:grid; place-items:center; gap:8px; background:#faf9f5; border-radius:12px; }
.logo-row img { max-height:34px; max-width:100px; object-fit:contain; filter:saturate(.72); }
.logo-row figcaption { color:var(--muted); font-size:11px; }
.video-section { padding:84px 0; background:var(--cream); }
.video-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.video-copy h2 { font-size:clamp(34px,3.8vw,50px); }
.video-notes { margin-top:28px; display:flex; gap:8px; flex-wrap:wrap; }
.video-notes span { padding:8px 12px; border:1px solid var(--line); border-radius:999px; font-size:12px; }
.video-card { width:fit-content; max-width:100%; justify-self:center; padding:12px; background:#fff; border-radius:20px; box-shadow:var(--shadow); }
.video-card video { width:auto; height:min(62vh,610px); max-width:100%; border-radius:13px; display:block; background:#111; }
.guide-section { background:#fff; }
.guide-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.guide-grid a { min-height:150px; padding:26px; display:grid; grid-template-columns:44px 1fr 28px; gap:16px; align-items:start; border:1px solid var(--line); border-radius:16px; transition:.22s ease; }
.guide-grid a:hover { transform:translateY(-4px); border-color:var(--gold); box-shadow:var(--shadow); }
.guide-grid>a:last-child { grid-column:1/-1; }
.guide-grid>a>span { color:var(--gold); font:22px Georgia,serif; }
.guide-grid small { color:var(--muted); }
.guide-grid h3 { margin:6px 0 8px; font-size:21px; }
.guide-grid p { margin:0; color:var(--muted); font-size:13px; line-height:1.65; }
.guide-grid i { font-style:normal; }
.channel-section { padding-top:0; }
.channel-panel { padding:42px; display:grid; grid-template-columns:1.2fr .8fr; gap:60px; color:#fff; background:var(--forest); border-radius:24px; }
.channel-panel h2 { font-size:28px; color:var(--mint); }
.channel-panel h3 { margin:12px 0 0; font-size:34px; }
.channel-panel>div>p:last-child { color:rgba(255,255,255,.65); }
.channel-metrics { display:grid; align-content:center; gap:12px; }
.channel-metrics span { padding:13px 16px; background:rgba(255,255,255,.08); border-radius:12px; font-size:13px; }
.channel-metrics strong { margin-right:8px; color:var(--mint); font-size:20px; }
.course-section { background:radial-gradient(circle at 86% 14%,rgba(156,207,194,.23),transparent 28%),linear-gradient(135deg,#f7f3eb,#f3f8f5); }
.course-grid { display:grid; grid-template-columns:1fr 330px; gap:64px; align-items:center; }
.course-columns { margin-top:32px; display:grid; grid-template-columns:1fr 1fr; gap:34px; }
.course-columns h3 { margin:0 0 14px; }
.course-columns ul { margin:0; padding-left:19px; color:var(--muted); line-height:1.9; font-size:14px; }
.booking-flow { margin-top:34px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.booking-flow span { padding:10px 14px; border-radius:10px; background:rgba(255,255,255,.72); font-size:13px; }
.booking-flow b { margin-right:7px; color:var(--gold); }
.booking-flow i { color:var(--gold); font-style:normal; }
.qr-card { position:relative; overflow:hidden; margin:0; padding:20px; background:#fff; border-radius:24px; box-shadow:var(--shadow); transform:rotate(1.5deg); transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,background .4s ease; }
.qr-card::before { position:absolute; top:0; right:0; left:0; height:5px; content:""; background:linear-gradient(90deg,var(--mint),var(--sky),#e7d3a7); opacity:0; transition:opacity .3s ease; }
.qr-card:hover { transform:rotate(0) translateY(-8px) scale(1.012); background:linear-gradient(135deg,#fff,#eff8f4 58%,#fbf5e9); box-shadow:0 30px 68px rgba(37,47,43,.16); }
.qr-card:hover::before { opacity:1; }
.qr-card img { width:100%; border-radius:14px; transition:transform .4s ease,filter .4s ease; }
.qr-card:hover img { transform:scale(1.025); filter:saturate(1.08); }
.qr-card figcaption { display:grid; gap:5px; padding:16px 6px 3px; text-align:center; }
.qr-card figcaption span { color:var(--muted); font-size:12px; }
.login-section { padding:86px 0; background:var(--forest); color:#fff; }
.login-panel { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.login-panel h2 { margin:0; max-width:680px; font-size:clamp(30px,4vw,48px); }
.login-panel h2 span { display:block; }
.login-panel p:last-child { color:rgba(255,255,255,.62); }
.light-button { background:#fff; color:var(--forest); white-space:nowrap; }
footer { padding:26px 0; background:#12201c; color:rgba(255,255,255,.6); font-size:12px; }
footer .shell { display:flex; justify-content:space-between; }
@media (max-width:980px) {
  .hero-inner,.portfolio-grid,.about-grid,.video-grid { grid-template-columns:1fr; }
  .about-visual,.about-copy { display:block; }.about-visual>div{margin-top:16px}.about-copy blockquote{margin-top:28px}.video-card video{width:100%;height:auto}
  .hero { padding-top:40px; }.career-map { max-width:660px; }
  .stats { grid-template-columns:1fr 1fr; }.stats article:nth-child(2){border-right:0}.stats article:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .stage-picker { grid-template-columns:repeat(3,1fr); }.stage-tab:nth-child(3){border-right:0}.stage-tab:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .stage-panel { grid-template-columns:70px 1fr; }.stage-details { grid-column:2; }
  .problem-grid { grid-template-columns:1fr 1fr; }.logo-row.compact { grid-template-columns:repeat(3,1fr); }
  .course-grid { grid-template-columns:1fr 280px; gap:38px; }
}
@media (max-width:720px) {
  html { scroll-padding-top:112px; }.shell { width:min(100% - 30px,1180px); }
  .global-bar { height:64px; padding-inline:15px; }.brand img{width:40px;height:40px}.brand strong{font-size:15px}.global-actions>span{display:none}.back-home{padding:8px 12px;font-size:12px}
  .career-nav-wrap{padding:8px}.career-nav{min-height:50px;padding:0 14px;gap:18px;border-radius:12px}.career-title{font-size:13px}.career-links{gap:18px}.career-links a{padding:16px 0;font-size:12px}
  .hero{min-height:auto;padding:34px 0 70px}.breadcrumbs{margin-bottom:32px}.hero h1{font-size:clamp(36px,9.4vw,42px)}.hero-line{white-space:nowrap}.hero-lead{font-size:15px}.map-route div{display:grid}
  .stats{margin-top:-24px}.stats article{padding:20px}.stats strong{font-size:28px}.section{padding:76px 0}.section-heading{margin-bottom:32px}
  .stage-picker{display:flex;overflow-x:auto;border-radius:14px}.stage-tab{flex:0 0 138px;border-bottom:0!important}.stage-panel{min-height:0;padding:28px;grid-template-columns:1fr;gap:20px;border-top:1px solid var(--line);border-radius:18px;margin-top:10px}.stage-number{font-size:42px}.stage-details{grid-column:auto}
  .problem-grid{grid-template-columns:1fr}.problem-grid article{min-height:0}.method-steps{grid-template-columns:1fr}.method-tabs{grid-template-columns:1fr 1fr}.method-panel{padding:28px;grid-template-columns:1fr;gap:24px}
  .portfolio-preview{transform:none}.portfolio-profile{grid-template-columns:76px 1fr}.portfolio-profile img{width:76px;height:96px}.portfolio-profile strong{font-size:22px}.portfolio-images img{height:110px}.portfolio-points{grid-template-columns:1fr}
  .logo-row,.logo-row.compact{grid-template-columns:repeat(2,1fr)}.guide-grid{grid-template-columns:1fr}.guide-grid>a:last-child{grid-column:auto}
  .channel-panel{padding:28px;grid-template-columns:1fr;gap:28px}.channel-panel h3{font-size:26px}.course-grid{grid-template-columns:1fr}.course-columns{grid-template-columns:1fr}.qr-card{max-width:330px;margin-inline:auto;transform:none}.login-panel{align-items:flex-start;flex-direction:column}footer .shell{gap:10px;flex-direction:column}
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.01ms!important} }