:root {
  --ink: #1d2521;
  --muted: #6d7684;
  --paper: #f8fafd;
  --white: #ffffff;
  --line: #e6e9ec;
  --blue: #5388ec;
  --jade: #19b99a;
  --coral: #e85d75;
  --display: "Manrope", "Noto Sans TC", sans-serif;
  --mono: "DM Sans", "Noto Sans TC", sans-serif;
  --radius: 30px;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body { width: 100%; margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: "DM Sans", "Noto Sans TC", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }

.glass-nav {
  position: fixed; z-index: 50; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 28px), 1360px); height: 66px; padding: 8px 10px 8px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border: 0; border-radius: 999px;
  background: rgba(248,250,253,.4); box-shadow: 0 12px 38px rgba(29,37,33,.07);
  backdrop-filter: blur(26px) saturate(135%); -webkit-backdrop-filter: blur(26px) saturate(135%);
}
.brand { display: flex; align-items: center; width: 212px; min-width: 170px; height: 42px; overflow: hidden; }
.brand img { display: block; width: 205px; height: auto; object-fit: contain; object-position: left center; }
.desktop-nav { display: flex; align-items: center; gap: 6px; }
.desktop-nav a { padding: 12px 16px; border-radius: 999px; color: #4c545c; font-size: 15px; font-weight: 500; transition: .2s ease; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--ink); background: rgba(255,255,255,.78); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.language-toggle { min-width: 64px; height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font-weight: 600; }
.language-toggle:hover { background: rgba(255,255,255,.65); }
.nav-cta {
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px;
  border: 0; border-radius: 999px;
  color: #fff; background: rgba(83,136,236,.82);
  box-shadow: 0 8px 20px rgba(83,136,236,.16);
  backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%);
  font-size: 14px; font-weight: 600;
}
.shadow-sweep { position: relative; isolation: isolate; }
.nav-cta:not(.active)::after,
.shadow-sweep::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: 0; border-radius: inherit; opacity: 0;
  background: linear-gradient(90deg, transparent 34%, rgba(24,41,76,.34) 50%, transparent 66%);
  background-size: 250% 100%;
  background-position: 100% 0;
  mix-blend-mode: multiply;
  animation: contact-load-shadow 1.25s cubic-bezier(.22,.7,.25,1) .3s 1 both;
}
.nav-cta:not(.active):hover::after,
.shadow-sweep:hover::after {
  animation: contact-hover-shadow 1.25s cubic-bezier(.22,.7,.25,1) 0s 1 both;
}
@keyframes contact-load-shadow {
  0% { opacity: 0; background-position: 100% 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; background-position: 0% 0; }
}
@keyframes contact-hover-shadow {
  0% { opacity: 0; background-position: 100% 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; background-position: 0% 0; }
}
.menu-toggle { display: none; width: 44px; height: 44px; padding: 12px 9px; border: 0; background: transparent; cursor: pointer; }
.menu-toggle span { display: block; height: 1.5px; margin: 6px 0; background: var(--ink); transition: .2s ease; }
.mobile-menu { position: fixed; z-index: 45; inset: 90px 14px auto; display: grid; gap: 2px; padding: 16px; border: 1px solid var(--line); border-radius: 24px; background: rgba(248,250,253,.97); box-shadow: 0 20px 60px rgba(0,0,0,.12); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: .22s ease; }
.mobile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu a { padding: 14px 10px; border-bottom: 1px solid var(--line); font-size: 18px; }

