{"id":1040,"date":"2026-08-31T20:01:47","date_gmt":"2026-08-31T20:01:47","guid":{"rendered":"https:\/\/www.micofoy.fi\/?page_id=1040"},"modified":"2026-09-03T14:41:18","modified_gmt":"2026-09-03T14:41:18","slug":"mico-system","status":"publish","type":"page","link":"https:\/\/www.micofoy.fi\/index.php\/mico-system\/","title":{"rendered":"Mico System"},"content":{"rendered":"\r\n<!-- Mico Finland WordPress bundle: system. Generated; edit sources\/config and rebuild. -->\r\n<div class=\"mico-page system-page mico-wp-page mico-wp-page--system\" id=\"mico-system-page\" data-mico-page data-three-url=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.185.0\/build\/three.module.min.js\">\r\n<style data-mico-bundle-styles>\r\n\/* WordPress \/ Divi shell: active only after this bundle finds its own root. *\/\r\nbody.mico-site-active .et-l--header,\r\nbody.mico-site-active #main-header,\r\nbody.mico-site-active footer.et-l--footer,\r\nbody.mico-site-active #main-footer {\r\n  display: none !important;\r\n  height: 0 !important;\r\n  min-height: 0 !important;\r\n  overflow: hidden !important;\r\n  visibility: hidden !important;\r\n  pointer-events: none !important;\r\n}\r\nbody.mico-site-active #page-container,\r\nbody.mico-site-active #main-content {\r\n  width: 100% !important;\r\n  max-width: none !important;\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n  background: #f6f4ee !important;\r\n}\r\nbody.mico-site-active #main-content > .container,\r\nbody.mico-site-active #main-content > .container > #content-area,\r\nbody.mico-site-active #main-content .entry-content,\r\nbody.mico-site-active #main-content article.page {\r\n  width: 100% !important;\r\n  max-width: none !important;\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n}\r\nbody.mico-site-active #main-content .et-l--post,\r\nbody.mico-site-active #main-content .et_builder_inner_content,\r\nbody.mico-site-active #main-content .et_pb_section,\r\nbody.mico-site-active #main-content .et_pb_row,\r\nbody.mico-site-active #main-content .et_pb_column,\r\nbody.mico-site-active #main-content .et_pb_module,\r\nbody.mico-site-active #main-content .et_pb_text_inner,\r\nbody.mico-site-active #main-content .et_pb_code_inner {\r\n  width: 100% !important;\r\n  max-width: none !important;\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n}\r\nbody.mico-site-active #main-content > .container::before { display: none !important; }\r\nbody.mico-site-active .entry-content > p:empty { display: none !important; }\r\nbody.mico-site-active article.page > .entry-title,\r\nbody.mico-site-active article.page > .et_post_meta_wrapper,\r\nbody.mico-site-active .entry-content > .entry-title.main_title {\r\n  display: none !important;\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n}\r\n.mico-wp-page { width: 100%; max-width: none; margin: 0; }\r\n\r\n\/* mico-site.css *\/\r\n:root {\r\n  --mico-navy-950: #0b003d;\r\n  --mico-navy-900: #150a49;\r\n  --mico-navy-800: #21175b;\r\n  --mico-navy-700: #342975;\r\n  --mico-orange: #f5540c;\r\n  --mico-orange-dark: #c64208;\r\n  --mico-paper: #f6f3ec;\r\n  --mico-paper-2: #ece7de;\r\n  --mico-white: #ffffff;\r\n  --mico-ink: #171126;\r\n  --mico-muted: #66606e;\r\n  --mico-line: #dcd6cc;\r\n  --mico-line-dark: rgba(255, 255, 255, .16);\r\n  --mico-green: #b9d7c4;\r\n  --mico-purple: #8479b3;\r\n  --mico-shadow: 0 30px 90px rgba(18, 9, 52, .14);\r\n  --mico-shadow-soft: 0 18px 55px rgba(18, 9, 52, .09);\r\n  --mico-radius-sm: 12px;\r\n  --mico-radius-md: 22px;\r\n  --mico-radius-lg: 34px;\r\n  --mico-ease: cubic-bezier(.2, .8, .2, 1);\r\n  --mico-shell: min(calc(100% - 48px), 1320px);\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nhtml {\r\n  scroll-behavior: smooth;\r\n  color-scheme: light;\r\n}\r\n\r\nbody {\r\n  margin: 0;\r\n  overflow-x: hidden;\r\n  color: var(--mico-ink);\r\n  background: var(--mico-paper);\r\n  font-family: Manrope, Inter, \"Segoe UI\", Arial, sans-serif;\r\n  font-size: 16px;\r\n  line-height: 1.6;\r\n  -webkit-font-smoothing: antialiased;\r\n  text-rendering: optimizeLegibility;\r\n}\r\n\r\nbody.is-menu-open {\r\n  overflow: hidden;\r\n}\r\n\r\nimg,\r\nsvg {\r\n  display: block;\r\n  max-width: 100%;\r\n}\r\n\r\nfigure {\r\n  margin: 0;\r\n}\r\n\r\na {\r\n  color: inherit;\r\n  text-decoration: none;\r\n}\r\n\r\nbutton,\r\ninput,\r\nselect,\r\ntextarea {\r\n  font: inherit;\r\n}\r\n\r\nbutton,\r\na {\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n:focus-visible {\r\n  outline: 3px solid #ff8a55;\r\n  outline-offset: 4px;\r\n}\r\n\r\n.mico-page {\r\n  min-height: 100vh;\r\n  overflow: clip;\r\n}\r\n\r\n.sr-only {\r\n  position: absolute !important;\r\n  width: 1px !important;\r\n  height: 1px !important;\r\n  padding: 0 !important;\r\n  margin: -1px !important;\r\n  overflow: hidden !important;\r\n  clip: rect(0, 0, 0, 0) !important;\r\n  white-space: nowrap !important;\r\n  border: 0 !important;\r\n}\r\n\r\n.mico-shell {\r\n  width: var(--mico-shell);\r\n  margin-inline: auto;\r\n}\r\n\r\n.mico-shell--narrow {\r\n  width: min(calc(100% - 48px), 1060px);\r\n  margin-inline: auto;\r\n}\r\n\r\n.mico-skip {\r\n  position: fixed;\r\n  z-index: 1000;\r\n  top: 12px;\r\n  left: 12px;\r\n  padding: 12px 16px;\r\n  border-radius: 10px;\r\n  color: var(--mico-white);\r\n  background: var(--mico-orange);\r\n  font-weight: 800;\r\n  transform: translateY(-180%);\r\n  transition: transform .2s ease;\r\n}\r\n\r\n.mico-skip:focus {\r\n  transform: translateY(0);\r\n}\r\n\r\n.mico-prototype-bar {\r\n  position: relative;\r\n  z-index: 40;\r\n  padding: 9px 20px;\r\n  color: rgba(255,255,255,.78);\r\n  background: #09012f;\r\n  font-size: 12px;\r\n  text-align: center;\r\n  letter-spacing: .02em;\r\n}\r\n\r\n.mico-prototype-bar strong {\r\n  color: #ff8f5b;\r\n}\r\n\r\n.mico-nav {\r\n  position: sticky;\r\n  z-index: 30;\r\n  top: 0;\r\n  color: var(--mico-white);\r\n  border-bottom: 1px solid rgba(255, 255, 255, .12);\r\n  background: rgba(11, 0, 61, .96);\r\n  box-shadow: 0 12px 38px rgba(8, 0, 34, .12);\r\n  backdrop-filter: blur(18px) saturate(150%);\r\n  -webkit-backdrop-filter: blur(18px) saturate(150%);\r\n}\r\n\r\nbody.admin-bar .mico-nav { top: 32px; }\r\n\r\n.mico-nav-inner {\r\n  display: grid;\r\n  grid-template-columns: auto 1fr auto;\r\n  align-items: center;\r\n  min-height: 88px;\r\n  gap: 30px;\r\n}\r\n\r\n.mico-logo {\r\n  position: relative;\r\n  z-index: 3;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  width: 116px;\r\n  height: 58px;\r\n}\r\n\r\n.mico-logo img {\r\n  width: 100%;\r\n  height: auto;\r\n  border-radius: 0;\r\n  object-fit: contain;\r\n}\r\n\r\n.mico-nav-links {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: clamp(18px, 2vw, 34px);\r\n}\r\n\r\n.mico-nav-links a {\r\n  position: relative;\r\n  padding-block: 12px;\r\n  color: rgba(255,255,255,.8);\r\n  font-size: 13px;\r\n  font-weight: 750;\r\n  white-space: nowrap;\r\n}\r\n\r\n.mico-nav-links a::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  right: 0;\r\n  bottom: 4px;\r\n  left: 0;\r\n  height: 2px;\r\n  border-radius: 4px;\r\n  background: var(--mico-orange);\r\n  transform: scaleX(0);\r\n  transform-origin: right;\r\n  transition: transform .25s var(--mico-ease);\r\n}\r\n\r\n.mico-nav-links a:hover::after,\r\n.mico-nav-links a[aria-current=\"page\"]::after {\r\n  transform: scaleX(1);\r\n  transform-origin: left;\r\n}\r\n\r\n.mico-nav-links a:hover,\r\n.mico-nav-links a:focus-visible,\r\n.mico-nav-links a[aria-current=\"page\"] {\r\n  color: var(--mico-white);\r\n}\r\n\r\n\/* The contact CTA moves into the navigation itself when the separate\r\n   desktop button is hidden, so it remains directly reachable on tablets\r\n   and phones. *\/\r\n.mico-nav-contact-link {\r\n  display: none;\r\n}\r\n\r\n.mico-nav-actions {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n}\r\n\r\n.mico-button {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: 50px;\r\n  gap: 12px;\r\n  padding: 14px 20px;\r\n  border: 1px solid var(--mico-orange);\r\n  border-radius: 999px;\r\n  color: var(--mico-white);\r\n  background: var(--mico-orange);\r\n  box-shadow: 0 12px 28px rgba(245, 84, 12, .2);\r\n  font-size: 14px;\r\n  font-weight: 850;\r\n  line-height: 1.15;\r\n  cursor: pointer;\r\n  transition: transform .2s var(--mico-ease), background .2s ease, border-color .2s ease, box-shadow .2s ease;\r\n}\r\n\r\n.mico-button:hover {\r\n  background: var(--mico-orange-dark);\r\n  border-color: var(--mico-orange-dark);\r\n  box-shadow: 0 17px 35px rgba(198, 66, 8, .25);\r\n  transform: translateY(-2px);\r\n}\r\n\r\n.mico-button--ghost {\r\n  color: var(--mico-navy-950);\r\n  background: transparent;\r\n  border-color: rgba(11, 0, 61, .25);\r\n  box-shadow: none;\r\n}\r\n\r\n.mico-button--ghost:hover {\r\n  color: var(--mico-white);\r\n  background: var(--mico-navy-950);\r\n  border-color: var(--mico-navy-950);\r\n}\r\n\r\n.mico-button--light {\r\n  color: var(--mico-navy-950);\r\n  background: var(--mico-white);\r\n  border-color: var(--mico-white);\r\n  box-shadow: 0 16px 35px rgba(0,0,0,.16);\r\n}\r\n\r\n.mico-button--light:hover {\r\n  color: var(--mico-white);\r\n  background: var(--mico-orange);\r\n  border-color: var(--mico-orange);\r\n}\r\n\r\n.mico-menu-toggle {\r\n  display: none;\r\n  width: 50px;\r\n  height: 50px;\r\n  padding: 0;\r\n  border: 1px solid rgba(255,255,255,.3);\r\n  border-radius: 50%;\r\n  color: var(--mico-white);\r\n  background: rgba(255,255,255,.06);\r\n  cursor: pointer;\r\n}\r\n\r\n.mico-menu-toggle span,\r\n.mico-menu-toggle span::before,\r\n.mico-menu-toggle span::after {\r\n  display: block;\r\n  width: 20px;\r\n  height: 2px;\r\n  margin-inline: auto;\r\n  border-radius: 3px;\r\n  background: currentColor;\r\n  transition: transform .25s ease, opacity .2s ease;\r\n}\r\n\r\n.mico-menu-toggle span {\r\n  position: relative;\r\n}\r\n\r\n.mico-menu-toggle span::before,\r\n.mico-menu-toggle span::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  left: 0;\r\n}\r\n\r\n.mico-menu-toggle span::before { top: -7px; }\r\n.mico-menu-toggle span::after { top: 7px; }\r\n\r\n.mico-menu-toggle[aria-expanded=\"true\"] span { background: transparent; }\r\n.mico-menu-toggle[aria-expanded=\"true\"] span::before { top: 0; transform: rotate(45deg); }\r\n.mico-menu-toggle[aria-expanded=\"true\"] span::after { top: 0; transform: rotate(-45deg); }\r\n\r\n.mico-kicker {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  margin: 0 0 20px;\r\n  color: var(--mico-orange-dark);\r\n  font-size: 12px;\r\n  font-weight: 900;\r\n  line-height: 1.25;\r\n  letter-spacing: .14em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.mico-kicker::before {\r\n  content: \"\";\r\n  width: 30px;\r\n  height: 3px;\r\n  border-radius: 3px;\r\n  background: currentColor;\r\n}\r\n\r\n.mico-kicker--light {\r\n  color: #ff8e59;\r\n}\r\n\r\n.mico-title {\r\n  max-width: 900px;\r\n  margin: 0 0 24px;\r\n  color: var(--mico-navy-950);\r\n  font-size: clamp(2.35rem, 4.8vw, 5.3rem);\r\n  font-weight: 790;\r\n  line-height: .98;\r\n  letter-spacing: -.05em;\r\n  text-wrap: balance;\r\n}\r\n\r\n.mico-title--light {\r\n  color: var(--mico-white);\r\n}\r\n\r\n.mico-lead {\r\n  max-width: 760px;\r\n  margin: 0;\r\n  color: var(--mico-muted);\r\n  font-size: clamp(1.1rem, 1.5vw, 1.32rem);\r\n  line-height: 1.65;\r\n}\r\n\r\n.mico-section {\r\n  position: relative;\r\n  padding-block: clamp(88px, 10vw, 152px);\r\n}\r\n\r\n.mico-section-head {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);\r\n  align-items: end;\r\n  gap: clamp(30px, 6vw, 100px);\r\n  margin-bottom: clamp(50px, 7vw, 90px);\r\n}\r\n\r\n.mico-section-note {\r\n  max-width: 410px;\r\n  margin: 0 0 8px;\r\n  padding-left: 20px;\r\n  border-left: 3px solid var(--mico-orange);\r\n  color: var(--mico-muted);\r\n}\r\n\r\n.company-hero {\r\n  position: relative;\r\n  isolation: isolate;\r\n  min-height: min(820px, calc(100svh - 112px));\r\n  display: flex;\r\n  align-items: center;\r\n  overflow: hidden;\r\n  color: var(--mico-white);\r\n  background:\r\n    radial-gradient(circle at 72% 40%, rgba(84, 65, 160, .38), transparent 32%),\r\n    linear-gradient(135deg, #08002f 0%, #130746 52%, #21165d 100%);\r\n}\r\n\r\n.company-hero::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  z-index: -1;\r\n  inset: 0;\r\n  opacity: .22;\r\n  background-image:\r\n    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),\r\n    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);\r\n  background-size: 80px 80px;\r\n  mask-image: linear-gradient(to right, transparent 5%, #000 45%, #000 100%);\r\n}\r\n\r\n.company-hero::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  z-index: -1;\r\n  width: 520px;\r\n  height: 520px;\r\n  right: -160px;\r\n  bottom: -260px;\r\n  border: 1px solid rgba(255,255,255,.18);\r\n  border-radius: 50%;\r\n  box-shadow: 0 0 0 80px rgba(255,255,255,.025), 0 0 0 160px rgba(255,255,255,.018);\r\n}\r\n\r\n.company-hero__inner {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);\r\n  align-items: center;\r\n  gap: clamp(50px, 7vw, 110px);\r\n  width: 100%;\r\n  padding-block: clamp(80px, 10vw, 138px);\r\n}\r\n\r\n.company-hero__inner > * {\r\n  min-width: 0;\r\n}\r\n\r\n.company-hero h1 {\r\n  max-width: 770px;\r\n  margin: 0 0 28px;\r\n  color: var(--mico-white);\r\n  font-size: clamp(3.25rem, 6.1vw, 7.4rem);\r\n  font-weight: 780;\r\n  line-height: .91;\r\n  letter-spacing: -.058em;\r\n  hyphens: auto;\r\n  overflow-wrap: anywhere;\r\n  text-wrap: balance;\r\n}\r\n\r\n.company-hero__lead {\r\n  max-width: 680px;\r\n  margin: 0 0 38px;\r\n  color: rgba(255,255,255,.77);\r\n  font-size: clamp(1.1rem, 1.5vw, 1.34rem);\r\n}\r\n\r\n.company-hero__actions {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 14px;\r\n}\r\n\r\n.portrait-system {\r\n  position: relative;\r\n  min-height: 520px;\r\n  perspective: 1000px;\r\n}\r\n\r\n.portrait-panel {\r\n  position: absolute;\r\n  overflow: hidden;\r\n  border: 1px solid rgba(255,255,255,.18);\r\n  border-radius: 28px;\r\n  background: rgba(255,255,255,.06);\r\n  box-shadow: 0 35px 80px rgba(0,0,0,.28);\r\n  transform: translateZ(0);\r\n}\r\n\r\n.portrait-panel img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  filter: saturate(.82) contrast(1.02);\r\n}\r\n\r\n.portrait-panel--one {\r\n  z-index: 3;\r\n  width: 52%;\r\n  height: 74%;\r\n  left: 5%;\r\n  top: 14%;\r\n  transform: rotate(-3deg);\r\n}\r\n\r\n.portrait-panel--two {\r\n  z-index: 2;\r\n  width: 48%;\r\n  height: 60%;\r\n  right: 1%;\r\n  top: 2%;\r\n  transform: rotate(4deg);\r\n}\r\n\r\n.portrait-panel--three {\r\n  z-index: 4;\r\n  width: 42%;\r\n  height: 50%;\r\n  right: 7%;\r\n  bottom: 1%;\r\n  transform: rotate(2deg);\r\n}\r\n\r\n.portrait-label {\r\n  position: absolute;\r\n  z-index: 5;\r\n  right: 0;\r\n  top: 39%;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 12px 16px;\r\n  border: 1px solid rgba(255,255,255,.25);\r\n  border-radius: 999px;\r\n  color: rgba(255,255,255,.88);\r\n  background: rgba(9, 1, 47, .72);\r\n  backdrop-filter: blur(12px);\r\n  font-size: 12px;\r\n  font-weight: 800;\r\n}\r\n\r\n.portrait-label::before {\r\n  content: \"\";\r\n  width: 8px;\r\n  height: 8px;\r\n  border-radius: 50%;\r\n  background: var(--mico-orange);\r\n  box-shadow: 0 0 0 7px rgba(245,84,12,.16);\r\n}\r\n\r\n.company-intro {\r\n  background: var(--mico-white);\r\n}\r\n\r\n.company-intro__grid {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);\r\n  align-items: start;\r\n  gap: clamp(48px, 8vw, 125px);\r\n}\r\n\r\n.company-intro__copy p {\r\n  margin: 0 0 22px;\r\n  color: #514b59;\r\n  font-size: 1.06rem;\r\n}\r\n\r\n.company-intro__link {\r\n  margin-top: 4px;\r\n}\r\n\r\n.evidence-stack {\r\n  display: grid;\r\n  gap: 14px;\r\n}\r\n\r\n.evidence-card {\r\n  display: grid;\r\n  grid-template-columns: auto 1fr;\r\n  gap: 18px;\r\n  padding: 24px;\r\n  border: 1px solid var(--mico-line);\r\n  border-radius: var(--mico-radius-md);\r\n  background: var(--mico-paper);\r\n}\r\n\r\n.evidence-card__number {\r\n  display: grid;\r\n  place-items: center;\r\n  width: 42px;\r\n  height: 42px;\r\n  border-radius: 50%;\r\n  color: var(--mico-white);\r\n  background: var(--mico-navy-950);\r\n  font-size: 12px;\r\n  font-weight: 900;\r\n}\r\n\r\n.evidence-card strong {\r\n  display: block;\r\n  margin-bottom: 5px;\r\n  color: var(--mico-navy-950);\r\n  font-size: 1.02rem;\r\n}\r\n\r\n.evidence-card span {\r\n  color: var(--mico-muted);\r\n  font-size: .93rem;\r\n}\r\n\r\n.expertise {\r\n  color: var(--mico-white);\r\n  background: var(--mico-navy-950);\r\n}\r\n\r\n.expertise .mico-lead,\r\n.expertise .mico-section-note {\r\n  color: rgba(255,255,255,.68);\r\n}\r\n\r\n.expertise .mico-section-note {\r\n  border-color: #ff8e59;\r\n}\r\n\r\n.expertise-board {\r\n  display: grid;\r\n  grid-template-columns: minmax(430px, .95fr) minmax(0, 1.05fr);\r\n  align-items: stretch;\r\n  gap: clamp(28px, 5vw, 72px);\r\n}\r\n\r\n.expertise-network {\r\n  position: relative;\r\n  min-height: 580px;\r\n  overflow: hidden;\r\n  border: 1px solid rgba(255,255,255,.14);\r\n  border-radius: var(--mico-radius-lg);\r\n  background:\r\n    radial-gradient(circle at 50% 47%, rgba(245,84,12,.2), transparent 31%),\r\n    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025));\r\n  background-position: 48% 46%, center;\r\n  background-size: 118% 118%, 100% 100%;\r\n}\r\n\r\n.expertise-network::before,\r\n.expertise-network::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 50% auto auto 50%;\r\n  border: 1px solid rgba(255,255,255,.14);\r\n  border-radius: 50%;\r\n  pointer-events: none;\r\n  transform: translate(-50%, -50%);\r\n  will-change: transform, opacity;\r\n}\r\n\r\n.expertise-network::before {\r\n  width: 310px;\r\n  height: 310px;\r\n  border-color: rgba(255,255,255,.18);\r\n  box-shadow: 0 0 36px rgba(117,216,255,.07), inset 0 0 28px rgba(117,92,255,.04);\r\n  animation: expertise-orbit-breathe 9.5s ease-in-out infinite;\r\n}\r\n\r\n.expertise-network::after {\r\n  width: 470px;\r\n  height: 470px;\r\n  border-style: dashed;\r\n  border-color: rgba(255,255,255,.12);\r\n  border-top-color: rgba(117,216,255,.42);\r\n  border-right-color: rgba(117,92,255,.28);\r\n  border-bottom-color: rgba(245,84,12,.38);\r\n  filter: drop-shadow(0 0 10px rgba(117,216,255,.12));\r\n  animation: orbit-spin 52s linear infinite;\r\n}\r\n\r\n.expertise-core {\r\n  position: absolute;\r\n  z-index: 3;\r\n  inset: 50% auto auto 50%;\r\n  display: grid;\r\n  place-items: center;\r\n  width: 142px;\r\n  height: 142px;\r\n  border: 1px solid rgba(255,255,255,.22);\r\n  border-radius: 50%;\r\n  color: var(--mico-white);\r\n  background: radial-gradient(circle at 35% 30%, #ff7d43, var(--mico-orange) 55%, #b63300 100%);\r\n  box-shadow: 0 0 0 22px rgba(245,84,12,.08), 0 0 42px rgba(245,84,12,.3), 0 25px 55px rgba(0,0,0,.28);\r\n  transform: translate(-50%, -50%);\r\n  font-size: 1.25rem;\r\n  font-weight: 900;\r\n  isolation: isolate;\r\n  letter-spacing: -.03em;\r\n  will-change: transform;\r\n  animation: expertise-core-float 6.8s ease-in-out infinite;\r\n}\r\n\r\n.expertise-core::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  z-index: -1;\r\n  inset: -38px;\r\n  border-radius: 50%;\r\n  pointer-events: none;\r\n  background: radial-gradient(circle, rgba(245,84,12,.3) 0%, rgba(245,84,12,.11) 42%, transparent 70%);\r\n  filter: blur(12px);\r\n  animation: expertise-core-aura 4.8s ease-in-out infinite;\r\n}\r\n\r\n.expertise-core::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 18px;\r\n  right: 25px;\r\n  width: 52px;\r\n  height: 27px;\r\n  border-radius: 50%;\r\n  pointer-events: none;\r\n  background: radial-gradient(ellipse, rgba(255,255,255,.42), transparent 72%);\r\n  filter: blur(4px);\r\n  opacity: .74;\r\n  transform: rotate(-24deg);\r\n}\r\n\r\n.expertise-node {\r\n  position: absolute;\r\n  z-index: 4;\r\n  width: 148px;\r\n  min-height: 88px;\r\n  padding: 16px;\r\n  border: 1px solid rgba(255,255,255,.17);\r\n  border-radius: 18px;\r\n  color: rgba(255,255,255,.75);\r\n  background: rgba(21,10,73,.85);\r\n  box-shadow: 0 20px 42px rgba(0,0,0,.2);\r\n  backdrop-filter: blur(10px);\r\n  text-align: left;\r\n  cursor: pointer;\r\n  transition: border-color .25s ease, background .25s ease, transform .25s var(--mico-ease), color .25s ease;\r\n}\r\n\r\n.expertise-node strong,\r\n.expertise-node span {\r\n  display: block;\r\n}\r\n\r\n.expertise-node strong {\r\n  margin-bottom: 5px;\r\n  color: var(--mico-white);\r\n  font-size: .98rem;\r\n}\r\n\r\n.expertise-node span {\r\n  font-size: .78rem;\r\n  line-height: 1.4;\r\n}\r\n\r\n.expertise-node:hover,\r\n.expertise-node[aria-pressed=\"true\"] {\r\n  color: var(--mico-white);\r\n  border-color: #ff8e59;\r\n  background: rgba(245,84,12,.2);\r\n  transform: translateY(-4px);\r\n}\r\n\r\n.expertise-node--all { left: calc(50% - 74px); bottom: 28px; }\r\n.expertise-node--operations { left: 28px; top: 52px; }\r\n.expertise-node--business { right: 24px; top: 58px; }\r\n.expertise-node--technology { right: 42px; bottom: 82px; }\r\n\r\n.expertise-content {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  min-width: 0;\r\n}\r\n\r\n.expertise-content__eyebrow {\r\n  margin: 0 0 18px;\r\n  color: #ff8e59;\r\n  font-size: 12px;\r\n  font-weight: 900;\r\n  letter-spacing: .13em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.expertise-content h3 {\r\n  max-width: 620px;\r\n  margin: 0 0 20px;\r\n  font-size: clamp(2rem, 3.5vw, 4rem);\r\n  line-height: 1.02;\r\n  letter-spacing: -.045em;\r\n}\r\n\r\n.expertise-content > p {\r\n  max-width: 610px;\r\n  margin: 0 0 35px;\r\n  color: rgba(255,255,255,.66);\r\n  font-size: 1.04rem;\r\n}\r\n\r\n.expertise-people {\r\n  display: grid;\r\n  gap: 12px;\r\n}\r\n\r\n.expertise-person {\r\n  display: grid;\r\n  grid-template-columns: 48px 1fr auto;\r\n  align-items: center;\r\n  gap: 14px;\r\n  padding: 13px 15px;\r\n  border: 1px solid rgba(255,255,255,.13);\r\n  border-radius: 16px;\r\n  background: rgba(255,255,255,.055);\r\n  transition: opacity .2s ease, transform .25s var(--mico-ease), border-color .2s ease;\r\n}\r\n\r\n.expertise-person.is-muted {\r\n  opacity: .27;\r\n  transform: scale(.985);\r\n}\r\n\r\n.expertise-person.is-highlighted {\r\n  border-color: rgba(255,142,89,.65);\r\n}\r\n\r\n.expertise-person img {\r\n  width: 48px;\r\n  height: 48px;\r\n  border-radius: 50%;\r\n  object-fit: cover;\r\n}\r\n\r\n.expertise-person strong,\r\n.expertise-person span {\r\n  display: block;\r\n}\r\n\r\n.expertise-person strong { font-size: .93rem; }\r\n.expertise-person span { color: rgba(255,255,255,.56); font-size: .78rem; }\r\n.expertise-person em { color: #ff9a6d; font-size: .74rem; font-style: normal; font-weight: 800; }\r\n\r\n@keyframes orbit-spin {\r\n  from { transform: translate(-50%, -50%) rotate(0deg); }\r\n  to { transform: translate(-50%, -50%) rotate(360deg); }\r\n}\r\n\r\n@keyframes expertise-orbit-breathe {\r\n  0%, 100% { opacity: .58; transform: translate(-50%, -50%) scale(.965); }\r\n  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.035); }\r\n}\r\n\r\n@keyframes expertise-core-float {\r\n  0%, 100% { transform: translate(-50%, -50%) translateY(0) scale(1); }\r\n  50% { transform: translate(-50%, -50%) translateY(-10px) scale(1.015); }\r\n}\r\n\r\n@keyframes expertise-core-aura {\r\n  0%, 100% { opacity: .52; transform: scale(.92); }\r\n  50% { opacity: .95; transform: scale(1.12); }\r\n}\r\n\r\n.team {\r\n  background: var(--mico-paper);\r\n}\r\n\r\n.team-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, minmax(0, 1fr));\r\n  gap: 22px;\r\n}\r\n\r\n.team-card {\r\n  position: relative;\r\n  overflow: hidden;\r\n  border: 1px solid var(--mico-line);\r\n  border-radius: var(--mico-radius-lg);\r\n  background: var(--mico-white);\r\n  box-shadow: var(--mico-shadow-soft);\r\n  transition: transform .3s var(--mico-ease), box-shadow .3s ease;\r\n}\r\n\r\n.team-card:hover {\r\n  transform: translateY(-7px);\r\n  box-shadow: var(--mico-shadow);\r\n}\r\n\r\n.team-card__media {\r\n  position: relative;\r\n  aspect-ratio: 4 \/ 4.5;\r\n  overflow: hidden;\r\n  background: #e7e2da;\r\n}\r\n\r\n.team-card__media::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: auto 0 0;\r\n  height: 35%;\r\n  background: linear-gradient(transparent, rgba(11,0,61,.38));\r\n}\r\n\r\n.team-card__media img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  transition: transform .65s var(--mico-ease), filter .4s ease;\r\n}\r\n\r\n.team-card:hover .team-card__media img {\r\n  transform: scale(1.035);\r\n}\r\n\r\n.team-card__badge {\r\n  position: absolute;\r\n  z-index: 2;\r\n  left: 20px;\r\n  bottom: 18px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 9px 12px;\r\n  border: 1px solid rgba(255,255,255,.24);\r\n  border-radius: 999px;\r\n  color: var(--mico-white);\r\n  background: rgba(11,0,61,.72);\r\n  backdrop-filter: blur(10px);\r\n  font-size: 11px;\r\n  font-weight: 850;\r\n}\r\n\r\n.team-card__body {\r\n  padding: 28px;\r\n}\r\n\r\n.team-card h3 {\r\n  margin: 0 0 4px;\r\n  color: var(--mico-navy-950);\r\n  font-size: clamp(1.45rem, 2vw, 2rem);\r\n  line-height: 1.1;\r\n  letter-spacing: -.035em;\r\n}\r\n\r\n.team-card__role {\r\n  min-height: 48px;\r\n  margin: 0 0 22px;\r\n  color: var(--mico-orange-dark);\r\n  font-size: .9rem;\r\n  font-weight: 850;\r\n}\r\n\r\n.team-card__summary {\r\n  min-height: 104px;\r\n  margin: 0 0 24px;\r\n  color: var(--mico-muted);\r\n  font-size: .94rem;\r\n}\r\n\r\n.team-card details {\r\n  padding-top: 17px;\r\n  border-top: 1px solid var(--mico-line);\r\n}\r\n\r\n.team-card summary {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 14px;\r\n  color: var(--mico-navy-950);\r\n  font-size: .88rem;\r\n  font-weight: 850;\r\n  cursor: pointer;\r\n  list-style: none;\r\n}\r\n\r\n.team-card summary::-webkit-details-marker { display: none; }\r\n\r\n.team-card summary::after {\r\n  content: \"+\";\r\n  display: grid;\r\n  place-items: center;\r\n  width: 30px;\r\n  height: 30px;\r\n  flex: 0 0 30px;\r\n  border-radius: 50%;\r\n  color: var(--mico-white);\r\n  background: var(--mico-navy-950);\r\n  font-size: 18px;\r\n  font-weight: 500;\r\n}\r\n\r\n.team-card details[open] summary::after { content: \"\u2212\"; }\r\n\r\n.team-card__details {\r\n  padding-top: 20px;\r\n  color: var(--mico-muted);\r\n  font-size: .88rem;\r\n}\r\n\r\n.team-card__details h4 {\r\n  margin: 16px 0 8px;\r\n  color: var(--mico-navy-950);\r\n  font-size: .78rem;\r\n  letter-spacing: .08em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.team-card__details ul {\r\n  margin: 0;\r\n  padding-left: 18px;\r\n}\r\n\r\n.team-card__details li + li { margin-top: 7px; }\r\n\r\n.team-card__email {\r\n  display: inline-flex;\r\n  margin-top: 22px;\r\n  color: var(--mico-navy-950);\r\n  font-weight: 850;\r\n  text-decoration: underline;\r\n  text-decoration-color: rgba(245,84,12,.55);\r\n  text-underline-offset: 4px;\r\n}\r\n\r\n.verification-note {\r\n  display: grid;\r\n  grid-template-columns: auto 1fr;\r\n  align-items: start;\r\n  gap: 14px;\r\n  margin-top: 32px;\r\n  padding: 20px 22px;\r\n  border: 1px solid #e6c59b;\r\n  border-radius: 16px;\r\n  color: #654415;\r\n  background: #fff5e5;\r\n  font-size: .88rem;\r\n}\r\n\r\n.verification-note strong {\r\n  display: grid;\r\n  place-items: center;\r\n  width: 26px;\r\n  height: 26px;\r\n  border-radius: 50%;\r\n  color: #fff;\r\n  background: #a65b00;\r\n}\r\n\r\n.company-roadmap {\r\n  color: var(--mico-white);\r\n  background: linear-gradient(145deg, #130846, #090031);\r\n}\r\n\r\n.roadmap-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, minmax(0, 1fr));\r\n  gap: 1px;\r\n  overflow: hidden;\r\n  border: 1px solid rgba(255,255,255,.14);\r\n  border-radius: var(--mico-radius-lg);\r\n  background: rgba(255,255,255,.14);\r\n}\r\n\r\n.roadmap-card {\r\n  position: relative;\r\n  min-height: 390px;\r\n  padding: clamp(28px, 4vw, 48px);\r\n  background: rgba(11,0,61,.84);\r\n}\r\n\r\n.roadmap-card::before {\r\n  content: \"\";\r\n  display: block;\r\n  width: 12px;\r\n  height: 12px;\r\n  margin-bottom: 28px;\r\n  border-radius: 50%;\r\n  background: var(--status-color);\r\n  box-shadow: 0 0 0 10px color-mix(in srgb, var(--status-color) 16%, transparent);\r\n}\r\n\r\n.roadmap-card--now { --status-color: #ff7a3d; }\r\n.roadmap-card--development { --status-color: #9b90ce; }\r\n.roadmap-card--future { --status-color: #cfcbdd; }\r\n\r\n.roadmap-card__status {\r\n  display: block;\r\n  margin-bottom: 15px;\r\n  color: var(--status-color);\r\n  font-size: 11px;\r\n  font-weight: 900;\r\n  letter-spacing: .12em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.roadmap-card h3 {\r\n  margin: 0 0 17px;\r\n  font-size: clamp(1.45rem, 2vw, 2.25rem);\r\n  line-height: 1.05;\r\n  letter-spacing: -.04em;\r\n}\r\n\r\n.roadmap-card p {\r\n  margin: 0 0 20px;\r\n  color: rgba(255,255,255,.66);\r\n}\r\n\r\n.roadmap-card ul {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n}\r\n\r\n.roadmap-card li {\r\n  position: relative;\r\n  padding: 10px 0 10px 22px;\r\n  border-top: 1px solid rgba(255,255,255,.1);\r\n  color: rgba(255,255,255,.78);\r\n  font-size: .9rem;\r\n}\r\n\r\n.roadmap-card li::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  left: 2px;\r\n  top: 18px;\r\n  width: 7px;\r\n  height: 7px;\r\n  border-radius: 50%;\r\n  background: var(--status-color);\r\n}\r\n\r\n.working-model {\r\n  background: var(--mico-white);\r\n}\r\n\r\n.working-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, minmax(0, 1fr));\r\n  gap: 16px;\r\n}\r\n\r\n.working-card {\r\n  min-height: 280px;\r\n  padding: 28px;\r\n  border: 1px solid var(--mico-line);\r\n  border-radius: 24px;\r\n  background: var(--mico-paper);\r\n}\r\n\r\n.working-card__number {\r\n  display: block;\r\n  margin-bottom: 48px;\r\n  color: var(--mico-orange-dark);\r\n  font-size: 12px;\r\n  font-weight: 900;\r\n  letter-spacing: .12em;\r\n}\r\n\r\n.working-card h3 {\r\n  margin: 0 0 12px;\r\n  color: var(--mico-navy-950);\r\n  font-size: 1.3rem;\r\n  line-height: 1.12;\r\n  letter-spacing: -.03em;\r\n}\r\n\r\n.working-card p {\r\n  margin: 0;\r\n  color: var(--mico-muted);\r\n  font-size: .91rem;\r\n}\r\n\r\n.company-contact {\r\n  position: relative;\r\n  overflow: hidden;\r\n  color: var(--mico-white);\r\n  background: var(--mico-orange);\r\n}\r\n\r\n.company-contact::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  width: 620px;\r\n  height: 620px;\r\n  right: -220px;\r\n  top: -280px;\r\n  border: 1px solid rgba(255,255,255,.22);\r\n  border-radius: 50%;\r\n  box-shadow: 0 0 0 85px rgba(255,255,255,.045), 0 0 0 170px rgba(255,255,255,.035);\r\n}\r\n\r\n.company-contact__grid {\r\n  position: relative;\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);\r\n  align-items: start;\r\n  gap: clamp(50px, 8vw, 120px);\r\n}\r\n\r\n.company-contact h2 {\r\n  max-width: 730px;\r\n  margin: 0 0 24px;\r\n  font-size: clamp(2.6rem, 5vw, 5.6rem);\r\n  line-height: .95;\r\n  letter-spacing: -.052em;\r\n}\r\n\r\n.company-contact p {\r\n  max-width: 660px;\r\n  margin: 0 0 30px;\r\n  color: rgba(255,255,255,.8);\r\n  font-size: 1.07rem;\r\n}\r\n\r\n.company-contact-details {\r\n  display: grid;\r\n  grid-template-columns: repeat(2, minmax(0, 1fr));\r\n  gap: 12px;\r\n  max-width: 680px;\r\n  margin: 0 0 26px;\r\n}\r\n\r\n.company-contact-detail {\r\n  min-width: 0;\r\n  padding: 18px;\r\n  border: 1px solid rgba(255,255,255,.28);\r\n  border-radius: 16px;\r\n  background: rgba(255,255,255,.1);\r\n  backdrop-filter: blur(8px);\r\n}\r\n\r\n.company-contact-detail span,\r\n.company-contact-detail strong,\r\n.company-contact-detail a,\r\n.company-contact-detail small {\r\n  display: block;\r\n}\r\n\r\n.company-contact-detail span {\r\n  margin-bottom: 7px;\r\n  color: rgba(255,255,255,.67);\r\n  font-size: .7rem;\r\n  font-weight: 850;\r\n  letter-spacing: .08em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.company-contact-detail strong {\r\n  margin-bottom: 5px;\r\n  color: var(--mico-white);\r\n  font-size: .98rem;\r\n}\r\n\r\n.company-contact-detail a,\r\n.company-contact-detail small {\r\n  color: rgba(255,255,255,.8);\r\n  font-size: .78rem;\r\n  line-height: 1.45;\r\n}\r\n\r\n.company-contact-detail a {\r\n  text-decoration: underline;\r\n  text-decoration-color: rgba(255,255,255,.38);\r\n  text-underline-offset: 3px;\r\n}\r\n\r\n.company-contact-detail a:hover {\r\n  color: var(--mico-white);\r\n  text-decoration-color: currentColor;\r\n}\r\n\r\n.cf7-prototype {\r\n  padding: 30px;\r\n  border: 1px solid rgba(255,255,255,.26);\r\n  border-radius: var(--mico-radius-lg);\r\n  background: rgba(11,0,61,.94);\r\n  box-shadow: 0 32px 72px rgba(88,24,0,.22);\r\n}\r\n\r\n.cf7-prototype__label {\r\n  display: inline-block;\r\n  margin-bottom: 14px;\r\n  color: #ff9b6e;\r\n  font-size: 11px;\r\n  font-weight: 900;\r\n  letter-spacing: .12em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.cf7-prototype h3 {\r\n  margin: 0 0 10px;\r\n  font-size: 1.45rem;\r\n  letter-spacing: -.03em;\r\n}\r\n\r\n.cf7-prototype p {\r\n  margin: 0 0 20px;\r\n  color: rgba(255,255,255,.63);\r\n  font-size: .88rem;\r\n}\r\n\r\n.cf7-fields {\r\n  display: grid;\r\n  gap: 10px;\r\n}\r\n\r\n.cf7-field {\r\n  display: flex;\r\n  align-items: center;\r\n  min-height: 52px;\r\n  padding: 0 16px;\r\n  border: 1px solid rgba(255,255,255,.15);\r\n  border-radius: 12px;\r\n  color: rgba(255,255,255,.58);\r\n  background: rgba(255,255,255,.065);\r\n  font-size: .86rem;\r\n}\r\n\r\n.cf7-field--message {\r\n  min-height: 94px;\r\n  align-items: flex-start;\r\n  padding-top: 15px;\r\n}\r\n\r\n.cf7-prototype__foot {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 15px;\r\n  margin-top: 18px;\r\n}\r\n\r\n.cf7-prototype__foot small {\r\n  max-width: 220px;\r\n  color: rgba(255,255,255,.48);\r\n  font-size: .7rem;\r\n}\r\n\r\n.mico-contact-form,\r\n.cf7-prototype .wpcf7-form {\r\n  display: grid;\r\n  gap: 18px;\r\n}\r\n\r\n.mico-form-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(2, minmax(0, 1fr));\r\n  gap: 14px;\r\n}\r\n\r\n\/* CF7 cards are intentionally single-column: their card width is narrower\r\n   than a full page form, so half-width controls look unfinished and are\r\n   harder to use on touch devices. *\/\r\n.cf7-prototype .mico-form-grid {\r\n  grid-template-columns: minmax(0, 1fr);\r\n}\r\n\r\n.cf7-prototype .mico-form-wide {\r\n  grid-column: auto;\r\n}\r\n\r\n.cf7-prototype .wpcf7-form,\r\n.cf7-prototype .wpcf7-form label,\r\n.cf7-prototype .wpcf7-form-control-wrap {\r\n  width: 100%;\r\n  min-width: 0;\r\n}\r\n\r\n.cf7-prototype .wpcf7-form-control-wrap {\r\n  display: block;\r\n}\r\n\r\n.mico-form-grid label,\r\n.mico-contact-form > label,\r\n.cf7-prototype .wpcf7-form label {\r\n  display: grid;\r\n  min-width: 0;\r\n  gap: 7px;\r\n  color: rgba(255,255,255,.82);\r\n  font-size: .78rem;\r\n  font-weight: 750;\r\n}\r\n\r\n.mico-form-grid label > span:first-child,\r\n.cf7-prototype .wpcf7-form label > span:first-child {\r\n  line-height: 1.35;\r\n}\r\n\r\n.mico-form-wide {\r\n  grid-column: 1 \/ -1;\r\n}\r\n\r\n.mico-contact-form input:not([type=\"checkbox\"]),\r\n.mico-contact-form select,\r\n.mico-contact-form textarea,\r\n.cf7-prototype .wpcf7-form input:not([type=\"checkbox\"]):not([type=\"submit\"]),\r\n.cf7-prototype .wpcf7-form select,\r\n.cf7-prototype .wpcf7-form textarea {\r\n  width: 100%;\r\n  min-height: 52px;\r\n  padding: 13px 14px;\r\n  border: 1px solid rgba(255,255,255,.18);\r\n  border-radius: 12px;\r\n  color: var(--mico-white);\r\n  background: rgba(255,255,255,.075);\r\n  outline: 0;\r\n}\r\n\r\n.mico-contact-form textarea,\r\n.cf7-prototype .wpcf7-form textarea {\r\n  min-height: 112px;\r\n  resize: vertical;\r\n}\r\n\r\n.mico-contact-form select,\r\n.cf7-prototype .wpcf7-form select {\r\n  color-scheme: dark;\r\n}\r\n\r\n.mico-contact-form select option,\r\n.cf7-prototype .wpcf7-form select option {\r\n  color: var(--mico-navy-950);\r\n  background: var(--mico-white);\r\n}\r\n\r\n.mico-contact-form input:focus,\r\n.mico-contact-form select:focus,\r\n.mico-contact-form textarea:focus,\r\n.cf7-prototype .wpcf7-form input:focus,\r\n.cf7-prototype .wpcf7-form select:focus,\r\n.cf7-prototype .wpcf7-form textarea:focus {\r\n  border-color: #ff9b6e;\r\n  box-shadow: 0 0 0 3px rgba(245,84,12,.2);\r\n}\r\n\r\n.mico-consent,\r\n.cf7-prototype .mico-consent {\r\n  display: grid !important;\r\n  grid-template-columns: 20px 1fr;\r\n  align-items: start;\r\n  gap: 10px !important;\r\n  color: rgba(255,255,255,.72) !important;\r\n  font-size: .74rem !important;\r\n  font-weight: 600 !important;\r\n}\r\n\r\n.mico-consent input[type=\"checkbox\"],\r\n.cf7-prototype .mico-consent input[type=\"checkbox\"] {\r\n  width: 18px;\r\n  height: 18px;\r\n  margin: 2px 0 0;\r\n  accent-color: var(--mico-orange);\r\n}\r\n\r\n\/* Contact Form 7 wraps the checkbox and its text in extra elements. *\/\r\n.cf7-prototype .mico-consent {\r\n  display: block !important;\r\n}\r\n\r\n.cf7-prototype .mico-consent > p {\r\n  margin: 0 !important;\r\n}\r\n\r\n.cf7-prototype .mico-consent .wpcf7-form-control-wrap,\r\n.cf7-prototype .mico-consent .wpcf7-acceptance,\r\n.cf7-prototype .mico-consent .wpcf7-list-item {\r\n  display: block;\r\n  width: 100%;\r\n}\r\n\r\n.cf7-prototype .mico-consent .wpcf7-list-item {\r\n  margin: 0;\r\n}\r\n\r\n.cf7-prototype .mico-consent label {\r\n  display: grid;\r\n  grid-template-columns: 20px minmax(0, 1fr);\r\n  align-items: start;\r\n  gap: 10px;\r\n  width: 100%;\r\n  cursor: pointer;\r\n}\r\n\r\n.cf7-prototype .mico-consent .wpcf7-list-item-label {\r\n  min-width: 0;\r\n}\r\n\r\n.mico-contact-form .mico-button,\r\n.cf7-prototype .wpcf7-submit {\r\n  justify-self: start;\r\n}\r\n\r\n.cf7-prototype .wpcf7-submit {\r\n  min-height: 50px;\r\n  padding: 14px 20px;\r\n  border: 1px solid var(--mico-orange);\r\n  border-radius: 999px;\r\n  color: var(--mico-white);\r\n  background: var(--mico-orange);\r\n  box-shadow: 0 12px 28px rgba(245,84,12,.2);\r\n  font-weight: 850;\r\n  cursor: pointer;\r\n}\r\n\r\n.mico-form-status,\r\n.cf7-prototype .wpcf7-response-output {\r\n  min-height: 1.5em;\r\n  margin: 0 !important;\r\n  color: rgba(255,255,255,.78);\r\n  font-size: .76rem;\r\n}\r\n\r\n.mico-flow-prefill {\r\n  margin: 0 !important;\r\n  padding: 13px 14px;\r\n  border: 1px solid rgba(255,255,255,.16);\r\n  border-radius: 12px;\r\n  color: rgba(255,255,255,.8) !important;\r\n  background: rgba(255,255,255,.07);\r\n  font-size: .76rem !important;\r\n}\r\n\r\n.privacy-section {\r\n  background: var(--mico-paper-2);\r\n}\r\n\r\n.privacy-section h2 {\r\n  max-width: 780px;\r\n  margin: 0 0 34px;\r\n  font-size: clamp(2rem, 4vw, 3.6rem);\r\n  line-height: 1.04;\r\n  letter-spacing: -.045em;\r\n}\r\n\r\n.privacy-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(2, minmax(0, 1fr));\r\n  border-top: 1px solid var(--mico-line);\r\n  border-left: 1px solid var(--mico-line);\r\n}\r\n\r\n.privacy-grid article {\r\n  padding: 26px;\r\n  border-right: 1px solid var(--mico-line);\r\n  border-bottom: 1px solid var(--mico-line);\r\n  background: rgba(255,255,255,.45);\r\n}\r\n\r\n.privacy-grid h3 {\r\n  margin: 0 0 9px;\r\n  color: var(--mico-navy-950);\r\n  font-size: 1rem;\r\n}\r\n\r\n.privacy-grid p {\r\n  margin: 0;\r\n  color: var(--mico-muted);\r\n  font-size: .88rem;\r\n}\r\n\r\n.privacy-grid a {\r\n  color: var(--mico-navy-950);\r\n  text-decoration: underline;\r\n  text-underline-offset: 3px;\r\n}\r\n\r\n.mico-footer {\r\n  padding-block: 58px 32px;\r\n  color: rgba(255,255,255,.68);\r\n  background: #08002f;\r\n}\r\n\r\n.mico-footer__grid {\r\n  display: grid;\r\n  grid-template-columns: 1.15fr .85fr .85fr;\r\n  gap: 50px;\r\n  padding-bottom: 42px;\r\n  border-bottom: 1px solid rgba(255,255,255,.12);\r\n}\r\n\r\n.mico-footer__logo {\r\n  width: 150px;\r\n  margin-bottom: 20px;\r\n  border-radius: 12px;\r\n}\r\n\r\n.mico-footer p {\r\n  max-width: 390px;\r\n  margin: 0;\r\n  font-size: .88rem;\r\n}\r\n\r\n.mico-footer h2 {\r\n  margin: 0 0 16px;\r\n  color: var(--mico-white);\r\n  font-size: .78rem;\r\n  letter-spacing: .1em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.mico-footer nav {\r\n  display: grid;\r\n  gap: 10px;\r\n}\r\n\r\n.mico-footer nav a {\r\n  width: fit-content;\r\n  font-size: .88rem;\r\n}\r\n\r\n.mico-footer nav a:hover { color: var(--mico-white); }\r\n\r\n.mico-footer__bottom {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  gap: 25px;\r\n  padding-top: 25px;\r\n  font-size: .76rem;\r\n}\r\n\r\n.mico-page.is-motion-ready [data-reveal] {\r\n  opacity: 0;\r\n  transform: translateY(24px);\r\n  transition: opacity .7s var(--mico-ease), transform .7s var(--mico-ease);\r\n}\r\n\r\n.mico-page.is-motion-ready [data-reveal].is-visible {\r\n  opacity: 1;\r\n  transform: none;\r\n}\r\n\r\n@media (max-width: 1120px) {\r\n  .mico-nav-links { gap: 18px; }\r\n  .mico-nav-links a { font-size: 13px; }\r\n  .mico-nav-cta { display: none; }\r\n  .mico-nav-links .mico-nav-contact-link {\r\n    min-height: 52px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    margin-top: 14px;\r\n    padding: 14px 16px;\r\n    color: #fff;\r\n    border: 1px solid #f5540c;\r\n    border-radius: 14px;\r\n    background: #f5540c;\r\n  }\r\n  .company-hero__inner { grid-template-columns: minmax(0, .95fr) minmax(360px, .75fr); }\r\n  .expertise-board { grid-template-columns: 1fr; }\r\n  .expertise-network { min-height: 540px; }\r\n  .expertise-content { padding-inline: 12px; }\r\n  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n  .team-card:last-child { grid-column: 1 \/ -1; width: calc(50% - 11px); justify-self: center; }\r\n  .working-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n}\r\n\r\n@media (max-width: 860px) {\r\n  :root { --mico-shell: min(calc(100% - 36px), 1320px); }\r\n  .mico-nav-inner { min-height: 76px; grid-template-columns: auto 1fr auto; }\r\n  .mico-logo { width: 124px; height: 50px; }\r\n  .mico-menu-toggle { display: grid; place-items: center; }\r\n  .mico-nav-actions { grid-column: 3; justify-self: end; }\r\n  .mico-nav-links {\r\n    position: fixed;\r\n    z-index: 2;\r\n    inset: 76px 0 auto;\r\n    display: grid;\r\n    align-content: start;\r\n    justify-content: stretch;\r\n    gap: 0;\r\n    max-height: calc(100svh - 76px);\r\n    padding: 22px 18px 30px;\r\n    overflow-y: auto;\r\n    border-top: 1px solid rgba(255,255,255,.14);\r\n    background: rgba(11,0,61,.99);\r\n    box-shadow: 0 30px 55px rgba(11,0,61,.15);\r\n    transform: translateY(-120%);\r\n    visibility: hidden;\r\n    transition: transform .3s var(--mico-ease), visibility .3s;\r\n  }\r\n  .mico-nav-links.is-open { transform: translateY(0); visibility: visible; }\r\n  body.admin-bar .mico-nav-links { top: 108px; }\r\n  .mico-nav-links a { padding: 17px 6px; border-bottom: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.88); font-size: 1rem; }\r\n  .mico-nav-links a::after { display: none; }\r\n  .company-hero { min-height: 0; }\r\n  .company-hero__inner { grid-template-columns: 1fr; padding-block: 82px 100px; }\r\n  .company-hero__copy { position: relative; z-index: 3; }\r\n  .portrait-system { min-height: 500px; }\r\n  .company-intro__grid,\r\n  .company-contact__grid,\r\n  .mico-section-head { grid-template-columns: 1fr; }\r\n  .mico-section-head { align-items: start; gap: 25px; }\r\n  .roadmap-grid { grid-template-columns: 1fr; }\r\n  .roadmap-card { min-height: 0; }\r\n  .mico-footer__grid { grid-template-columns: 1fr 1fr; }\r\n  .mico-footer__brand { grid-column: 1 \/ -1; }\r\n}\r\n\r\n@media (max-width: 782px) {\r\n  body.admin-bar .mico-nav { top: 46px; }\r\n  body.admin-bar .mico-nav-links { top: 122px; }\r\n}\r\n\r\n@media (max-width: 640px) {\r\n  :root { --mico-shell: min(calc(100% - 28px), 1320px); }\r\n  .mico-prototype-bar { padding-inline: 12px; }\r\n  .mico-nav-actions { gap: 8px; }\r\n  .company-hero h1 { font-size: clamp(3rem, 15vw, 5rem); }\r\n  .company-hero__actions { display: grid; }\r\n  .company-hero__actions .mico-button { width: 100%; }\r\n  .portrait-system { min-height: 420px; margin-inline: -8px; }\r\n  .portrait-panel--one { width: 58%; height: 74%; left: 1%; }\r\n  .portrait-panel--two { width: 48%; height: 55%; right: 0; }\r\n  .portrait-panel--three { width: 45%; height: 46%; right: 2%; bottom: 2%; }\r\n  .portrait-label { top: auto; right: 10px; bottom: 43%; }\r\n  .expertise-network { min-height: auto; display: grid; gap: 10px; padding: 22px; }\r\n  .expertise-network::before,\r\n  .expertise-network::after,\r\n  .expertise-core { display: none; }\r\n  .expertise-node { position: static; width: 100%; min-height: 0; }\r\n  .expertise-person { grid-template-columns: 44px 1fr; }\r\n  .expertise-person em { grid-column: 2; }\r\n  .team-grid { grid-template-columns: 1fr; }\r\n  .team-card:last-child { grid-column: auto; width: 100%; }\r\n  .team-card__summary { min-height: 0; }\r\n  .working-grid { grid-template-columns: 1fr; }\r\n  .working-card { min-height: 0; }\r\n  .working-card__number { margin-bottom: 30px; }\r\n  .company-contact-details { grid-template-columns: 1fr; }\r\n  .cf7-prototype { padding: 23px; }\r\n  .mico-form-grid { grid-template-columns: 1fr; }\r\n  .mico-form-wide { grid-column: auto; }\r\n  .mico-contact-form .mico-button,\r\n  .cf7-prototype .wpcf7-submit { width: 100%; }\r\n  .privacy-grid { grid-template-columns: 1fr; }\r\n  .cf7-prototype__foot { align-items: stretch; flex-direction: column; }\r\n  .cf7-prototype__foot .mico-button { width: 100%; }\r\n  .mico-footer__grid { grid-template-columns: 1fr; }\r\n  .mico-footer__brand { grid-column: auto; }\r\n  .mico-footer__bottom { flex-direction: column; }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  html { scroll-behavior: auto; }\r\n  *, *::before, *::after {\r\n    scroll-behavior: auto !important;\r\n    animation-duration: .01ms !important;\r\n    animation-iteration-count: 1 !important;\r\n    transition-duration: .01ms !important;\r\n  }\r\n  .mico-page.is-motion-ready [data-reveal] { opacity: 1; transform: none; }\r\n  .team-card:hover,\r\n  .expertise-node:hover,\r\n  .mico-button:hover { transform: none; }\r\n  .expertise-network,\r\n  .expertise-network::before,\r\n  .expertise-network::after,\r\n  .expertise-core,\r\n  .expertise-core::before { animation: none !important; }\r\n}\r\n\r\n@supports not (backdrop-filter: blur(10px)) {\r\n  .mico-nav { background: rgba(11,0,61,.99); }\r\n  .portrait-label,\r\n  .team-card__badge { background: rgba(11,0,61,.94); }\r\n}\r\n\r\n\/* mico-system.css *\/\r\n.system-page {\r\n  --system-violet: #755cff;\r\n  --system-cyan: #75d8ff;\r\n  --system-ink: #09002f;\r\n  color: var(--mico-navy-950);\r\n  background: var(--mico-paper);\r\n}\r\n\r\n.system-hero {\r\n  position: relative;\r\n  isolation: isolate;\r\n  overflow: hidden;\r\n  min-height: min(860px, calc(100svh - 98px));\r\n  color: var(--mico-white);\r\n  background:\r\n    radial-gradient(circle at 79% 32%, rgba(117,92,255,.24), transparent 34%),\r\n    radial-gradient(circle at 16% 82%, rgba(245,84,12,.15), transparent 30%),\r\n    linear-gradient(125deg, #08002f 0%, #11004a 52%, #07002b 100%);\r\n}\r\n\r\n.system-hero::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  z-index: -1;\r\n  width: 660px;\r\n  height: 660px;\r\n  top: -330px;\r\n  right: -110px;\r\n  border: 1px solid rgba(255,255,255,.1);\r\n  border-radius: 50%;\r\n  box-shadow: 0 0 0 110px rgba(255,255,255,.025), 0 0 0 220px rgba(255,255,255,.018);\r\n}\r\n\r\n.system-hero__grid {\r\n  position: absolute;\r\n  z-index: -1;\r\n  inset: 0;\r\n  opacity: .19;\r\n  background-image:\r\n    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),\r\n    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);\r\n  background-size: 72px 72px;\r\n  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);\r\n}\r\n\r\n.system-hero__inner {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, .94fr) minmax(520px, 1.06fr);\r\n  align-items: center;\r\n  gap: clamp(36px, 6vw, 96px);\r\n  min-height: inherit;\r\n  padding-block: clamp(78px, 10vw, 150px);\r\n}\r\n\r\n.system-hero__copy {\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n\r\n.system-hero h1 {\r\n  max-width: 920px;\r\n  margin: 0 0 28px;\r\n  color: var(--mico-white);\r\n  font-size: clamp(3.35rem, 5.25vw, 6.35rem);\r\n  line-height: .91;\r\n  letter-spacing: -.064em;\r\n}\r\n\r\n.system-hero__lead {\r\n  max-width: 740px;\r\n  margin: 0 0 32px;\r\n  color: rgba(255,255,255,.73);\r\n  font-size: clamp(1.05rem, 1.35vw, 1.26rem);\r\n  line-height: 1.65;\r\n}\r\n\r\n.system-hero__actions {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 12px;\r\n}\r\n\r\n.system-hero__visual {\r\n  position: relative;\r\n  min-width: 0;\r\n  margin: 0 -14vw 0 -7vw;\r\n}\r\n\r\n.system-hero__visual::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 10% 8% 4%;\r\n  z-index: -1;\r\n  border-radius: 48%;\r\n  background:\r\n    radial-gradient(ellipse at 50% 54%, rgba(75,50,215,.3), rgba(18,4,70,.12) 54%, transparent 76%),\r\n    radial-gradient(ellipse at 52% 76%, rgba(245,84,12,.13), transparent 48%);\r\n  filter: blur(34px);\r\n}\r\n\r\n.system-hero__visual img {\r\n  position: relative;\r\n  z-index: 1;\r\n  display: block;\r\n  width: 100%;\r\n  height: auto;\r\n  object-fit: contain;\r\n  mix-blend-mode: lighten;\r\n  -webkit-mask-image:\r\n    linear-gradient(to right, transparent 0%, #000 7%, #000 97%, transparent 100%),\r\n    linear-gradient(to bottom, transparent 0%, #000 8%, #000 94%, transparent 100%);\r\n  -webkit-mask-composite: source-in;\r\n  mask-image:\r\n    linear-gradient(to right, transparent 0%, #000 7%, #000 97%, transparent 100%),\r\n    linear-gradient(to bottom, transparent 0%, #000 8%, #000 94%, transparent 100%);\r\n  mask-composite: intersect;\r\n  filter:\r\n    drop-shadow(0 34px 42px rgba(0,0,0,.3))\r\n    drop-shadow(0 0 26px rgba(117,92,255,.12));\r\n}\r\n\r\n.system-preview { background: var(--mico-white); }\r\n.system-preview__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr); align-items: end; gap: clamp(35px, 7vw, 110px); }\r\n.system-preview__grid > p { margin: 0; color: var(--mico-muted); font-size: 1.08rem; line-height: 1.7; }\r\n\r\n@media (max-width: 1120px) {\r\n  .system-hero__inner { grid-template-columns: 1fr; }\r\n  .system-hero__copy { max-width: 900px; }\r\n  .system-hero__visual { width: 112%; margin: -9% -7% -5%; }\r\n}\r\n\r\n@media (max-width: 700px) {\r\n  .system-hero { min-height: 0; }\r\n  .system-hero__inner { padding-block: 72px 85px; }\r\n  .system-hero h1 { font-size: clamp(3rem, 15vw, 5.2rem); }\r\n  .system-hero__actions { display: grid; }\r\n  .system-hero__actions .mico-button { width: 100%; }\r\n  .system-hero__visual { width: 142%; margin: -2% -22% -7%; }\r\n  .system-preview__grid { grid-template-columns: 1fr; align-items: start; }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .system-hero__visual img { filter: drop-shadow(0 24px 34px rgba(0,0,0,.26)); }\r\n}\r\n\r\n\/* System definition *\/\r\n.system-definition {\r\n  background: var(--mico-white);\r\n}\r\n\r\n.system-definition__grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, minmax(0, 1fr));\r\n  gap: 18px;\r\n}\r\n\r\n.system-definition-card {\r\n  position: relative;\r\n  isolation: isolate;\r\n  min-height: 350px;\r\n  overflow: hidden;\r\n  padding: 30px;\r\n  border: 1px solid var(--mico-line);\r\n  border-radius: var(--mico-radius-lg);\r\n  background: var(--mico-paper);\r\n  box-shadow: var(--mico-shadow-soft);\r\n}\r\n\r\n.system-definition-card::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  z-index: -1;\r\n  width: 220px;\r\n  height: 220px;\r\n  right: -95px;\r\n  bottom: -110px;\r\n  border: 1px solid rgba(11,0,61,.09);\r\n  border-radius: 50%;\r\n  box-shadow: 0 0 0 36px rgba(11,0,61,.025), 0 0 0 72px rgba(11,0,61,.018);\r\n}\r\n\r\n.system-definition-card--now { background: linear-gradient(145deg, #fff, #f6f3ed); }\r\n.system-definition-card--development { color: var(--mico-white); border-color: rgba(117,92,255,.34); background: linear-gradient(145deg, #27136b, #13034d); }\r\n.system-definition-card--future { border-style: dashed; background: linear-gradient(145deg, #f2efff, #faf8ff); }\r\n\r\n.system-definition-card__status {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  min-height: 30px;\r\n  padding: 7px 10px;\r\n  border: 1px solid rgba(11,0,61,.12);\r\n  border-radius: 999px;\r\n  color: var(--mico-navy-950);\r\n  background: rgba(255,255,255,.62);\r\n  font-size: .66rem;\r\n  font-weight: 900;\r\n  letter-spacing: .08em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.system-definition-card__status i {\r\n  width: 7px;\r\n  height: 7px;\r\n  border-radius: 50%;\r\n  background: var(--mico-orange);\r\n  box-shadow: 0 0 0 4px rgba(245,84,12,.1);\r\n}\r\n\r\n.system-definition-card--development .system-definition-card__status {\r\n  color: #ded8ff;\r\n  border-color: rgba(199,190,255,.32);\r\n  background: rgba(255,255,255,.08);\r\n}\r\n\r\n.system-definition-card--development .system-definition-card__status i { background: var(--system-cyan); box-shadow: 0 0 0 4px rgba(117,216,255,.1); }\r\n.system-definition-card--future .system-definition-card__status { border-style: dashed; color: #4c2f9e; }\r\n.system-definition-card--future .system-definition-card__status i { background: var(--system-violet); box-shadow: 0 0 0 4px rgba(117,92,255,.1); }\r\n\r\n.system-definition-card__index {\r\n  display: block;\r\n  margin: 62px 0 20px;\r\n  color: var(--mico-orange);\r\n  font-size: .72rem;\r\n  font-weight: 950;\r\n  letter-spacing: .13em;\r\n}\r\n\r\n.system-definition-card--development .system-definition-card__index { color: var(--system-cyan); }\r\n.system-definition-card--future .system-definition-card__index { color: var(--system-violet); }\r\n\r\n.system-definition-card h3 {\r\n  max-width: 310px;\r\n  margin: 0 0 14px;\r\n  color: inherit;\r\n  font-size: clamp(1.45rem, 2.1vw, 2.1rem);\r\n  line-height: 1.04;\r\n  letter-spacing: -.04em;\r\n}\r\n\r\n.system-definition-card p {\r\n  max-width: 400px;\r\n  margin: 0;\r\n  color: var(--mico-muted);\r\n  font-size: .92rem;\r\n  line-height: 1.62;\r\n}\r\n\r\n.system-definition-card--development p { color: rgba(255,255,255,.64); }\r\n\r\n\/* Interactive System Story *\/\r\n.system-story {\r\n  position: relative;\r\n  isolation: isolate;\r\n  overflow: clip;\r\n  color: var(--mico-white);\r\n  background:\r\n    radial-gradient(circle at 18% 36%, rgba(94,61,209,.23), transparent 31%),\r\n    radial-gradient(circle at 88% 62%, rgba(245,84,12,.13), transparent 27%),\r\n    #0c0040;\r\n}\r\n\r\n.system-story::before,\r\n.system-story::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  pointer-events: none;\r\n}\r\n\r\n.system-story::before {\r\n  width: 680px;\r\n  height: 680px;\r\n  left: -360px;\r\n  top: 24%;\r\n  border: 1px solid rgba(255,255,255,.07);\r\n  border-radius: 50%;\r\n  box-shadow: 0 0 0 100px rgba(255,255,255,.017), 0 0 0 200px rgba(255,255,255,.012);\r\n}\r\n\r\n.system-story::after {\r\n  inset: auto 0 0;\r\n  height: 32%;\r\n  background: linear-gradient(transparent, rgba(4,0,29,.4));\r\n}\r\n\r\n.system-story > .mico-shell { position: relative; z-index: 2; }\r\n\r\n.mh-story-intro {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .72fr);\r\n  align-items: end;\r\n  gap: clamp(42px, 7vw, 112px);\r\n  margin-bottom: clamp(55px, 7vw, 96px);\r\n}\r\n\r\n.system-story__lead {\r\n  max-width: 610px;\r\n  margin: 0;\r\n  color: rgba(255,255,255,.67);\r\n  font-size: 1.05rem;\r\n  line-height: 1.7;\r\n}\r\n\r\n.mh-story-skip {\r\n  width: max-content;\r\n  display: inline-flex;\r\n  margin-top: 22px;\r\n  color: #e5dff2;\r\n  font-size: .78rem;\r\n  font-weight: 780;\r\n  text-underline-offset: 4px;\r\n}\r\n\r\n.mh-story-grid {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1.18fr) minmax(330px, .72fr);\r\n  align-items: start;\r\n  gap: clamp(42px, 6.5vw, 96px);\r\n}\r\n\r\n.mh-story-stage {\r\n  position: sticky;\r\n  top: 92px;\r\n  display: grid;\r\n  grid-template-rows: auto minmax(0, 1fr) auto;\r\n  height: clamp(520px, calc(100svh - 116px), 700px);\r\n  min-height: 0;\r\n  overflow: hidden;\r\n  scroll-margin-top: 90px;\r\n  border: 1px solid rgba(255,255,255,.18);\r\n  border-radius: clamp(22px, 2vw, 32px);\r\n  background:\r\n    radial-gradient(circle at 72% 18%, rgba(111,79,229,.22), transparent 34%),\r\n    linear-gradient(145deg, rgba(25,11,82,.98), rgba(9,2,48,.98));\r\n  box-shadow: 0 38px 110px rgba(2,0,24,.44), inset 0 1px 0 rgba(255,255,255,.08);\r\n  contain: layout paint;\r\n}\r\n\r\n.mh-story-stage::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  width: 420px;\r\n  height: 420px;\r\n  right: -190px;\r\n  top: -230px;\r\n  border-radius: 50%;\r\n  background: rgba(245,84,12,.1);\r\n  filter: blur(20px);\r\n  pointer-events: none;\r\n}\r\n\r\n.mh-stage-toolbar {\r\n  position: relative;\r\n  z-index: 8;\r\n  min-height: 64px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 18px;\r\n  padding: 14px 18px 12px 20px;\r\n  border-bottom: 1px solid rgba(255,255,255,.11);\r\n  background: rgba(9,2,48,.58);\r\n  backdrop-filter: blur(12px);\r\n}\r\n\r\n.mh-stage-ident {\r\n  min-width: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 11px;\r\n}\r\n\r\n.mh-stage-count {\r\n  color: #ded9ed;\r\n  font-size: .72rem;\r\n  font-weight: 800;\r\n  white-space: nowrap;\r\n}\r\n\r\n.mh-stage-status {\r\n  min-height: 25px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 7px;\r\n  padding: 5px 9px;\r\n  border: 1px solid rgba(255,255,255,.18);\r\n  border-radius: 999px;\r\n  color: #fff;\r\n  background: rgba(255,255,255,.08);\r\n  font-size: .56rem;\r\n  font-weight: 900;\r\n  letter-spacing: .08em;\r\n  line-height: 1;\r\n  text-transform: uppercase;\r\n  white-space: nowrap;\r\n}\r\n\r\n.mh-stage-status::before {\r\n  content: \"\";\r\n  width: 7px;\r\n  height: 7px;\r\n  flex: 0 0 7px;\r\n  border-radius: 50%;\r\n  background: currentColor;\r\n  box-shadow: 0 0 0 4px rgba(255,255,255,.07);\r\n}\r\n\r\n.mh-story-stage[data-status=\"development\"] .mh-stage-status { color: #91e2ff; border-color: rgba(117,216,255,.42); background: rgba(117,216,255,.1); }\r\n.mh-story-stage[data-status=\"future\"] .mh-stage-status { color: #d6cdff; border-style: dashed; background: rgba(139,113,244,.11); }\r\n\r\n.mh-motion-toggle {\r\n  min-width: 44px;\r\n  min-height: 44px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 8px;\r\n  padding: 8px 11px;\r\n  border: 1px solid rgba(255,255,255,.18);\r\n  border-radius: 999px;\r\n  color: #f5f2fb;\r\n  background: rgba(255,255,255,.075);\r\n  font: inherit;\r\n  font-size: .68rem;\r\n  font-weight: 780;\r\n  cursor: pointer;\r\n  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;\r\n}\r\n\r\n.mh-motion-toggle:hover { border-color: rgba(245,84,12,.65); background: rgba(245,84,12,.12); }\r\n.mh-motion-toggle:active { transform: scale(.97); }\r\n.mh-motion-toggle[aria-pressed=\"true\"] .mh-pause-icon { display: none; }\r\n.mh-motion-toggle[aria-pressed=\"false\"] .mh-play-icon { display: none; }\r\n.mh-motion-toggle[aria-disabled=\"true\"] { cursor: default; opacity: .74; }\r\n.mh-motion-toggle svg { width: 15px; height: 15px; fill: currentColor; }\r\n\r\n.mh-story-viewport {\r\n  position: relative;\r\n  min-height: 0;\r\n  overflow: hidden;\r\n  background:\r\n    radial-gradient(ellipse at 52% 62%, rgba(91,64,194,.23), transparent 48%),\r\n    linear-gradient(180deg, rgba(6,0,39,.1), rgba(6,0,39,.42));\r\n  touch-action: pan-y pinch-zoom;\r\n}\r\n\r\n.mh-story-viewport::before,\r\n.mh-story-viewport::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  z-index: 4;\r\n  pointer-events: none;\r\n}\r\n\r\n.mh-story-viewport::before {\r\n  inset: 0;\r\n  opacity: .17;\r\n  background-image:\r\n    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),\r\n    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);\r\n  background-size: 42px 42px;\r\n  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 75%, transparent);\r\n}\r\n\r\n.mh-story-viewport::after {\r\n  right: 8%;\r\n  bottom: 7%;\r\n  left: 8%;\r\n  height: 21%;\r\n  border-radius: 50%;\r\n  background: rgba(3,0,29,.62);\r\n  filter: blur(24px);\r\n}\r\n\r\n.mh-story-poster,\r\n.mh-story-canvas {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  display: block;\r\n  pointer-events: none;\r\n}\r\n\r\n.mh-story-poster {\r\n  z-index: 1;\r\n  object-fit: contain;\r\n  object-position: center;\r\n  opacity: .98;\r\n  transform: scale(1.04);\r\n  transition: opacity .5s ease, transform .9s var(--mico-ease), filter .5s ease;\r\n}\r\n\r\n.mh-story-canvas { z-index: 3; opacity: 0; transition: opacity .5s ease; }\r\n.mh-story-stage.is-webgl-ready .mh-story-poster { opacity: .08; filter: blur(3px) saturate(.8); }\r\n.mh-story-stage.is-webgl-ready .mh-story-canvas { opacity: 1; }\r\n.mh-story-stage.is-webgl-fallback .mh-story-poster { opacity: 1; }\r\n.mh-story-stage[data-stage=\"2\"] .mh-story-poster { transform: scale(1.24) translate(-1%, 4%); }\r\n.mh-story-stage[data-stage=\"3\"] .mh-story-poster { transform: scale(1.24) translate(2%, -5%); }\r\n.mh-story-stage[data-stage=\"4\"] .mh-story-poster { transform: scale(1.18) translate(0, -5%); }\r\n.mh-story-stage[data-stage=\"5\"] .mh-story-poster { transform: scale(1.03); }\r\n\r\n.mh-story-loader {\r\n  position: absolute;\r\n  left: 18px;\r\n  bottom: 14px;\r\n  z-index: 7;\r\n  min-height: 29px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 9px;\r\n  padding: 6px 10px;\r\n  border: 1px solid rgba(255,255,255,.12);\r\n  border-radius: 999px;\r\n  color: #c9c3dc;\r\n  background: rgba(7,1,38,.72);\r\n  font-size: .62rem;\r\n  font-weight: 780;\r\n  letter-spacing: .04em;\r\n  backdrop-filter: blur(8px);\r\n  transition: opacity .24s ease;\r\n}\r\n\r\n.mh-story-loader::before {\r\n  content: \"\";\r\n  width: 7px;\r\n  height: 7px;\r\n  border-radius: 50%;\r\n  background: var(--mico-orange);\r\n  box-shadow: 0 0 0 4px rgba(245,84,12,.14);\r\n  animation: system-story-pulse 1.2s ease-in-out infinite;\r\n}\r\n\r\n.mh-story-stage.is-webgl-ready .mh-story-loader { opacity: 0; pointer-events: none; }\r\n.mh-story-stage.is-webgl-fallback .mh-story-loader::before { background: #9e8cff; box-shadow: 0 0 0 4px rgba(158,140,255,.12); animation: none; }\r\n\r\n@keyframes system-story-pulse {\r\n  0%, 100% { opacity: .45; transform: scale(.8); }\r\n  50% { opacity: 1; transform: scale(1); }\r\n}\r\n\r\n.mh-story-legend {\r\n  position: absolute;\r\n  top: 14px;\r\n  right: 14px;\r\n  z-index: 7;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: flex-end;\r\n  gap: 6px;\r\n  max-width: calc(100% - 28px);\r\n  pointer-events: none;\r\n}\r\n\r\n.mh-story-legend span {\r\n  min-height: 28px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 6px 9px;\r\n  border: 1px solid rgba(255,255,255,.12);\r\n  border-radius: 999px;\r\n  color: #ded9ed;\r\n  background: rgba(7,1,38,.72);\r\n  font-size: .65rem;\r\n  font-weight: 820;\r\n  letter-spacing: .05em;\r\n  text-transform: uppercase;\r\n  backdrop-filter: blur(8px);\r\n}\r\n\r\n.mh-story-legend i { width: 7px; height: 7px; display: block; border-radius: 2px; background: #fff; }\r\n.mh-story-legend .is-development i { border: 1px solid #9de7ff; background: rgba(117,216,255,.48); }\r\n.mh-story-legend .is-future i { border: 1px dashed #d9d1ff; background: transparent; }\r\n\r\n.mh-stage-foot {\r\n  position: relative;\r\n  z-index: 8;\r\n  padding: 16px 18px 17px 20px;\r\n  border-top: 1px solid rgba(255,255,255,.11);\r\n  background: rgba(7,1,38,.76);\r\n  backdrop-filter: blur(14px);\r\n}\r\n\r\n.mh-stage-copy { min-height: 55px; display: grid; align-content: start; gap: 5px; }\r\n.mh-stage-title { margin: 0; color: #fff; font-size: clamp(.95rem, 1.4vw, 1.16rem); font-weight: 850; text-align: left; }\r\n.mh-stage-caption { position: static; max-width: 760px; margin: 0; color: #bdb6d2; font-size: .7rem; line-height: 1.5; }\r\n\r\n.mh-story-controls {\r\n  display: grid;\r\n  grid-template-columns: 44px minmax(0, 1fr) 44px;\r\n  grid-template-areas: \"previous steps next\";\r\n  gap: 10px;\r\n  align-items: center;\r\n  margin-top: 13px;\r\n}\r\n\r\n.mh-story-arrow,\r\n.mh-story-step {\r\n  min-width: 44px;\r\n  min-height: 44px;\r\n  border: 1px solid rgba(255,255,255,.16);\r\n  color: #fff;\r\n  background: rgba(255,255,255,.06);\r\n  font: inherit;\r\n  cursor: pointer;\r\n}\r\n\r\n.mh-story-arrow { display: grid; place-items: center; border-radius: 50%; font-size: 1.2rem; line-height: 1; }\r\n[data-mh-story-prev] { grid-area: previous; }\r\n[data-mh-story-next] { grid-area: next; }\r\n.mh-story-arrow:hover:not(:disabled), .mh-story-step:hover { border-color: rgba(245,84,12,.72); background: rgba(245,84,12,.13); }\r\n.mh-story-arrow:disabled { opacity: .28; cursor: default; }\r\n\r\n.mh-story-steps {\r\n  grid-area: steps;\r\n  display: grid;\r\n  grid-template-columns: repeat(5, minmax(44px, 1fr));\r\n  gap: 7px;\r\n}\r\n\r\n.mh-story-step {\r\n  position: relative;\r\n  display: grid;\r\n  place-items: center;\r\n  border-radius: 11px;\r\n  color: #aaa3c4;\r\n  font-size: .64rem;\r\n  font-weight: 900;\r\n  letter-spacing: .08em;\r\n}\r\n\r\n.mh-story-step::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  right: 7px;\r\n  bottom: 6px;\r\n  left: 7px;\r\n  height: 2px;\r\n  border-radius: 999px;\r\n  background: currentColor;\r\n  opacity: .25;\r\n}\r\n\r\n.mh-story-step[aria-current=\"step\"] { color: #fff; border-color: var(--mico-orange); background: rgba(245,84,12,.14); box-shadow: inset 0 0 0 1px rgba(245,84,12,.18); }\r\n.mh-story-step[aria-current=\"step\"]::after { background: var(--mico-orange); opacity: 1; }\r\n.mh-story-stage[data-motion=\"paused\"] :is(.mh-story-poster,.mh-story-canvas) { transition: none; }\r\n:is(.mh-story-arrow,.mh-story-step,.mh-motion-toggle):focus-visible { outline: 3px solid #fff; outline-offset: 3px; }\r\n\r\n.mh-scenes { display: grid; }\r\n\r\n.mh-scene {\r\n  min-height: clamp(500px, 72svh, 760px);\r\n  display: grid;\r\n  align-content: center;\r\n  padding: clamp(44px, 6vw, 70px) 0 clamp(44px, 6vw, 70px) clamp(24px, 3vw, 38px);\r\n  border-left: 1px solid rgba(255,255,255,.13);\r\n  opacity: .34;\r\n  transform: translateY(14px);\r\n  transition: opacity .36s ease, transform .42s var(--mico-ease), border-color .36s ease;\r\n}\r\n\r\n.mh-scene.is-active { border-left-color: var(--mico-orange); opacity: 1; transform: translateY(0); }\r\n\r\n\/* Keep the 3D stage and its active explanation as one synchronized desktop panel. *\/\r\n@media (min-width: 981px) and (min-height: 561px) {\r\n  .system-story[data-mh-story-layout=\"paired\"].is-story-ready .mh-story-grid {\r\n    --mh-story-paired-height: clamp(500px, calc(100svh - 110px), 680px);\r\n    align-items: stretch;\r\n  }\r\n\r\n  .system-story[data-mh-story-layout=\"paired\"].is-story-ready .mh-story-stage {\r\n    position: relative;\r\n    top: auto;\r\n    height: auto;\r\n    min-height: var(--mh-story-paired-height);\r\n    align-self: stretch;\r\n  }\r\n\r\n  .system-story[data-mh-story-layout=\"paired\"].is-story-ready .mh-scenes {\r\n    min-height: var(--mh-story-paired-height);\r\n    align-self: stretch;\r\n  }\r\n\r\n  .system-story[data-mh-story-layout=\"paired\"].is-story-ready .mh-scene {\r\n    grid-area: 1 \/ 1;\r\n    min-height: var(--mh-story-paired-height);\r\n    height: auto;\r\n    visibility: hidden;\r\n    pointer-events: none;\r\n    opacity: 0;\r\n    transform: translateY(14px);\r\n  }\r\n\r\n  .system-story[data-mh-story-layout=\"paired\"].is-story-ready .mh-scene.is-active {\r\n    z-index: 1;\r\n    visibility: visible;\r\n    pointer-events: auto;\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n.mh-scene-number { display: block; margin-bottom: 12px; color: #867ca8; font-size: .66rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }\r\n\r\n.mh-status {\r\n  width: max-content;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  margin-bottom: 16px;\r\n  padding: 7px 10px;\r\n  border: 1px solid rgba(255,255,255,.16);\r\n  border-radius: 999px;\r\n  color: #fff;\r\n  background: rgba(255,255,255,.07);\r\n  font-size: .64rem;\r\n  font-weight: 900;\r\n  letter-spacing: .08em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.mh-status--development { color: #9ce7ff; border-color: rgba(117,216,255,.38); background: rgba(117,216,255,.08); }\r\n.mh-status--future { color: #d8d0ff; border-style: dashed; background: rgba(117,92,255,.08); }\r\n\r\n.mh-scene h3 { max-width: 490px; margin: 0 0 15px; color: #fff; font-size: clamp(1.75rem, 2.7vw, 2.55rem); line-height: 1.02; letter-spacing: -.043em; }\r\n.mh-scene > p { max-width: 500px; margin: 0; color: #c2bad7; font-size: .94rem; line-height: 1.66; }\r\n\r\n.mh-scene-evidence { max-width: 480px; display: grid; gap: 9px; margin: 20px 0 0; padding: 0 !important; list-style: none !important; list-style-type: none !important; }\r\n.mh-scene-evidence li { position: relative; padding-left: 20px; list-style: none !important; color: #aaa3c4; font-size: .76rem; line-height: 1.5; }\r\n.mh-scene-evidence li::marker { content: \"\" !important; font-size: 0 !important; }\r\n.mh-scene-evidence li::before { content: \"\"; position: absolute; left: 0; top: .52em; width: 7px; height: 7px; border: 1px solid #8c7af0; border-radius: 2px; }\r\n\r\n\/* System architecture layers *\/\r\n.system-layers { background: #f6f3ec; }\r\n\r\n.system-layer-stack {\r\n  max-width: 1120px;\r\n  display: grid;\r\n  gap: 14px;\r\n  margin-inline: auto;\r\n  perspective: 1200px;\r\n}\r\n\r\n.system-layer {\r\n  display: grid;\r\n  grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr);\r\n  align-items: center;\r\n  gap: 34px;\r\n  padding: clamp(25px, 4vw, 44px);\r\n  border: 1px solid var(--mico-line);\r\n  border-radius: var(--mico-radius-lg);\r\n  background: var(--mico-white);\r\n  box-shadow: var(--mico-shadow-soft);\r\n}\r\n\r\n.system-layer + .system-layer { margin-top: -2px; }\r\n.system-layer--experience { color: var(--mico-white); border-style: dashed; border-color: rgba(184,169,255,.42); background: linear-gradient(135deg, #2c176e, #160752); transform: scale(.94); }\r\n.system-layer--intelligence { color: var(--mico-white); border-color: rgba(117,216,255,.3); background: linear-gradient(135deg, #17105e, #0e0648); transform: scale(.97); }\r\n.system-layer--operations { border-color: rgba(245,84,12,.25); box-shadow: 0 28px 75px rgba(11,0,61,.12); }\r\n\r\n.system-layer__head { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 18px; }\r\n.system-layer__head > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: var(--mico-white); background: var(--mico-orange); font-size: .7rem; font-weight: 950; }\r\n.system-layer--experience .system-layer__head > span { background: var(--system-violet); }\r\n.system-layer--intelligence .system-layer__head > span { color: #0b003d; background: var(--system-cyan); }\r\n.system-layer__head small { display: block; margin-bottom: 5px; color: var(--mico-orange); font-size: .63rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }\r\n.system-layer--experience .system-layer__head small { color: #c7bcff; }\r\n.system-layer--intelligence .system-layer__head small { color: var(--system-cyan); }\r\n.system-layer__head h3 { margin: 0; color: inherit; font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.08; letter-spacing: -.034em; }\r\n\r\n.system-layer__modules { display: flex; flex-wrap: wrap; gap: 9px; }\r\n.system-layer__modules span { min-height: 38px; display: inline-flex; align-items: center; padding: 9px 12px; border: 1px solid var(--mico-line); border-radius: 999px; color: #514b59; background: #faf8f4; font-size: .72rem; font-weight: 780; }\r\n.system-layer--experience .system-layer__modules span,\r\n.system-layer--intelligence .system-layer__modules span { color: rgba(255,255,255,.76); border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }\r\n\r\n\/* Current routes *\/\r\n.system-routes {\r\n  position: relative;\r\n  overflow: hidden;\r\n  color: var(--mico-white);\r\n  background:\r\n    radial-gradient(circle at 80% 10%, rgba(117,92,255,.2), transparent 32%),\r\n    linear-gradient(135deg, #09002f, #12004b);\r\n}\r\n\r\n.system-routes::before { content: \"\"; position: absolute; width: 520px; height: 520px; left: -260px; bottom: -320px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.018), 0 0 0 160px rgba(255,255,255,.012); }\r\n.system-routes > .mico-shell { position: relative; }\r\n\r\n.system-routes__head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: clamp(45px, 7vw, 82px); }\r\n.system-routes__head .mico-title { max-width: 760px; }\r\n\r\n.system-route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }\r\n.system-route-card { min-height: 390px; padding: clamp(28px, 4vw, 44px); border: 1px solid rgba(255,255,255,.16); border-radius: var(--mico-radius-lg); background: rgba(255,255,255,.055); box-shadow: 0 28px 70px rgba(0,0,0,.18); backdrop-filter: blur(10px); }\r\n.system-route-card--warehouse { border-color: rgba(245,84,12,.42); background: linear-gradient(145deg, rgba(245,84,12,.12), rgba(255,255,255,.05)); }\r\n.system-route-card__meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 54px; }\r\n.system-route-card__meta span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: #fff; background: var(--mico-orange); font-weight: 950; }\r\n.system-route-card__meta small { padding: 7px 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; color: rgba(255,255,255,.68); font-size: .62rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }\r\n.system-route-card h3 { margin: 0 0 13px; font-size: clamp(1.7rem, 3vw, 2.8rem); line-height: 1; letter-spacing: -.045em; }\r\n.system-route-card > p { max-width: 620px; margin: 0 0 30px; color: rgba(255,255,255,.65); }\r\n.system-route-card ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: route; }\r\n.system-route-card li { counter-increment: route; min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.055); font-size: .7rem; font-weight: 780; }\r\n.system-route-card li::before { content: counter(route, decimal-leading-zero); color: #ff8f5d; font-size: .58rem; font-weight: 900; }\r\n.system-routes__note { max-width: 860px; margin: 25px 0 0; padding-left: 17px; border-left: 2px solid var(--mico-orange); color: rgba(255,255,255,.58); font-size: .78rem; }\r\n\r\n\/* Development partner *\/\r\n.system-partner { background: var(--mico-white); }\r\n.system-partner__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr); align-items: center; gap: clamp(55px, 8vw, 125px); }\r\n.system-partner__copy > p:not(.mico-kicker) { max-width: 680px; color: var(--mico-muted); font-size: 1.02rem; line-height: 1.7; }\r\n.system-partner__verification { margin-top: 28px; padding: 16px 18px; border: 1px solid #ded7ef; border-radius: 14px; background: #f8f5ff; font-size: .76rem !important; }\r\n.system-partner__verification strong { color: var(--mico-navy-950); }\r\n.system-partner__roles { position: relative; display: grid; gap: 14px; }\r\n.system-partner__roles::before { content: \"\"; position: absolute; top: 50%; left: 50%; width: 3px; height: 48px; background: linear-gradient(var(--mico-orange), var(--system-violet)); transform: translate(-50%, -50%); }\r\n.system-partner__roles article { position: relative; min-height: 230px; padding: 28px; border: 1px solid var(--mico-line); border-radius: var(--mico-radius-lg); background: var(--mico-paper); box-shadow: var(--mico-shadow-soft); }\r\n.system-partner__roles article:first-child { margin-right: 11%; }\r\n.system-partner__roles article:last-child { margin-left: 11%; border-color: rgba(245,84,12,.25); background: linear-gradient(145deg, #fff8f3, #fff); }\r\n.system-partner__roles article > span { position: absolute; right: 24px; top: 22px; color: rgba(11,0,61,.12); font-size: 3rem; font-weight: 950; line-height: 1; }\r\n.system-partner__roles small { display: block; margin-bottom: 38px; color: var(--mico-orange); font-size: .65rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }\r\n.system-partner__roles h3 { max-width: 390px; margin: 0 0 10px; font-size: 1.45rem; line-height: 1.08; letter-spacing: -.034em; }\r\n.system-partner__roles p { max-width: 430px; margin: 0; color: var(--mico-muted); font-size: .86rem; }\r\n\r\n\/* Customer value *\/\r\n.system-value { background: #f1eee8; }\r\n.system-value__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }\r\n.system-value__grid article { min-height: 280px; padding: 26px; border: 1px solid var(--mico-line); border-radius: var(--mico-radius-md); background: var(--mico-white); box-shadow: var(--mico-shadow-soft); }\r\n.system-value__grid article > span { display: block; margin-bottom: 72px; color: var(--mico-orange); font-size: .68rem; font-weight: 950; letter-spacing: .1em; }\r\n.system-value__grid h3 { margin: 0 0 11px; font-size: 1.28rem; line-height: 1.07; letter-spacing: -.034em; }\r\n.system-value__grid p { margin: 0; color: var(--mico-muted); font-size: .84rem; }\r\n\r\n\/* FAQ *\/\r\n.system-faq { background: var(--mico-white); }\r\n.system-faq__grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(460px, 1.22fr); align-items: start; gap: clamp(50px, 9vw, 140px); }\r\n.system-faq__lead { max-width: 590px; margin: 24px 0 0; color: var(--mico-muted); font-size: .94rem; }\r\n.system-faq__items { border-top: 1px solid var(--mico-line); }\r\n.system-faq details { border-bottom: 1px solid var(--mico-line); }\r\n.system-faq summary { position: relative; padding: 25px 52px 25px 0; color: var(--mico-navy-950); font-size: 1.04rem; font-weight: 850; line-height: 1.35; cursor: pointer; list-style: none; }\r\n.system-faq summary::-webkit-details-marker { display: none; }\r\n.system-faq summary::after { content: \"+\"; position: absolute; right: 0; top: 50%; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--mico-line); border-radius: 50%; color: var(--mico-orange); transform: translateY(-50%); transition: color .2s ease, background .2s ease, transform .2s var(--mico-ease); }\r\n.system-faq details[open] summary::after { content: \"\u2212\"; color: #fff; background: var(--mico-orange); transform: translateY(-50%) rotate(180deg); }\r\n.system-faq details p { max-width: 760px; margin: -4px 52px 24px 0; color: var(--mico-muted); font-size: .9rem; line-height: 1.65; }\r\n\r\n\/* Contact *\/\r\n.system-contact { position: relative; overflow: hidden; color: var(--mico-white); background: var(--mico-orange); }\r\n.system-contact::before { content: \"\"; position: absolute; width: 650px; height: 650px; top: -360px; right: -230px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 0 0 90px rgba(255,255,255,.04), 0 0 0 180px rgba(255,255,255,.025); }\r\n.system-contact__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(370px, .95fr); align-items: start; gap: clamp(50px, 8vw, 120px); }\r\n.system-contact h2 { max-width: 760px; margin: 0 0 24px; font-size: clamp(2.8rem, 5vw, 5.8rem); line-height: .94; letter-spacing: -.055em; }\r\n.system-contact__grid > div > p:not(.mico-kicker) { max-width: 650px; margin: 0 0 30px; color: rgba(255,255,255,.8); font-size: 1.05rem; }\r\n.system-contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }\r\n.system-contact__mail { color: #fff; font-size: .84rem; font-weight: 850; text-decoration: underline; text-underline-offset: 4px; }\r\n\r\n@media (max-width: 1120px) {\r\n  .mh-story-grid { grid-template-columns: minmax(0, 1fr) minmax(310px, .72fr); gap: 42px; }\r\n  .mh-motion-label { display: none; }\r\n  .system-value__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n}\r\n\r\n@media (max-width: 980px), (max-height: 560px) {\r\n  .mh-story-grid { display: block; }\r\n  .mh-story-stage { position: relative; top: auto; width: 100%; height: auto; }\r\n  .mh-story-viewport { min-height: 360px; aspect-ratio: 16 \/ 9; }\r\n  .mh-scenes { margin-top: 22px; }\r\n  .mh-scene { min-height: 0; padding: 28px 20px 10px; border: 0; border-top: 1px solid rgba(255,255,255,.12); opacity: 1; transform: none; }\r\n  .system-story.is-story-ready .mh-scene { display: none; }\r\n  .system-story.is-story-ready .mh-scene.is-active { display: grid; }\r\n  .mh-scene h3, .mh-scene > p, .mh-scene-evidence { max-width: 740px; }\r\n  .system-definition__grid { grid-template-columns: 1fr; }\r\n  .system-definition-card { min-height: 0; }\r\n  .system-definition-card__index { margin-top: 44px; }\r\n  .system-layer { grid-template-columns: 1fr; }\r\n  .system-partner__grid, .system-contact__grid { grid-template-columns: 1fr; }\r\n  .system-faq__grid { grid-template-columns: 1fr; }\r\n}\r\n\r\n@media (max-width: 760px) {\r\n  .mh-story-intro { grid-template-columns: 1fr; align-items: start; gap: 22px; }\r\n  .system-route-grid { grid-template-columns: 1fr; }\r\n  .system-routes__head { align-items: start; flex-direction: column; }\r\n  .system-layer { padding: 24px; }\r\n  .system-layer--experience, .system-layer--intelligence { transform: none; }\r\n  .system-partner__roles article:first-child { margin-right: 0; }\r\n  .system-partner__roles article:last-child { margin-left: 0; }\r\n  .system-value__grid { grid-template-columns: 1fr; }\r\n  .system-value__grid article { min-height: 0; }\r\n  .system-value__grid article > span { margin-bottom: 48px; }\r\n}\r\n\r\n@media (max-width: 640px) {\r\n  .mh-story-stage { border-radius: 20px; }\r\n  .mh-stage-toolbar { min-height: 58px; padding: 9px 10px 9px 14px; backdrop-filter: none; }\r\n  .mh-stage-ident { gap: 7px; }\r\n  .mh-stage-status { max-width: 132px; overflow: hidden; text-overflow: ellipsis; }\r\n  .mh-story-viewport { min-height: 255px; aspect-ratio: 5 \/ 4; }\r\n  .mh-story-poster { transform: scale(1.12); }\r\n  .mh-story-stage[data-stage=\"2\"] .mh-story-poster { transform: scale(1.25) translate(-1%, 4%); }\r\n  .mh-story-stage[data-stage=\"3\"] .mh-story-poster { transform: scale(1.25) translate(2%, -5%); }\r\n  .mh-story-stage[data-stage=\"4\"] .mh-story-poster { transform: scale(1.2) translate(0, -5%); }\r\n  .mh-story-stage[data-stage=\"5\"] .mh-story-poster { transform: scale(1.08); }\r\n  .mh-story-legend { top: 8px; right: 8px; left: 8px; justify-content: center; }\r\n  .mh-story-legend span { min-height: 28px; padding: 5px 7px; font-size: .65rem; }\r\n  .mh-story-loader { left: 10px; bottom: 9px; backdrop-filter: none; }\r\n  .mh-stage-foot { padding: 14px 12px; backdrop-filter: none; }\r\n  .mh-stage-copy { min-height: 78px; }\r\n  .mh-stage-caption { font-size: .66rem; }\r\n  .mh-story-controls { gap: 7px; }\r\n  .mh-story-steps { gap: 5px; }\r\n  .mh-story-step { min-width: 0; }\r\n  .mh-scene { padding-right: 10px; padding-left: 10px; }\r\n  .mh-scene h3 { font-size: 1.75rem; }\r\n  .mh-scene > p { font-size: .88rem; }\r\n  .system-layer__head { grid-template-columns: 1fr; }\r\n  .system-layer__modules { display: grid; grid-template-columns: 1fr; }\r\n  .system-layer__modules span { border-radius: 12px; }\r\n  .system-route-card { min-height: 0; }\r\n  .system-contact__actions { align-items: stretch; flex-direction: column; }\r\n  .system-contact__actions .mico-button { width: 100%; }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .mh-story-controls {\r\n    grid-template-columns: 44px minmax(0, 1fr) 44px;\r\n    grid-template-areas:\r\n      \"steps steps steps\"\r\n      \"previous . next\";\r\n    row-gap: 8px;\r\n  }\r\n  .mh-story-steps { grid-template-columns: repeat(5, minmax(44px, 1fr)); }\r\n  .mh-motion-label { display: none; }\r\n}\r\n\r\n@media (max-width: 360px) {\r\n  .mh-stage-status { max-width: 94px; font-size: .5rem; }\r\n  .mh-story-stage { min-width: 0; max-width: 100%; overflow: hidden; }\r\n  .mh-story-viewport { width: 100%; min-width: 0; max-width: 100%; }\r\n  .mh-story-legend {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    align-items: center;\r\n  }\r\n  .mh-story-legend span {\r\n    justify-content: center;\r\n    min-width: 0;\r\n    font-size: .65rem;\r\n    letter-spacing: .02em;\r\n  }\r\n  .mh-story-legend span:last-child {\r\n    grid-column: 1 \/ -1;\r\n    justify-self: center;\r\n  }\r\n  .mh-story-steps { gap: 3px; }\r\n  .mh-story-controls { gap: 4px; }\r\n}\r\n\r\n@media (orientation: landscape) and (max-height: 560px) and (min-width: 600px) {\r\n  .mh-story-stage { grid-template-columns: minmax(0, 1.12fr) minmax(290px, .88fr); grid-template-rows: auto minmax(270px, 1fr); }\r\n  .mh-stage-toolbar { grid-column: 1 \/ -1; }\r\n  .mh-story-viewport { min-height: 270px; aspect-ratio: auto; }\r\n  .mh-stage-foot { border-top: 0; border-left: 1px solid rgba(255,255,255,.11); }\r\n  .mh-story-legend { display: none; }\r\n  .mh-stage-copy { min-height: 108px; }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .mh-story-loader::before { animation: none; }\r\n  .mh-story-poster, .mh-story-canvas, .mh-scene { transition: none; transform: none; }\r\n  .system-layer--experience, .system-layer--intelligence { transform: none; }\r\n}\r\n\r\n\/* mico-polish.css *\/\r\n\/*\r\n * Final site-wide refinement layer.\r\n *\r\n * The site is intentionally expressive, but the original type and spacing\r\n * scale made normal browser zoom feel enlarged. These rules keep the visual\r\n * hierarchy while making all five pages calmer, denser and more consistent.\r\n *\/\r\n\r\n.mico-page {\r\n  --mico-shell: min(calc(100% - 64px), 1240px);\r\n  --mico-radius-md: 20px;\r\n  --mico-radius-lg: 28px;\r\n}\r\n\r\n.mico-shell--narrow {\r\n  width: min(calc(100% - 64px), 1020px);\r\n}\r\n\r\n.mico-nav-inner {\r\n  min-height: 78px;\r\n  gap: 26px;\r\n}\r\n\r\n.mico-logo {\r\n  width: 104px;\r\n  height: 52px;\r\n}\r\n\r\n.mico-nav-links {\r\n  gap: clamp(16px, 1.7vw, 28px);\r\n}\r\n\r\n.mico-button,\r\n.cf7-prototype .wpcf7-submit {\r\n  min-height: 48px;\r\n  padding: 13px 19px;\r\n}\r\n\r\n.mico-button:not(.mico-button--ghost):not(.mico-button--light),\r\n.cf7-prototype .wpcf7-submit {\r\n  color: var(--mico-navy-950);\r\n}\r\n\r\n.mico-button:not(.mico-button--ghost):not(.mico-button--light):hover,\r\n.cf7-prototype .wpcf7-submit:hover {\r\n  color: var(--mico-white);\r\n}\r\n\r\n.mico-title {\r\n  max-width: 840px;\r\n  margin-bottom: 22px;\r\n  font-size: clamp(2.15rem, 3.7vw, 4.25rem);\r\n  line-height: 1.01;\r\n}\r\n\r\n.mico-lead {\r\n  max-width: 720px;\r\n  font-size: clamp(1.03rem, 1.2vw, 1.18rem);\r\n  line-height: 1.62;\r\n}\r\n\r\n.mico-section {\r\n  padding-block: clamp(72px, 7vw, 112px);\r\n}\r\n\r\n.mico-section-head {\r\n  gap: clamp(28px, 5vw, 72px);\r\n  margin-bottom: clamp(40px, 5vw, 64px);\r\n}\r\n\r\n\/* Inner-page heroes share one calmer visual rhythm. *\/\r\n.services-hero,\r\n.system-hero,\r\n.company-hero,\r\n.investor-hero {\r\n  min-height: min(740px, calc(100svh - 78px));\r\n}\r\n\r\n.services-hero__inner,\r\n.company-hero__inner {\r\n  width: var(--mico-shell);\r\n}\r\n\r\n.services-hero__inner,\r\n.system-hero__inner,\r\n.company-hero__inner,\r\n.investor-hero__inner {\r\n  padding-block: clamp(64px, 7vw, 104px);\r\n}\r\n\r\n.services-hero h1 {\r\n  max-width: 720px;\r\n  font-size: clamp(3rem, 4.4vw, 4.5rem);\r\n  line-height: .95;\r\n  letter-spacing: -.052em;\r\n  overflow-wrap: normal;\r\n  word-break: normal;\r\n  hyphens: manual;\r\n}\r\n\r\n.system-hero h1 {\r\n  font-size: clamp(3rem, 4.45vw, 5.2rem);\r\n  line-height: .95;\r\n  letter-spacing: -.054em;\r\n}\r\n\r\n.company-hero h1 {\r\n  font-size: clamp(3rem, 4.8vw, 5.4rem);\r\n  line-height: .95;\r\n  letter-spacing: -.052em;\r\n}\r\n\r\n.investor-hero h1 {\r\n  color: var(--mico-white);\r\n  font-size: clamp(3rem, 4.65vw, 5.3rem);\r\n  line-height: .95;\r\n  letter-spacing: -.055em;\r\n}\r\n\r\n.services-hero__lead,\r\n.system-hero__lead,\r\n.company-hero__lead,\r\n.investor-hero__lead {\r\n  font-size: clamp(1.02rem, 1.2vw, 1.18rem);\r\n}\r\n\r\n.services-hero__facts,\r\n.investor-facts {\r\n  margin-top: 36px;\r\n}\r\n\r\n.services-hero__facts li,\r\n.investor-facts > div {\r\n  padding: 15px 16px;\r\n}\r\n\r\n.service-system {\r\n  min-height: 520px;\r\n}\r\n\r\n.investor-hero__figure {\r\n  min-height: 550px;\r\n}\r\n\r\n\/* Cards remain substantial, but no longer use empty height as decoration. *\/\r\n.service-card {\r\n  min-height: 310px;\r\n  padding: clamp(24px, 2.4vw, 32px);\r\n}\r\n\r\n.service-card__top {\r\n  margin-bottom: 38px;\r\n}\r\n\r\n.service-card h3 {\r\n  font-size: clamp(1.5rem, 2vw, 2.15rem);\r\n}\r\n\r\n.route-lane__head {\r\n  min-height: 230px;\r\n  padding: clamp(26px, 3vw, 38px);\r\n}\r\n\r\n.compass-result {\r\n  padding: clamp(26px, 3.4vw, 42px);\r\n}\r\n\r\n.services-contact h2,\r\n.system-contact h2,\r\n.company-contact h2 {\r\n  color: var(--mico-navy-950);\r\n  font-size: clamp(2.45rem, 4vw, 4.75rem);\r\n  line-height: .98;\r\n}\r\n\r\n.services-contact [data-reveal] > p:not(.mico-kicker),\r\n.system-contact__grid > div > p:not(.mico-kicker),\r\n.company-contact p {\r\n  color: rgba(11, 0, 61, .78);\r\n}\r\n\r\n.services-contact .mico-kicker,\r\n.system-contact .mico-kicker,\r\n.company-contact .mico-kicker {\r\n  color: var(--mico-navy-950);\r\n}\r\n\r\n.expertise-network {\r\n  min-height: 520px;\r\n}\r\n\r\n.team-card__body {\r\n  padding: 24px;\r\n}\r\n\r\n.roadmap-card {\r\n  min-height: 340px;\r\n  padding: clamp(26px, 3vw, 36px);\r\n}\r\n\r\n.working-card {\r\n  min-height: 240px;\r\n  padding: 24px;\r\n}\r\n\r\n.system-definition-card {\r\n  min-height: 310px;\r\n  padding: 26px;\r\n}\r\n\r\n.system-definition-card__index {\r\n  margin-top: 46px;\r\n}\r\n\r\n.mh-story-stage {\r\n  height: clamp(500px, calc(100svh - 110px), 660px);\r\n}\r\n\r\n.mh-scene {\r\n  min-height: clamp(430px, 60svh, 640px);\r\n}\r\n\r\n.system-route-card {\r\n  min-height: 340px;\r\n  padding: clamp(26px, 3vw, 36px);\r\n}\r\n\r\n.system-route-card__meta {\r\n  margin-bottom: 40px;\r\n}\r\n\r\n.system-partner__roles article {\r\n  min-height: 205px;\r\n  padding: 25px;\r\n}\r\n\r\n.system-value__grid article {\r\n  min-height: 240px;\r\n  padding: 24px;\r\n}\r\n\r\n.system-value__grid article > span {\r\n  margin-bottom: 52px;\r\n}\r\n\r\n.engine-detail {\r\n  min-height: 430px;\r\n  padding: clamp(28px, 3.2vw, 42px);\r\n}\r\n\r\n.engine-detail h3 {\r\n  margin-top: 50px;\r\n  font-size: clamp(1.85rem, 2.8vw, 3.1rem);\r\n}\r\n\r\n.proof-card {\r\n  min-height: 280px;\r\n  padding: 26px;\r\n}\r\n\r\n.proof-card h3 {\r\n  margin-top: 60px;\r\n}\r\n\r\n.stage-ledger__item {\r\n  min-height: 360px;\r\n  padding: clamp(26px, 2.8vw, 36px);\r\n}\r\n\r\n.stage-ledger h3 {\r\n  margin-top: 46px;\r\n}\r\n\r\n.investor-team__portraits {\r\n  min-height: 530px;\r\n}\r\n\r\n.investor-contact h2 {\r\n  color: var(--mico-white);\r\n  font-size: clamp(2.55rem, 4.3vw, 5rem);\r\n  line-height: .95;\r\n}\r\n\r\n\/*\r\n * Divi assigns heading colors directly. Explicit surface colors prevent those\r\n * theme declarations from turning headings black on navy and violet panels.\r\n *\/\r\n:where(.services-hero, .system-hero, .company-hero, .investor-hero,\r\n       .service-compass, .expertise, .system-story, .system-routes,\r\n       .investor-thesis, .investor-stages, .investor-room, .investor-contact)\r\n  :where(h1, h2, h3) {\r\n  color: var(--mico-white) !important;\r\n}\r\n\r\n.mico-page .mico-title--light,\r\n.mico-page .investor-hero h1,\r\n.mico-page .expertise-content h3,\r\n.mico-page .compass-result h3,\r\n.mico-page .system-route-card h3,\r\n.mico-page .thesis-list h3,\r\n.mico-page .stage-ledger h3,\r\n.mico-page .service-card--accent h3,\r\n.mico-page .route-lane--warehouse h3,\r\n.mico-page .system-definition-card--development h3,\r\n.mico-page .system-layer--experience h3,\r\n.mico-page .system-layer--intelligence h3,\r\n.mico-page .engine-detail h3,\r\n.mico-page .cf7-prototype h3 {\r\n  color: var(--mico-white) !important;\r\n}\r\n\r\n.mico-page .services-contact h2,\r\n.mico-page .system-contact h2,\r\n.mico-page .company-contact h2 {\r\n  color: var(--mico-navy-950) !important;\r\n}\r\n\r\n:where(.service-compass, .expertise, .system-story, .system-routes,\r\n       .investor-thesis, .investor-stages, .investor-room)\r\n  :where(p, li) {\r\n  color: rgba(255, 255, 255, .72);\r\n}\r\n\r\n.service-card--accent :where(h3, strong),\r\n.route-lane--warehouse :where(h3, strong),\r\n.system-definition-card--development :where(h3, strong),\r\n.system-layer--experience :where(h3, strong),\r\n.system-layer--intelligence :where(h3, strong),\r\n.engine-detail :where(h3, strong),\r\n.cf7-prototype :where(h3, strong) {\r\n  color: var(--mico-white);\r\n}\r\n\r\n.cf7-prototype :where(p, label) {\r\n  color: rgba(255, 255, 255, .74);\r\n}\r\n\r\n.compass-choices__privacy,\r\n.cf7-prototype__foot small,\r\n.system-state small,\r\n.compass-chain small,\r\n.engine-detail > small,\r\n.investor-facts dt,\r\n.room-shelves small {\r\n  color: rgba(255, 255, 255, .7);\r\n  font-size: 12px;\r\n}\r\n\r\n@media (max-width: 1120px) {\r\n  .mico-nav-inner {\r\n    gap: 20px;\r\n  }\r\n\r\n  .services-hero__inner {\r\n    grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);\r\n    gap: 38px;\r\n  }\r\n\r\n  .system-hero__visual {\r\n    width: 106%;\r\n    margin: -6% -3% -4%;\r\n  }\r\n}\r\n\r\n@media (max-width: 860px) {\r\n  .mico-page {\r\n    --mico-shell: min(calc(100% - 36px), 1240px);\r\n  }\r\n\r\n  .mico-shell--narrow {\r\n    width: min(calc(100% - 36px), 1020px);\r\n  }\r\n\r\n  .mico-nav-inner {\r\n    min-height: 72px;\r\n  }\r\n\r\n  .mico-logo {\r\n    width: 100px;\r\n    height: 48px;\r\n  }\r\n\r\n  .mico-nav-links {\r\n    inset: 72px 0 auto;\r\n    max-height: calc(100svh - 72px);\r\n  }\r\n\r\n  body.admin-bar .mico-nav-links {\r\n    top: 104px;\r\n  }\r\n\r\n  .mico-section {\r\n    padding-block: clamp(64px, 9vw, 84px);\r\n  }\r\n\r\n  .mico-title {\r\n    font-size: clamp(2.05rem, 7.2vw, 3.15rem);\r\n  }\r\n\r\n  .mico-section-head {\r\n    margin-bottom: 40px;\r\n  }\r\n\r\n  .services-hero__inner,\r\n  .system-hero__inner,\r\n  .company-hero__inner,\r\n  .investor-hero__inner {\r\n    padding-block: 64px 76px;\r\n  }\r\n\r\n  .services-hero__inner {\r\n    grid-template-columns: 1fr;\r\n    gap: 44px;\r\n  }\r\n\r\n  .portrait-system {\r\n    min-height: 450px;\r\n  }\r\n\r\n  .investor-hero__figure {\r\n    min-height: 560px;\r\n  }\r\n}\r\n\r\n@media (max-width: 782px) {\r\n  body.admin-bar .mico-nav-links {\r\n    top: 118px;\r\n  }\r\n}\r\n\r\n@media (max-width: 700px) {\r\n  .services-hero h1,\r\n  .system-hero h1,\r\n  .company-hero h1,\r\n  .investor-hero h1 {\r\n    font-size: clamp(2.4rem, 10vw, 3rem);\r\n    line-height: 1;\r\n    letter-spacing: -.045em;\r\n  }\r\n\r\n  .services-hero__inner,\r\n  .system-hero__inner,\r\n  .company-hero__inner,\r\n  .investor-hero__inner {\r\n    padding-block: 56px 68px;\r\n  }\r\n\r\n  .services-hero__lead,\r\n  .system-hero__lead,\r\n  .company-hero__lead,\r\n  .investor-hero__lead {\r\n    font-size: 1rem;\r\n    line-height: 1.58;\r\n  }\r\n\r\n  .system-hero__visual {\r\n    width: 122%;\r\n    margin: -1% -11% -5%;\r\n  }\r\n\r\n  .investor-hero__figure {\r\n    min-height: 450px;\r\n  }\r\n\r\n  .services-contact h2,\r\n  .system-contact h2,\r\n  .company-contact h2,\r\n  .investor-contact h2 {\r\n    font-size: clamp(2.35rem, 10vw, 3.2rem);\r\n  }\r\n}\r\n\r\n@media (max-width: 640px) {\r\n  .mico-page {\r\n    --mico-shell: min(calc(100% - 32px), 1240px);\r\n  }\r\n\r\n  .mico-shell--narrow {\r\n    width: min(calc(100% - 32px), 1020px);\r\n  }\r\n\r\n  .mico-nav-inner {\r\n    min-height: 68px;\r\n    gap: 10px;\r\n  }\r\n\r\n  .mico-logo {\r\n    width: 96px;\r\n    height: 46px;\r\n  }\r\n\r\n  .mico-menu-toggle {\r\n    width: 46px;\r\n    height: 46px;\r\n  }\r\n\r\n  .mico-nav-links {\r\n    inset: 68px 0 auto;\r\n    max-height: calc(100svh - 68px);\r\n  }\r\n\r\n  body.admin-bar .mico-nav-links {\r\n    top: 114px;\r\n  }\r\n\r\n  .mico-section {\r\n    padding-block: 64px;\r\n  }\r\n\r\n  .mico-kicker {\r\n    margin-bottom: 16px;\r\n    font-size: 11px;\r\n  }\r\n\r\n  .service-card,\r\n  .route-lane__head,\r\n  .compass-choices,\r\n  .compass-result,\r\n  .system-definition-card,\r\n  .system-layer,\r\n  .system-route-card,\r\n  .system-partner__roles article,\r\n  .proof-card,\r\n  .stage-ledger__item,\r\n  .cf7-prototype {\r\n    padding: 22px;\r\n  }\r\n\r\n  .portrait-system {\r\n    min-height: 370px;\r\n  }\r\n\r\n  .mh-story-viewport {\r\n    min-height: 238px;\r\n  }\r\n\r\n  .investor-hero__figure {\r\n    min-height: 410px;\r\n  }\r\n\r\n  .investor-team__portraits {\r\n    min-height: 440px;\r\n  }\r\n}\r\n\r\n@media (max-width: 430px) {\r\n  .investor-hero__figure {\r\n    min-height: 390px;\r\n  }\r\n\r\n  .investor-team__portraits {\r\n    min-height: 410px;\r\n  }\r\n}\r\n<\/style>\r\n<script data-mico-shell>\r\n(function () {\r\n  \"use strict\";\r\n  var script = document.currentScript;\r\n  var root = script && script.closest(\".mico-wp-page\");\r\n  if (!root || !document.body) return;\r\n  document.body.classList.add(\"mico-site-active\");\r\n\r\n  function prepareMicoPage() {\r\n    if (!document.body.contains(root)) return;\r\n    document.body.classList.add(\"mico-site-active\");\r\n    var landmarks = document.querySelectorAll(\".et-l--header, #main-header, footer.et-l--footer, #main-footer\");\r\n    Array.prototype.forEach.call(landmarks, function (landmark) {\r\n      if (root.contains(landmark)) return;\r\n      landmark.setAttribute(\"aria-hidden\", \"true\");\r\n      landmark.style.setProperty(\"display\", \"none\", \"important\");\r\n      if (\"inert\" in landmark) landmark.inert = true;\r\n    });\r\n    var viewport = document.querySelector('meta[name=\"viewport\"]');\r\n    if (viewport) viewport.setAttribute(\"content\", \"width=device-width, initial-scale=1\");\r\n  }\r\n\r\n  prepareMicoPage();\r\n  if (document.readyState === \"loading\") {\r\n    document.addEventListener(\"DOMContentLoaded\", prepareMicoPage, { once: true });\r\n  }\r\n  window.addEventListener(\"load\", prepareMicoPage, { once: true });\r\n})();\r\n<\/script>\r\n    <a class=\"mico-skip\" href=\"#mico-main-content\">Siirry sis\u00e4lt\u00f6\u00f6n<\/a>\r\n\r\n    <header class=\"mico-nav\" aria-label=\"Mico Finlandin p\u00e4\u00e4valikko\">\r\n      <div class=\"mico-shell mico-nav-inner\">\r\n        <a class=\"mico-logo\" href=\"\/\" aria-label=\"Mico Finland \u2013 etusivu\">\r\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.micofoy.fi\/wp-content\/uploads\/2025\/04\/Mico-logo.png\" width=\"500\" height=\"250\" alt=\"Mico Finland\">\r\n        <\/a>\r\n        <nav class=\"mico-nav-links\" id=\"mico-primary-menu\" data-menu aria-label=\"P\u00e4\u00e4valikko\">\r\n          <a href=\"\/\">Etusivu<\/a>\r\n          <a href=\"\/index.php\/palvelut\/\">Palvelut<\/a>\r\n          <a href=\"\/index.php\/mico-system\/\" aria-current=\"page\">Mico System<\/a>\r\n          <a href=\"\/index.php\/yritys-ja-tiimi\/\">Yritys &amp; tiimi<\/a>\r\n          <a class=\"mico-nav-contact-link\" href=\"\/index.php\/ota-yhteytta\/\">Ota yhteytt\u00e4 <span aria-hidden=\"true\">\u2192<\/span><\/a>\r\n        <\/nav>\r\n        <div class=\"mico-nav-actions\">\r\n          <a class=\"mico-button mico-nav-cta\" href=\"\/index.php\/ota-yhteytta\/\">Ota yhteytt\u00e4 <span aria-hidden=\"true\">\u2192<\/span><\/a>\r\n          <button class=\"mico-menu-toggle\" type=\"button\" data-menu-toggle aria-controls=\"mico-primary-menu\" aria-expanded=\"false\" aria-label=\"Avaa valikko\">\r\n            <span aria-hidden=\"true\"><\/span>\r\n          <\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/header>\r\n\r\n    <main id=\"mico-main-content\">\r\n      <section class=\"system-hero\" aria-labelledby=\"system-main-title\">\r\n        <div class=\"system-hero__grid\" aria-hidden=\"true\"><\/div>\r\n        <div class=\"mico-shell system-hero__inner\">\r\n          <div class=\"system-hero__copy\" data-reveal>\r\n            <p class=\"mico-kicker mico-kicker--light\">Mico System \u00b7 N\u00e4in se toimii<\/p>\r\n            <h1 id=\"system-main-title\">Toimiva logistiikka nyt. \u00c4lykk\u00e4\u00e4mpi j\u00e4rjestelm\u00e4 askel kerrallaan.<\/h1>\r\n            <p class=\"system-hero__lead\">Mico System n\u00e4ytt\u00e4\u00e4, miten nykyinen kuljetus-, varastointi- ja ker\u00e4ilytoiminta yhdistyy k\u00e4yt\u00f6ss\u00e4 olevaan modulaariseen kuljetuslaitteistoon, vaiheittain vahvistuvaan teko\u00e4lyintegraatioon ja autonomisemman toiminnan kehityssuuntaan.<\/p>\r\n            <div class=\"system-hero__actions\">\r\n              <a class=\"mico-button\" href=\"#system-story\">Avaa System Story <span aria-hidden=\"true\">\u2193<\/span><\/a>\r\n              <a class=\"mico-button mico-button--light\" href=\"\/index.php\/palvelut\/\">Katso palvelut <span aria-hidden=\"true\">\u2192<\/span><\/a>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <figure class=\"system-hero__visual\" data-reveal>\r\n            <img src=\"https:\/\/www.micofoy.fi\/wp-content\/uploads\/2026\/08\/mico-system-overview-1672.webp\" width=\"1672\" height=\"941\" decoding=\"async\" fetchpriority=\"high\" alt=\"Havainnekuva Mico Systemin logistiikkaketjusta: nouto, varasto, kuljetus, toimitus ja tulevaisuuden teknologiat\">\r\n          <\/figure>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <section class=\"mico-section system-definition\" aria-labelledby=\"system-definition-title\">\r\n        <div class=\"mico-shell\">\r\n          <div class=\"mico-section-head\">\r\n            <div data-reveal>\r\n              <p class=\"mico-kicker\">Mit\u00e4 Mico System tarkoittaa?<\/p>\r\n              <h2 class=\"mico-title\" id=\"system-definition-title\">Ei yksi laite. Yksi kehittyv\u00e4 toimintamalli.<\/h2>\r\n            <\/div>\r\n            <p class=\"mico-section-note\" data-reveal>Mico System kokoaa nykyisen palvelun, k\u00e4yt\u00f6ss\u00e4 olevan modulaarisen laitteiston, vaiheittain vahvistuvan teko\u00e4lyintegraation ja pian k\u00e4ytt\u00f6\u00f6n tulevan infrastruktuurin samaan kuvaan \u2014 niiden toteutusasteet selke\u00e4sti erottaen.<\/p>\r\n          <\/div>\r\n\r\n          <div class=\"system-definition__grid\">\r\n            <article class=\"system-definition-card system-definition-card--now\" data-reveal>\r\n              <span class=\"system-definition-card__status\"><i aria-hidden=\"true\"><\/i>K\u00e4yt\u00f6ss\u00e4 nyt<\/span>\r\n              <span class=\"system-definition-card__index\">01<\/span>\r\n              <h3>Operatiivinen ydin<\/h3>\r\n              <p>Kuljetus, kotiintoimitus, ker\u00e4ily, varastointi ja l\u00e4mp\u00f6tilahallittu kalusto palvelevat jo asiakkaita Helsinki\u2013Turku-vy\u00f6hykkeell\u00e4.<\/p>\r\n            <\/article>\r\n            <article class=\"system-definition-card system-definition-card--development\" data-reveal>\r\n              <span class=\"system-definition-card__status\"><i aria-hidden=\"true\"><\/i>K\u00e4yt\u00f6ss\u00e4 \u00b7 vahvistuu<\/span>\r\n              <span class=\"system-definition-card__index\">02<\/span>\r\n              <h3>Modulaarinen teknologiakerros<\/h3>\r\n              <p>Modulaarinen kuljetuslaitteisto on jo k\u00e4yt\u00f6ss\u00e4. Teko\u00e4ly\u00e4 integroidaan Micon j\u00e4rjestelmiin ja prosesseihin vaiheittain yh\u00e4 vahvemmin. Autonomisempia toimintatapoja kehitet\u00e4\u00e4n hallitusti.<\/p>\r\n            <\/article>\r\n            <article class=\"system-definition-card system-definition-card--future\" data-reveal>\r\n              <span class=\"system-definition-card__status\"><i aria-hidden=\"true\"><\/i>Tulossa pian<\/span>\r\n              <span class=\"system-definition-card__index\">03<\/span>\r\n              <h3>Seuraava infrastruktuuri<\/h3>\r\n              <p>Uusi, aiempaa suurempi terminaali, varastomyynti, pieni pakkaamo, dronejakelukentt\u00e4 ja liikkuvat l\u00e4mp\u00f6tilahallitut noutopisteet ovat tulossa pian.<\/p>\r\n            <\/article>\r\n          <\/div>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <section class=\"mico-section system-story mh-story\" id=\"system-story\" data-mh-story data-mh-story-layout=\"paired\" aria-labelledby=\"system-story-title\">\r\n        <div class=\"mico-shell\">\r\n          <div class=\"mh-story-intro\">\r\n            <div data-reveal>\r\n              <p class=\"mico-kicker mico-kicker--light\">Mico System Story<\/p>\r\n              <h2 class=\"mico-title mico-title--light\" id=\"system-story-title\">N\u00e4e, miten palveluketju rakentuu vaihe vaiheelta.<\/h2>\r\n            <\/div>\r\n            <div data-reveal>\r\n              <p class=\"system-story__lead\">Valkoiset ja oranssit rakenteet kuvaavat nykyist\u00e4 toimintaa. Violetit osat n\u00e4ytt\u00e4v\u00e4t k\u00e4yt\u00f6ss\u00e4 olevaa ja vaiheittain vahvistuvaa teknologiakerrosta. L\u00e4pikuultavat rakenteet kuvaavat pian k\u00e4ytt\u00f6\u00f6n tulevaa infrastruktuuria \u2014 eiv\u00e4t viel\u00e4 tilattavaa palvelua.<\/p>\r\n              <a class=\"mh-story-skip\" href=\"#system-layers\">Ohita 3D-tarina ja siirry j\u00e4rjestelm\u00e4n kerroksiin<\/a>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"mh-story-grid\">\r\n            <div class=\"mh-story-stage is-webgl-pending\" id=\"mico-system-stage\" data-mh-story-stage data-stage=\"1\" data-status=\"now\" aria-label=\"Mico Systemin viisivaiheinen 3D-tarina\">\r\n              <div class=\"mh-stage-toolbar\">\r\n                <div class=\"mh-stage-ident\">\r\n                  <span class=\"mh-stage-count\" data-mh-stage-count>Kohtaus 1 \/ 5<\/span>\r\n                  <span class=\"mh-stage-status\" data-mh-stage-status>K\u00e4yt\u00f6ss\u00e4 nyt<\/span>\r\n                <\/div>\r\n                <button class=\"mh-motion-toggle\" type=\"button\" data-mh-story-motion aria-pressed=\"false\" aria-label=\"Pys\u00e4yt\u00e4 3D-liike\">\r\n                  <svg class=\"mh-pause-icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M3.5 2.5h3v11h-3zm6 0h3v11h-3z\"><\/path><\/svg>\r\n                  <svg class=\"mh-play-icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M4 2.4v11.2L13 8z\"><\/path><\/svg>\r\n                  <span class=\"mh-motion-label\" data-mh-motion-label>Pys\u00e4yt\u00e4 liike<\/span>\r\n                <\/button>\r\n              <\/div>\r\n\r\n              <div class=\"mh-story-viewport\" data-mh-story-viewport>\r\n                <img class=\"mh-story-poster\" data-mh-story-poster src=\"https:\/\/www.micofoy.fi\/wp-content\/uploads\/2026\/08\/mico-system-story-poster-1280.webp\" width=\"1280\" height=\"720\" loading=\"lazy\" decoding=\"async\" alt=\"\" aria-hidden=\"true\">\r\n                <canvas class=\"mh-story-canvas\" data-mh-story-canvas width=\"1200\" height=\"720\" aria-hidden=\"true\"><\/canvas>\r\n                <div class=\"mh-story-legend\" aria-label=\"Kuvituksen tilaselitteet\">\r\n                  <span><i aria-hidden=\"true\"><\/i>K\u00e4yt\u00f6ss\u00e4 nyt<\/span>\r\n                  <span class=\"is-development\"><i aria-hidden=\"true\"><\/i>K\u00e4yt\u00f6ss\u00e4 \u00b7 vahvistuu<\/span>\r\n                  <span class=\"is-future\"><i aria-hidden=\"true\"><\/i>Tulossa pian<\/span>\r\n                <\/div>\r\n                <span class=\"mh-story-loader\" data-mh-story-loading>3D-n\u00e4kym\u00e4\u00e4 valmistellaan<\/span>\r\n              <\/div>\r\n\r\n              <div class=\"mh-stage-foot\">\r\n                <div class=\"mh-stage-copy\">\r\n                  <p class=\"mh-stage-title\" data-mh-stage-title>Operatiivinen perusta<\/p>\r\n                  <p class=\"mh-stage-caption\" data-mh-stage-caption>Nouto, Nummen varasto, ker\u00e4ily, l\u00e4mp\u00f6tilahallittu kuljetus ja toimitus muodostavat nykyisen palveluketjun.<\/p>\r\n                <\/div>\r\n                <div class=\"mh-story-controls\" role=\"group\" aria-label=\"Valitse System Storyn kohtaus\">\r\n                  <button class=\"mh-story-arrow\" type=\"button\" data-mh-story-prev aria-label=\"Edellinen kohtaus\" disabled>\u2190<\/button>\r\n                  <div class=\"mh-story-steps\">\r\n                    <button class=\"mh-story-step\" type=\"button\" data-mh-story-step data-story-index=\"0\" aria-label=\"Kohtaus 1: Operatiivinen perusta\" aria-current=\"step\">01<\/button>\r\n                    <button class=\"mh-story-step\" type=\"button\" data-mh-story-step data-story-index=\"1\" aria-label=\"Kohtaus 2: Yksi palvelu tai koko ketju\">02<\/button>\r\n                    <button class=\"mh-story-step\" type=\"button\" data-mh-story-step data-story-index=\"2\" aria-label=\"Kohtaus 3: Modulaarinen teknologiakerros\">03<\/button>\r\n                    <button class=\"mh-story-step\" type=\"button\" data-mh-story-step data-story-index=\"3\" aria-label=\"Kohtaus 4: Seuraava infrastruktuuri\">04<\/button>\r\n                    <button class=\"mh-story-step\" type=\"button\" data-mh-story-step data-story-index=\"4\" aria-label=\"Kohtaus 5: Yhdistyv\u00e4 j\u00e4rjestelm\u00e4\">05<\/button>\r\n                  <\/div>\r\n                  <button class=\"mh-story-arrow\" type=\"button\" data-mh-story-next aria-label=\"Seuraava kohtaus\">\u2192<\/button>\r\n                <\/div>\r\n                <p class=\"sr-only\" data-mh-story-live aria-live=\"polite\"><\/p>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"mh-scenes\" data-mh-scenes>\r\n              <article class=\"mh-scene is-active\" data-mh-scene data-stage=\"1\" data-title=\"Operatiivinen perusta\" data-caption=\"Nouto, Nummen varasto, ker\u00e4ily, l\u00e4mp\u00f6tilahallittu kuljetus ja toimitus muodostavat nykyisen palveluketjun.\" tabindex=\"-1\" aria-labelledby=\"system-scene-title-1\">\r\n                <span class=\"mh-scene-number\">Kohtaus 01<\/span>\r\n                <span class=\"mh-status mh-status--now\">K\u00e4yt\u00f6ss\u00e4 nyt<\/span>\r\n                <h3 id=\"system-scene-title-1\">Perusta on operatiivinen, ei pelkk\u00e4 konsepti.<\/h3>\r\n                <p>Mico kuljettaa ruokaa ja muita tuotteita, operoi varastoa Oilaantie 6:ssa Nummessa ja palvelee Helsinki\u2013Turku-vy\u00f6hykkeell\u00e4 l\u00e4mp\u00f6tilahallitulla kalustolla.<\/p>\r\n                <ul class=\"mh-scene-evidence\" aria-label=\"Nykyisen toiminnan osat\">\r\n                  <li>Nouto asiakkaan m\u00e4\u00e4ritt\u00e4m\u00e4st\u00e4 paikasta<\/li>\r\n                  <li>Varastointi, ker\u00e4ily ja edelleen toimitus<\/li>\r\n                  <li>Yritys- ja kotiintoimitukset samalla palveluvirralla<\/li>\r\n                <\/ul>\r\n              <\/article>\r\n\r\n              <article class=\"mh-scene\" data-mh-scene data-stage=\"2\" data-title=\"Yksi palvelu tai koko ketju\" data-caption=\"Asiakkaan ratkaisu voidaan rakentaa suorasta kuljetuksesta tai Micon operoiman varaston kautta kulkevasta kokonaisuudesta.\" tabindex=\"-1\" aria-labelledby=\"system-scene-title-2\">\r\n                <span class=\"mh-scene-number\">Kohtaus 02<\/span>\r\n                <span class=\"mh-status mh-status--now\">K\u00e4yt\u00f6ss\u00e4 nyt<\/span>\r\n                <h3 id=\"system-scene-title-2\">Yksi palvelu tai koko ketju.<\/h3>\r\n                <p>Asiakas voi valita kuljetuksen, kotiintoimituksen, ker\u00e4ilyn, varastoinnin tai niist\u00e4 rakennetun kokonaisuuden. Tuotteet voidaan ohjata varaston kautta tai noutaa suoraan toimitukseen.<\/p>\r\n                <ul class=\"mh-scene-evidence\" aria-label=\"Kaksi nykyist\u00e4 palvelupolkua\">\r\n                  <li>Suora polku: nouto ja toimitus sovittuun kohteeseen<\/li>\r\n                  <li>Varastopolku: vastaanotto, s\u00e4ilytys, ker\u00e4ily ja toimitus<\/li>\r\n                <\/ul>\r\n              <\/article>\r\n\r\n              <article class=\"mh-scene\" data-mh-scene data-stage=\"3\" data-title=\"Modulaarinen teknologiakerros\" data-caption=\"Modulaarinen kuljetuslaitteisto on k\u00e4yt\u00f6ss\u00e4, ja teko\u00e4lyintegraatiota vahvistetaan j\u00e4rjestelmiss\u00e4 vaiheittain. Autonomisempi toiminta on seuraava kehityssuunta.\" tabindex=\"-1\" aria-labelledby=\"system-scene-title-3\">\r\n                <span class=\"mh-scene-number\">Kohtaus 03<\/span>\r\n                <span class=\"mh-status mh-status--development\">K\u00e4yt\u00f6ss\u00e4 \u00b7 vahvistuu<\/span>\r\n                <h3 id=\"system-scene-title-3\">Modulaarinen laitteisto on jo osa operointia.<\/h3>\r\n                <p>Micon l\u00e4mp\u00f6tilahallittu modulaarinen kuljetuslaitteisto on jo operatiivisessa k\u00e4yt\u00f6ss\u00e4. Teko\u00e4ly\u00e4 liitet\u00e4\u00e4n j\u00e4rjestelmiin ja prosesseihin vaiheittain yh\u00e4 vahvemmin. Autonomisempia toimintatapoja kehitet\u00e4\u00e4n hallitusti.<\/p>\r\n                <ul class=\"mh-scene-evidence\" aria-label=\"K\u00e4yt\u00f6ss\u00e4 olevat ja vaiheittain vahvistuvat osat\">\r\n                  <li>K\u00e4yt\u00f6ss\u00e4 oleva l\u00e4mp\u00f6tilahallittu modulaarinen kuljetuslaitteisto<\/li>\r\n                  <li>J\u00e4rjestelmiin vaiheittain vahvistuva data- ja teko\u00e4lykerros<\/li>\r\n                  <li>Yhteisty\u00f6 Deliventures Oy:n kanssa<\/li>\r\n                <\/ul>\r\n              <\/article>\r\n\r\n              <article class=\"mh-scene\" data-mh-scene data-stage=\"4\" data-title=\"Seuraava infrastruktuuri\" data-caption=\"Uusi, aiempaa suurempi terminaali, varastomyynti, pieni pakkaamo, dronejakelukentt\u00e4 ja liikkuvat l\u00e4mp\u00f6tilahallitut noutopisteet ovat tulossa pian.\" tabindex=\"-1\" aria-labelledby=\"system-scene-title-4\">\r\n                <span class=\"mh-scene-number\">Kohtaus 04<\/span>\r\n                <span class=\"mh-status mh-status--future\">Tulossa pian<\/span>\r\n                <h3 id=\"system-scene-title-4\">Seuraava infrastruktuuri laajentaa mahdollisuuksia.<\/h3>\r\n                <p>Pian Mico Finland saa k\u00e4ytt\u00f6\u00f6ns\u00e4 uuden, aiempaa suuremman terminaalin. Sen yhteyteen avataan varastomyynti ja pieni pakkaamo sek\u00e4 rakennetaan dronejakelukentt\u00e4. Uusi kokonaisuus mahdollistaa my\u00f6s l\u00e4mp\u00f6tilahallittujen, koodilla avattavien liikkuvien noutopisteiden entist\u00e4 laajemman ja tehokkaamman hy\u00f6dynt\u00e4misen.<\/p>\r\n                <ul class=\"mh-scene-evidence\" aria-label=\"Pian tulossa olevan infrastruktuurin osat\">\r\n                  <li>Uusi, aiempaa suurempi terminaali<\/li>\r\n                  <li>Varastomyynti ja pieni pakkaamo<\/li>\r\n                  <li>Dronejakelukentt\u00e4 ja liikkuvien noutopisteiden laajempi k\u00e4ytt\u00f6<\/li>\r\n                <\/ul>\r\n              <\/article>\r\n\r\n              <article class=\"mh-scene\" data-mh-scene data-stage=\"5\" data-title=\"Yhdistyv\u00e4 j\u00e4rjestelm\u00e4\" data-caption=\"Nykyinen operointi, k\u00e4yt\u00f6ss\u00e4 oleva ja vaiheittain vahvistuva teknologia sek\u00e4 pian k\u00e4ytt\u00f6\u00f6n tuleva infrastruktuuri muodostavat vaiheittain rakentuvan tavoitetilan.\" tabindex=\"-1\" aria-labelledby=\"system-scene-title-5\">\r\n                <span class=\"mh-scene-number\">Kohtaus 05<\/span>\r\n                <span class=\"mh-status mh-status--future\">Suunta<\/span>\r\n                <h3 id=\"system-scene-title-5\">Kasvun suunta rakentuu k\u00e4yt\u00e4nn\u00f6n ty\u00f6n p\u00e4\u00e4lle.<\/h3>\r\n                <p>Nykyinen kalusto, varasto, asiakkuudet ja modulaarinen kuljetuslaitteisto muodostavat toimivan perustan. Teko\u00e4lyintegraatiota vahvistetaan vaiheittain ja uusia toimintatapoja liitet\u00e4\u00e4n kokonaisuuteen hallitusti.<\/p>\r\n                <ul class=\"mh-scene-evidence\" aria-label=\"Tavoitellun j\u00e4rjestelm\u00e4n periaatteet\">\r\n                  <li>Nykyinen palvelu s\u00e4ilyy j\u00e4rjestelm\u00e4n kiinte\u00e4n\u00e4 ytimen\u00e4<\/li>\r\n                  <li>Uusia osia voidaan liitt\u00e4\u00e4 ketjuun vaiheittain<\/li>\r\n                  <li>Teknologian vahvistumisen vaiheet ja toteutusasteet pidet\u00e4\u00e4n selke\u00e4sti erill\u00e4\u00e4n<\/li>\r\n                <\/ul>\r\n              <\/article>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <section class=\"mico-section system-layers\" id=\"system-layers\" aria-labelledby=\"system-layers-title\">\r\n        <div class=\"mico-shell\">\r\n          <div class=\"mico-section-head\">\r\n            <div data-reveal>\r\n              <p class=\"mico-kicker\">J\u00e4rjestelm\u00e4n kerrokset<\/p>\r\n              <h2 class=\"mico-title\" id=\"system-layers-title\">Teknologia ei korvaa operointia. Se liittyy siihen.<\/h2>\r\n            <\/div>\r\n            <p class=\"mico-section-note\" data-reveal>Kerrosmalli tekee n\u00e4kyv\u00e4ksi, mik\u00e4 on k\u00e4yt\u00f6ss\u00e4 nyt, mit\u00e4 vahvistetaan vaiheittain ja mik\u00e4 kuuluu seuraavaan tavoitteeseen.<\/p>\r\n          <\/div>\r\n\r\n          <div class=\"system-layer-stack\">\r\n            <article class=\"system-layer system-layer--experience\" data-reveal>\r\n              <div class=\"system-layer__head\"><span>03<\/span><div><small>Tulossa pian<\/small><h3>Uudet toimitus- ja noutotavat<\/h3><\/div><\/div>\r\n              <div class=\"system-layer__modules\" aria-label=\"Pian k\u00e4ytt\u00f6\u00f6n tulevan infrastruktuurin osat\">\r\n                <span>Uusi terminaali<\/span><span>Varastomyynti<\/span><span>Pieni pakkaamo<\/span><span>Liikkuvat noutopisteet<\/span><span>Dronejakelukentt\u00e4<\/span>\r\n              <\/div>\r\n            <\/article>\r\n            <article class=\"system-layer system-layer--intelligence\" data-reveal>\r\n              <div class=\"system-layer__head\"><span>02<\/span><div><small>K\u00e4yt\u00f6ss\u00e4 \u00b7 vahvistuu<\/small><h3>Ohjaus, data ja modulaarinen kuljetuslaitteisto<\/h3><\/div><\/div>\r\n              <div class=\"system-layer__modules\" aria-label=\"K\u00e4yt\u00f6ss\u00e4 olevan ja vaiheittain vahvistuvan teknologiakerroksen osat\">\r\n                <span>Teko\u00e4lyintegraatio vahvistuu vaiheittain<\/span><span>Prosessiautomaatio<\/span><span>Autonomisempi toiminta kehityssuuntana<\/span><span>Modulaarinen kuljetuslaitteisto k\u00e4yt\u00f6ss\u00e4<\/span>\r\n              <\/div>\r\n            <\/article>\r\n            <article class=\"system-layer system-layer--operations\" data-reveal>\r\n              <div class=\"system-layer__head\"><span>01<\/span><div><small>K\u00e4yt\u00f6ss\u00e4 nyt<\/small><h3>Operatiivinen palveluketju<\/h3><\/div><\/div>\r\n              <div class=\"system-layer__modules\" aria-label=\"Nykyisen operoinnin moduulit\">\r\n                <span>Nouto<\/span><span>Varastointi<\/span><span>Ker\u00e4ily<\/span><span>L\u00e4mp\u00f6tilahallittu kuljetus<\/span><span>Toimitus<\/span>\r\n              <\/div>\r\n            <\/article>\r\n          <\/div>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <section class=\"mico-section system-routes\" aria-labelledby=\"system-routes-title\">\r\n        <div class=\"mico-shell\">\r\n          <div class=\"system-routes__head\">\r\n            <div data-reveal>\r\n              <p class=\"mico-kicker mico-kicker--light\">Kaksi nykyist\u00e4 palvelupolkua<\/p>\r\n              <h2 class=\"mico-title mico-title--light\" id=\"system-routes-title\">Sama ydin mukautuu tarpeeseen.<\/h2>\r\n            <\/div>\r\n            <a class=\"mico-button\" href=\"\/index.php\/palvelut\/#palvelukompassi\" data-reveal>Kokeile palvelukompassia <span aria-hidden=\"true\">\u2192<\/span><\/a>\r\n          <\/div>\r\n\r\n          <div class=\"system-route-grid\">\r\n            <article class=\"system-route-card\" data-reveal>\r\n              <div class=\"system-route-card__meta\"><span>A<\/span><small>K\u00e4yt\u00f6ss\u00e4 nyt<\/small><\/div>\r\n              <h3>Suoraan kohteeseen<\/h3>\r\n              <p>Mico noutaa tuotteet sovitusta sijainnista ja toimittaa ne yritykselle tai kuluttajalle.<\/p>\r\n              <ol aria-label=\"Suoran palvelupolun vaiheet\"><li>Nouto<\/li><li>L\u00e4mp\u00f6tilahallittu kuljetus<\/li><li>Toimitus<\/li><\/ol>\r\n            <\/article>\r\n            <article class=\"system-route-card system-route-card--warehouse\" data-reveal>\r\n              <div class=\"system-route-card__meta\"><span>B<\/span><small>K\u00e4yt\u00f6ss\u00e4 nyt<\/small><\/div>\r\n              <h3>Varaston kautta<\/h3>\r\n              <p>Tuotteet vastaanotetaan Micon operoimaan varastoon, s\u00e4ilytet\u00e4\u00e4n, ker\u00e4t\u00e4\u00e4n ja toimitetaan eteenp\u00e4in.<\/p>\r\n              <ol aria-label=\"Varaston kautta kulkevan palvelupolun vaiheet\"><li>Vastaanotto<\/li><li>Varastointi<\/li><li>Ker\u00e4ily<\/li><li>Kuljetus<\/li><li>Toimitus<\/li><\/ol>\r\n            <\/article>\r\n          <\/div>\r\n          <p class=\"system-routes__note\" role=\"note\" data-reveal>Mico vahvistaa aina tuotteen, l\u00e4mp\u00f6tilavaatimuksen, reitin, rytmin, m\u00e4\u00e4r\u00e4n ja palvelualueen ennen toteutusta.<\/p>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <section class=\"mico-section system-partner\" aria-labelledby=\"system-partner-title\">\r\n        <div class=\"mico-shell system-partner__grid\">\r\n          <div class=\"system-partner__copy\" data-reveal>\r\n            <p class=\"mico-kicker\">Kehitysyhteisty\u00f6<\/p>\r\n            <h2 class=\"mico-title\" id=\"system-partner-title\">Deliventures kehitt\u00e4\u00e4 v\u00e4lineist\u00f6\u00e4. Mico vie sen logistiikan arkeen.<\/h2>\r\n            <p>Mico Finlandin toimittaman tiedon mukaan yhti\u00f6 toimii yhteisty\u00f6ss\u00e4 suomalaisen Deliventures Oy:n kanssa. Deliventures kehitt\u00e4\u00e4 ruoan verkkokaupan logistiikkaan suunnattuja ratkaisuja, joita Mico hy\u00f6dynt\u00e4\u00e4 oman toimintansa kehitt\u00e4misess\u00e4.<\/p>\r\n            <p class=\"system-partner__verification\"><strong>Ty\u00f6njako:<\/strong> Deliventures kehitt\u00e4\u00e4 ruoan verkkokaupan tarpeisiin suunnattua laitteistoa, jota Mico hy\u00f6dynt\u00e4\u00e4 oman toimintamallinsa kehitt\u00e4misess\u00e4.<\/p>\r\n          <\/div>\r\n          <div class=\"system-partner__roles\" aria-label=\"Kehitysyhteisty\u00f6n roolit\" data-reveal>\r\n            <article><span>01<\/span><small>Deliventures Oy<\/small><h3>V\u00e4lineist\u00f6 ja tekninen kehitys<\/h3><p>Ruoan verkkokaupan tarpeisiin suunnattujen modulaaristen ratkaisujen kehitys.<\/p><\/article>\r\n            <article><span>02<\/span><small>Mico Finland<\/small><h3>Operatiivinen k\u00e4ytt\u00f6 ja palvelumalli<\/h3><p>Ratkaisujen liitt\u00e4minen kuljetukseen, ker\u00e4ilyyn, varastointiin ja kotiintoimitukseen vaiheittain.<\/p><\/article>\r\n          <\/div>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <section class=\"mico-section system-value\" aria-labelledby=\"system-value-title\">\r\n        <div class=\"mico-shell\">\r\n          <div class=\"mico-section-head\">\r\n            <div data-reveal>\r\n              <p class=\"mico-kicker\">Miksi t\u00e4ll\u00e4 on merkityst\u00e4?<\/p>\r\n              <h2 class=\"mico-title\" id=\"system-value-title\">Asiakkaalle j\u00e4rjestelm\u00e4 n\u00e4kyy ennen kaikkea selkeyten\u00e4.<\/h2>\r\n            <\/div>\r\n            <p class=\"mico-section-note\" data-reveal>Tavoite ei ole lis\u00e4t\u00e4 asiakkaalle teknologiaa, vaan v\u00e4hent\u00e4\u00e4 erillisten vaiheiden ja vastuiden aiheuttamaa kitkaa.<\/p>\r\n          <\/div>\r\n          <div class=\"system-value__grid\">\r\n            <article data-reveal><span>01<\/span><h3>Yksi hallittu ketju<\/h3><p>Tarvittavat vaiheet voidaan suunnitella samaan palvelukokonaisuuteen.<\/p><\/article>\r\n            <article data-reveal><span>02<\/span><h3>Moduulit tarpeen mukaan<\/h3><p>Asiakas voi k\u00e4ytt\u00e4\u00e4 yht\u00e4 palvelua tai yhdist\u00e4\u00e4 useita vaiheita.<\/p><\/article>\r\n            <article data-reveal><span>03<\/span><h3>Kehitys kiinni arjessa<\/h3><p>Uusia ratkaisuja kehitet\u00e4\u00e4n nykyisen operatiivisen toiminnan ymp\u00e4rille.<\/p><\/article>\r\n            <article data-reveal><span>04<\/span><h3>Toteutusaste n\u00e4kyviin<\/h3><p>Nykyiset, vaiheittain vahvistuvat ja tavoitellut osat erotetaan selv\u00e4sti.<\/p><\/article>\r\n          <\/div>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <section class=\"mico-section system-faq\" aria-labelledby=\"system-faq-title\">\r\n        <div class=\"mico-shell system-faq__grid\">\r\n          <div data-reveal>\r\n            <p class=\"mico-kicker\">Usein kysytty\u00e4<\/p>\r\n            <h2 class=\"mico-title\" id=\"system-faq-title\">Mit\u00e4 Mico System on \u2014 ja miten se vahvistuu?<\/h2>\r\n            <p class=\"system-faq__lead\">Vastauksissa erotetaan k\u00e4yt\u00f6ss\u00e4 oleva toiminta, vaiheittain vahvistuvat teknologiset kyvykkyydet ja tavoiteltu seuraava vaihe.<\/p>\r\n          <\/div>\r\n          <div class=\"system-faq__items\" data-reveal>\r\n            <details open>\r\n              <summary>Mit\u00e4 Mico Systemist\u00e4 voi ostaa nyt?<\/summary>\r\n              <p>Micolta voi hankkia kuljetuksen, kotiintoimituksen, ker\u00e4ilyn, varastoinnin tai niist\u00e4 rakennetun kokonaisuuden. Tuote, l\u00e4mp\u00f6tilavaatimus, reitti, m\u00e4\u00e4r\u00e4 ja rytmi vahvistetaan kartoituksessa.<\/p>\r\n            <\/details>\r\n            <details>\r\n              <summary>Miten teknologia on Mico Systemiss\u00e4 k\u00e4yt\u00f6ss\u00e4?<\/summary>\r\n              <p>Mico System ei ole yksi erillinen ohjelmistotuote, vaan Micon operatiivinen palvelu- ja toimintamalli. Modulaarinen kuljetuslaitteisto on jo k\u00e4yt\u00f6ss\u00e4, ja teko\u00e4ly\u00e4 integroidaan vaiheittain yh\u00e4 vahvemmin j\u00e4rjestelmiin ja prosesseihin. Autonomisempi toiminta on kehityssuunta. Ominaisuuksista kerrotaan aina niiden todellisen toteutusasteen mukaisesti.<\/p>\r\n            <\/details>\r\n            <details>\r\n              <summary>Ovatko dronejakelu ja liikkuvat noutopisteet jo k\u00e4yt\u00f6ss\u00e4?<\/summary>\r\n              <p>Dronejakelu ei ole viel\u00e4 k\u00e4yt\u00f6ss\u00e4. L\u00e4mp\u00f6tilahallitut, koodilla avattavat liikkuvat noutopisteet ovat olleet jo testik\u00e4yt\u00f6ss\u00e4, mutta aktiiviseen ja laajempaan k\u00e4ytt\u00f6\u00f6n ne tulevat pian uuden terminaalin yhteydess\u00e4.<\/p>\r\n            <\/details>\r\n            <details>\r\n              <summary>Miss\u00e4 Mico palvelee?<\/summary>\r\n              <p>Nykyinen toiminta-alue on Helsinki\u2013Turku-vy\u00f6hyke. Tarkka palvelukelpoisuus tarkistetaan tuotteen, l\u00e4ht\u00f6paikan, m\u00e4\u00e4r\u00e4np\u00e4\u00e4n ja palvelun perusteella.<\/p>\r\n            <\/details>\r\n          <\/div>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <section class=\"mico-section system-contact\" id=\"system-contact\" aria-labelledby=\"system-contact-title\">\r\n        <div class=\"mico-shell system-contact__grid\">\r\n          <div data-reveal>\r\n            <p class=\"mico-kicker mico-kicker--light\">Palvelu tai kehitysyhteisty\u00f6<\/p>\r\n            <h2 id=\"system-contact-title\">Mihin kohtaan ketjua tarvitset ratkaisun?<\/h2>\r\n            <p>Nykyiset palvelut kartoitetaan Palvelut-sivulla. Kumppanuus-, pilotti- ja kehityskeskustelut voidaan ohjata Mico System -sivulta oikealle vastuuhenkil\u00f6lle.<\/p>\r\n            <div class=\"system-contact__actions\">\r\n              <a class=\"mico-button mico-button--light\" href=\"\/index.php\/palvelut\/#palvelutarve\">Kartoita nykyinen palvelutarve <span aria-hidden=\"true\">\u2192<\/span><\/a>\r\n              <a class=\"system-contact__mail\" href=\"mailto:katja@micofoy.fi\">katja@micofoy.fi<\/a>\r\n            <\/div>\r\n          <\/div>\r\n          <aside class=\"cf7-prototype\" aria-label=\"Mico System -yhteydenottolomake\" data-reveal>\r\n            <span class=\"cf7-prototype__label\">Kumppanuus tai pilotti<\/span>\r\n            <h3>Keskustele Mico Systemist\u00e4<\/h3>\r\n            <p>Pakolliset kent\u00e4t on merkitty t\u00e4hdell\u00e4. Tulevaisuuden moduuleista keskustellaan kehitys- ja tavoitetason ratkaisuina.<\/p>\r\n            <div class=\"cf7-prototype mico-cf7\" data-mico-form=\"system\">\r\n\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f1018-o1\" lang=\"fi\" dir=\"ltr\" data-wpcf7-id=\"1018\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/index.php\/wp-json\/wp\/v2\/pages\/1040#wpcf7-f1018-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Yhteydenottolomake\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"1018\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.7\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"fi\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f1018-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<div class=\"mico-form-grid\">\n\t<p><label><span>Nimi *<\/span><span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" autocomplete=\"name\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span><\/label><br \/>\n<label><span>Yritys *<\/span><span class=\"wpcf7-form-control-wrap\" data-name=\"company\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" autocomplete=\"organization\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"company\" \/><\/span><\/label><br \/>\n<label><span>Ty\u00f6s\u00e4hk\u00f6posti *<\/span><span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" autocomplete=\"email\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span><\/label><br \/>\n<label><span>Puhelin<\/span><span class=\"wpcf7-form-control-wrap\" data-name=\"phone\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel\" autocomplete=\"tel\" aria-invalid=\"false\" value=\"\" type=\"tel\" name=\"phone\" \/><\/span><\/label><br \/>\n<label class=\"mico-form-wide\"><span>Aihe *<\/span><span class=\"wpcf7-form-control-wrap\" data-name=\"topic\"><select class=\"wpcf7-form-control wpcf7-select wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" name=\"topic\"><option value=\"\">Valitse<\/option><option value=\"Kumppanuus\">Kumppanuus<\/option><option value=\"Pilotti\">Pilotti<\/option><option value=\"Teknologiayhteisty\u00f6\">Teknologiayhteisty\u00f6<\/option><option value=\"Muu\">Muu<\/option><\/select><\/span><\/label><br \/>\n<label class=\"mico-form-wide\"><span>Mist\u00e4 haluat keskustella? *<\/span><span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" name=\"your-message\"><\/textarea><\/span><\/label>\n\t<\/p>\n<\/div>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"mico-system\" type=\"hidden\" name=\"form-type\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"utm-source\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"utm-medium\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"utm-campaign\" \/>\n<div class=\"mico-consent\">\n\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"privacy\"><span class=\"wpcf7-form-control wpcf7-acceptance\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"privacy\" value=\"1\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\">Hyv\u00e4ksyn, ett\u00e4 Mico Finland k\u00e4sittelee tietojani yhteydenottoon vastaamiseksi. *<\/span><\/label><\/span><\/span><\/span>\n\t<\/p>\n<\/div>\n<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner mico-button\" type=\"submit\" value=\"L\u00e4het\u00e4 yhteydenotto\" \/>\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\r\n<\/div>\r\n          <\/aside>\r\n        <\/div>\r\n      <\/section>\r\n    <\/main>\r\n\r\n    <footer class=\"mico-footer\" aria-label=\"Mico Finlandin alatunniste\">\r\n      <div class=\"mico-shell\">\r\n        <div class=\"mico-footer__grid\">\r\n          <div class=\"mico-footer__brand\">\r\n            <img loading=\"lazy\" decoding=\"async\" class=\"mico-footer__logo\" src=\"https:\/\/www.micofoy.fi\/wp-content\/uploads\/2025\/04\/Mico-logo.png\" width=\"500\" height=\"250\" alt=\"Mico Finland\">\r\n            <p>Kuljetus, kotiintoimitus, ker\u00e4ily ja varastointi asiakkaan tarpeeseen sopivana kokonaisuutena.<\/p>\r\n          <\/div>\r\n          <div>\r\n            <h2>Tutustu<\/h2>\r\n            <nav aria-label=\"Alatunnisteen sivulinkit\">\r\n              <a href=\"\/\">Etusivu<\/a>\r\n              <a href=\"\/index.php\/palvelut\/\">Palvelut<\/a>\r\n              <a href=\"\/index.php\/mico-system\/\">Mico System<\/a>\r\n              <a href=\"\/index.php\/yritys-ja-tiimi\/\">Yritys &amp; tiimi<\/a>\r\n            <\/nav>\r\n          <\/div>\r\n          <div>\r\n            <h2>Yhteys<\/h2>\r\n            <nav aria-label=\"Yhteystiedot\">\r\n              <a href=\"mailto:katja@micofoy.fi\">katja@micofoy.fi<\/a>\r\n              <a href=\"\/index.php\/ota-yhteytta\/\">Ota yhteytt\u00e4<\/a>\r\n              <span>Y-tunnus 3156978-5<\/span>\r\n            <\/nav>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"mico-footer__bottom\">\r\n          <span>\u00a9 2026 Mico Finland Oy<\/span>\r\n          <a href=\"\/index.php\/yritys-ja-tiimi\/#tietosuoja\">Tietosuoja<\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/footer>\r\n<script data-mico-source=\"mico-site.js\">\r\n(function () {\r\n  \"use strict\";\r\n\r\n  var root = document.querySelector(\"[data-mico-page]\");\r\n  if (!root) return;\r\n\r\n  var menuButton = root.querySelector(\"[data-menu-toggle]\");\r\n  var menu = root.querySelector(\"[data-menu]\");\r\n\r\n  function setMenu(open) {\r\n    if (!menuButton || !menu) return;\r\n    menuButton.setAttribute(\"aria-expanded\", String(open));\r\n    menuButton.setAttribute(\"aria-label\", open ? \"Sulje valikko\" : \"Avaa valikko\");\r\n    menu.classList.toggle(\"is-open\", open);\r\n    document.body.classList.toggle(\"is-menu-open\", open);\r\n  }\r\n\r\n  if (menuButton && menu) {\r\n    menuButton.addEventListener(\"click\", function () {\r\n      setMenu(menuButton.getAttribute(\"aria-expanded\") !== \"true\");\r\n    });\r\n\r\n    menu.addEventListener(\"click\", function (event) {\r\n      if (event.target.closest(\"a\")) setMenu(false);\r\n    });\r\n\r\n    document.addEventListener(\"keydown\", function (event) {\r\n      if (event.key === \"Escape\") setMenu(false);\r\n    });\r\n\r\n    window.addEventListener(\"resize\", function () {\r\n      if (window.innerWidth > 860) setMenu(false);\r\n    });\r\n  }\r\n\r\n  var reduceMotion = window.matchMedia && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n  var reveals = root.querySelectorAll(\"[data-reveal]\");\r\n\r\n  if (reduceMotion || !(\"IntersectionObserver\" in window)) {\r\n    reveals.forEach(function (item) { item.classList.add(\"is-visible\"); });\r\n  } else {\r\n    var revealObserver = new IntersectionObserver(function (entries, observer) {\r\n      entries.forEach(function (entry) {\r\n        if (!entry.isIntersecting) return;\r\n        entry.target.classList.add(\"is-visible\");\r\n        observer.unobserve(entry.target);\r\n      });\r\n    }, { threshold: .12, rootMargin: \"0px 0px -6%\" });\r\n\r\n    root.classList.add(\"is-motion-ready\");\r\n    reveals.forEach(function (item) { revealObserver.observe(item); });\r\n  }\r\n\r\n  var filters = Array.from(root.querySelectorAll(\"[data-expertise-filter]\"));\r\n  var people = Array.from(root.querySelectorAll(\"[data-expertise-person]\"));\r\n  var title = root.querySelector(\"[data-expertise-title]\");\r\n  var copy = root.querySelector(\"[data-expertise-copy]\");\r\n  var live = root.querySelector(\"[data-expertise-live]\");\r\n\r\n  var content = {\r\n    all: {\r\n      title: \"Kolme n\u00e4k\u00f6kulmaa, yksi toimiva palveluketju.\",\r\n      copy: \"Micon johto yhdist\u00e4\u00e4 k\u00e4yt\u00e4nn\u00f6n operoinnin, asiakasliiketoiminnan ja ohjelmisto-osaamisen. Valitse osaamisalue ja n\u00e4e, keiden ty\u00f6ss\u00e4 se korostuu.\",\r\n      live: \"Kaikki osaamisalueet ja tiimin j\u00e4senet n\u00e4kyv\u00e4t.\"\r\n    },\r\n    operations: {\r\n      title: \"Operointi tekee lupauksesta totta joka p\u00e4iv\u00e4.\",\r\n      copy: \"Toiminnan suunnittelu, resurssit, ker\u00e4ily, kuljetus ja poikkeamien ratkaiseminen muodostavat palvelun k\u00e4yt\u00e4nn\u00f6n perustan.\",\r\n      live: \"Operoinnin osaaminen korostettu.\"\r\n    },\r\n    business: {\r\n      title: \"Liiketoiminta sitoo ratkaisun asiakkaan tavoitteisiin.\",\r\n      copy: \"Palvelu rakennetaan todellisen tarpeen ymp\u00e4rille: kannattava toimintamalli, selke\u00e4 vastuunjako ja yhteisty\u00f6ss\u00e4 kehitett\u00e4v\u00e4 kokonaisuus.\",\r\n      live: \"Liiketoiminnan ja asiakasty\u00f6n osaaminen korostettu.\"\r\n    },\r\n    technology: {\r\n      title: \"Teknologia tehostaa toimivaa operointia.\",\r\n      copy: \"Ohjelmistoarkkitehtuuri, prosessiautomaatio ja kehitysty\u00f6 liitet\u00e4\u00e4n k\u00e4yt\u00e4nn\u00f6n logistiikkaan vaiheittain \u2014 ei irralliseksi teknologiakerrokseksi.\",\r\n      live: \"Teknologian ja automaation osaaminen korostettu.\"\r\n    }\r\n  };\r\n\r\n  function applyFilter(filter) {\r\n    filters.forEach(function (button) {\r\n      button.setAttribute(\"aria-pressed\", String(button.dataset.expertiseFilter === filter));\r\n    });\r\n\r\n    people.forEach(function (person) {\r\n      var expertise = (person.dataset.expertisePerson || \"\").split(\" \");\r\n      var active = filter === \"all\" || expertise.indexOf(filter) !== -1;\r\n      person.classList.toggle(\"is-highlighted\", active && filter !== \"all\");\r\n      person.classList.toggle(\"is-muted\", !active);\r\n    });\r\n\r\n    if (title) title.textContent = content[filter].title;\r\n    if (copy) copy.textContent = content[filter].copy;\r\n    if (live) live.textContent = content[filter].live;\r\n  }\r\n\r\n  filters.forEach(function (button) {\r\n    button.addEventListener(\"click\", function () {\r\n      applyFilter(button.dataset.expertiseFilter || \"all\");\r\n    });\r\n  });\r\n\r\n  applyFilter(\"all\");\r\n\r\n  root.querySelectorAll(\"[data-local-form]\").forEach(function (form) {\r\n    form.addEventListener(\"submit\", function (event) {\r\n      event.preventDefault();\r\n      var status = form.querySelector(\"[data-local-form-status]\");\r\n      if (status) status.textContent = \"Lomake on valmis WordPressin Contact Form 7 -kytkent\u00e4\u00e4 varten.\";\r\n    });\r\n  });\r\n\r\n  try {\r\n    var savedFlowSummary = window.sessionStorage.getItem(\"mico-flow-summary\") || \"\";\r\n    if (savedFlowSummary) {\r\n      root.querySelectorAll('[name=\"flow-summary\"], [data-flow-summary-field]').forEach(function (field) {\r\n        field.value = savedFlowSummary;\r\n      });\r\n      root.querySelectorAll(\"[data-flow-prefill]\").forEach(function (element) {\r\n        element.textContent = \"Mico Flow -yhteenveto: \" + savedFlowSummary;\r\n        element.hidden = false;\r\n      });\r\n    }\r\n  } catch (error) {\r\n    \/* Yhteydenottolomake toimii my\u00f6s ilman selaimen istuntotallennusta. *\/\r\n  }\r\n})();\r\n<\/script>\r\n<script data-mico-source=\"mico-system-story-v2.js\">\r\n(function () {\r\n  \"use strict\";\r\n\r\n  var root = document.getElementById(\"mico-home-draft\") || document.getElementById(\"mico-system-page\");\r\n  if (!root) return;\r\n\r\n  var section = root.querySelector(\"[data-mh-story]\");\r\n  var stage = root.querySelector(\"[data-mh-story-stage]\");\r\n  if (!section || !stage || stage.getAttribute(\"data-mh-story-init\") === \"true\") return;\r\n\r\n  var viewport = stage.querySelector(\"[data-mh-story-viewport]\");\r\n  var canvas = stage.querySelector(\"[data-mh-story-canvas]\");\r\n  var poster = stage.querySelector(\"[data-mh-story-poster]\");\r\n  var loader = stage.querySelector(\"[data-mh-story-loading]\");\r\n  var count = stage.querySelector(\"[data-mh-stage-count]\");\r\n  var title = stage.querySelector(\"[data-mh-stage-title]\");\r\n  var caption = stage.querySelector(\"[data-mh-stage-caption]\");\r\n  var status = stage.querySelector(\"[data-mh-stage-status]\");\r\n  var live = stage.querySelector(\"[data-mh-story-live]\");\r\n  var previous = stage.querySelector(\"[data-mh-story-prev]\");\r\n  var next = stage.querySelector(\"[data-mh-story-next]\");\r\n  var motion = stage.querySelector(\"[data-mh-story-motion]\");\r\n  var motionLabel = stage.querySelector(\"[data-mh-motion-label]\");\r\n  var steps = Array.prototype.slice.call(stage.querySelectorAll(\"[data-mh-story-step]\"));\r\n  var scenes = Array.prototype.slice.call(section.querySelectorAll(\"[data-mh-scene]\"));\r\n\r\n  if (!viewport || !canvas || scenes.length !== 5 || steps.length !== 5) {\r\n    stage.classList.remove(\"is-webgl-pending\");\r\n    stage.classList.add(\"is-webgl-fallback\");\r\n    return;\r\n  }\r\n\r\n  stage.setAttribute(\"data-mh-story-init\", \"true\");\r\n  section.classList.add(\"is-story-ready\");\r\n\r\n  var THREE_URL = root.getAttribute(\"data-three-url\") || \"https:\/\/cdn.jsdelivr.net\/npm\/three@0.185.0\/build\/three.module.min.js\";\r\n  var reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\r\n  var desktopStory = window.matchMedia(\"(min-width: 981px) and (min-height: 561px)\");\r\n  var pairedStory = section.getAttribute(\"data-mh-story-layout\") === \"paired\";\r\n  var abort = new AbortController();\r\n\r\n  var fallbackSceneMeta = [\r\n    {\r\n      title: \"Operatiivinen perusta\",\r\n      caption: \"Nouto, Nummen varasto, ker\u00e4ily, l\u00e4mp\u00f6tilahallittu kuljetus ja toimitus muodostavat nykyisen palveluketjun.\",\r\n      status: \"now\",\r\n      statusLabel: \"K\u00e4yt\u00f6ss\u00e4 nyt\"\r\n    },\r\n    {\r\n      title: \"Yksi palvelu tai koko ketju\",\r\n      caption: \"Asiakkaan ratkaisu voidaan rakentaa suorasta kuljetuksesta tai Micon operoiman varaston kautta kulkevasta kokonaisuudesta.\",\r\n      status: \"now\",\r\n      statusLabel: \"K\u00e4yt\u00f6ss\u00e4 nyt\"\r\n    },\r\n    {\r\n      title: \"Modulaarinen teknologiakerros\",\r\n      caption: \"Modulaarinen kuljetuslaitteisto on k\u00e4yt\u00f6ss\u00e4, ja teko\u00e4lyintegraatiota vahvistetaan j\u00e4rjestelmiss\u00e4 vaiheittain. Autonomisempi toiminta on seuraava kehityssuunta.\",\r\n      status: \"development\",\r\n      statusLabel: \"K\u00e4yt\u00f6ss\u00e4 \u00b7 vahvistuu\"\r\n    },\r\n    {\r\n      title: \"Seuraava infrastruktuuri\",\r\n      caption: \"Uusi, aiempaa suurempi terminaali, varastomyynti, pieni pakkaamo, dronejakelukentt\u00e4 ja liikkuvat l\u00e4mp\u00f6tilahallitut noutopisteet ovat tulossa pian.\",\r\n      status: \"future\",\r\n      statusLabel: \"Tulossa pian\"\r\n    },\r\n    {\r\n      title: \"Yhdistyv\u00e4 j\u00e4rjestelm\u00e4\",\r\n      caption: \"Nykyinen operointi, k\u00e4yt\u00f6ss\u00e4 oleva ja vaiheittain vahvistuva teknologia sek\u00e4 suunniteltu infrastruktuuri muodostavat vaiheittain rakentuvan tavoitetilan.\",\r\n      status: \"future\",\r\n      statusLabel: \"Suunta\"\r\n    }\r\n  ];\r\n\r\n  var sceneMeta = scenes.map(function (item, index) {\r\n    var badge = item.querySelector(\".mh-status\");\r\n    var badgeText = badge ? badge.textContent.trim() : fallbackSceneMeta[index].statusLabel;\r\n    var statusType = badge ? badge.classList.contains(\"mh-status--development\")\r\n      ? \"development\"\r\n      : badge.classList.contains(\"mh-status--future\")\r\n        ? \"future\"\r\n        : \"now\"\r\n      : \"now\";\r\n\r\n    return {\r\n      title: item.getAttribute(\"data-title\") || fallbackSceneMeta[index].title,\r\n      caption: item.getAttribute(\"data-caption\") || fallbackSceneMeta[index].caption,\r\n      status: statusType,\r\n      statusLabel: badgeText\r\n    };\r\n  });\r\n\r\n  var cameraPoses = [\r\n    { position: [11, 8.3, 15.5], target: [0.2, .8, .1], flow: .18 },\r\n    { position: [1.2, 5.4, 8.6], target: [-2.6, 1.05, 0], flow: .43 },\r\n    { position: [7.8, 5.2, 7.2], target: [2.25, 1.35, .35], flow: .64 },\r\n    { position: [11.5, 7.2, -2.5], target: [5.5, 1.1, -1.65], flow: .84 },\r\n    { position: [2.5, 14.2, 17], target: [.5, .25, 0], flow: .98 }\r\n  ];\r\n\r\n  var sceneFactors = [\r\n    { current: 1, development: .025, future: .012, network: 0 },\r\n    { current: 1, development: .06, future: .018, network: 0 },\r\n    { current: .3, development: 1, future: .065, network: .07 },\r\n    { current: .18, development: .4, future: 1, network: .16 },\r\n    { current: .78, development: .7, future: .52, network: 1 }\r\n  ];\r\n\r\n  var state = {\r\n    current: 0,\r\n    userPaused: false,\r\n    ready: false,\r\n    loading: false,\r\n    destroyed: false,\r\n    inViewport: false,\r\n    contextLost: false,\r\n    firstFrame: false,\r\n    manualLockUntil: 0,\r\n    raf: 0,\r\n    scrollRaf: 0,\r\n    transition: null,\r\n    factors: copyFactors(sceneFactors[0]),\r\n    flow: cameraPoses[0].flow,\r\n    lastSize: \"\"\r\n  };\r\n\r\n  var THREE = null;\r\n  var renderer = null;\r\n  var scene3D = null;\r\n  var camera = null;\r\n  var cameraTarget = null;\r\n  var world = null;\r\n  var resizeObserver = null;\r\n  var lazyObserver = null;\r\n  var visibleObserver = null;\r\n  var detachObserver = null;\r\n\r\n  function copyFactors(source) {\r\n    return {\r\n      current: source.current,\r\n      development: source.development,\r\n      future: source.future,\r\n      network: source.network\r\n    };\r\n  }\r\n\r\n  function motionAllowed() {\r\n    return !reducedMotion.matches ? !state.userPaused : false;\r\n  }\r\n\r\n  function updateMotionButton() {\r\n    if (!motion) return;\r\n    var reduced = reducedMotion.matches;\r\n    var paused = reduced || state.userPaused;\r\n    stage.setAttribute(\"data-motion\", paused ? \"paused\" : \"running\");\r\n    motion.setAttribute(\"aria-pressed\", String(paused));\r\n    motion.setAttribute(\"aria-disabled\", String(reduced));\r\n    motion.setAttribute(\"aria-label\", reduced ? \"Liike v\u00e4hennetty laitteen asetuksen mukaan\" : paused ? \"Jatka 3D-liikett\u00e4\" : \"Pys\u00e4yt\u00e4 3D-liike\");\r\n    if (motionLabel) motionLabel.textContent = reduced ? \"Liike v\u00e4hennetty\" : paused ? \"Jatka liikett\u00e4\" : \"Pys\u00e4yt\u00e4 liike\";\r\n  }\r\n\r\n  function setLoader(text) {\r\n    if (loader) loader.textContent = text;\r\n  }\r\n\r\n  function showFallback(reason) {\r\n    stage.classList.remove(\"is-webgl-pending\", \"is-webgl-ready\");\r\n    stage.classList.add(\"is-webgl-fallback\");\r\n    stage.setAttribute(\"data-fallback-reason\", reason);\r\n    stage.removeAttribute(\"aria-busy\");\r\n    canvas.style.visibility = \"hidden\";\r\n    setLoader(reason === \"reduced-motion\" ? \"Liike v\u00e4hennetty \u2014 kevyt kuvitus k\u00e4yt\u00f6ss\u00e4\" : \"Kevyt kuvitus k\u00e4yt\u00f6ss\u00e4\");\r\n  }\r\n\r\n  function showReady() {\r\n    stage.classList.remove(\"is-webgl-pending\", \"is-webgl-fallback\");\r\n    stage.classList.add(\"is-webgl-ready\");\r\n    stage.removeAttribute(\"data-fallback-reason\");\r\n    stage.removeAttribute(\"aria-busy\");\r\n    canvas.style.visibility = \"visible\";\r\n  }\r\n\r\n  function updateUI(index, announce) {\r\n    var meta = sceneMeta[index];\r\n    stage.setAttribute(\"data-stage\", String(index + 1));\r\n    stage.setAttribute(\"data-status\", meta.status);\r\n    if (count) count.textContent = \"Kohtaus \" + (index + 1) + \" \/ 5\";\r\n    if (title) title.textContent = meta.title;\r\n    if (caption) caption.textContent = meta.caption;\r\n    if (status) status.textContent = meta.statusLabel;\r\n\r\n    scenes.forEach(function (item, itemIndex) {\r\n      item.classList.toggle(\"is-active\", itemIndex === index);\r\n      item.setAttribute(\"data-active\", String(itemIndex === index));\r\n    });\r\n\r\n    steps.forEach(function (button, itemIndex) {\r\n      if (itemIndex === index) {\r\n        button.setAttribute(\"aria-current\", \"step\");\r\n        button.tabIndex = 0;\r\n      } else {\r\n        button.removeAttribute(\"aria-current\");\r\n        button.tabIndex = -1;\r\n      }\r\n    });\r\n\r\n    if (previous) previous.disabled = index === 0;\r\n    if (next) next.disabled = index === 4;\r\n    if (announce) {\r\n      if (live) live.textContent = \"Kohtaus \" + (index + 1) + \": \" + meta.title + \". \" + meta.statusLabel + \".\";\r\n    }\r\n  }\r\n\r\n  function interpolateFactors(from, to, amount) {\r\n    return {\r\n      current: from.current + (to.current - from.current) * amount,\r\n      development: from.development + (to.development - from.development) * amount,\r\n      future: from.future + (to.future - from.future) * amount,\r\n      network: from.network + (to.network - from.network) * amount\r\n    };\r\n  }\r\n\r\n  function applyPose(index) {\r\n    if (!camera || !cameraTarget || !world) return;\r\n    var pose = cameraPoses[index];\r\n    camera.position.set(pose.position[0], pose.position[1], pose.position[2]);\r\n    cameraTarget.set(pose.target[0], pose.target[1], pose.target[2]);\r\n    camera.lookAt(cameraTarget);\r\n    state.factors = copyFactors(sceneFactors[index]);\r\n    state.flow = pose.flow;\r\n    world.setFactors(state.factors);\r\n    world.setFlow(state.flow);\r\n    world.resetMotion();\r\n  }\r\n\r\n  function sampleTransition(now) {\r\n    if (!state.transition || !camera || !world) return false;\r\n    var transition = state.transition;\r\n    var raw = Math.min(1, Math.max(0, (now - transition.started) \/ transition.duration));\r\n    var eased = 1 - Math.pow(1 - raw, 3);\r\n    camera.position.lerpVectors(transition.fromPosition, transition.toPosition, eased);\r\n    cameraTarget.lerpVectors(transition.fromTarget, transition.toTarget, eased);\r\n    camera.lookAt(cameraTarget);\r\n    state.factors = interpolateFactors(transition.fromFactors, transition.toFactors, eased);\r\n    state.flow = transition.fromFlow + (transition.toFlow - transition.fromFlow) * eased;\r\n    world.setFactors(state.factors);\r\n    world.setFlow(state.flow);\r\n    world.animateTransition(eased, transition.toIndex);\r\n    if (raw >= 1) {\r\n      state.transition = null;\r\n      world.resetMotion();\r\n      return false;\r\n    }\r\n    return true;\r\n  }\r\n\r\n  function startTransition(index, immediate) {\r\n    if (!camera || !world || !THREE) return;\r\n    if (state.transition) sampleTransition(performance.now());\r\n    if (immediate || !motionAllowed()) {\r\n      state.transition = null;\r\n      applyPose(index);\r\n      requestRender();\r\n      return;\r\n    }\r\n    var pose = cameraPoses[index];\r\n    state.transition = {\r\n      toIndex: index,\r\n      started: performance.now(),\r\n      duration: 920,\r\n      fromPosition: camera.position.clone(),\r\n      toPosition: new THREE.Vector3(pose.position[0], pose.position[1], pose.position[2]),\r\n      fromTarget: cameraTarget.clone(),\r\n      toTarget: new THREE.Vector3(pose.target[0], pose.target[1], pose.target[2]),\r\n      fromFactors: copyFactors(state.factors),\r\n      toFactors: copyFactors(sceneFactors[index]),\r\n      fromFlow: state.flow,\r\n      toFlow: pose.flow\r\n    };\r\n    requestRender();\r\n  }\r\n\r\n  function setScene(requestedIndex, options) {\r\n    options = options || {};\r\n    var index = Math.max(0, Math.min(4, requestedIndex));\r\n    var changed = index !== state.current;\r\n    state.current = index;\r\n    updateUI(index, changed ? options.source !== \"scroll\" : false);\r\n    if (state.ready) startTransition(index, Boolean(options.immediate));\r\n\r\n    if (!pairedStory && (options.scroll ? (desktopStory.matches ? Boolean(scenes[index]) : false) : false)) {\r\n      state.manualLockUntil = performance.now() + 1100;\r\n      scenes[index].scrollIntoView({\r\n        behavior: motionAllowed() ? \"smooth\" : \"auto\",\r\n        block: \"center\"\r\n      });\r\n    }\r\n  }\r\n\r\n  function resize() {\r\n    if (!renderer || !camera || !world) return;\r\n    var width = Math.max(1, Math.round(canvas.clientWidth || viewport.clientWidth));\r\n    var height = Math.max(1, Math.round(canvas.clientHeight || viewport.clientHeight));\r\n    var compact = width < 720 || (navigator.deviceMemory ? navigator.deviceMemory <= 4 : false);\r\n    var dprCap = compact ? 1.18 : 1.5;\r\n    var maxPixels = compact ? 1400000 : 2400000;\r\n    var ratio = Math.min(window.devicePixelRatio || 1, dprCap);\r\n    ratio = Math.min(ratio, Math.sqrt(maxPixels \/ (width * height)));\r\n    ratio = Math.max(.72, ratio);\r\n    var key = width + \":\" + height + \":\" + ratio.toFixed(3);\r\n    if (key === state.lastSize) return;\r\n    state.lastSize = key;\r\n    renderer.setDrawingBufferSize(width, height, ratio);\r\n    var aspect = width \/ height;\r\n    camera.aspect = aspect;\r\n    camera.fov = aspect < .88 ? 57 : aspect < 1.25 ? 49 : 42;\r\n    camera.updateProjectionMatrix();\r\n    var scale = aspect < .92 ? .73 : aspect < 1.3 ? .84 : aspect < 1.65 ? .93 : 1;\r\n    world.root.scale.setScalar(scale);\r\n    requestRender();\r\n  }\r\n\r\n  function renderFrame(now) {\r\n    state.raf = 0;\r\n    if (state.destroyed || !renderer || !state.inViewport || document.hidden || state.contextLost) return;\r\n    resize();\r\n    var continueTransition = sampleTransition(now);\r\n    renderer.render(scene3D, camera);\r\n    if (!state.firstFrame) {\r\n      state.firstFrame = true;\r\n      showReady();\r\n    }\r\n    if (continueTransition) requestRender();\r\n  }\r\n\r\n  function requestRender() {\r\n    if (state.raf || state.destroyed || !renderer || !state.inViewport || document.hidden || state.contextLost) return;\r\n    state.raf = requestAnimationFrame(renderFrame);\r\n  }\r\n\r\n  function selectNearestScene() {\r\n    state.scrollRaf = 0;\r\n    if (pairedStory || !desktopStory.matches || performance.now() < state.manualLockUntil) return;\r\n    var sectionRect = section.getBoundingClientRect();\r\n    if (sectionRect.bottom <= 0 || sectionRect.top >= window.innerHeight) return;\r\n    var focusLine = window.innerHeight * .5;\r\n    var bestIndex = state.current;\r\n    var bestDistance = Infinity;\r\n    scenes.forEach(function (item, index) {\r\n      var rect = item.getBoundingClientRect();\r\n      var center = rect.top + rect.height \/ 2;\r\n      var distance = Math.abs(center - focusLine);\r\n      if (distance < bestDistance) {\r\n        bestDistance = distance;\r\n        bestIndex = index;\r\n      }\r\n    });\r\n    if (bestIndex !== state.current) setScene(bestIndex, { source: \"scroll\" });\r\n  }\r\n\r\n  function scheduleScrollSelection() {\r\n    if (pairedStory) return;\r\n    if (!state.scrollRaf) state.scrollRaf = requestAnimationFrame(selectNearestScene);\r\n  }\r\n\r\n  function canUseWebGL2() {\r\n    try {\r\n      var probeCanvas = document.createElement(\"canvas\");\r\n      var probe = probeCanvas.getContext(\"webgl2\", {\r\n        alpha: true,\r\n        antialias: false,\r\n        failIfMajorPerformanceCaveat: true\r\n      });\r\n      if (!probe) return false;\r\n      var lose = probe.getExtension(\"WEBGL_lose_context\");\r\n      if (lose) lose.loseContext();\r\n      return true;\r\n    } catch (error) {\r\n      return false;\r\n    }\r\n  }\r\n\r\n  function boot3D() {\r\n    if (state.loading || state.ready || state.destroyed || state.contextLost) return;\r\n    if (reducedMotion.matches) {\r\n      showFallback(\"reduced-motion\");\r\n      return;\r\n    }\r\n    if (navigator.connection ? navigator.connection.saveData : false) {\r\n      showFallback(\"save-data\");\r\n      return;\r\n    }\r\n    if (!canUseWebGL2()) {\r\n      showFallback(\"webgl2-unavailable\");\r\n      return;\r\n    }\r\n\r\n    state.loading = true;\r\n    stage.setAttribute(\"aria-busy\", \"true\");\r\n    setLoader(\"3D-n\u00e4kym\u00e4\u00e4 valmistellaan\");\r\n\r\n    import(THREE_URL).then(function (module) {\r\n      if (state.destroyed) return;\r\n      THREE = module;\r\n      var lowQuality = window.innerWidth < 720 || (navigator.deviceMemory ? navigator.deviceMemory <= 4 : false);\r\n      renderer = new THREE.WebGLRenderer({\r\n        canvas: canvas,\r\n        alpha: true,\r\n        antialias: !lowQuality,\r\n        powerPreference: lowQuality ? \"default\" : \"high-performance\",\r\n        failIfMajorPerformanceCaveat: true\r\n      });\r\n      renderer.outputColorSpace = THREE.SRGBColorSpace;\r\n      renderer.toneMapping = THREE.ACESFilmicToneMapping;\r\n      renderer.toneMappingExposure = 1.08;\r\n      renderer.setClearColor(0x0c0040, 0);\r\n\r\n      scene3D = new THREE.Scene();\r\n      scene3D.fog = new THREE.FogExp2(0x0c0040, .025);\r\n      camera = new THREE.PerspectiveCamera(42, 1, .1, 100);\r\n      cameraTarget = new THREE.Vector3();\r\n\r\n      scene3D.add(new THREE.HemisphereLight(0xb8c7ff, 0x14052f, 2.2));\r\n      var keyLight = new THREE.DirectionalLight(0xffffff, 3.2);\r\n      keyLight.position.set(6, 12, 9);\r\n      scene3D.add(keyLight);\r\n      var orangeLight = new THREE.PointLight(0xf5540c, 17, 20, 2);\r\n      orangeLight.position.set(1.5, 4, 3);\r\n      scene3D.add(orangeLight);\r\n      var violetLight = new THREE.PointLight(0x7457ff, 12, 18, 2);\r\n      violetLight.position.set(5, 6, -4);\r\n      scene3D.add(violetLight);\r\n\r\n      world = buildWorld(THREE, lowQuality);\r\n      scene3D.add(world.root);\r\n      applyPose(state.current);\r\n      resize();\r\n\r\n      if (\"ResizeObserver\" in window) {\r\n        resizeObserver = new ResizeObserver(resize);\r\n        resizeObserver.observe(viewport);\r\n      }\r\n\r\n      state.ready = true;\r\n      state.loading = false;\r\n      requestRender();\r\n    }).catch(function (error) {\r\n      state.loading = false;\r\n      stage.setAttribute(\"data-fallback-detail\", (error ? error.message : null) ? error.message.slice(0, 240) : \"Tuntematon 3D-alustusvirhe\");\r\n      showFallback(\"three-load-or-renderer-error\");\r\n    });\r\n  }\r\n\r\n  function destroy() {\r\n    if (state.destroyed) return;\r\n    state.destroyed = true;\r\n    abort.abort();\r\n    if (lazyObserver) lazyObserver.disconnect();\r\n    if (visibleObserver) visibleObserver.disconnect();\r\n    if (resizeObserver) resizeObserver.disconnect();\r\n    if (detachObserver) detachObserver.disconnect();\r\n    cancelAnimationFrame(state.raf);\r\n    cancelAnimationFrame(state.scrollRaf);\r\n\r\n    if (scene3D) {\r\n      var geometries = new Set();\r\n      var materials = new Set();\r\n      scene3D.traverse(function (object) {\r\n        if (object.geometry) geometries.add(object.geometry);\r\n        var list = Array.isArray(object.material) ? object.material : object.material ? [object.material] : [];\r\n        list.forEach(function (material) { materials.add(material); });\r\n      });\r\n      geometries.forEach(function (geometry) { geometry.dispose(); });\r\n      materials.forEach(function (material) { material.dispose(); });\r\n    }\r\n    if (renderer) renderer.dispose();\r\n  }\r\n\r\n  function buildWorld(T, lowQuality) {\r\n    var root3D = new T.Group();\r\n    root3D.rotation.y = -.07;\r\n    var groups = {\r\n      current: new T.Group(),\r\n      development: new T.Group(),\r\n      future: new T.Group(),\r\n      network: new T.Group()\r\n    };\r\n    Object.keys(groups).forEach(function (key) { root3D.add(groups[key]); });\r\n\r\n    var orange = 0xf5540c;\r\n    var navy = 0x190a56;\r\n    var white = 0xf7f4ff;\r\n    var violet = 0x8d74ff;\r\n    var cyan = 0x67d2ff;\r\n    var segments = lowQuality ? 8 : 16;\r\n\r\n    function material(kind, color, opacity, options) {\r\n      options = options || {};\r\n      var finalOpacity = opacity === undefined ? 1 : opacity;\r\n      if (kind === \"development\") finalOpacity = Math.min(finalOpacity, .76);\r\n      if (kind === \"future\") finalOpacity = Math.min(finalOpacity, .48);\r\n      var value = new T.MeshStandardMaterial({\r\n        color: color,\r\n        roughness: options.roughness === undefined ? .55 : options.roughness,\r\n        metalness: options.metalness === undefined ? .08 : options.metalness,\r\n        emissive: options.emissive === undefined ? (kind === \"current\" ? 0x000000 : color) : options.emissive,\r\n        emissiveIntensity: options.emissiveIntensity === undefined ? (kind === \"current\" ? 0 : .16) : options.emissiveIntensity,\r\n        transparent: true,\r\n        opacity: finalOpacity,\r\n        wireframe: kind === \"future\" || options.wireframe === true,\r\n        depthWrite: kind === \"current\" ? finalOpacity > .98 : false\r\n      });\r\n      value.userData.baseOpacity = finalOpacity;\r\n      value.userData.baseDepthWrite = value.depthWrite;\r\n      return value;\r\n    }\r\n\r\n    function addBox(group, size, position, objectMaterial, rotation) {\r\n      var mesh = new T.Mesh(new T.BoxGeometry(size[0], size[1], size[2]), objectMaterial);\r\n      mesh.position.set(position[0], position[1], position[2]);\r\n      if (rotation) mesh.rotation.set(rotation[0], rotation[1], rotation[2]);\r\n      group.add(mesh);\r\n      return mesh;\r\n    }\r\n\r\n    function addCylinder(group, radius, length, position, objectMaterial, rotation) {\r\n      var mesh = new T.Mesh(new T.CylinderGeometry(radius, radius, length, segments), objectMaterial);\r\n      mesh.position.set(position[0], position[1], position[2]);\r\n      if (rotation) mesh.rotation.set(rotation[0], rotation[1], rotation[2]);\r\n      group.add(mesh);\r\n      return mesh;\r\n    }\r\n\r\n    var floor = new T.Mesh(\r\n      new T.CircleGeometry(13, lowQuality ? 40 : 72),\r\n      new T.MeshStandardMaterial({ color: navy, roughness: .96, metalness: .02 })\r\n    );\r\n    floor.rotation.x = -Math.PI \/ 2;\r\n    floor.position.y = -.05;\r\n    root3D.add(floor);\r\n\r\n    var grid = new T.GridHelper(23, 23, 0x563a9a, 0x2c1b68);\r\n    grid.position.y = .01;\r\n    grid.material.transparent = true;\r\n    grid.material.opacity = .2;\r\n    root3D.add(grid);\r\n\r\n    var route = new T.CatmullRomCurve3([\r\n      new T.Vector3(-8.4, .13, 1.8),\r\n      new T.Vector3(-6.2, .13, .1),\r\n      new T.Vector3(-2.8, .13, 0),\r\n      new T.Vector3(.3, .13, 1.35),\r\n      new T.Vector3(2.7, .13, .5),\r\n      new T.Vector3(5.2, .13, -2),\r\n      new T.Vector3(8.5, .13, -.65)\r\n    ]);\r\n    var routeBase = new T.Mesh(\r\n      new T.TubeGeometry(route, lowQuality ? 64 : 100, .065, 6, false),\r\n      new T.MeshBasicMaterial({ color: 0x958bb6, transparent: true, opacity: .24 })\r\n    );\r\n    var routeGlowMaterial = new T.MeshBasicMaterial({ color: orange, transparent: true, opacity: .92 });\r\n    var routeGlow = new T.Mesh(\r\n      new T.TubeGeometry(route, lowQuality ? 64 : 100, .025, 6, false),\r\n      routeGlowMaterial\r\n    );\r\n    root3D.add(routeBase, routeGlow);\r\n    var flowOrb = new T.Mesh(\r\n      new T.SphereGeometry(.18, segments, segments),\r\n      new T.MeshBasicMaterial({ color: orange })\r\n    );\r\n    root3D.add(flowOrb);\r\n\r\n    var current = groups.current;\r\n    var currentWhite = material(\"current\", white);\r\n    var currentNavy = material(\"current\", 0x29156c);\r\n    var currentOrange = material(\"current\", orange);\r\n    var currentDark = material(\"current\", 0x11131d, 1, { roughness: .82 });\r\n    var currentGlass = material(\"current\", 0x8bdcff, .62, { roughness: .12, metalness: .2 });\r\n    var steel = material(\"current\", 0x958cad, 1, { metalness: .35 });\r\n\r\n    addBox(current, [2.3, 1.65, 1.8], [-7.55, .82, 1.8], currentNavy);\r\n    addBox(current, [1.35, .24, .82], [-7.55, 1.08, .88], currentOrange);\r\n    addBox(current, [.78, .88, .08], [-7.55, .53, .88], currentGlass);\r\n    for (var pickupCrate = 0; pickupCrate < 4; pickupCrate += 1) {\r\n      addBox(current, [.42, .38, .5], [-8.3 + pickupCrate * .48, .2, .3], currentOrange);\r\n    }\r\n\r\n    var warehouse = new T.Group();\r\n    warehouse.position.set(-2.7, 0, 0);\r\n    current.add(warehouse);\r\n    addBox(warehouse, [4.7, .14, 3.7], [0, .07, 0], currentNavy);\r\n    addBox(warehouse, [4.7, 2.75, .16], [0, 1.38, -1.77], currentWhite);\r\n    addBox(warehouse, [.16, 2.75, 3.7], [-2.27, 1.38, 0], currentWhite);\r\n    addBox(warehouse, [.16, 2.75, 3.7], [2.27, 1.38, 0], currentWhite);\r\n    addBox(warehouse, [4.78, .16, 3.78], [0, 2.78, 0], currentOrange);\r\n\r\n    [-1.35, 0, 1.35].forEach(function (rackX) {\r\n      [.48, 1.08, 1.68].forEach(function (shelfY) {\r\n        addBox(warehouse, [.92, .07, 2.15], [rackX, shelfY, -.08], steel);\r\n      });\r\n      [-1.03, .88].forEach(function (rackZ) {\r\n        addBox(warehouse, [.07, 2.04, .07], [rackX - .41, 1.02, rackZ], steel);\r\n        addBox(warehouse, [.07, 2.04, .07], [rackX + .41, 1.02, rackZ], steel);\r\n      });\r\n    });\r\n\r\n    var crateGeometry = new T.BoxGeometry(.35, .25, .43);\r\n    var crateMaterial = material(\"current\", orange);\r\n    var crates = new T.InstancedMesh(crateGeometry, crateMaterial, 18);\r\n    var dummy = new T.Object3D();\r\n    var crateIndex = 0;\r\n    [-1.35, 0, 1.35].forEach(function (x) {\r\n      [.64, 1.24, 1.84].forEach(function (y) {\r\n        [-.59, .39].forEach(function (z) {\r\n          dummy.position.set(x, y, z);\r\n          dummy.updateMatrix();\r\n          crates.setMatrixAt(crateIndex, dummy.matrix);\r\n          crateIndex += 1;\r\n        });\r\n      });\r\n    });\r\n    warehouse.add(crates);\r\n\r\n    var truck = new T.Group();\r\n    truck.position.set(.65, 0, 1.42);\r\n    current.add(truck);\r\n    addBox(truck, [2.35, 1.38, 1.4], [-.48, 1.04, 0], currentWhite);\r\n    addBox(truck, [1.08, 1.16, 1.33], [1.24, .92, 0], currentOrange);\r\n    addBox(truck, [.58, .44, 1.35], [1.52, 1.15, 0], currentGlass);\r\n    addBox(truck, [.94, .11, 1.43], [-.1, 1.08, 0], currentOrange);\r\n    [-.92, 1.17].forEach(function (wheelX) {\r\n      [-.75, .75].forEach(function (wheelZ) {\r\n        addCylinder(truck, .31, .2, [wheelX, .34, wheelZ], currentDark, [Math.PI \/ 2, 0, 0]);\r\n      });\r\n    });\r\n\r\n    var shop = new T.Group();\r\n    shop.position.set(6.2, 0, -1.95);\r\n    current.add(shop);\r\n    addBox(shop, [2.4, 2.25, 2], [0, 1.13, 0], currentNavy);\r\n    addBox(shop, [1.3, .22, .82], [0, 1.34, 1.02], currentOrange);\r\n    addBox(shop, [.82, 1.28, .08], [0, .66, 1.02], currentGlass);\r\n\r\n    var home = new T.Group();\r\n    home.position.set(8.55, 0, -.35);\r\n    current.add(home);\r\n    addBox(home, [1.75, 1.65, 1.55], [0, .83, 0], currentWhite);\r\n    var roof = addBox(home, [1.95, .24, 1.75], [0, 1.8, 0], currentNavy, [0, 0, Math.PI \/ 10]);\r\n    roof.rotation.z = Math.PI \/ 10;\r\n    addBox(home, [.42, .86, .08], [0, .44, .79], currentOrange);\r\n\r\n    var development = groups.development;\r\n    var devShell = material(\"development\", cyan, .7, { roughness: .16, metalness: .28 });\r\n    var devOrange = material(\"development\", orange, .76);\r\n    var devWhite = material(\"development\", white, .58);\r\n    var moduleGroup = new T.Group();\r\n    moduleGroup.position.set(2.35, 0, .35);\r\n    development.add(moduleGroup);\r\n    addBox(moduleGroup, [3.35, 1.78, 2.25], [0, 1.22, 0], devShell);\r\n    [-1, 0, 1].forEach(function (partitionX) {\r\n      addBox(moduleGroup, [.055, 1.58, 2.04], [partitionX, 1.22, 0], devWhite);\r\n    });\r\n    var sensorPositions = [\r\n      [-1.3, 1.72, .85],\r\n      [-.38, .72, -.85],\r\n      [.58, 1.68, -.85],\r\n      [1.3, .82, .85]\r\n    ];\r\n    sensorPositions.forEach(function (position) {\r\n      var sensor = new T.Mesh(new T.SphereGeometry(.13, segments, segments), devOrange);\r\n      sensor.position.set(position[0], position[1], position[2]);\r\n      moduleGroup.add(sensor);\r\n    });\r\n    var dataCore = new T.Mesh(new T.OctahedronGeometry(.5, lowQuality ? 0 : 1), devOrange);\r\n    dataCore.position.set(0, 3.2, 0);\r\n    moduleGroup.add(dataCore);\r\n    sensorPositions.forEach(function (position) {\r\n      moduleGroup.add(new T.Line(\r\n        new T.BufferGeometry().setFromPoints([\r\n          new T.Vector3(position[0], position[1], position[2]),\r\n          dataCore.position.clone()\r\n        ]),\r\n        new T.LineBasicMaterial({ color: orange, transparent: true, opacity: .58 })\r\n      ));\r\n    });\r\n    var scanRing = new T.Mesh(\r\n      new T.TorusGeometry(1.55, .035, 8, lowQuality ? 36 : 64),\r\n      new T.MeshBasicMaterial({ color: violet, transparent: true, opacity: .68 })\r\n    );\r\n    scanRing.rotation.x = Math.PI \/ 2;\r\n    scanRing.position.y = 2.35;\r\n    moduleGroup.add(scanRing);\r\n\r\n    var future = groups.future;\r\n    var futureOrange = material(\"future\", orange, .46);\r\n    var futureViolet = material(\"future\", violet, .44);\r\n    var futureWhite = material(\"future\", white, .34);\r\n    var terminal = new T.Group();\r\n    terminal.position.set(5.1, 0, -2.35);\r\n    future.add(terminal);\r\n    addBox(terminal, [4.7, 2.75, 3.05], [0, 1.38, 0], futureWhite);\r\n    addBox(terminal, [3.8, .2, .86], [0, .66, 0], futureOrange);\r\n    for (var rollerX = -1.5; rollerX <= 1.5; rollerX += .5) {\r\n      addCylinder(terminal, .11, .8, [rollerX, .74, 0], futureViolet, [Math.PI \/ 2, 0, 0]);\r\n    }\r\n\r\n    var lockerTrailer = new T.Group();\r\n    lockerTrailer.position.set(7.65, 0, -.02);\r\n    future.add(lockerTrailer);\r\n    addBox(lockerTrailer, [3.15, .15, 1.05], [1.03, .22, 0], futureViolet);\r\n    var lockerGeometry = new T.BoxGeometry(.62, .55, .56);\r\n    var lockers = new T.InstancedMesh(lockerGeometry, futureOrange, 12);\r\n    var lockerIndex = 0;\r\n    for (var column = 0; column < 4; column += 1) {\r\n      for (var row = 0; row < 3; row += 1) {\r\n        dummy.position.set(column * .68, .58 + row * .61, 0);\r\n        dummy.updateMatrix();\r\n        lockers.setMatrixAt(lockerIndex, dummy.matrix);\r\n        lockerIndex += 1;\r\n      }\r\n    }\r\n    lockerTrailer.add(lockers);\r\n    [0, 2.1].forEach(function (trailerWheel) {\r\n      addCylinder(lockerTrailer, .28, .17, [trailerWheel, .18, .58], futureViolet, [Math.PI \/ 2, 0, 0]);\r\n      addCylinder(lockerTrailer, .28, .17, [trailerWheel, .18, -.58], futureViolet, [Math.PI \/ 2, 0, 0]);\r\n    });\r\n\r\n    var drone = new T.Group();\r\n    drone.position.set(6.25, 4.05, -2.05);\r\n    future.add(drone);\r\n    addBox(drone, [.76, .23, .52], [0, 0, 0], futureViolet);\r\n    [\r\n      [.64, .56, Math.PI \/ 4],\r\n      [-.64, .56, -Math.PI \/ 4],\r\n      [.64, -.56, -Math.PI \/ 4],\r\n      [-.64, -.56, Math.PI \/ 4]\r\n    ].forEach(function (arm) {\r\n      addBox(drone, [1.0, .08, .08], [arm[0] * .55, 0, arm[1] * .55], futureOrange, [0, arm[2], 0]);\r\n      addCylinder(drone, .38, .035, [arm[0], .08, arm[1]], futureWhite);\r\n    });\r\n    addBox(drone, [.46, .5, .46], [0, -.45, 0], futureOrange);\r\n\r\n    var network = groups.network;\r\n    var networkMaterial = material(\"development\", orange, .66);\r\n    var networkPoints = [\r\n      new T.Vector3(-7.55, .35, 1.8),\r\n      new T.Vector3(-2.7, .35, 0),\r\n      new T.Vector3(.65, .35, 1.42),\r\n      new T.Vector3(2.35, .35, .35),\r\n      new T.Vector3(5.1, .35, -2.35),\r\n      new T.Vector3(7.65, .35, -.02),\r\n      new T.Vector3(8.55, .35, -.35)\r\n    ];\r\n    networkPoints.forEach(function (point) {\r\n      var node = new T.Mesh(new T.IcosahedronGeometry(.23, lowQuality ? 0 : 1), networkMaterial);\r\n      node.position.copy(point);\r\n      network.add(node);\r\n    });\r\n    var networkSegments = [];\r\n    for (var networkIndex = 0; networkIndex < networkPoints.length - 1; networkIndex += 1) {\r\n      networkSegments.push(networkPoints[networkIndex], networkPoints[networkIndex + 1]);\r\n    }\r\n    network.add(new T.LineSegments(\r\n      new T.BufferGeometry().setFromPoints(networkSegments),\r\n      new T.LineBasicMaterial({ color: orange, transparent: true, opacity: .64 })\r\n    ));\r\n    var networkRing = new T.Mesh(\r\n      new T.TorusGeometry(8.8, .025, 6, lowQuality ? 64 : 120),\r\n      new T.MeshBasicMaterial({ color: violet, transparent: true, opacity: .46 })\r\n    );\r\n    networkRing.rotation.x = Math.PI \/ 2;\r\n    networkRing.position.y = .32;\r\n    network.add(networkRing);\r\n\r\n    var groupMaterials = {};\r\n    Object.keys(groups).forEach(function (name) {\r\n      var found = new Set();\r\n      groups[name].traverse(function (object) {\r\n        var list = Array.isArray(object.material) ? object.material : object.material ? [object.material] : [];\r\n        list.forEach(function (value) {\r\n          if (value.userData.baseOpacity === undefined) {\r\n            value.userData.baseOpacity = value.opacity === undefined ? 1 : value.opacity;\r\n            value.userData.baseDepthWrite = value.depthWrite;\r\n          }\r\n          found.add(value);\r\n        });\r\n      });\r\n      groupMaterials[name] = Array.from(found);\r\n    });\r\n\r\n    function setGroupFactor(name, factor) {\r\n      groups[name].visible = factor > .008;\r\n      groupMaterials[name].forEach(function (value) {\r\n        var nextDepthWrite = Boolean(value.userData.baseDepthWrite ? factor > .98 : false);\r\n        value.opacity = value.userData.baseOpacity * factor;\r\n        value.transparent = true;\r\n        if (value.depthWrite !== nextDepthWrite) {\r\n          value.depthWrite = nextDepthWrite;\r\n          value.needsUpdate = true;\r\n        }\r\n      });\r\n    }\r\n\r\n    function setFactors(factors) {\r\n      Object.keys(factors).forEach(function (name) { setGroupFactor(name, factors[name]); });\r\n    }\r\n\r\n    function setFlow(progress) {\r\n      flowOrb.position.copy(route.getPointAt(Math.max(0, Math.min(1, progress))));\r\n    }\r\n\r\n    function resetMotion() {\r\n      flowOrb.scale.setScalar(1);\r\n      routeGlowMaterial.opacity = .92;\r\n      moduleGroup.position.y = 0;\r\n      dataCore.rotation.set(0, 0, 0);\r\n      scanRing.scale.setScalar(1);\r\n      drone.position.y = 4.05;\r\n      network.rotation.y = 0;\r\n    }\r\n\r\n    function animateTransition(progress, sceneIndex) {\r\n      var pulse = Math.sin(progress * Math.PI);\r\n      flowOrb.scale.setScalar(1 + pulse * .5);\r\n      routeGlowMaterial.opacity = .62 + pulse * .34;\r\n      if (sceneIndex === 2) {\r\n        dataCore.rotation.y = progress * Math.PI * 1.6;\r\n        moduleGroup.position.y = pulse * .18;\r\n        scanRing.scale.setScalar(.8 + progress * .35);\r\n      }\r\n      if (sceneIndex === 3) drone.position.y = 4.05 + pulse * .82;\r\n      if (sceneIndex === 4) network.rotation.y = pulse * .085;\r\n    }\r\n\r\n    setFactors(sceneFactors[0]);\r\n    setFlow(cameraPoses[0].flow);\r\n\r\n    return {\r\n      root: root3D,\r\n      setFactors: setFactors,\r\n      setFlow: setFlow,\r\n      resetMotion: resetMotion,\r\n      animateTransition: animateTransition\r\n    };\r\n  }\r\n\r\n  if (previous) {\r\n    previous.addEventListener(\"click\", function () {\r\n      setScene(state.current - 1, { source: \"control\", scroll: desktopStory.matches });\r\n    }, { signal: abort.signal });\r\n  }\r\n\r\n  if (next) {\r\n    next.addEventListener(\"click\", function () {\r\n      setScene(state.current + 1, { source: \"control\", scroll: desktopStory.matches });\r\n    }, { signal: abort.signal });\r\n  }\r\n\r\n  steps.forEach(function (button, index) {\r\n    button.addEventListener(\"click\", function () {\r\n      setScene(index, { source: \"control\", scroll: desktopStory.matches });\r\n    }, { signal: abort.signal });\r\n\r\n    button.addEventListener(\"keydown\", function (event) {\r\n      var destination = null;\r\n      if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") destination = Math.min(4, index + 1);\r\n      if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") destination = Math.max(0, index - 1);\r\n      if (event.key === \"Home\") destination = 0;\r\n      if (event.key === \"End\") destination = 4;\r\n      if (destination === null) return;\r\n      event.preventDefault();\r\n      steps[destination].focus();\r\n      setScene(destination, { source: \"keyboard\", scroll: desktopStory.matches });\r\n    }, { signal: abort.signal });\r\n  });\r\n\r\n  if (motion) {\r\n    motion.addEventListener(\"click\", function () {\r\n      if (reducedMotion.matches) {\r\n        if (live) live.textContent = \"Liike on v\u00e4hennetty laitteen saavutettavuusasetuksen mukaan.\";\r\n        return;\r\n      }\r\n      state.userPaused = !state.userPaused;\r\n      if (!motionAllowed()) {\r\n        if (state.ready) {\r\n          state.transition = null;\r\n          applyPose(state.current);\r\n        }\r\n      }\r\n      updateMotionButton();\r\n      requestRender();\r\n      if (live) live.textContent = motionAllowed() ? \"3D-liike k\u00e4yt\u00f6ss\u00e4.\" : \"3D-liike pys\u00e4ytetty.\";\r\n    }, { signal: abort.signal });\r\n  }\r\n\r\n  var pointerStart = null;\r\n  viewport.addEventListener(\"pointerdown\", function (event) {\r\n    if (event.pointerType !== \"touch\") return;\r\n    pointerStart = { x: event.clientX, y: event.clientY };\r\n  }, { signal: abort.signal, passive: true });\r\n\r\n  viewport.addEventListener(\"pointerup\", function (event) {\r\n    if (!pointerStart || event.pointerType !== \"touch\") return;\r\n    var deltaX = event.clientX - pointerStart.x;\r\n    var deltaY = event.clientY - pointerStart.y;\r\n    pointerStart = null;\r\n    if (Math.abs(deltaX) < 52 || Math.abs(deltaX) < Math.abs(deltaY) * 1.2) return;\r\n    setScene(state.current + (deltaX < 0 ? 1 : -1), { source: \"swipe\" });\r\n  }, { signal: abort.signal, passive: true });\r\n\r\n  viewport.addEventListener(\"pointercancel\", function () { pointerStart = null; }, { signal: abort.signal });\r\n\r\n  canvas.addEventListener(\"webglcontextlost\", function (event) {\r\n    event.preventDefault();\r\n    state.contextLost = true;\r\n    cancelAnimationFrame(state.raf);\r\n    state.raf = 0;\r\n    showFallback(\"context-lost\");\r\n  }, { signal: abort.signal });\r\n\r\n  canvas.addEventListener(\"webglcontextrestored\", function () {\r\n    state.contextLost = false;\r\n    state.firstFrame = false;\r\n    stage.classList.remove(\"is-webgl-fallback\");\r\n    stage.classList.add(\"is-webgl-pending\");\r\n    resize();\r\n    applyPose(state.current);\r\n    requestRender();\r\n  }, { signal: abort.signal });\r\n\r\n  window.addEventListener(\"scroll\", scheduleScrollSelection, { passive: true, signal: abort.signal });\r\n  window.addEventListener(\"resize\", function () {\r\n    state.lastSize = \"\";\r\n    resize();\r\n    scheduleScrollSelection();\r\n  }, { passive: true, signal: abort.signal });\r\n\r\n  document.addEventListener(\"visibilitychange\", function () {\r\n    if (!document.hidden) requestRender();\r\n  }, { signal: abort.signal });\r\n\r\n  reducedMotion.addEventListener(\"change\", function () {\r\n    updateMotionButton();\r\n    if (reducedMotion.matches) {\r\n      state.transition = null;\r\n      if (state.ready) {\r\n        applyPose(state.current);\r\n        requestRender();\r\n      } else {\r\n        showFallback(\"reduced-motion\");\r\n      }\r\n    } else if (!state.ready) {\r\n      stage.classList.remove(\"is-webgl-fallback\");\r\n      stage.classList.add(\"is-webgl-pending\");\r\n      boot3D();\r\n    }\r\n  }, { signal: abort.signal });\r\n\r\n  desktopStory.addEventListener(\"change\", function () {\r\n    state.manualLockUntil = 0;\r\n    scheduleScrollSelection();\r\n  }, { signal: abort.signal });\r\n\r\n  window.addEventListener(\"pagehide\", function (event) {\r\n    if (!event.persisted) destroy();\r\n  }, { signal: abort.signal });\r\n\r\n  if (\"IntersectionObserver\" in window) {\r\n    lazyObserver = new IntersectionObserver(function (entries) {\r\n      if (entries.some(function (entry) { return entry.isIntersecting; })) {\r\n        boot3D();\r\n        lazyObserver.disconnect();\r\n      }\r\n    }, { rootMargin: \"700px 0px\", threshold: 0 });\r\n\r\n    visibleObserver = new IntersectionObserver(function (entries) {\r\n      state.inViewport = entries.some(function (entry) { return entry.isIntersecting; });\r\n      if (state.inViewport) requestRender();\r\n    }, { rootMargin: \"120px 0px\", threshold: .01 });\r\n\r\n    lazyObserver.observe(section);\r\n    visibleObserver.observe(stage);\r\n  } else {\r\n    state.inViewport = true;\r\n    boot3D();\r\n  }\r\n\r\n  detachObserver = new MutationObserver(function () {\r\n    if (!stage.isConnected) destroy();\r\n  });\r\n  detachObserver.observe(document.body, { childList: true, subtree: true });\r\n\r\n  updateUI(0, false);\r\n  updateMotionButton();\r\n  scheduleScrollSelection();\r\n}());\r\n<\/script>\r\n<\/div>\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>Mico System yhdist\u00e4\u00e4 Mico Finlandin noudon, varastoinnin, ker\u00e4ilyn, l\u00e4mp\u00f6tilahallitun kuljetuksen ja toimituksen yhdeksi selke\u00e4ksi palveluketjuksi.<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-1040","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.micofoy.fi\/index.php\/wp-json\/wp\/v2\/pages\/1040","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.micofoy.fi\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.micofoy.fi\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.micofoy.fi\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.micofoy.fi\/index.php\/wp-json\/wp\/v2\/comments?post=1040"}],"version-history":[{"count":21,"href":"https:\/\/www.micofoy.fi\/index.php\/wp-json\/wp\/v2\/pages\/1040\/revisions"}],"predecessor-version":[{"id":1138,"href":"https:\/\/www.micofoy.fi\/index.php\/wp-json\/wp\/v2\/pages\/1040\/revisions\/1138"}],"wp:attachment":[{"href":"https:\/\/www.micofoy.fi\/index.php\/wp-json\/wp\/v2\/media?parent=1040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}