.technology-page {
  --tech-blue: #edf7fb;
  --tech-blue-strong: #dceff7;
  --tech-accent: #327db5;
  --tech-accent-deep: #1f5f8f;
  --tech-ink: #193b50;
  --tech-muted: #597385;
  --tech-line: rgba(39, 102, 143, .15);
  --tech-shadow: 0 18px 50px rgba(39, 93, 128, .1);
  color: var(--tech-ink);
  background: #fff;
}
.technology-page .reveal { opacity: 1; transform: none; transition: none; }

.technology-page .site-header,
.technology-page .site-header.scrolled {
  height: 72px;
  color: var(--tech-ink);
  background: rgba(255, 255, 255, .94);
  border-color: var(--tech-line);
  box-shadow: 0 8px 28px rgba(33, 79, 108, .06);
}
.technology-page .nav-item > a::after { bottom: 6px; background: var(--tech-accent); }
.technology-page .dropdown a:hover { color: var(--tech-accent-deep); background: var(--tech-blue); }
.technology-page .header-action { color: var(--tech-accent-deep); border-color: rgba(50, 125, 181, .5); background: #fff; }
.technology-page .header-action:hover { color: #fff; background: var(--tech-accent); border-color: var(--tech-accent); }

.technology-hero {
  min-height: 690px;
  padding-top: 72px;
  background: var(--tech-blue);
}
.technology-hero__inner {
  min-height: 618px;
  display: grid;
  grid-template-columns: .94fr 1.06fr;
  align-items: center;
  gap: clamp(48px, 7vw, 100px);
  padding-block: 68px;
}
.technology-hero__copy { position: relative; z-index: 1; }
.technology-page .breadcrumb { margin: 0 0 52px; color: var(--tech-muted); }
.technology-page .breadcrumb span:last-child,
.technology-page .page-kicker { color: var(--tech-accent); }
.technology-hero h1 {
  margin: 18px 0 26px;
  font: 500 clamp(48px, 5vw, 66px)/1.15 Georgia, "Noto Serif SC", serif;
  letter-spacing: -.055em;
}
.technology-hero__copy > p { max-width: 520px; margin: 0; color: var(--tech-muted); font-size: 16px; line-height: 1.95; }
.technology-hero__media { position: relative; margin: 0; }
.technology-hero__media::before {
  content: "";
  position: absolute;
  inset: -18px 28px 18px -18px;
  border: 1px solid rgba(50, 125, 181, .22);
  border-radius: 18px 110px 18px 18px;
}
.technology-hero__media img { position: relative; height: 460px; object-fit: cover; border-radius: 18px 110px 18px 18px; box-shadow: var(--tech-shadow); }

.technology-page .technology-local-nav { top: 71px; background: rgba(255, 255, 255, .94); border-color: var(--tech-line); }
.technology-page .local-links a:hover,
.technology-page .local-links a.active { color: var(--tech-accent-deep); }
.technology-page .local-links a::after { background: var(--tech-accent); }

.technology-section { position: relative; padding: 104px 0 116px; scroll-margin-top: 130px; }
.research-section { background: #fff; }
.platform-section { background: var(--tech-blue); }
.innovation-section { background: #fff; }
.section-toolbar { display: flex; align-items: center; margin-bottom: 56px; padding-bottom: 18px; border-bottom: 1px solid var(--tech-line); }
.section-index { color: var(--tech-accent-deep); font: 600 12px/1.2 Georgia, "Noto Serif SC", serif; letter-spacing: .15em; }

.technology-heading { display: flex; align-items: center; justify-content: center; gap: 20px; color: var(--tech-accent); }
.technology-heading h2 { margin: 0; color: var(--tech-ink); font: 600 clamp(34px, 4vw, 48px)/1.2 Georgia, "Noto Serif SC", serif; letter-spacing: -.04em; }
.heading-mark { font: 300 34px/1 Arial, sans-serif; letter-spacing: -.2em; opacity: .72; }

.research-intro { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.research-intro p { margin: 26px 0 0; color: var(--tech-muted); font-size: 15px; line-height: 2; text-align: left; }
.certificate-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px 34px; }
.certificate-card {
  aspect-ratio: .72;
  background-image: url("about-certificates.png");
  background-repeat: no-repeat;
  background-size: 500% 200%;
  background-position: var(--x) var(--y);
  border: 1px solid rgba(35, 85, 119, .08);
  border-radius: 3px;
  box-shadow: 0 8px 20px rgba(35, 74, 101, .08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.certificate-card:hover { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(35, 74, 101, .13); }

.platform-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 64px;
}
.platform-copy { margin: 0; text-align: left; }
.platform-copy .technology-heading { justify-content: flex-start; }
.platform-copy .technology-heading .heading-mark { display: none; }
.platform-copy > p { margin: 24px auto 0; color: var(--tech-muted); font-size: 15px; line-height: 2; text-align: left; }
.platform-tags { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 9px; margin: 28px 0 0; padding: 0; list-style: none; }
.platform-tags li { padding: 9px 13px; color: var(--tech-accent-deep); background: rgba(255,255,255,.72); border: 1px solid rgba(50,125,181,.14); border-radius: 999px; font-size: 12px; }
.platform-gallery { order: -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.platform-gallery figure { position: relative; margin: 0; overflow: hidden; background: #d5eaf3; }
.platform-gallery img { height: 210px; object-fit: cover; transition: transform .5s ease; }
.platform-gallery figure:hover img { transform: scale(1.035); }
.platform-gallery figcaption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 44px 20px 18px;
  color: #fff;
  background: linear-gradient(0deg, rgba(18, 63, 91, .74), transparent);
  font-size: 13px;
}
.platform-gallery figcaption span { color: #bfe8ff; font: 14px Georgia, serif; }

.innovation-section { padding-block: 88px 96px; }
.innovation-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 40px; }
.innovation-heading h2 { margin: 14px 0 0; font: 600 clamp(36px, 4.5vw, 54px)/1.18 Georgia, "Noto Serif SC", serif; letter-spacing: -.045em; }
.innovation-heading > p { max-width: 500px; margin: 0; color: var(--tech-muted); font-size: 15px; line-height: 1.9; }
.technology-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 22px; }
.technology-card { text-align: center; }
.technology-card__image {
  aspect-ratio: 1.9;
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid rgba(50,125,181,.34);
  border-radius: 50%;
  background: var(--tech-blue);
}
.technology-card__image img { height: 100%; object-fit: cover; transition: transform .55s ease; }
.technology-card:hover .technology-card__image img { transform: scale(1.045); }
.technology-card > span { display: block; color: var(--tech-accent); font: 700 14px Georgia, serif; letter-spacing: .08em; }
.technology-card h3 { max-width: 250px; min-height: 44px; margin: 7px auto 0; font-size: 14px; font-weight: 600; line-height: 1.6; }

.technology-cta { padding: 72px 0; color: #fff; background: #245f85; }
.technology-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.technology-cta__inner > div > span { color: #bfe8ff; font-size: 10px; letter-spacing: .2em; }
.technology-cta h2 { margin: 12px 0 0; font: 500 clamp(30px, 3.4vw, 44px)/1.3 Georgia, "Noto Serif SC", serif; }
.technology-cta a { display: inline-flex; align-items: center; gap: 24px; min-width: 156px; height: 48px; justify-content: center; border: 1px solid rgba(255,255,255,.58); border-radius: 999px; font-size: 13px; transition: .2s ease; }
.technology-cta a:hover { color: var(--tech-accent-deep); background: #fff; }
.technology-page .site-footer { color: var(--tech-muted); background: #f7fbfd; }
.technology-page .footer-brand .logo,
.technology-page .footer-col h3 { color: var(--tech-ink); }
.technology-page .footer-col a:hover { color: var(--tech-accent); }
.technology-page .footer-bottom { border-color: var(--tech-line); }

@media (max-width: 1060px) {
  .technology-page .mobile-panel { color: var(--tech-ink); background: var(--tech-blue); }
  .technology-page .mobile-nav > a,
  .technology-page .mobile-nav button { border-color: var(--tech-line); }
  .technology-page .mobile-sub a { color: var(--tech-muted); }
  .technology-hero__inner { grid-template-columns: 1fr 1fr; gap: 44px; }
  .technology-hero__media img { height: 410px; }
  .certificate-grid { gap: 18px; }
}

@media (max-width: 760px) {
  .technology-page .site-header,
  .technology-page .site-header.scrolled { height: 64px; }
  .technology-hero { min-height: auto; padding-top: 64px; }
  .technology-hero__inner { min-height: 0; grid-template-columns: 1fr; gap: 38px; padding-block: 48px 58px; }
  .technology-page .breadcrumb { margin-bottom: 28px; }
  .technology-hero h1 { font-size: clamp(42px, 12vw, 56px); }
  .technology-hero__copy > p { font-size: 14px; }
  .technology-hero__media::before { inset: -10px 14px 10px -10px; border-radius: 14px 60px 14px 14px; }
  .technology-hero__media img { height: 280px; border-radius: 14px 60px 14px 14px; }
  .technology-page .technology-local-nav { top: 63px; }
  .technology-section { padding: 76px 0 84px; scroll-margin-top: 120px; }
  .section-toolbar { margin-bottom: 42px; }
  .technology-heading { gap: 12px; }
  .technology-heading h2 { font-size: 34px; }
  .heading-mark { font-size: 25px; }
  .research-intro { margin-bottom: 38px; }
  .research-intro p { font-size: 14px; line-height: 1.9; }
  .certificate-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 20px; }
  .platform-layout { grid-template-columns: 1fr; }
  .platform-gallery { order: 0; }
  .platform-copy { text-align: center; }
  .platform-copy .technology-heading { justify-content: center; }
  .platform-tags { justify-content: center; }
  .platform-copy { margin-bottom: 38px; }
  .platform-copy > p { font-size: 14px; line-height: 1.9; }
  .platform-gallery { grid-template-columns: 1fr 1fr; }
  .platform-gallery img { height: 160px; }
  .platform-gallery figcaption { padding: 34px 10px 12px; font-size: 11px; }
  .innovation-heading { align-items: flex-start; flex-direction: column; gap: 22px; margin-bottom: 42px; }
  .innovation-heading h2 { font-size: 38px; }
  .technology-grid { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
  .technology-card__image { margin-bottom: 14px; }
  .technology-card h3 { min-height: auto; font-size: 13px; }
  .technology-cta { padding: 58px 0; }
  .technology-cta__inner { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 420px) {
  .certificate-grid { gap: 14px; }
  .technology-card__image { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}