.hero { position: relative; min-height: 940px; padding: 164px 28px 120px; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; background: var(--paper); isolation: isolate; }
.hero::after { content: ""; position: absolute; z-index: -1; inset: auto 0 0; height: 42%; background: linear-gradient(180deg, rgba(248,250,253,0) 0%, rgba(248,250,253,.76) 48%, var(--paper) 91%); pointer-events: none; }
.hero-image { position: absolute; z-index: -2; inset: 0; background: url("./assets/hero-taipei-desktop.webp") center 55% / cover no-repeat; }
.hero-inner { position: relative; z-index: 2; width: min(100%, 1100px); margin: auto; text-align: center; }
.kicker { margin: 0 0 24px; color: #55534f; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.hero h1, .careers-hero h1 { margin: 0; font-family: "Manrope", "Noto Sans TC", sans-serif; font-size: clamp(64px, 8.3vw, 126px); font-weight: 500; line-height: .94; letter-spacing: -.065em; text-wrap: balance; }
.hero-copy { max-width: 700px; margin: 32px auto 0; color: #4c545c; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; }
.hero-actions { display: flex; justify-content: center; gap: 12px; margin-top: 38px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 26px; border: 1px solid transparent; border-radius: 999px; font-size: 15px; font-weight: 600; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-dark { color: #fff; border-color: transparent; background: rgba(83,136,236,.84); box-shadow: 0 10px 24px rgba(83,136,236,.16); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); }
.button-light,
.button-white {
  color: var(--ink);
  border-color: transparent;
  background: rgba(255,255,255,.3);
  box-shadow: 0 10px 28px rgba(29,37,33,.07);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
}
.button-light:hover,
.button-white:hover { background: rgba(255,255,255,.42); }

.section { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; padding: 130px 0; }
.mission { min-height: 100svh; scroll-margin-top: 0; }
.section-label { height: 1px; padding: 0; border-top: 1px solid var(--line); }
.statement { display: grid; grid-template-columns: 1.3fr .7fr; gap: 80px; align-items: center; padding-top: 74px; }
.statement h2, .careers-cta h2, .general-application h2 { margin: 0; font-family: "Manrope", "Noto Sans TC", sans-serif; font-size: clamp(45px, 5.7vw, 82px); font-weight: 500; line-height: 1.05; letter-spacing: -.055em; }
.statement h2 em { font-style: normal; color: var(--blue); }
.statement p { margin: 0; color: var(--muted); font-size: 19px; line-height: 1.65; }
.capability-intro { max-width: 1000px; padding-top: 72px; }
.capability-intro .kicker { color: var(--blue); }
.capability-intro h2 { margin: 0; font: 500 clamp(46px, 6vw, 82px)/1.04 "Manrope", "Noto Sans TC", sans-serif; letter-spacing: -.055em; }
.capability-intro h2 em { color: var(--blue); font-style: normal; }
.capability-grid { display: grid; grid-template-columns: 1.06fr .94fr; grid-template-rows: minmax(380px,auto) minmax(220px,auto); gap: 14px; padding-top: 42px; }
.capability-card { min-height: 0; padding: 38px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--line); border-radius: var(--radius); }
.card-context { grid-row: 1 / 3; min-height: 614px; }
.card-kicker { margin: 0 auto auto 0 !important; color: inherit; font-size: 12px !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .72 !important; }
.card-context-copy { padding-top: 54px; }
.capability-card h3 { max-width: 520px; margin: 0 0 18px; font: 500 clamp(29px, 3vw, 44px)/1.06 "Manrope", "Noto Sans TC"; letter-spacing: -.045em; }
.capability-card p { max-width: 520px; margin: 0; font-size: 16px; line-height: 1.58; opacity: .78; }
.knowledge-source { margin-top: auto; padding-top: 38px; display: grid; grid-template-columns: .72fr 1.28fr; gap: 12px 30px; border-top: 1px solid rgba(255,255,255,.2); }
.knowledge-source > strong { font: 500 19px/1.25 "Manrope", "Noto Sans TC", sans-serif; }
.knowledge-source > span { color: rgba(255,255,255,.64); font-size: 14px; line-height: 1.5; }
.knowledge-domains { grid-column: 1 / -1; margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 24px; color: rgba(255,255,255,.48); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.knowledge-domains span:not(:last-child)::after { content: "+"; margin-left: 24px; color: rgba(255,255,255,.24); }
.card-action { justify-content: flex-start; }
.card-action .card-kicker { margin-bottom: 24px !important; }
.card-action h3 { max-width: none; margin-bottom: 28px; }
.action-products { margin-top: auto; border-top: 1px solid rgba(255,255,255,.28); }
.action-products > div { padding: 17px 0; display: grid; grid-template-columns: 34px 125px 1fr; gap: 10px; align-items: baseline; border-bottom: 1px solid rgba(255,255,255,.28); }
.action-products > div > span { color: rgba(255,255,255,.5); font-size: 10px; letter-spacing: .08em; }
.action-products strong { font: 500 15px/1.25 "Manrope", "Noto Sans TC", sans-serif; }
.action-products p { font-size: 12.5px; line-height: 1.45; opacity: .68; }
.card-dark { color: #fff; background: var(--ink); }
.card-mint { color: #fff; background: var(--blue); }
.card-white { background: #fff; }
.principles { padding-top: 30px; }
.principle-list { padding-top: 20px; }
.principle-list div { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.principle-list strong { font: 500 clamp(27px, 3.1vw, 45px) "Manrope", "Noto Sans TC"; letter-spacing: -.04em; }
.principle-list span { align-self: center; color: var(--muted); font-size: 17px; }

.ai-operating-model { width: min(calc(100% - 64px), 1120px); margin: 0 auto 90px; padding: 25px 0 0; border: 0; background: transparent; }
.operating-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 76px; }
.prompt-chaos, .ontology-system { position: relative; min-height: 680px; padding: 22px 0; overflow: hidden; border: 0; border-radius: 0; background: transparent; }
.prompt-chaos h3, .ontology-system h3 { position: relative; z-index: 3; max-width: 480px; margin: 0; font: 500 clamp(26px, 2.7vw, 38px)/1.12 "Manrope", "Noto Sans TC", sans-serif; letter-spacing: -.04em; }
.prompt-chaos h3 { position: absolute; z-index: 5; top: 22px; right: 18px; left: 18px; max-width: none; padding: 0 18px 54px; background: radial-gradient(ellipse at 50% 24%, rgba(248,250,253,.98) 12%, rgba(248,250,253,.88) 46%, rgba(248,250,253,0) 76%); text-align: center; }
.prompt-chaos > p, .ontology-system > p { position: absolute; z-index: 3; right: 0; bottom: 30px; left: 0; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.prompt-stream { position: absolute; inset: 15px -30px 88px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; overflow: hidden; transform: rotate(-1.2deg); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 84%, transparent 100%); }
.prompt-column { min-width: 0; height: 100%; }
.prompt-track { display: flex; flex-direction: column; gap: 10px; animation: prompt-fall var(--fall-duration, 18s) linear infinite; animation-delay: var(--fall-delay, 0s); backface-visibility: hidden; transform: translate3d(0,-33.3333%,0); will-change: transform; }
.prompt-column:nth-child(2) .prompt-track { --fall-duration: 21s; --fall-delay: -7s; }
.prompt-column:nth-child(3) .prompt-track { --fall-duration: 24s; --fall-delay: -14s; }
.prompt-column:nth-child(4) .prompt-track { --fall-duration: 27s; --fall-delay: -20s; }
.prompt-stream span { min-height: 48px; padding: 11px 10px 11px 25px; position: relative; display: flex; align-items: center; flex: 0 0 auto; border: 1px solid #e5e9ee; border-radius: 9px; color: #8a929d; background: rgba(255,255,255,.88); box-shadow: 0 7px 18px rgba(29,37,33,.035); font-size: 10.5px; }
.prompt-stream span::before { content: ""; position: absolute; left: 10px; width: 7px; height: 7px; border: 1px solid #bbc3cd; border-radius: 2px; }
@keyframes prompt-fall { from { transform: translate3d(0,-33.3333%,0); } to { transform: translate3d(0,0,0); } }
.ontology-system { background: transparent; }
.ontology-system::before { content: ""; position: absolute; z-index: 0; inset: 55px -20px 20px; background-image: radial-gradient(circle, rgba(83,136,236,.18) .7px, transparent .8px); background-size: 7px 7px; -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 52%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 75% 75% at 50% 52%, #000 35%, transparent 100%); pointer-events: none; }
.ontology-orbit { position: absolute; top: 130px; left: 50%; width: 500px; height: 430px; transform: translateX(-50%); }
.orbit-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(83,136,236,.22); border-radius: 50%; transform: translate(-50%,-50%); }
.ring-one { width: 250px; height: 250px; }
.ring-two { width: 410px; height: 410px; }
.ontology-core { position: absolute; z-index: 2; top: 50%; left: 50%; width: 154px; height: 154px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; color: #fff; background: var(--ink); box-shadow: 0 22px 55px rgba(29,37,33,.22), 0 0 0 10px rgba(83,136,236,.08); transform: translate(-50%,-50%); }
.ontology-core span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .66; }
.ontology-core strong { margin-top: 4px; font: 500 25px "Manrope", "Noto Sans TC", sans-serif; }
.orbit-node { position: absolute; z-index: 3; min-width: 132px; max-width: 156px; padding: 13px 16px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: 0 12px 28px rgba(29,37,33,.08); }
.orbit-node strong { font: 600 13px "Manrope", "Noto Sans TC", sans-serif; }
.orbit-node span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.orbit-node { border-radius: 999px; animation: satellite-drift 5.6s ease-in-out infinite; }
.node-crm { animation-delay: -.9s; }.node-erp { animation-delay: -1.8s; }.node-voice { animation-delay: -2.7s; }.node-flow { animation-delay: -3.6s; }.node-privacy { animation-delay: -4.5s; }
.ontology-core { animation: ontology-breathe 4.8s ease-in-out infinite; }
@keyframes satellite-drift { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes ontology-breathe { 0%,100% { box-shadow: 0 22px 55px rgba(29,37,33,.22), 0 0 0 10px rgba(83,136,236,.08); } 50% { box-shadow: 0 25px 62px rgba(29,37,33,.18), 0 0 0 18px rgba(83,136,236,.055); } }
.node-rag { top: 3px; left: 194px; }.node-crm { top: 108px; right: -4px; }.node-erp { right: 24px; bottom: 38px; }.node-voice { bottom: 38px; left: 14px; }.node-flow { top: 108px; left: -4px; }.node-privacy { bottom: 26px; left: 194px; }
.careers-cta { width: 100%; margin-bottom: 0; padding: 110px 30px 126px; border: 1px solid var(--line); border-width: 1px 0 0; border-radius: 38px 38px 0 0; color: var(--ink); background-color: #f8fafd; background-image: radial-gradient(circle, rgba(83,136,236,.24) .7px, transparent .8px); background-size: 7px 7px; text-align: center; }
.careers-cta .kicker { color: var(--blue); }
.careers-cta p:not(.kicker) { max-width: 650px; margin: 30px auto; color: var(--muted); font-size: 18px; line-height: 1.6; }
.careers-cta .button-white { color: #fff; border-color: transparent; background: rgba(83,136,236,.84); box-shadow: 0 10px 24px rgba(83,136,236,.16); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); }

body > main:not([class]) { display: flex; flex-direction: column; }
body > main:not([class]) .hero { order: 1; }
body > main:not([class]) .mission { order: 2; }
body > main:not([class]) .ai-operating-model { order: 3; }
body > main:not([class]) .build { order: 4; }
body > main:not([class]) .principles { order: 5; }
body > main:not([class]) .careers-cta { order: 6; }

footer { margin-top: 0; min-height: 190px; padding: 42px max(28px, calc((100% - var(--max))/2)); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 34px; color: #fff; background-color: var(--ink); background-image: radial-gradient(circle, rgba(255,255,255,.11) .65px, transparent .75px); background-size: 7px 7px; }

.contact-page, .simple-page { position: relative; min-height: 78vh; padding: 175px 24px 110px; overflow: hidden; background-color: var(--paper); background-image: radial-gradient(circle, rgba(83,136,236,.19) .7px, transparent .8px); background-size: 7px 7px; isolation: isolate; }
.contact-page::before { content: ""; position: absolute; z-index: -2; inset: 0 0 auto; height: 780px; background: url("./assets/hero-taipei-desktop.webp") center 48% / cover no-repeat; opacity: .72; }
.contact-page::after { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 790px; background: linear-gradient(180deg, rgba(248,250,253,.18), rgba(248,250,253,.54) 48%, var(--paper) 94%); }
.simple-page::before { content: ""; position: absolute; z-index: -2; inset: 0 0 auto; height: 720px; background: url("./assets/hero-taipei-desktop.webp") center 44% / cover no-repeat; opacity: .42; }
.simple-page::after { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 730px; background: linear-gradient(180deg, rgba(248,250,253,.28), rgba(248,250,253,.72) 55%, var(--paper) 96%); }
.contact-inner, .simple-inner { position: relative; z-index: 1; width: min(100%, var(--max)); margin: 0 auto; }
.contact-intro { display: grid; grid-template-columns: 1.3fr .7fr; gap: 80px; align-items: end; padding-bottom: 76px; }
.contact-intro > div:first-child { transform: translateY(-28px); }
.contact-intro h1 { max-width: 830px; margin: 0; font: 500 clamp(64px, 6.8vw, 96px)/.94 "Manrope", "Noto Sans TC", sans-serif; letter-spacing: -.065em; }
.contact-intro > div:last-child { padding: 26px 28px; border: 0; border-radius: 24px; background: rgba(255,255,255,.28); box-shadow: 0 16px 44px rgba(29,37,33,.08); backdrop-filter: blur(24px) saturate(130%); -webkit-backdrop-filter: blur(24px) saturate(130%); }
.contact-intro > div:last-child p { margin: 0; color: var(--muted); font-size: 19px; line-height: 1.65; }
.text-accent { color: var(--blue); font-weight: 650; }
.contact-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 42px; border-top: 1px solid var(--line); }
.contact-card { min-height: 260px; padding: 30px; display: flex; flex-direction: column; border: 0; border-radius: var(--radius); background: rgba(255,255,255,.27); box-shadow: 0 18px 50px rgba(29,37,33,.07); backdrop-filter: blur(26px) saturate(130%); -webkit-backdrop-filter: blur(26px) saturate(130%); }
.contact-card .kicker { margin-bottom: auto; color: var(--blue); }
.contact-card h2 { margin: 34px 0 12px; font: 500 clamp(28px, 3vw, 42px)/1.08 "Manrope", "Noto Sans TC", sans-serif; letter-spacing: -.04em; }
.contact-card p { max-width: 500px; margin: 0 0 24px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.contact-card a { align-self: flex-start; color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.simple-hero { max-width: 780px; padding-top: 56px; }
.simple-hero .kicker { color: var(--blue); }
.simple-hero h1 { margin: 0; font: 500 clamp(54px, 7vw, 96px)/.98 "Manrope", "Noto Sans TC", sans-serif; letter-spacing: -.06em; }
.simple-hero p:not(.kicker) { max-width: 660px; margin: 28px 0 0; color: var(--muted); font-size: 20px; line-height: 1.62; }
.services-page .simple-hero { max-width: 860px; min-width: 0; }
.service-tabs { margin-top: 66px; padding-top: 24px; border-top: 1px solid rgba(230,233,236,.9); }
.service-tab-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 7px; border: 1px solid rgba(230,233,236,.72); border-radius: 999px; background: rgba(255,255,255,.36); box-shadow: 0 18px 50px rgba(29,37,33,.06), inset 0 1px 0 rgba(255,255,255,.78); backdrop-filter: blur(22px) saturate(130%); -webkit-backdrop-filter: blur(22px) saturate(130%); }
.service-tab { min-width: 0; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; color: #56606a; background: transparent; cursor: pointer; font-size: 14px; font-weight: 700; line-height: 1.15; letter-spacing: 0; overflow-wrap: anywhere; transition: color .2s ease, background .2s ease, box-shadow .2s ease; }
.service-tab:hover { color: var(--ink); background: rgba(255,255,255,.54); }
.service-tab.active { color: #fff; background: rgba(83,136,236,.86); box-shadow: 0 10px 24px rgba(83,136,236,.16); }
.service-panel { min-width: 0; min-height: 520px; margin-top: 16px; padding: clamp(24px, 3.8vw, 48px); display: none; gap: clamp(26px, 4vw, 56px); align-items: center; grid-template-columns: minmax(0, 1fr) minmax(360px, 1.05fr); border: 1px solid rgba(230,233,236,.72); border-radius: 28px; background: rgba(255,255,255,.34); box-shadow: 0 24px 68px rgba(29,37,33,.08), inset 0 1px 0 rgba(255,255,255,.76); backdrop-filter: blur(26px) saturate(135%); -webkit-backdrop-filter: blur(26px) saturate(135%); }
.service-panel.active { display: grid; }
.service-panel-copy { min-width: 0; }
.service-panel .kicker { color: var(--blue); }
.service-panel h2 { max-width: 680px; margin: 0; font: 500 clamp(32px, 3.4vw, 50px)/1.04 "Manrope", "Noto Sans TC", sans-serif; letter-spacing: 0; overflow-wrap: anywhere; text-wrap: balance; }
.service-panel p:not(.kicker) { max-width: 640px; margin: 24px 0 34px; color: var(--muted); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.58; overflow-wrap: anywhere; }
.service-panel .button { justify-self: start; }
.service-panel-visual { min-width: 0; margin: 0; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: #111a22; box-shadow: 0 24px 52px rgba(29,37,33,.16); }
.service-panel-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }

.blog-page { position: relative; overflow: hidden; background-color: var(--paper); background-image: radial-gradient(circle, rgba(83,136,236,.19) .7px, transparent .8px); background-size: 7px 7px; }
.blog-hero { position: relative; min-height: 820px; padding: 142px 28px 70px; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.blog-hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: url("./assets/hero-taipei-desktop.webp") 82% 34% / cover no-repeat; opacity: .72; }
.blog-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(248,250,253,.2), rgba(248,250,253,.48) 50%, rgba(248,250,253,.92) 96%); pointer-events: none; }
.blog-hero-inner { width: min(100%, var(--max)); margin: 0 auto; display: grid; grid-template-columns: 1.28fr .72fr; column-gap: 72px; align-items: center; }
.blog-hero .blog-hero-inner { transform: translateY(-82px); }
.blog-hero-inner .kicker { grid-column: 1 / -1; }
.blog-hero .kicker { color: var(--blue); }
.blog-hero h1 { max-width: 760px; margin: 0; font: 500 clamp(58px, 6.8vw, 98px)/.97 "Manrope", "Noto Sans TC", sans-serif; letter-spacing: -.065em; text-wrap: balance; }
.blog-hero h1 em { color: var(--blue); font-style: normal; }
.blog-hero-note { max-width: 520px; margin: 20px 0 0; padding: 24px 26px; color: var(--muted); border: 0; border-radius: 22px; background: rgba(255,255,255,.26); box-shadow: 0 14px 40px rgba(29,37,33,.06); backdrop-filter: blur(22px) saturate(125%); -webkit-backdrop-filter: blur(22px) saturate(125%); font-size: 16px; line-height: 1.5; }

.blog-newsletter-wall { min-height: 760px; display: grid; grid-template-columns: minmax(300px, .42fr) minmax(0, .58fr); gap: clamp(26px, 4vw, 58px); align-items: start; margin-top: 80px; padding: 0 0 44px; }
.newsletter-card { min-height: 460px; padding: clamp(26px, 4vw, 44px); display: flex; flex-direction: column; justify-content: flex-start; border: 1px solid rgba(230,233,236,.72); border-radius: 28px; background: rgba(255,255,255,.34); box-shadow: 0 24px 68px rgba(29,37,33,.08), inset 0 1px 0 rgba(255,255,255,.72); backdrop-filter: blur(26px) saturate(135%); -webkit-backdrop-filter: blur(26px) saturate(135%); }
.newsletter-card .kicker { margin-bottom: clamp(24px, 3vw, 38px); color: var(--blue); }
.newsletter-card h2 { max-width: 100%; margin: 0 0 18px; font: 500 clamp(34px, 3.8vw, 54px)/.98 "Manrope", "Noto Sans TC", sans-serif; letter-spacing: 0; white-space: normal; }
.newsletter-card p:not(.kicker) { max-width: 430px; margin: 0 0 28px; color: var(--muted); font-size: 17px; line-height: 1.58; }
.newsletter-card label { display: grid; gap: 9px; margin-bottom: 14px; color: #6d7684; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.newsletter-card input { width: 100%; height: 54px; padding: 0 18px; border: 1px solid rgba(199,207,218,.62); border-radius: 999px; outline: 0; color: var(--ink); background: rgba(255,255,255,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.78); font-size: 15px; }
.newsletter-card input:focus { border-color: rgba(83,136,236,.52); box-shadow: 0 0 0 4px rgba(83,136,236,.1), inset 0 1px 0 rgba(255,255,255,.78); }
.newsletter-card .button { align-self: flex-start; min-width: 150px; border: 0; cursor: pointer; }
.blog-wall-panel { min-width: 0; }
.blog-wall-panel .article-wall-stage { min-height: 650px; }

.blog-section { padding: 70px 0 20px; }
.blog-section-heading { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: end; margin-bottom: 26px; border-top: 1px solid var(--line); padding-top: 38px; }
.blog-section-heading .kicker { margin: 0; color: var(--blue); }
.blog-section-heading h2 { margin: 0; font: 500 clamp(38px, 5vw, 70px)/1 "Manrope", "Noto Sans TC", sans-serif; letter-spacing: -.055em; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.blog-card { min-height: 430px; display: flex; flex-direction: column; position: relative; padding: 14px 14px 58px; border: 1px solid rgba(230,233,236,.72); border-radius: 24px; background: rgba(248,250,253,.38); box-shadow: 0 18px 54px rgba(29,37,33,.065), inset 0 1px 0 rgba(255,255,255,.7); backdrop-filter: blur(24px) saturate(135%); -webkit-backdrop-filter: blur(24px) saturate(135%); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.blog-card:hover { transform: translateY(-5px); border-color: rgba(83,136,236,.28); box-shadow: 0 28px 72px rgba(29,37,33,.12); }
.blog-card-media { display: block; overflow: hidden; margin-bottom: 22px; border-radius: 18px; background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.82); }
.blog-card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; object-position: center; transition: transform .35s ease; }
.blog-card:hover img { transform: scale(1.035); }
.article-kicker { margin-bottom: 12px; color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.blog-card strong { margin-bottom: 12px; font: 500 clamp(23px, 2.2vw, 32px)/1.08 "Manrope", "Noto Sans TC", sans-serif; letter-spacing: -.035em; }
.blog-card > span:not(.blog-card-media):not(.article-kicker):not(.blog-card-meta) { color: var(--muted); font-size: 15px; line-height: 1.55; }
.blog-card-meta { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; color: #8a929d; font-size: 12px; font-weight: 600; }
.blog-card-meta img { width: 74px; height: auto; object-fit: contain; opacity: .82; }
.blog-card:hover .blog-card-meta img { transform: none; }

.simple-page[data-page="test"] .simple-hero { padding-top: 28px; }
.article-wall-lab { min-height: 760px; display: grid; grid-template-columns: minmax(170px, .32fr) minmax(0, .68fr); gap: clamp(24px, 4vw, 58px); align-items: center; padding: 54px 0 30px; }
.article-wall-copy .kicker { color: var(--blue); }
.article-wall-copy h2 { max-width: 500px; margin: 0; font: 500 clamp(42px, 5.6vw, 78px)/.98 "Manrope", "Noto Sans TC", sans-serif; letter-spacing: -.06em; }
.article-wall-stage { --wall-fade-x: 100px; --wall-fade-x-mid: 58px; --wall-fade-x-strong: 24px; --wall-fade-y: 100px; --wall-fade-y-mid: 58px; --wall-fade-y-strong: 24px; position: relative; min-height: 650px; overflow: hidden; border-radius: 0; perspective: 1180px; pointer-events: auto; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.54) 9%, #000 20%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.54) 9%, #000 20%, #000 100%); }
.article-wall-stage::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(90deg, var(--paper) 0%, rgba(248,250,253,.98) 10%, rgba(248,250,253,.5) 19%, rgba(248,250,253,0) 33%, rgba(248,250,253,0) calc(100% - var(--wall-fade-x)), rgba(248,250,253,.5) calc(100% - var(--wall-fade-x-mid)), rgba(248,250,253,.98) calc(100% - var(--wall-fade-x-strong)), var(--paper) 100%), linear-gradient(180deg, var(--paper) 0, rgba(248,250,253,.98) var(--wall-fade-y-strong), rgba(248,250,253,.5) var(--wall-fade-y-mid), rgba(248,250,253,0) var(--wall-fade-y), rgba(248,250,253,0) calc(100% - var(--wall-fade-y)), rgba(248,250,253,.5) calc(100% - var(--wall-fade-y-mid)), rgba(248,250,253,.98) calc(100% - var(--wall-fade-y-strong)), var(--paper) 100%); }
.article-wall { position: absolute; inset: -28px 0 -88px; z-index: 3; display: grid; grid-template-columns: repeat(5, minmax(74px, 1fr)); gap: clamp(10px, 1.4vw, 18px); transform: rotateZ(7deg) skewY(-7deg) scale(1.03) translateY(-20px); transform-origin: 50% 38%; transform-style: flat; }
.article-wall-column { min-width: 0; overflow: hidden; pointer-events: none; }
.article-wall-track { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 18px); animation: article-wall-up 28s linear infinite; will-change: transform; pointer-events: none; }
.article-wall-column:nth-child(even) .article-wall-track { animation-name: article-wall-down; animation-duration: 32s; }
.article-wall-column:nth-child(3) .article-wall-track { animation-duration: 35s; }
.article-wall-tile { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 3%; border: 1px solid rgba(199,207,218,.5); border-radius: 18px; background: rgba(248,250,253,.43); box-shadow: 0 20px 38px rgba(29,37,33,.09), inset 0 1px 0 rgba(255,255,255,.78); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; pointer-events: none; }
.article-wall-stage:not(.article-wall-stage-full) .article-wall-tile { padding: 0; border-radius: 50%; clip-path: circle(50% at 50% 50%); }
.article-wall-tile img { width: 98%; height: auto; aspect-ratio: 1; display: block; border-radius: 50%; object-fit: cover; box-shadow: 0 13px 26px rgba(29,37,33,.22); pointer-events: none; }
.article-wall-stage.is-over-tile { cursor: pointer; }
.article-wall-tile.is-proxy-hover, .article-wall-tile:focus-visible { z-index: 3; transform: translateZ(28px) scale(1.08); border-color: rgba(83,136,236,.45); box-shadow: 0 26px 58px rgba(29,37,33,.17), inset 0 1px 0 rgba(255,255,255,.98); }
.article-wall-lab-full { position: relative; margin: 20px calc((var(--max) - 100vw) / 2) -40px; padding: 96px max(24px, calc((100vw - var(--max)) / 2)); overflow: hidden; background-color: transparent; background-image: linear-gradient(180deg, var(--paper) 0, rgba(248,250,253,.99) 190px, rgba(248,250,253,0) 360px), radial-gradient(circle, rgba(83,136,236,.18) 1px, transparent 1.2px); background-size: 100% 100%, 9px 9px; }
.article-wall-lab-full::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, rgba(251,252,254,0) 44%, rgba(251,252,254,.42) 72%, #fbfcfe 100%); }
.article-wall-lab-full > * { position: relative; z-index: 1; }
.article-wall-stage-full::before { background: linear-gradient(90deg, var(--paper) 0%, rgba(248,250,253,.94) 11%, rgba(248,250,253,.46) 20%, rgba(248,250,253,0) 34%, rgba(248,250,253,0) calc(100% - var(--wall-fade-x)), rgba(248,250,253,.46) calc(100% - var(--wall-fade-x-mid)), rgba(248,250,253,.94) calc(100% - var(--wall-fade-x-strong)), var(--paper) 100%), linear-gradient(180deg, var(--paper) 0, rgba(248,250,253,.94) var(--wall-fade-y-strong), rgba(248,250,253,.46) var(--wall-fade-y-mid), rgba(248,250,253,0) var(--wall-fade-y), rgba(248,250,253,0) calc(100% - var(--wall-fade-y)), rgba(248,250,253,.46) calc(100% - var(--wall-fade-y-mid)), rgba(248,250,253,.94) calc(100% - var(--wall-fade-y-strong)), var(--paper) 100%); }
.article-wall-full { gap: clamp(24px, 2.45vw, 36px); }
.article-wall-full .article-wall-track { gap: clamp(24px, 2.45vw, 36px); }
.article-wall-tile-full { padding: 0; overflow: hidden; align-content: end; background: rgba(248,250,253,.38); clip-path: inset(0 round 18px); }
.article-wall-tile-full img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: cover; box-shadow: none; }
.article-wall-tile-full span { position: absolute; left: 9px; right: 9px; bottom: 9px; z-index: 1; box-sizing: border-box; min-height: 38%; max-height: 48%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; padding: 8px 10px; border: 1px solid rgba(255,255,255,.46); border-radius: 13px; color: #fff; background: rgba(10,18,28,.6); box-shadow: 0 14px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.22); backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%); font-size: clamp(10.5px, .88vw, 12.5px); font-weight: 700; line-height: 1.15; text-shadow: 0 1px 10px rgba(0,0,0,.42); opacity: 0; transform: translateY(7px) scale(.97); transition: opacity .18s ease, transform .18s ease; pointer-events: none; }
.article-wall-tile-full.is-proxy-hover span,
.article-wall-tile-full:focus-visible span { opacity: 1; transform: translateY(0) scale(1); }
@keyframes article-wall-up { from { transform: translate3d(0, -33.333%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes article-wall-down { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -33.333%, 0); } }
.snake-wall-lab { position: relative; margin: 54px calc((var(--max) - 100vw) / 2) -34px; padding: 84px max(24px, calc((100vw - var(--max)) / 2)) 102px; overflow: hidden; background-image: linear-gradient(180deg, rgba(248,250,253,0) 0, rgba(248,250,253,.96) 120px, rgba(248,250,253,.96) calc(100% - 120px), rgba(248,250,253,0) 100%), radial-gradient(circle, rgba(83,136,236,.18) 1px, transparent 1.2px); background-size: 100% 100%, 9px 9px; }
.snake-wall-lab::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, rgba(251,252,254,0) 36%, rgba(251,252,254,.5) 78%, #fbfcfe 100%); }
.snake-wall-lab > * { position: relative; z-index: 1; }
.snake-wall-stage { --snake-gap: clamp(14px, 1.6vw, 24px); --snake-tile: clamp(132px, 15vw, 220px); position: relative; min-height: 560px; margin-top: 24px; overflow: hidden; pointer-events: auto; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.52) 7%, #000 18%, #000 82%, rgba(0,0,0,.52) 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.52) 7%, #000 18%, #000 82%, rgba(0,0,0,.52) 93%, transparent 100%); }
.snake-wall-stage::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(180deg, var(--paper) 0, rgba(248,250,253,.65) 36px, rgba(248,250,253,0) 92px, rgba(248,250,253,0) calc(100% - 92px), rgba(248,250,253,.65) calc(100% - 36px), var(--paper) 100%); }
.snake-wall { position: absolute; inset: 34px -16vw 34px; z-index: 3; display: flex; flex-direction: column; justify-content: center; gap: var(--snake-gap); transform: rotateZ(-3deg) skewX(5deg); transform-origin: 50% 50%; }
.snake-wall-row { display: flex; gap: var(--snake-gap); width: max-content; animation: snake-wall-left 42s linear infinite; will-change: transform; pointer-events: none; }
.snake-wall-row:nth-child(2) { margin-left: calc(var(--snake-tile) * .62); animation-name: snake-wall-right; animation-duration: 48s; }
.snake-wall-row:nth-child(3) { margin-left: calc(var(--snake-tile) * .2); animation-duration: 54s; }
.snake-wall-tile { position: relative; flex: 0 0 var(--snake-tile); aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid rgba(199,207,218,.5); border-radius: 18px; background: rgba(248,250,253,.38); box-shadow: 0 22px 48px rgba(29,37,33,.11), inset 0 1px 0 rgba(255,255,255,.78); transform: translateY(var(--snake-y, 0)) rotateZ(var(--snake-r, 0)); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; pointer-events: none; }
.snake-wall-tile:nth-child(6n+1) { --snake-y: 24px; --snake-r: -1.5deg; }
.snake-wall-tile:nth-child(6n+2) { --snake-y: -8px; --snake-r: .8deg; }
.snake-wall-tile:nth-child(6n+3) { --snake-y: -30px; --snake-r: 1.4deg; }
.snake-wall-tile:nth-child(6n+4) { --snake-y: -8px; --snake-r: -.7deg; }
.snake-wall-tile:nth-child(6n+5) { --snake-y: 24px; --snake-r: 1.1deg; }
.snake-wall-tile:nth-child(6n) { --snake-y: 40px; --snake-r: -1deg; }
.snake-wall-tile img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 0; object-fit: cover; box-shadow: none; pointer-events: none; }
.snake-wall-tile span { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; box-sizing: border-box; min-height: 34%; max-height: 46%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; padding: 8px 10px; border: 1px solid rgba(255,255,255,.48); border-radius: 13px; color: #fff; background: rgba(10,18,28,.62); box-shadow: 0 14px 30px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.22); backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%); font-size: clamp(10px, .85vw, 12px); font-weight: 700; line-height: 1.15; text-shadow: 0 1px 10px rgba(0,0,0,.42); opacity: 0; transform: translateY(7px) scale(.97); transition: opacity .18s ease, transform .18s ease; pointer-events: none; }
.snake-wall-stage.is-over-tile { cursor: pointer; }
.snake-wall-tile.is-proxy-hover { z-index: 3; transform: translateY(var(--snake-y, 0)) rotateZ(var(--snake-r, 0)) translateZ(28px) scale(1.06); border-color: rgba(83,136,236,.45); box-shadow: 0 30px 68px rgba(29,37,33,.17), inset 0 1px 0 rgba(255,255,255,.98); }
.snake-wall-tile.is-proxy-hover span { opacity: 1; transform: translateY(0) scale(1); }
@keyframes snake-wall-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-50% - (var(--snake-gap) / 2)), 0, 0); } }
@keyframes snake-wall-right { from { transform: translate3d(calc(-50% - (var(--snake-gap) / 2)), 0, 0); } to { transform: translate3d(0, 0, 0); } }
.article-main { background: var(--paper); }
body:has(.article-main) .glass-nav { left: calc(50% + 86px); width: min(calc(100% - 206px), 1188px); }
.article-back { position: fixed; z-index: 51; left: max(24px, calc((100vw - 1360px) / 2)); top: 23px; display: inline-flex; align-items: center; min-height: 46px; padding: 0 15px; border: 1px solid rgba(199,207,218,.52); border-radius: 999px; color: var(--ink); background: rgba(248,250,253,.78); box-shadow: 0 10px 30px rgba(29,37,33,.11), inset 0 1px 0 rgba(255,255,255,.86); backdrop-filter: blur(24px) saturate(145%); -webkit-backdrop-filter: blur(24px) saturate(145%); font-size: 13px; font-weight: 700; }
.article-back::before { content: "<"; margin-right: 8px; }
.article-main .article-page { display: block; }
.article-hero { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(320px,.95fr); gap: clamp(28px,5vw,70px); align-items: center; padding: 158px max(24px, calc((100vw - 1220px)/2)) 90px; color: #fff; background: radial-gradient(circle at 15% 18%, rgba(25,185,154,.22), transparent 30%), radial-gradient(circle at 86% 20%, rgba(83,136,236,.28), transparent 34%), linear-gradient(135deg, #07090f, #0d1f31 58%, #11101a); }
.article-hero-data { background: radial-gradient(circle at 24% 20%, rgba(232,93,117,.24), transparent 32%), radial-gradient(circle at 82% 25%, rgba(25,185,154,.2), transparent 34%), linear-gradient(135deg, #08070c, #1a0f23 56%, #091d22); }
.article-hero-use { background: radial-gradient(circle at 18% 18%, rgba(25,185,154,.18), transparent 30%), radial-gradient(circle at 84% 20%, rgba(83,136,236,.28), transparent 36%), linear-gradient(135deg, #07090f, #111b2a 60%, #121023); }
.article-hero-taiwan { background: radial-gradient(circle at 15% 18%, rgba(25,185,154,.24), transparent 30%), radial-gradient(circle at 84% 20%, rgba(83,136,236,.3), transparent 36%), linear-gradient(135deg, #06100f, #0d1f35 56%, #120f1b); }
.article-hero-copy { min-width: 0; }
.article-hero h1 { max-width: 780px; margin: 0; font: 500 clamp(54px,7.2vw,116px)/.96 "Manrope", "Noto Sans TC", sans-serif; letter-spacing: -.06em; overflow-wrap: anywhere; }
.article-hero-copy .eyebrow { margin: 0 0 22px; color: rgba(255,255,255,.72); font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.article-hero-copy > p:not(.eyebrow) { max-width: 720px; margin: 26px 0 0; color: rgba(255,255,255,.76); font-size: clamp(18px,1.65vw,23px); line-height: 1.55; }
.article-hero-graphic { position: relative; min-height: 390px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 26px; background: rgba(255,255,255,.08); box-shadow: 0 38px 100px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.18); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.cost-dashboard { display: grid; align-content: center; gap: 14px; padding: 32px; }
.dashboard-row { display: flex; justify-content: space-between; gap: 20px; padding: 18px 20px; border-radius: 16px; color: rgba(255,255,255,.86); background: rgba(255,255,255,.09); }
.dashboard-row strong { color: #fff; letter-spacing: .12em; }
.dashboard-row.danger { color: #fff; background: rgba(232,93,117,.24); }
.dashboard-meter { height: 18px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.12); }
.dashboard-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--jade), var(--coral)); }
.cost-dashboard p { margin: 8px 0 0; color: rgba(255,255,255,.62); line-height: 1.5; }
.data-map { display: grid; place-items: center; text-align: center; }
.data-map strong { position: relative; z-index: 2; display: block; padding: 16px 22px; border-radius: 18px; color: #fff; background: rgba(232,93,117,.3); font-weight: 700; letter-spacing: .08em; }
.data-map em { position: absolute; left: 34px; right: 34px; bottom: 32px; color: rgba(255,255,255,.66); font-style: normal; line-height: 1.45; }
.map-dot { position: absolute; width: 26px; height: 26px; border-radius: 999px; background: #fff; box-shadow: 0 0 26px rgba(255,255,255,.56); }
.map-dot.d1 { left: 20%; top: 26%; }
.map-dot.d2 { right: 18%; top: 34%; }
.map-dot.d3 { left: 28%; bottom: 26%; }
.map-line { position: absolute; width: 56%; height: 3px; border-radius: 999px; background: rgba(255,255,255,.36); }
.map-line.l1 { transform: rotate(23deg); }
.map-line.l2 { transform: rotate(-31deg); }
.use-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 22px; }
.use-matrix div { display: grid; align-content: space-between; min-height: 160px; padding: 20px; border-radius: 18px; background: rgba(255,255,255,.1); }
.use-matrix span { color: rgba(255,255,255,.6); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.use-matrix strong { color: #fff; font: 500 28px/1.05 "Manrope", "Noto Sans TC", sans-serif; letter-spacing: -.03em; }
.taiwan-market-card { display: grid; place-items: center; align-content: center; gap: 14px; text-align: center; }
.taiwan-market-card strong { position: relative; z-index: 2; font: 500 clamp(78px,9vw,148px)/.88 "Manrope", "Noto Sans TC", sans-serif; color: #fff; letter-spacing: -.055em; }
.taiwan-market-card span { position: relative; z-index: 2; max-width: 360px; color: rgba(255,255,255,.76); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.taiwan-market-card p { position: relative; z-index: 2; max-width: 380px; margin: 8px 0 0; color: rgba(255,255,255,.68); line-height: 1.5; }
.market-ring { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: conic-gradient(var(--jade) 0 42%, rgba(255,255,255,.12) 42% 100%); box-shadow: 0 0 70px rgba(25,185,154,.28); }
.market-ring::after { content: ""; position: absolute; inset: 26px; border-radius: inherit; background: rgba(13,31,53,.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.article-body { display: grid; grid-template-columns: minmax(240px,320px) minmax(0,760px); gap: clamp(30px,5vw,82px); align-items: start; padding: clamp(64px,8vw,120px) max(24px, calc((100vw - 1180px)/2)); }
.article-chart { position: sticky; top: 100px; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 20px 60px rgba(29,37,33,.08); }
.article-chart h2 { margin: 0 0 18px; font: 500 28px/1.08 "Manrope", "Noto Sans TC", sans-serif; letter-spacing: -.035em; }
.article-chart p, .article-chart li { color: var(--muted); font-size: 14px; line-height: 1.55; }
.stacked-chart { height: 230px; display: grid; grid-template-columns: repeat(4,1fr); align-items: end; gap: 10px; margin: 16px 0 18px; }
.stacked-chart span { position: relative; height: var(--h); min-height: 34px; border-radius: 14px 14px 8px 8px; background: linear-gradient(180deg, var(--jade), var(--blue)); }
.stacked-chart em { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); color: var(--muted); font-size: 10px; font-style: normal; letter-spacing: .05em; }
.breach-number { margin: 12px 0 16px; font: 500 62px/1 "Manrope", "Noto Sans TC", sans-serif; color: var(--coral); letter-spacing: -.05em; }
.useful-chart ul { margin: 0; padding-left: 18px; }
.article-prose { color: #1b202b; }
.article-prose h2 { margin: 46px 0 14px; font: 500 clamp(30px,3.4vw,46px)/1.1 "Manrope", "Noto Sans TC", sans-serif; letter-spacing: -.045em; }
.article-prose p { margin: 0 0 22px; color: #293040; font-size: clamp(17px,1.35vw,20px); line-height: 1.75; }
.article-callout { margin: 36px 0; padding: 26px; border-left: 5px solid var(--blue); border-radius: 18px; background: #fff; box-shadow: 0 18px 50px rgba(29,37,33,.08); color: #182033; font-size: 20px; line-height: 1.55; }
.article-callout.red { border-left-color: var(--coral); }
.article-photo { position: relative; overflow: hidden; margin: 34px 0; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 22px 70px rgba(29,37,33,.1); }
.article-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center; }
.article-photo-contain img { height: auto; aspect-ratio: auto; object-fit: contain; }
.article-photo figcaption { padding: 14px 16px 16px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.article-diagram { padding: 18px; }
.diagram-lanes { display: grid; gap: 10px; }
.diagram-lanes span { display: grid; grid-template-columns: minmax(0,1fr) minmax(140px,.45fr); align-items: center; gap: 14px; min-height: 64px; padding: 14px 16px; border-radius: 16px; color: #fff; background: linear-gradient(90deg, rgba(83,136,236,.92), rgba(25,185,154,.82)); }
.diagram-lanes span:nth-child(1) { opacity: .46; }
.diagram-lanes span:nth-child(2) { opacity: .64; }
.diagram-lanes span:nth-child(3) { opacity: .84; }
.diagram-lanes em { font-style: normal; color: rgba(255,255,255,.76); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.risk-ladder, .taiwan-gap { display: grid; gap: 9px; margin: 18px 0; }
.risk-ladder span { display: block; padding: 12px 13px; border-radius: 12px; color: #fff; background: linear-gradient(90deg, rgba(83,136,236,.8), rgba(232,93,117,.82)); font-size: 13px; font-weight: 700; }
.risk-ladder span:nth-child(1) { opacity: .45; width: 62%; }
.risk-ladder span:nth-child(2) { opacity: .58; width: 72%; }
.risk-ladder span:nth-child(3) { opacity: .72; width: 82%; }
.risk-ladder span:nth-child(4) { opacity: .86; width: 92%; }
.risk-ladder span:nth-child(5) { width: 100%; }
.trap-chart span { background: linear-gradient(180deg, var(--coral), var(--blue)); }
.taiwan-gap span { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; width: var(--w); min-height: 46px; padding: 10px 12px; border-radius: 14px; color: #fff; background: linear-gradient(90deg, var(--blue), var(--jade)); }
.taiwan-gap span:nth-child(n+3) { background: linear-gradient(90deg, rgba(90,95,107,.82), rgba(232,93,117,.76)); }
.taiwan-gap strong { font-size: 13px; }
.taiwan-gap em { font-size: 10px; font-style: normal; letter-spacing: .05em; text-transform: uppercase; opacity: .78; }
.article-sources { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 42px; }
.article-sources a { display: inline-flex; padding: 10px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #fff; font-size: 13px; transition: color .18s ease, border-color .18s ease; }
.article-sources a:hover { color: var(--blue); border-color: rgba(83,136,236,.3); }
.footer-brand { display: block; width: 230px; height: 48px; overflow: hidden; }
.footer-brand img { display: block; width: 230px; height: auto; object-fit: contain; }
.footer-center { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.footer-links { display: flex; justify-content: center; align-items: center; gap: 30px; font-size: 14px; }
.footer-links a, .footer-legal a { color: #e6e9ec; transition: color .2s ease; }
.footer-links a:hover, .footer-legal a:hover { color: #fff; }
.social-links { display: flex; justify-content: center; gap: 8px; }
.social-links a, .social-links span { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #fff; font: 600 15px/1 "DM Sans", sans-serif; transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
.social-links svg { width: 19px; height: 19px; display: block; fill: currentColor; }
.social-links a[aria-label="Facebook"] { border-color: #1877f2; background: #1877f2; }
.social-links a[aria-label="LinkedIn"] { border-color: #0a66c2; background: #0a66c2; }
.social-links a:hover { border-color: rgba(255,255,255,.92); transform: translateY(-2px); box-shadow: 0 7px 18px rgba(0,0,0,.24); }
.social-links span { color: #666; border-color: rgba(255,255,255,.1); cursor: default; }
.footer-legal { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font-size: 12px; }
.copyright { margin: 0; color: #9aa1a9; }

.careers-hero { position: relative; min-height: 800px; padding: 150px 28px 74px; display: flex; align-items: center; overflow: hidden; background-color: #f8fafd; background-image: radial-gradient(circle, rgba(83,136,236,.24) .7px, transparent .8px); background-size: 7px 7px; isolation: isolate; }
.careers-hero::before { content: ""; position: absolute; z-index: 0; inset: 0; background: url("./assets/hero-taipei-desktop.webp") center 28% / cover no-repeat; opacity: .72; }
.careers-hero::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(248,250,253,.2), rgba(248,250,253,.48) 50%, rgba(248,250,253,.92) 96%); pointer-events: none; }
.careers-hero-inner { position: relative; z-index: 2; width: min(100%, var(--max)); margin: 0 auto; display: grid; grid-template-columns: 1.28fr .72fr; column-gap: 72px; align-items: center; }
.careers-hero .careers-hero-inner { transform: translateY(-95px); }
.careers-hero-inner .kicker { grid-column: 1 / -1; }
.careers-hero h1 { max-width: 820px; font-size: clamp(58px, 6.8vw, 98px); line-height: .97; }
.careers-hero h1 em { color: var(--blue); font-style: normal; }
.careers-hero .kicker { color: var(--blue); }
.careers-hero p:last-child { max-width: 520px; margin: 20px 0 0; padding: 24px 26px; color: var(--muted); border: 0; border-radius: 22px; background: rgba(255,255,255,.24); box-shadow: 0 14px 40px rgba(29,37,33,.06); backdrop-filter: blur(22px) saturate(125%); -webkit-backdrop-filter: blur(22px) saturate(125%); font-size: 18px; line-height: 1.58; }
.roles-heading { display: grid; grid-template-columns: 1fr .8fr; gap: 48px; align-items: end; }
.roles-heading h2 { margin: 0; font: 500 clamp(50px, 7vw, 96px)/.95 "Manrope", "Noto Sans TC"; letter-spacing: -.06em; }
.roles-heading > p:last-child { max-width: 630px; margin: 12px 0 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.roles-label { margin: 0 0 18px; color: var(--blue); }
.job-list { margin-top: 0; border-top: 1px solid var(--line); }
.job { border-bottom: 1px solid var(--line); }
.job-summary { width: 100%; padding: 31px 0; display: grid; grid-template-columns: 1fr 50px; gap: 15px; align-items: center; border: 0; background: transparent; text-align: left; cursor: pointer; }
.job-summary > span:first-child { display: grid; gap: 8px; }
.job-summary strong { font: 500 clamp(23px, 2.3vw, 34px) "Manrope", "Noto Sans TC"; letter-spacing: -.035em; }
.job-summary small { color: var(--muted); font-size: 14px; }
.job-plus { justify-self: end; font-size: 30px; font-weight: 300; transition: transform .25s ease; }
.job-summary[aria-expanded="true"] .job-plus { transform: rotate(45deg); }
.job-details { max-height: 0; padding: 0 65px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 70px; overflow: hidden; opacity: 0; transition: max-height .45s ease, padding .35s ease, opacity .3s ease; }
.job.open .job-details { max-height: 650px; padding-top: 8px; padding-bottom: 42px; opacity: 1; }
.job.open .job-details-lead { max-height: 1600px; }
.job-details-lead .job-role-copy { grid-column: 1 / -1; max-width: 940px; }
.job-details-lead .job-role-copy p + p { margin-top: 12px; }
.job-details h3 { margin: 0 0 14px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.job-details p, .job-details li { color: var(--muted); font-size: 16px; line-height: 1.6; }
.job-details p { margin: 0; } .job-details ul { margin: 0; padding-left: 19px; }
.job-details .apply { grid-column: 1 / -1; justify-self: start; }
.general-application { display: grid; grid-template-columns: 1.25fr .75fr; gap: 80px; border-top: 1px solid var(--line); }
.general-application h2 { font-size: clamp(42px, 5vw, 68px); }
.general-application > div:last-child { align-self: end; }
.general-application p { margin: 0 0 26px; color: var(--muted); font-size: 18px; line-height: 1.65; }
.policy-page { width: min(calc(100% - 48px), 1240px); min-height: 72vh; margin: 0 auto; padding: 170px 0 120px; }
.policy-hero { max-width: 900px; margin-left: 290px; }
.policy-page h1 { margin: 0 0 18px; font: 500 clamp(54px, 7vw, 92px)/.98 "Manrope", "Noto Sans TC", sans-serif; letter-spacing: -.06em; }
.policy-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 60px; align-items: start; margin-top: 54px; }
.policy-menu { position: sticky; top: 112px; padding: 20px 0; }
.policy-menu > p { margin: 0 0 14px; color: #9299a2; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.policy-menu nav { display: grid; }
.policy-menu a { padding: 8px 0 8px 14px; border-left: 1px solid var(--line); color: #7a838e; font-size: 13px; line-height: 1.35; text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.policy-menu a:hover, .policy-menu a.active { border-left-color: var(--blue); color: var(--ink); }
.policy-content { min-width: 0; }
.policy-page section { padding: 34px 0; border-top: 1px solid var(--line); }
.policy-page section { scroll-margin-top: 110px; }
.policy-page h2 { margin: 0 0 18px; font: 500 clamp(26px, 3vw, 38px)/1.15 "Manrope", "Noto Sans TC", sans-serif; letter-spacing: -.035em; }
.policy-page h3 { margin: 26px 0 8px; font: 600 16px/1.4 "DM Sans", "Noto Sans TC", sans-serif; }
.policy-page section p, .policy-page section li { max-width: 820px; color: var(--muted); font-size: 17px; line-height: 1.72; }
.policy-page section p { margin: 0 0 14px; }
.policy-page section ul { margin: 0 0 16px; padding-left: 22px; }
.policy-content a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.policy-page .policy-updated { margin: 0; color: #7b838c; font-size: 14px; }
.not-found-page { min-height: 100vh; padding: 12vh 24px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: min(100%, 880px); margin: 0 auto; }
.not-found-page h1 { max-width: 800px; margin: 10px 0 20px; font: 500 clamp(54px, 8vw, 104px)/.96 "Manrope", "Noto Sans TC", sans-serif; letter-spacing: -.06em; }
.not-found-page > p:not(.kicker) { max-width: 560px; margin: 0 0 28px; color: var(--muted); font-size: 18px; line-height: 1.6; }

.reveal { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: block; }
  body:has(.article-main) .glass-nav { left: 50%; width: min(calc(100% - 28px), 1360px); }
  .brand { width: 185px; }
  .brand img { width: 210px; }
  .statement, .general-application { grid-template-columns: 1fr; gap: 38px; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-grid { grid-template-rows: auto; }
  .card-context { grid-row: auto; min-height: 440px; }
  .capability-card { min-height: 340px; }
  .roles-heading { grid-template-columns: 1fr; }
  .careers-hero-inner { grid-template-columns: 1.15fr .85fr; column-gap: 38px; }
  .contact-intro { grid-template-columns: 1fr; gap: 38px; }
  .contact-intro > div:first-child { transform: none; }
  .operating-grid { grid-template-columns: 1fr; }
  .prompt-chaos, .ontology-system { min-height: 620px; }
  footer { grid-template-columns: 1fr auto 1fr; }
  .blog-section-heading, .blog-newsletter-wall, .article-wall-lab, .article-hero, .article-body { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-hero-inner { padding-left: 0; grid-template-columns: minmax(300px, .44fr) minmax(340px, .56fr); column-gap: 38px; }
  .blog-newsletter-wall { min-height: 0; margin-top: 0; padding-top: 80px; }
  .article-wall-lab { min-height: 0; padding-top: 80px; }
  .article-wall-stage { min-height: 560px; }
  .article-chart { position: static; }
}

@media (min-width: 901px) {
  html[lang="en"] .contact-intro h1 { white-space: nowrap; }
}

@media (max-width: 600px) {
  .glass-nav { height: 58px; top: 10px; width: calc(100vw - 20px); padding: 6px 7px 6px 13px; gap: 5px; }
  .brand { width: 138px; min-width: 0; height: 38px; flex: 1 1 auto; }
  .brand img { width: 154px; max-width: 100%; }
  .nav-actions { flex: 0 0 auto; gap: 2px; }
  .language-toggle { min-width: 52px; padding: 0 8px; font-size: 13px; }
  .nav-cta { display: none; }
  .menu-toggle { width: 38px; }
  .hero { width: 100vw; min-height: 790px; padding: 140px 18px 42px; }
  .hero-inner { width: 100%; min-width: 0; }
  .hero h1, .careers-hero h1 { max-width: 100%; font-size: clamp(46px, 13.8vw, 56px); line-height: .98; overflow-wrap: normal; text-wrap: balance; }
  .careers-hero h1 { font-size: clamp(44px, 12.7vw, 52px); }
  html[lang="zh-Hant"] .hero h1, html[lang="zh-Hant"] .careers-hero h1 { letter-spacing: -.07em; line-height: 1.06; }
  .hero-copy { margin-top: 30px; font-size: 17px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .section { width: calc(100% - 32px); padding: 90px 0; }
  .statement { padding-top: 45px; }
  .statement h2, .careers-cta h2, .general-application h2 { font-size: 42px; }
  .statement p { font-size: 17px; }
  .capability-grid { padding-top: 26px; }
  .capability-card { min-height: 320px; padding: 24px; border-radius: 24px; }
  .card-context { min-height: 520px; }
  .knowledge-source { grid-template-columns: 1fr; gap: 10px; }
  .knowledge-domains { gap: 8px 14px; }
  .knowledge-domains span:not(:last-child)::after { margin-left: 14px; }
  .card-action { min-height: 500px; }
  .action-products > div { grid-template-columns: 28px 1fr; gap: 4px 10px; }
  .action-products > div p { grid-column: 2; }
  .principle-list div { grid-template-columns: 1fr; gap: 12px; padding: 25px 0; }
  .careers-cta { width: 100%; padding: 80px 22px 94px; border-radius: 28px 28px 0 0; }
  footer { min-height: 0; padding: 46px 22px; grid-template-columns: 1fr; justify-items: center; gap: 30px; text-align: center; }
  .footer-brand { width: 220px; }
  .footer-brand img { width: 220px; }
  .footer-legal { justify-self: center; align-items: center; }
  .careers-hero { min-height: 610px; padding: 112px 20px 58px; }
  .careers-hero::before { background-position: 62% center; }
  .careers-hero-inner { width: auto; min-width: 0; display: block; }
  .careers-hero .careers-hero-inner { transform: none; }
  .policy-page { width: calc(100% - 36px); padding: 135px 0 80px; }
  .policy-hero { margin-left: 0; }
  .policy-layout { display: block; margin-top: 36px; }
  .policy-menu { position: static; margin-bottom: 24px; padding: 0; overflow: hidden; }
  .policy-menu > p { margin-bottom: 10px; }
  .policy-menu nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
  .policy-menu nav::-webkit-scrollbar { display: none; }
  .policy-menu a { flex: 0 0 auto; max-width: 210px; padding: 9px 13px; border: 0; border-radius: 999px; background: rgba(255,255,255,.58); box-shadow: 0 8px 22px rgba(29,37,33,.045); white-space: nowrap; }
  .policy-menu a:hover, .policy-menu a.active { border: 0; color: var(--blue); background: rgba(83,136,236,.1); }
  .contact-page, .simple-page { padding: 130px 16px 80px; }
  .simple-inner { width: 100%; max-width: calc(100vw - 32px); min-width: 0; }
  .contact-page::before { height: 650px; background-position: 62% 45%; }
  .contact-page::after { height: 660px; }
  .contact-intro { padding-bottom: 50px; }
  .contact-intro h1 { font-size: clamp(50px, 14vw, 64px); line-height: .98; }
  .contact-intro > div:last-child { padding: 20px; border-radius: 20px; }
  .contact-intro > div:last-child p { font-size: 17px; }
  .contact-options { grid-template-columns: 1fr; padding-top: 24px; }
  .contact-card { min-height: 245px; padding: 24px; border-radius: 24px; }
  .simple-hero { padding-top: 28px; }
  .services-page .simple-hero, .service-tabs, .service-tab-list, .service-panel { width: 100%; max-width: 100%; }
  .simple-hero h1 { font-size: clamp(46px, 13vw, 62px); }
  .simple-hero p:not(.kicker) { font-size: 17px; }
  .service-tabs { margin-top: 44px; padding-top: 18px; }
  .service-tab-list { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 24px; }
  .service-tab { min-height: 46px; padding: 0 12px; border-radius: 18px; font-size: 13px; }
  .service-panel { min-height: 0; margin-top: 12px; padding: 20px; gap: 22px; grid-template-columns: 1fr; border-radius: 24px; }
  .service-panel h2 { font-size: clamp(34px, 9.5vw, 44px); line-height: 1.05; }
  .service-panel p:not(.kicker) { margin-bottom: 28px; font-size: 16px; }
  .service-panel .button { width: 100%; }
  .service-panel-visual { order: -1; aspect-ratio: 16 / 9; border-radius: 18px; }
  .blog-hero { min-height: 610px; padding: 112px 20px 58px; }
  .blog-hero::before { background-position: 62% center; }
  .blog-hero-inner { width: auto; min-width: 0; display: block; }
  .blog-hero .blog-hero-inner { transform: none; }
  .blog-hero h1 { max-width: 100%; font-size: clamp(42px, 11.8vw, 50px); line-height: 1.02; letter-spacing: 0; text-wrap: balance; }
  .blog-hero-note { width: 100%; max-width: calc(100vw - 40px); margin-top: 24px; padding: 14px 16px; border-radius: 17px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; word-break: break-word; text-wrap: pretty; }
  .blog-newsletter-wall { padding: 30px 0 0; }
  .blog-newsletter-wall > * { min-width: 0; }
  .newsletter-card { width: 100%; max-width: 100%; min-height: 420px; padding: 24px; border-radius: 24px; }
  .newsletter-card h2 { font-size: clamp(28px, 8.2vw, 38px); white-space: normal; }
  .newsletter-card p:not(.kicker) { max-width: calc(100vw - 68px); font-size: 15px; overflow-wrap: anywhere; word-break: break-word; }
  .newsletter-card input, .newsletter-card .button { width: calc(100vw - 68px); max-width: 100%; }
  .blog-wall-panel .article-wall-stage { min-height: 500px; margin: 0 -18px; }
  .blog-section { padding-top: 62px; }
  .blog-section-heading { gap: 18px; padding-top: 28px; }
  .blog-section-heading h2 { font-size: clamp(36px, 10vw, 48px); }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card { min-height: 0; padding: 12px 12px 58px; border-radius: 22px; }
  .article-wall-lab { padding: 70px 0 0; }
  .article-wall-copy h2 { font-size: clamp(38px, 11vw, 54px); }
  .article-wall-stage { --wall-fade-x: 47px; --wall-fade-x-mid: 27px; --wall-fade-x-strong: 11px; --wall-fade-y: 77px; --wall-fade-y-mid: 45px; --wall-fade-y-strong: 18px; min-height: 500px; margin: 0 -18px; }
  .article-wall { inset: -24px 10px -72px; grid-template-columns: repeat(4, minmax(64px, 1fr)); transform: rotateZ(7deg) skewY(-7deg) scale(1.02) translateY(-10px); }
  .article-wall-column:nth-child(5) { display: none; }
  .article-wall-tile { border-radius: 15px; padding: 5%; }
  .article-wall-tile-title { padding: 7% 7% 9%; }
  .article-wall-stage-full .article-wall-tile-full span { left: 5px; right: 5px; bottom: 8px; min-height: 40%; max-height: 48%; padding: 5px 7px; border-radius: 9px; -webkit-line-clamp: 3; font-size: clamp(9.5px, 2.65vw, 11px); line-height: 1.1; background: rgba(10,18,28,.66); }
  .article-wall-lab-full { margin-right: -16px; margin-left: -16px; padding: 72px 16px; }
  .snake-wall-lab { margin-right: -16px; margin-left: -16px; padding: 72px 16px 86px; }
  .snake-wall-stage { --snake-tile: clamp(138px, 48vw, 188px); min-height: 430px; margin-right: -16px; margin-left: -16px; }
  .snake-wall { inset: 42px -58vw 42px; }
  .snake-wall-tile span { left: 6px; right: 6px; bottom: 7px; padding: 6px 7px; border-radius: 9px; font-size: clamp(9px, 2.55vw, 10.5px); }
  .article-hero { padding: 126px 18px 58px; }
  .article-hero h1 { max-width: 100%; font-size: clamp(40px, 11.4vw, 50px); line-height: 1.02; letter-spacing: -.05em; text-wrap: balance; }
  .article-hero-copy, .article-hero-copy > p:not(.eyebrow) { width: 100%; max-width: 100%; min-width: 0; }
  .article-hero-copy > p:not(.eyebrow) { font-size: 17px; overflow-wrap: anywhere; }
  .article-hero-graphic { min-height: 310px; border-radius: 22px; }
  .article-body { padding: 58px 18px 76px; }
  .article-back { top: 76px; left: 16px; min-height: 38px; max-width: calc(100vw - 32px); padding: 0 12px; overflow: hidden; white-space: nowrap; font-size: 12px; }
  .article-prose p { font-size: 17px; }
  .article-callout { padding: 21px; font-size: 17px; }
  .use-matrix div { min-height: 132px; }
  .use-matrix strong { font-size: 22px; }
  .diagram-lanes span { grid-template-columns: 1fr; }
  .ai-operating-model { width: 100%; margin: 10px auto 80px; padding: 60px 10px 0; }
  .prompt-chaos, .ontology-system { min-height: 620px; padding: 24px; }
  .prompt-chaos > p, .ontology-system > p { right: 24px; bottom: 24px; left: 24px; }
  .prompt-chaos h3 { top: 24px; padding: 0 8px 48px; }
  .prompt-stream { inset: 12px -60px 105px; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .prompt-column:nth-child(4) { display: none; }
  .ontology-orbit { top: 130px; width: 440px; height: 430px; transform: translateX(-50%) scale(.78); }
  .ring-two { width: 390px; height: 390px; }
  .node-rag { left: 154px; }.node-crm { right: -2px; }.node-erp { right: 18px; bottom: 42px; }.node-voice { left: 10px; bottom: 42px; }.node-flow { left: -2px; }.node-privacy { left: 154px; bottom: 24px; }
  .careers-hero p:last-child { max-width: 100%; margin-top: 28px; padding: 20px; border-radius: 19px; font-size: 16px; overflow-wrap: anywhere; }
  .roles-label { margin-top: 0; }
  .job-list { margin-top: 0; }
  .job-summary { grid-template-columns: 1fr 28px; padding: 25px 0; }
  .job-details { padding-left: 0; padding-right: 0; grid-template-columns: 1fr; gap: 24px; }
  .job.open .job-details { max-height: 1000px; }
  .job.open .job-details-lead { max-height: 3200px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("./assets/fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("./assets/fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./assets/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- lead form modal (lead-form.js) ---- */
body.lf-open { overflow: hidden; }
.lf-overlay { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(29,37,33,.42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: lf-fade .18s ease-out; }
.lf-card { position: relative; width: min(600px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: clamp(26px, 4vw, 44px); border: 1px solid rgba(230,233,236,.72); border-radius: 28px; background: rgba(255,255,255,.96); box-shadow: 0 30px 80px rgba(29,37,33,.22); animation: lf-rise .22s ease-out; }
.lf-card .kicker { margin-bottom: 14px; color: var(--blue); }
.lf-card h2 { margin: 0 0 12px; font: 500 clamp(28px, 3.4vw, 40px)/1.05 "Manrope", "Noto Sans TC", sans-serif; letter-spacing: 0; }
.lf-copy { max-width: 480px; margin: 0 0 24px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.lf-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border: 0; border-radius: 999px; background: rgba(29,37,33,.06); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; }
.lf-close:hover { background: rgba(29,37,33,.12); }
.lf-form { display: grid; gap: 14px; }
.lf-row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.lf-field { display: grid; gap: 8px; color: #6d7684; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.lf-field em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: #9aa3b0; }
.lf-field input, .lf-field textarea { width: 100%; padding: 0 18px; border: 1px solid rgba(199,207,218,.62); border-radius: 999px; outline: 0; color: var(--ink); background: rgba(255,255,255,.8); font: 500 15px/1.4 "DM Sans", "Noto Sans TC", sans-serif; letter-spacing: 0; text-transform: none; transition: border-color .15s, box-shadow .15s; }
.lf-field input { height: 52px; }
.lf-field textarea { padding: 14px 18px; border-radius: 18px; resize: vertical; min-height: 92px; }
.lf-field input:focus, .lf-field textarea:focus { border-color: rgba(83,136,236,.52); box-shadow: 0 0 0 4px rgba(83,136,236,.1); }
.lf-field .lf-bad { border-color: #d9534f; box-shadow: 0 0 0 4px rgba(217,83,79,.12); }
.lf-check { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); font-size: 14px; line-height: 1.45; cursor: pointer; }
.lf-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); }
.lf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lf-error { min-height: 0; margin: 0; color: #c9403b; font-size: 14px; }
.lf-error:empty { display: none; }
.lf-error.lf-ok { color: #2e8b57; }
.lf-foot { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.lf-foot .button { border: 0; cursor: pointer; min-width: 150px; }
.lf-foot .button:disabled { opacity: .6; cursor: default; transform: none; }
.lf-privacy { margin: 0; color: #9aa3b0; font-size: 13px; }
.lf-privacy a { color: var(--blue); }
.newsletter-card .lf-error { margin-top: 12px; }
@keyframes lf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lf-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .lf-row { grid-template-columns: 1fr; } .lf-card { border-radius: 22px; } }

/* Full-screen landing heroes: one shared composition, matching Blog. */
.masthead, .hero {
  min-height: 100vh;
  min-height: 100svh;
}
.masthead {
  padding: 130px 28px 90px;
  display: flex;
  align-items: center;
}
.masthead .blog-hero-inner, .masthead .careers-hero-inner {
  width: min(100%, var(--max));
  grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr);
  transform: translateY(-30px);
}
.masthead h1 { font-size: clamp(58px, 6.8vw, 98px); line-height: .97; }
.masthead h1 .text-accent { font-weight: inherit; }
.masthead::before { background-position: center 48%; }
.services-page { padding-bottom: 90px; }
.services-content { padding: 0 24px; }
.services-content .service-tabs { margin-top: 0; padding-top: 64px; border-top: 0; }
.social-links a { flex-shrink: 0; color: #fff; }
.social-links svg, .social-links svg path { fill: #fff; }
@media (max-width: 760px) {
  .masthead { padding: 116px 20px 68px; }
  .masthead .blog-hero-inner, .masthead .careers-hero-inner {
    display: block; width: 100%; transform: none;
  }
  .masthead h1 { font-size: clamp(42px, 11.8vw, 60px); line-height: 1.02; }
  .masthead::before { background-position: 14% center; }
  .masthead .blog-hero-note, .masthead .careers-hero-inner > p:last-child {
    font-size: 16px; line-height: 1.55; padding: 20px; margin-top: 28px;
  }
  .services-content { padding: 0 18px; }
  .services-content .service-tabs { padding-top: 40px; }
}

/* Raised, two-line hero composition: approximately 3 cm above the previous layout. */
.masthead { padding: 130px 28px 90px; }
.masthead .blog-hero-inner, .masthead .careers-hero-inner {
  transform: translateY(clamp(-143px, calc(130px - 30vh), -55px));
  column-gap: clamp(30px, 5vw, 72px);
}
.masthead h1 { width: 100%; max-width: none; min-width: 0; font-size: clamp(42px, 5.4vw, 80px); text-wrap: initial; }
.hero-title-line { display: block; white-space: nowrap; }
.masthead::before { background-image: url('./assets/hero-taipei-desktop.webp'); }

/* Mission: centered copy over a continuous, depth-deformed photograph. */
.mission-depth-hero { padding: 144px 28px 100px; justify-content: center; background: #e3eaf0; }
.mission-depth-hero::after { z-index: 1; height: 24%; }
.taipei-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: url('./assets/hero-taipei-desktop.webp') center / cover no-repeat; }
.taipei-relief { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; }
.taipei-scene.ready .taipei-relief { opacity: 1; }
.taipei-clouds { position: absolute; left: -15%; width: 130%; height: 38%; border-radius: 50%; will-change: transform; }
.clouds-distant { bottom: 11%; opacity: .36; background: radial-gradient(ellipse at 20% 55%,rgba(245,250,253,.85),transparent 38%),radial-gradient(ellipse at 72% 65%,rgba(244,249,253,.8),transparent 43%); filter: blur(16px); transform: translate3d(var(--cloud-far-x,0px),var(--cloud-far-y,0px),0); }
.clouds-near { bottom: -8%; opacity: .8; background: radial-gradient(ellipse at 32% 40%,rgba(248,250,253,.96),transparent 42%),radial-gradient(ellipse at 80% 40%,rgba(246,250,253,.94),transparent 46%); filter: blur(24px); transform: translate3d(var(--cloud-near-x,0px),var(--cloud-near-y,0px),0); }
.taipei-atmosphere { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 39%,rgba(248,250,253,.84),rgba(248,250,253,.68) 27%,rgba(248,250,253,.14) 67%,transparent),linear-gradient(0deg,var(--paper),transparent 23%); }
.mission-depth-hero .hero-inner { width: min(100%,1100px); margin: auto; text-align: center; transform: translateY(-42px); }
.mission-depth-hero .kicker { color: var(--blue); }
.mission-depth-hero h1 { font-size: clamp(54px,7vw,104px); line-height: 1.01; letter-spacing: -.06em; }
.mission-depth-hero h1 .text-accent { font-weight: inherit; }
.mission-depth-hero .hero-copy { max-width: 760px; margin: 30px auto 0; color: #4c545c; }
.mission-depth-hero .hero-actions { justify-content: center; }
@media (max-width: 760px) {
  .masthead { align-items: flex-start; padding: 132px 20px 68px; }
  .masthead .blog-hero-inner, .masthead .careers-hero-inner { transform: none; }
  .masthead h1 { font-size: clamp(30px,8.8vw,60px); }
  .mission-depth-hero { padding: 126px 22px 68px; justify-content: flex-start; }
  .mission-depth-hero .hero-inner { width: 100%; margin: 0; transform: none; }
  .mission-depth-hero h1 { font-size: clamp(30px,8.6vw,60px); }
  .mission-depth-hero .hero-copy { font-size: 16px; line-height: 1.6; }
  .mission-depth-hero .hero-actions { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .mission-depth-hero .hero-actions .button { width: auto; padding: 0 18px; font-size: 12px; }
  .taipei-scene { background-position: left center; }
  .taipei-atmosphere { background: linear-gradient(180deg,rgba(248,250,253,.62),rgba(248,250,253,.86) 35%,rgba(248,250,253,.14) 70%),linear-gradient(0deg,var(--paper),transparent 21%); }
}
@media (prefers-reduced-motion: reduce) { .taipei-clouds { transform: none; will-change: auto; } }

/* Shared Taipei scene and chapter navigation, September 8. */
.shared-depth-hero { isolation:isolate; position:relative; overflow:hidden; }
.shared-depth-hero::before,.shared-depth-hero::after { display:none; }
.shared-depth-hero .taipei-scene { z-index:0; }
.shared-depth-hero .blog-hero-inner,.shared-depth-hero .careers-hero-inner { position:relative; z-index:2; }
.scroll-cue { position:absolute; bottom:26px; left:50%; translate:-50% 0; z-index:3; display:flex; align-items:center; gap:16px; padding:16px 22px; color:var(--blue); font-family:inherit; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; text-decoration:none; transform-origin:center bottom; }
.scroll-cue span:last-child { font-size:22px; line-height:1; }
.scroll-cue:hover,.scroll-cue:focus-visible { animation:dock-jump .65s cubic-bezier(.2,.65,.3,1); }
.scroll-cue:focus-visible { outline:2px solid var(--blue); outline-offset:3px; border-radius:12px; }
@keyframes dock-jump { 0%,100% {transform:translateY(0) scale(1)} 38% {transform:translateY(-13px) scale(1.1)} 65% {transform:translateY(-3px) scale(1.025)} 82% {transform:translateY(-6px) scale(1.05)} }
#mission,#services,#open-roles,#newsletter,#articles { scroll-margin-top:110px; }
.blog-newsletter-wall { position:relative; padding-bottom:86px; }
.articles-cue { bottom:12px; }
.home-services { display:block; padding:70px 28px; min-height:0; }
.home-services-inner { width:min(1120px,100%); margin:auto; }
.home-services h2 { font-size:clamp(42px,5vw,72px); line-height:1.05; letter-spacing:-.055em; font-weight:500; margin:14px 0 28px; }
.home-service-links a { display:grid; grid-template-columns:1fr 1fr 32px; gap:28px; align-items:center; border-top:1px solid var(--line,#dfe3e7); padding:23px 0; text-decoration:none; color:inherit; transition:color .2s; }
.home-service-links a:last-child {border-bottom:1px solid var(--line,#dfe3e7)}
.home-service-links h3 {font-size:clamp(21px,2.2vw,30px);line-height:1.15;letter-spacing:-.035em;font-weight:500;margin:0}
.home-service-links p {font-size:15px;line-height:1.5;color:var(--muted,#727a7a);margin:0}
.home-service-links a>span {font-size:26px;transition:transform .25s}
.home-service-links a:hover {color:var(--blue)}
.home-service-links a:hover>span {transform:translate(4px,-4px)}
@media(max-width:700px) { .home-services {padding:60px 24px} .home-service-links a {grid-template-columns:1fr 24px;gap:10px;padding:22px 0} .home-service-links p {grid-column:1;grid-row:2} .home-service-links a>span {grid-column:2;grid-row:1/3} .scroll-cue {bottom:14px} .articles-cue {bottom:8px} }
@media(prefers-reduced-motion:reduce) { .scroll-cue:hover,.scroll-cue:focus-visible {animation:none} }
.home-services .kicker {color:var(--blue)}

/* Approved editorial panels and ontology refinements. */
.scroll-cue {color:#68716f;transition:color .3s}
.scroll-cue:hover,.scroll-cue:focus-visible {animation:cue-float 1.25s cubic-bezier(.22,.61,.36,1) both;color:#28332f}
@keyframes cue-float {0%,100%{transform:translateY(0)}35%{transform:translateY(-8px)}65%{transform:translateY(-6px)}}
.home-services {min-height:100svh;display:flex;align-items:center;padding:110px 28px 85px}
.home-services-inner {width:100%;margin:auto}
.home-services h2 {font-size:clamp(48px,6.4vw,92px);margin:18px 0 40px}
.home-service-links h3 {font-size:clamp(24px,2.8vw,38px)}
.home-service-links p {font-size:clamp(16px,1.4vw,19px)}
.home-service-links a {padding:clamp(30px,4.5vh,50px) 0}
.home-services,#capabilities {scroll-margin-top:0}
.prompt-stream .prompt-impact {color:var(--blue);font-weight:600}
.prompt-track {--fall-duration:30s}.prompt-column:nth-child(2) .prompt-track{--fall-duration:34s}.prompt-column:nth-child(3) .prompt-track{--fall-duration:38s}.prompt-column:nth-child(4) .prompt-track{--fall-duration:42s}
.ontology-core {animation:none;box-shadow:0 16px 45px #1d25211f,0 0 0 8px #5388ec09;gap:0}
.promethea-symbol {width:68px;height:68px;object-fit:contain;transform:perspective(400px) rotateX(var(--symbol-x,0deg)) rotateY(var(--symbol-y,0deg)) rotateZ(var(--symbol-z,0deg));transition:transform .35s ease-out;will-change:transform}
.ontology-core span {font-size:8px;opacity:.75}
.ontology-core strong {font-size:18px;color:#80aaff;margin-top:3px}
.orbit-node {animation:none;box-shadow:0 8px 22px #1d252108;border-radius:18px}
.ontology-system::before {opacity:.45}
@media(prefers-reduced-motion:reduce){.scroll-cue:hover,.scroll-cue:focus-visible{animation:none}.promethea-symbol{transform:none;transition:none}}
@media(max-width:650px){.home-services{padding:95px 24px 70px}}

.orbit-node .text-accent {display:inline;color:var(--blue);font:inherit;margin:0}
.node-rag {left:50%;transform:translateX(-50%)}
.node-privacy {left:50%;bottom:0;transform:translateX(-50%)}
.node-voice {left:0;bottom:65px}.node-erp {right:0;bottom:65px}
.node-flow {left:0}.node-crm {right:0}

/* Mission film: same edges as the editorial statement, no cropping. */
.mission-film { width: 100%; margin-top: clamp(40px, 5vw, 76px); border-radius: 20px; overflow: hidden; background: #050b16; box-shadow: 0 24px 70px rgba(21, 37, 61, .12); }
.mission-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #050b16; }
.mission .statement .text-accent { color: var(--blue); }
@media (max-width: 600px) { .mission-film { border-radius: 12px; margin-top: 32px; } }

/* Mission copy uses the same translucent plate as the other page introductions. */
.mission .statement > .mission-copy-plate {
  min-width: 0;
  padding: 24px 26px;
  border: 0;
  border-radius: 22px;
  background: rgba(255,255,255,.24);
  box-shadow: 0 14px 40px rgba(29,37,33,.06);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
}
@media (max-width: 760px) {
  .mission .statement > .mission-copy-plate { padding: 20px; }
}

/* Same photographic composition, sized for the device. */
@media (max-width: 767px) {
 .taipei-scene, .hero-image, .contact-page::before, .simple-page::before, .blog-hero::before, .careers-hero::before, .masthead::before { background-image: url('/assets/hero-taipei-mobile.webp'); }
}