.journey-body { --journey: #42d4d0; background: #080c11; }
.journey-main { max-width: 1160px; margin: auto; padding: 48px 4vw 100px; }
.journey-map { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 54px; }
.journey-map a { display: flex; gap: 11px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #0c141b; color: #748691; font-size: .76rem; }
.journey-map a span { font: 700 .65rem monospace; }
.journey-map a.active { border-color: var(--journey); color: var(--journey); background: color-mix(in srgb, var(--journey) 8%, #0c141b); }
.journey-hero { display: grid; grid-template-columns: 1.25fr .75fr; gap: 62px; align-items: end; padding-bottom: 70px; }
.journey-hero h1 { margin: 18px 0 25px; font-size: clamp(4rem, 9vw, 8.5rem); line-height: .82; color: var(--journey); }
.journey-hero .journey-lead { max-width: 720px; color: #b4c3cb; font-size: 1.12rem; line-height: 1.7; }
.journey-contract { padding: 24px; border: 1px solid color-mix(in srgb, var(--journey) 35%, var(--line)); border-radius: 16px; background: radial-gradient(circle at top right, color-mix(in srgb, var(--journey) 12%, transparent), transparent 55%), #0d161d; }
.journey-contract > span { color: var(--journey); font: 700 .68rem monospace; letter-spacing: .1em; }
.journey-contract dl { margin: 18px 0 0; }
.journey-contract div { padding: 12px 0; border-top: 1px solid var(--line); }
.journey-contract dt { color: #6f828e; font-size: .72rem; }
.journey-contract dd { margin: 5px 0 0; color: #d5e0e5; font-size: .84rem; line-height: 1.45; }
.journey-section { padding: 64px 0; border-top: 1px solid var(--line); }
.journey-heading { display: grid; grid-template-columns: 190px 1fr; gap: 34px; margin-bottom: 32px; }
.journey-heading > span { color: var(--journey); font: 700 .67rem monospace; letter-spacing: .1em; }
.journey-heading h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.4rem); }
.journey-intro { max-width: 820px; margin: 0 0 35px 224px; color: var(--muted); line-height: 1.75; }
.journey-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.journey-flow article { position: relative; min-height: 210px; padding: 22px; border: 1px solid var(--line); border-top: 2px solid var(--journey); background: #0c151c; }
.journey-flow article:not(:last-child)::after { content: '→'; position: absolute; right: -10px; top: 28px; z-index: 2; color: var(--journey); }
.journey-flow article > span { color: var(--journey); font: 700 .68rem monospace; }
.journey-flow h3 { margin: 19px 0 8px; font-size: 1rem; }
.journey-flow p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.journey-flow small { display: block; margin-top: 14px; color: #82c8c5; font: 600 .66rem monospace; }
.journey-apps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.journey-app { display: grid; grid-template-columns: 62px 1fr auto; gap: 17px; align-items: center; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #0c151c; color: #dbe5e9; }
.journey-app:hover { border-color: var(--journey); transform: translateY(-2px); }
.journey-app img { width: 58px; height: 58px; padding: 7px; object-fit: contain; border: 1px solid #2c3e49; border-radius: 13px; background: #111c23; }
.journey-app small { color: var(--journey); font: 700 .64rem monospace; text-transform: uppercase; }
.journey-app h3 { margin: 5px 0 6px; font-size: 1rem; }
.journey-app p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.journey-app > b { color: var(--journey); font-size: 1.15rem; }
.journey-practice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.journey-practice article { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #0c151c; }
.journey-practice article > span { color: var(--journey); font: 700 .65rem monospace; }
.journey-practice h3 { margin: 12px 0 8px; }
.journey-practice p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.65; }
.journey-handoff { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 28px; border: 1px solid var(--journey); border-radius: 15px; background: color-mix(in srgb, var(--journey) 7%, #0b141b); }
.journey-handoff small, .journey-handoff strong { display: block; }
.journey-handoff small { color: var(--muted); }
.journey-handoff strong { margin-top: 5px; font-size: 1.1rem; }
.journey-handoff a { color: var(--journey); font-weight: 750; white-space: nowrap; }
@media (max-width: 900px) {
  .journey-hero { grid-template-columns: 1fr; gap: 28px; }
  .journey-flow { grid-template-columns: repeat(2, 1fr); }
  .journey-flow article:not(:last-child)::after { display: none; }
  .journey-intro { margin-left: 0; }
}
@media (max-width: 650px) {
  .journey-main { padding: 35px 20px 75px; }
  .journey-map { grid-template-columns: repeat(2, 1fr); }
  .journey-hero h1 { font-size: 4rem; }
  .journey-heading { grid-template-columns: 1fr; gap: 10px; }
  .journey-flow, .journey-apps, .journey-practice { grid-template-columns: 1fr; }
  .journey-app { grid-template-columns: 52px 1fr auto; padding: 16px; }
  .journey-app img { width: 50px; height: 50px; }
  .journey-handoff { align-items: flex-start; flex-direction: column; }
}