.global-nav a[aria-current="page"] { color: #23627a; }
.global-nav a[aria-current="page"]::after { right: 0; left: 0; }

.technology-hero { height: var(--hero-second-height); min-height: var(--hero-second-height); overflow: hidden; background: #eaf4f8 url("../assets/technology/technology_hero.webp") center / cover no-repeat; }
.technology-hero__inner { max-width: var(--max); min-height: var(--hero-second-height); margin: 0 auto; padding: 48px 28px; display: flex; align-items: center; justify-content: space-between; }
.technology-hero__inner > div { position: relative; z-index: 1; }
.technology-hero::before { width: 52%; height: 100%; position: absolute; inset: 0 auto 0 0; content: ""; background: linear-gradient(90deg, rgba(236,246,249,.96), rgba(236,246,249,.72), transparent); }
.technology-hero { position: relative; }
.technology-kicker { margin: 0 0 12px; font-size: 13px; letter-spacing: .15em; }
.technology-hero h1 { margin: 0 0 10px; font-size: 36px; line-height: 1.35; font-weight: 400; letter-spacing: .1em; }
.technology-hero__inner > div > p:last-child { margin: 0; font-size: 16px; letter-spacing: .06em; }
.technology-hero__side { position: relative; z-index: 1; margin: 0; padding-right: 18px; font-size: 10px; line-height: 1.55; letter-spacing: .1em; }
.technology-hero__side span { width: 22px; height: 1px; display: block; margin-top: 10px; background: #607b8d; }

.technology-shell { max-width: 940px; margin: 0 auto; padding: 0 0 24px; }
.technology-row { min-height: 260px; padding: 22px 0; display: grid; grid-template-columns: 1fr 1.08fr; gap: 42px; align-items: center; border-bottom: 1px solid var(--line); }
.technology-row--image-copy { grid-template-columns: 1.08fr 1fr; }
.technology-copy { padding: 0 24px; }
.technology-copy h2, .technology-approach h2 { margin: 0 0 10px; font-size: 28px; line-height: 1.35; font-weight: 400; letter-spacing: .04em; }
.technology-copy > p:not(.technology-kicker), .approach-intro > p:not(.technology-kicker) { margin: 0 0 13px; color: #405c70; font-size: 14px; line-height: 1.75; }
.technology-link { display: inline-flex; align-items: center; gap: 13px; font-size: 13px; letter-spacing: .08em; transition: color .25s ease, transform .25s ease; }
.technology-link span { width: 25px; height: 25px; display: inline-grid; place-items: center; border: 1px solid #7d98aa; border-radius: 50%; font-family: var(--sans); transition: color .25s ease, background-color .25s ease, transform .25s ease; }
.technology-image { min-height: 216px; display: block; background-repeat: no-repeat; background-size: 105% auto; background-position: center; }
.technology-image--about { background-image: url("../assets/technology/technology_about_lysosome.webp"); }
.technology-image--why { background-image: url("../assets/technology/technology_why_lysosome_microscope.webp"); }
.technology-image--organelle { background-image: url("../assets/technology/technology_organelle_technology.webp"); }
.technology-image--application { background-image: url("../assets/technology/technology_from_research_to_application.webp"); }

.technology-process { margin-top: 0; padding: 28px 24px 24px; background: linear-gradient(90deg, #f6fafc, #edf5f8, #f8fbfc); border-bottom: 1px solid var(--line); }
.technology-process ol { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; }
.technology-process li { min-width: 0; position: relative; display: grid; justify-items: center; text-align: center; }
.technology-process li:not(:last-child)::after { position: absolute; right: -6px; top: 38px; content: "→"; font: 24px var(--sans); color: #174f75; }
.process-image { width: 86px; height: 86px; margin-bottom: 10px; display: block; border-radius: 50%; background-repeat: no-repeat; background-size: cover; background-position: center; }
.process-image--research { background-image: url("../assets/technology/technology_about_lysosome.webp"); }
.process-image--technology { background-image: url("../assets/technology/technology_organelle_technology.webp"); }
.process-image--evidence { background-image: url("../assets/technology/technology_why_lysosome_microscope.webp"); }
.process-image--application { background-image: url("../assets/technology/technology_from_research_to_application.webp"); }
.process-image--world { background-image: url("../assets/section-05-partnership-family.webp"); }
.technology-process b { margin-bottom: 3px; font-size: 12px; letter-spacing: .08em; }
.technology-process strong { margin-bottom: 7px; font-size: 13px; font-weight: 500; }
.technology-process small { color: #526a7b; font-size: 10px; line-height: 1.55; }

.technology-approach { padding: 28px 24px 0; display: grid; grid-template-columns: 290px 1fr; gap: 28px; }
.approach-intro { padding-right: 20px; border-right: 1px solid var(--line); }
.technology-approach ul { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; }
.technology-approach li { padding: 0 12px; display: grid; justify-items: center; align-content: start; text-align: center; border-right: 1px solid var(--line); }
.technology-approach li:last-child { border: 0; }
.approach-icon { width: 58px; height: 58px; margin-bottom: 10px; display: grid; place-items: center; border-radius: 50%; background: #edf5fa; color: #1f5b83; font: 28px var(--sans); }
.technology-approach li b { margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.technology-approach li p { margin: 0; color: #526a7b; font-size: 10px; line-height: 1.6; }

@media (hover: hover) {
  .technology-link:hover { color: #23627a; transform: translateX(3px); }
  .technology-link:hover span { color: #fff; background: #23627a; transform: rotate(-20deg); }
  .technology-image[href]:hover { filter: saturate(1.06) brightness(1.02); box-shadow: 0 8px 20px rgba(22,65,84,.16); transform: translateY(-2px); }
}

@media (max-width: 900px) {
  .technology-hero, .technology-hero__inner { min-height: 290px; }
  .technology-hero::before { height: 100%; }
  .technology-shell { margin: 0 5vw; }
  .technology-row { gap: 24px; }
  .technology-copy { padding: 0 10px; }
  .technology-approach { grid-template-columns: 1fr; }
  .approach-intro { padding-right: 0; border-right: 0; }
}

@media (max-width: 680px) {
  .technology-hero { height: var(--hero-second-height); min-height: var(--hero-second-height); background-position: 62% center; }
  .technology-hero::before { width: 100%; height: 100%; background: linear-gradient(180deg, rgba(236,246,249,.95), rgba(236,246,249,.58) 58%, rgba(236,246,249,.12)); }
  .technology-hero__inner { height: var(--hero-second-height); min-height: var(--hero-second-height); padding: 45px 7vw; align-items: flex-start; }
  .technology-hero h1 { font-size: 32px; }
  .technology-hero__side { display: none; }
  .technology-shell { margin: 0; }
  .technology-row, .technology-row--image-copy { padding: 38px 6vw 44px; display: flex; flex-direction: column; align-items: stretch; gap: 26px; }
  .technology-row--image-copy .technology-image { order: 2; }
  .technology-copy { padding: 0; }
  .technology-copy h2, .technology-approach h2 { font-size: 26px; }
  .technology-copy > p:not(.technology-kicker), .approach-intro > p:not(.technology-kicker) { font-size: 16px; }
  .technology-image { width: 100%; min-height: 0; aspect-ratio: 2 / 1; }
  .technology-process { padding: 36px 6vw; }
  .technology-process ol { grid-template-columns: 1fr; gap: 27px; }
  .technology-process li { grid-template-columns: 86px 1fr; column-gap: 18px; justify-items: start; align-items: center; text-align: left; }
  .technology-process li:not(:last-child)::after { right: auto; top: auto; bottom: -25px; left: 37px; transform: rotate(90deg); }
  .process-image { grid-row: 1 / 4; margin: 0; }
  .technology-process b, .technology-process strong, .technology-process small { grid-column: 2; }
  .technology-process b { align-self: end; }
  .technology-process strong { margin: 0; }
  .technology-process small { font-size: 12px; }
  .technology-approach { padding: 38px 6vw 10px; }
  .technology-approach ul { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .technology-approach li:nth-child(2) { border-right: 0; }
  .technology-approach li b { font-size: 14px; }
  .technology-approach li p { font-size: 12px; }
}