:root {
  color: #173042;
  background: #ffffff;
  font-family: Inter, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #ffffff; }
a { color: inherit; }

.topbar {
  width: min(1280px, calc(100% - 64px));
  height: 82px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: relative;
  z-index: 3;
}

.brand { display: inline-flex; align-items: center; gap: 11px; color: #116e88; font-family: Georgia, "Times New Roman", serif; font-size: 12px; font-weight: 700; letter-spacing: 0; line-height: 1.02; text-decoration: none; justify-self: start; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; position: relative; border: 2px solid #117c9a; border-radius: 50%; transition: transform 180ms ease; }
.brand-mark i, .brand-mark b { position: absolute; display: block; border-radius: 50%; }
.brand-mark i { width: 17px; height: 17px; border: 2px solid #f2a749; }
.brand-mark b { width: 5px; height: 5px; background: #117c9a; }
.brand:hover .brand-mark { transform: rotate(25deg); }

.primary-nav { display: flex; gap: 31px; align-items: center; justify-self: center; color: #40576a; font-size: 14px; }
.primary-nav a, .language a { text-decoration: none; transition: color 180ms ease; }
.primary-nav a:hover, .primary-nav a:focus-visible, .language a:hover, .language a:focus-visible, .language a[aria-current="page"] { color: #087fa6; }
.primary-nav a:focus-visible, .language a:focus-visible { outline: 2px solid #f2a749; outline-offset: 5px; }
.language { display: flex; justify-self: end; align-items: center; gap: 8px; color: #6a7c89; font-size: 13px; }

.hero { min-height: 620px; overflow: hidden; position: relative; background: #e5f5fb; border-top: 1px solid #d0e6ee; border-bottom: 1px solid #c8e3ec; }
.hero-network { width: 100%; height: 100%; position: absolute; inset: 0; pointer-events: none; }
.hero-inner { width: min(1280px, calc(100% - 64px)); min-height: 540px; margin: 0 auto; padding: 104px 0 90px; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.eyebrow, .section-label { margin: 0 0 17px; color: #087fa6; font-size: 12px; font-weight: 700; letter-spacing: 0; line-height: 1.4; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 760px; margin-bottom: 25px; color: #12334b; font-family: Georgia, "Times New Roman", "Noto Serif TC", serif; font-size: clamp(48px, 6vw, 79px); font-weight: 500; letter-spacing: 0; line-height: 1.02; }
.hero-copy { max-width: 570px; margin-bottom: 29px; color: #496b7d; font-size: 19px; line-height: 1.65; }
.text-link { color: #087fa6; font-size: 15px; font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; transition: color 180ms ease, padding-right 180ms ease; }
.text-link:hover { color: #0d7d72; padding-right: 7px; }
.text-link span { padding-left: 7px; }
.hero-ledger { width: min(1280px, calc(100% - 64px)); min-height: 80px; margin: 0 auto; padding-bottom: 26px; position: relative; z-index: 1; display: flex; gap: 13px; align-items: center; color: #3b6475; font-size: 12px; font-weight: 700; letter-spacing: 0; }
.hero-ledger i { width: 47px; height: 1px; display: block; background: #f2a749; animation: current 2.8s ease-in-out infinite; }
.hero-ledger i:nth-of-type(2) { animation-delay: 1.2s; }

.section-wrap { width: min(1160px, calc(100% - 64px)); margin: 0 auto; }
.intro { padding: 118px 0 108px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(250px, .8fr); gap: 90px; align-items: end; }
.intro h2, .section-heading h2, .technology h2 { margin-bottom: 0; color: #173042; font-family: Georgia, "Times New Roman", "Noto Serif TC", serif; font-size: clamp(34px, 4.1vw, 54px); font-weight: 500; letter-spacing: 0; line-height: 1.1; }
.intro > p:last-child { margin-bottom: 5px; color: #5c7280; font-size: 17px; line-height: 1.7; }

.solutions { padding-bottom: 118px; }
.section-heading { max-width: 780px; margin-bottom: 54px; }
.solution-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #d6e0e5; border-bottom: 1px solid #d6e0e5; }
.solution { min-height: 315px; padding: 29px 30px 25px; position: relative; border-right: 1px solid #d6e0e5; background: #ffffff; transition: background-color 220ms ease, transform 220ms ease; }
.solution:first-child { padding-left: 0; }
.solution:last-child { border-right: 0; padding-right: 0; }
.solution:hover { background: #f3fbfc; transform: translateY(-7px); }
.solution-index { display: block; margin-bottom: 71px; color: #0d978c; font-family: Georgia, "Times New Roman", serif; font-size: 18px; }
.solution h3 { margin-bottom: 14px; color: #173042; font-size: 22px; font-weight: 650; line-height: 1.25; }
.solution p { max-width: 270px; margin-bottom: 0; color: #627987; font-size: 15px; line-height: 1.65; }
.solution-line { width: 0; height: 2px; display: block; position: absolute; bottom: -1px; left: 0; background: #0e9b8f; transition: width 280ms ease; }
.solution:hover .solution-line { width: 100%; }

.technology { padding: 111px 0; background: #12334b; color: #ffffff; }
.technology-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .9fr); gap: 96px; align-items: center; }
.technology .section-label { color: #69d4c7; }
.technology h2 { color: #ffffff; margin-bottom: 27px; }
.technology-copy > p:last-child { max-width: 530px; margin-bottom: 0; color: #c9e0e9; font-size: 17px; line-height: 1.72; }
.signal-board { min-height: 345px; overflow: hidden; position: relative; border: 1px solid #53768b; background: #0f2a3e; }
.signal-board::before, .signal-board::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.signal-board::before { border: 1px solid #ffffff18; transform: scale(.64) rotate(45deg); }
.signal-board::after { border: 1px solid #ffffff18; transform: scale(1.3) rotate(45deg); }
.signal-label { position: absolute; z-index: 1; color: #d6f3ef; font-size: 10px; font-weight: 700; letter-spacing: 0; }
.signal-label-one { left: 34px; top: 51px; }
.signal-label-two { right: 34px; top: 150px; }
.signal-label-three { left: 85px; bottom: 49px; }
.signal-path { height: 1px; display: block; position: absolute; z-index: 1; transform-origin: left center; background: #f2a749; }
.path-one { width: 260px; left: 68px; top: 94px; transform: rotate(22deg); animation: route-one 5s ease-in-out infinite; }
.path-two { width: 225px; left: 134px; top: 227px; transform: rotate(-33deg); background: #6ad7cb; animation: route-two 5.6s .7s ease-in-out infinite; }
.path-three { width: 168px; left: 56px; bottom: 77px; transform: rotate(-6deg); animation: route-three 4.4s 1.2s ease-in-out infinite; }
.signal-node { width: 10px; height: 10px; display: block; position: absolute; z-index: 2; background: #f2a749; animation: node 3.7s ease-in-out infinite; }
.node-one { left: 153px; top: 124px; }
.node-two { right: 85px; top: 184px; background: #6ad7cb; animation-delay: 1.2s; }
.node-three { left: 203px; bottom: 90px; animation-delay: 2.1s; }

.footer { width: min(1280px, calc(100% - 64px)); min-height: 172px; margin: 0 auto; padding: 39px 0; display: grid; grid-template-columns: 1.1fr 1.5fr auto; gap: 38px; align-items: start; color: #637784; font-size: 13px; line-height: 1.6; }
.footer-brand { display: grid; gap: 4px; }
.footer strong { color: #173042; font-size: 14px; }
.footer address { max-width: 475px; font-style: normal; }
.footer a { color: #087fa6; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity 650ms cubic-bezier(.2, .8, .2, 1), transform 650ms cubic-bezier(.2, .8, .2, 1); }
.solution.reveal:nth-child(2) { transition-delay: 100ms; }
.solution.reveal:nth-child(3) { transition-delay: 200ms; }

@keyframes current { 0%,100% { opacity: .25; transform: scaleX(.65); transform-origin: left center; } 50% { opacity: 1; transform: scaleX(1.2); transform-origin: left center; } }
@keyframes route-one { 0%,100% { opacity: .18; transform: rotate(22deg) translateX(-42px); } 45%,62% { opacity: 1; transform: rotate(22deg) translateX(24px); } }
@keyframes route-two { 0%,100% { opacity: .15; transform: rotate(-33deg) translateX(-34px); } 43%,64% { opacity: 1; transform: rotate(-33deg) translateX(23px); } }
@keyframes route-three { 0%,100% { opacity: .2; transform: rotate(-6deg) translateX(-25px); } 46%,63% { opacity: 1; transform: rotate(-6deg) translateX(17px); } }
@keyframes node { 0%,100% { opacity: .55; transform: scale(.75); } 45% { opacity: 1; transform: scale(1.3); } 60% { opacity: .85; transform: scale(1); } }

@media (max-width: 800px) {
  .topbar, .hero-inner, .hero-ledger, .section-wrap, .footer { width: min(100% - 32px, 1280px); }
  .topbar { height: 72px; grid-template-columns: 1fr auto; }
  .primary-nav { display: none; }
  .hero { min-height: 590px; }
  .hero-inner { min-height: 500px; padding: 72px 0 72px; }
  .hero-copy { font-size: 17px; }
  .intro { padding: 76px 0; grid-template-columns: 1fr; gap: 28px; }
  .solutions { padding-bottom: 76px; }
  .solution-grid { grid-template-columns: 1fr; }
  .solution { min-height: 220px; padding: 27px 0; border-right: 0; border-bottom: 1px solid #d6e0e5; }
  .solution:last-child { padding-right: 0; border-bottom: 0; }
  .solution-index { margin-bottom: 33px; }
  .technology { padding: 76px 0; }
  .technology-grid { grid-template-columns: 1fr; gap: 50px; }
  .signal-board { min-height: 280px; }
  .footer { min-height: 0; grid-template-columns: 1fr; gap: 15px; padding: 32px 0; }
}

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