:root { --ink:#17263a; --muted:#6b7787; --line:#dae1e8; --accent:#e8753d; --paper:#f8fafb; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#f7fafc url("/assets/learning-journey-background.png") center top / max(1440px, 100vw) auto no-repeat fixed; font-family:"Noto Sans SC","Microsoft YaHei",sans-serif; }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(248,250,251,.18) 0,rgba(248,250,251,.60) 47%,rgba(248,250,251,.96) 78%); pointer-events:none; }
main { max-width:1120px; margin:auto; padding:36px 32px 70px; }
.brand { color:var(--ink); font-size:18px; font-weight:700; letter-spacing:.08em; text-decoration:none; }
.hero { padding:78px 0 92px; max-width:760px; text-shadow:0 1px 18px rgba(255,255,255,.62); }
.eyebrow,.section-heading p { margin:0 0 14px; color:var(--accent); font:700 12px/1.2 Arial,sans-serif; letter-spacing:.16em; }
h1 { margin:0; font-size:clamp(42px,7vw,76px); line-height:1.14; letter-spacing:-.055em; }
.intro { margin:30px 0 0; max-width:590px; color:var(--muted); font-size:17px; line-height:1.9; }
.journey { padding:36px 0; border-radius:22px; background:rgba(248,250,251,.80); backdrop-filter:blur(10px); }
.section-heading { margin-bottom:25px; }
h2 { margin:0; font-size:28px; letter-spacing:-.035em; }
.stages { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.stage { display:grid; grid-template-columns:80px minmax(0,1fr) auto; gap:24px; align-items:center; padding:27px 8px; border-bottom:1px solid var(--line); transition:background .2s; }
.stage:hover { background:#fff; }
.number { color:var(--accent); font:700 15px/1 Arial,sans-serif; }
h3 { margin:0 0 8px; font-size:20px; letter-spacing:-.025em; }
.stage p { margin:0; color:var(--muted); font-size:14px; line-height:1.65; }
.status { border:1px solid #f0c2aa; border-radius:99px; color:#b65a2d; padding:8px 12px; font-size:12px; white-space:nowrap; }
.status.available { background:#b65a2d; border-color:#b65a2d; color:#fff; text-decoration:none; transition:transform .18s ease, background .18s ease; }
.status.available:hover { background:#91451f; transform:translateY(-1px); }
footer { padding:28px 32px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; text-align:center; }
@media (max-width:640px) { main { padding:25px 20px 44px; } .hero { padding:58px 0 60px; } .stage { grid-template-columns:48px 1fr; gap:16px; padding:22px 0; } .status { grid-column:2; justify-self:start; } }