:root {
  --blue: #083b6c;
  --ice: #f4f8fb;
  --mist: #dce8f1;
  --blue-95: rgba(8, 59, 108, 0.95);
  --blue-82: rgba(8, 59, 108, 0.82);
  --blue-70: rgba(8, 59, 108, 0.7);
  --blue-62: rgba(8, 59, 108, 0.62);
  --blue-42: rgba(8, 59, 108, 0.42);
  --blue-20: rgba(8, 59, 108, 0.2);
  --blue-10: rgba(8, 59, 108, 0.1);
  --blue-06: rgba(8, 59, 108, 0.06);
  --ice-90: rgba(244, 248, 251, 0.9);
  --ice-72: rgba(244, 248, 251, 0.72);
  --ice-56: rgba(244, 248, 251, 0.56);
  --ice-34: rgba(244, 248, 251, 0.34);
  --ice-18: rgba(244, 248, 251, 0.18);
  --ice-10: rgba(244, 248, 251, 0.1);
  --ice-06: rgba(244, 248, 251, 0.06);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mx: 70%;
  --my: 20%;
}

* { box-sizing: border-box; }

html {
  background: var(--mist);
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--blue);
  background: var(--mist);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

button,
input { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 10px;
  left: 10px;
  min-height: 44px;
  padding: 12px 18px;
  color: var(--blue);
  background: var(--ice);
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}

.skip-link:focus { transform: translateY(0); }

.loader {
  position: fixed;
  z-index: 180;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 22px;
  background: var(--blue);
  transition: opacity 0.7s var(--ease), visibility 0.7s;
}

.loader.is-done { opacity: 0; visibility: hidden; }

.loader-mark {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ice-18);
  border-radius: 18px;
  font-size: 2rem;
  font-weight: 300;
}

.loader-track { width: 190px; height: 1px; overflow: hidden; background: var(--ice-18); }
.loader-track i { display: block; width: 100%; height: 100%; background: var(--ice); animation: load 0.9s var(--ease) forwards; transform: translateX(-100%); }

.site-header {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}

.site-header.is-scrolled,
.site-header.menu-open {
  border-color: var(--ice-10);
  background: var(--blue-95);
  backdrop-filter: blur(18px);
}

.header-inner {
  width: min(1440px, calc(100% - 64px));
  min-height: 88px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
}

.brand { width: 184px; }
.brand img { width: 100%; }

.desktop-nav { display: flex; align-items: center; gap: 38px; }
.desktop-nav a { position: relative; padding: 12px 0; color: var(--ice-72); font-size: 0.73rem; font-weight: 700; letter-spacing: 0.08em; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 5px; height: 1px; background: var(--ice); transition: right 0.35s var(--ease); }
.desktop-nav a:hover,
.desktop-nav a.is-active { color: var(--ice); }
.desktop-nav a:hover::after,
.desktop-nav a.is-active::after { right: 0; }

.header-actions { justify-self: end; display: flex; align-items: center; gap: 12px; }

.ask-button,
.menu-button {
  min-height: 44px;
  border: 1px solid var(--ice-18);
  border-radius: 999px;
  background: var(--ice-06);
  cursor: pointer;
}

.ask-button { min-width: 146px; padding: 0 10px 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 0.68rem; font-weight: 750; letter-spacing: 0.08em; }
.ask-button kbd { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--ice-18); border-radius: 50%; color: var(--ice-72); font-size: 0.68rem; }
.ask-button:hover { background: var(--ice); color: var(--blue); }
.ask-button:hover kbd { border-color: rgba(8, 59, 108, 0.2); color: var(--blue); }

.menu-button { display: none; width: 48px; padding: 0; place-items: center; }
.menu-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.menu-button i,
.menu-button i::before { width: 15px; height: 1px; display: block; background: currentColor; transition: transform 0.3s var(--ease); }
.menu-button i { position: relative; transform: translateY(-3px); }
.menu-button i::before { content: ""; position: absolute; top: 6px; }
.site-header.menu-open .menu-button i { transform: translateY(0) rotate(45deg); }
.site-header.menu-open .menu-button i::before { top: 0; transform: rotate(-90deg); }

.mobile-menu { display: none; }

main,
.site-footer { position: relative; z-index: 2; }

.experience-rail {
  position: fixed;
  z-index: 64;
  top: 50%;
  right: 18px;
  width: 36px;
  padding: 12px 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  border: 1px solid var(--ice-18);
  border-radius: 999px;
  color: var(--ice-72);
  background: var(--blue-95);
  box-shadow: 0 16px 42px rgba(8, 59, 108, 0.24);
  backdrop-filter: blur(14px);
  transform: translateY(-50%);
}
.experience-rail span { font-size: 0.46rem; font-weight: 800; letter-spacing: 0.08em; }
.experience-rail > i { position: relative; width: 1px; height: 74px; overflow: hidden; background: var(--ice-18); }
.experience-rail > i b { position: absolute; inset: 0; display: block; background: var(--ice); transform: scaleY(var(--page-progress, 0)); transform-origin: top; transition: transform 0.18s linear; }
.experience-rail em { writing-mode: vertical-rl; color: var(--ice-34); font-size: 0.42rem; font-style: normal; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }

.hero {
  position: relative;
  color: var(--ice);
  background: radial-gradient(circle at var(--mx) var(--my), var(--ice-10), transparent 42%), var(--blue);
  box-shadow: 0 0 0 100vmax var(--blue);
  clip-path: inset(0 -100vmax);
  min-height: 100svh;
  width: min(1440px, calc(100% - 64px));
  margin: auto;
  padding: 154px 0 110px;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(440px, 0.78fr);
  align-items: center;
  gap: clamp(48px, 7vw, 112px);
}

.section-label { margin: 0 0 26px; display: flex; align-items: center; gap: 12px; color: var(--ice-72); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.section-label i { width: 32px; height: 1px; background: currentColor; }

.hero h1,
.section-heading h2,
.approach-intro h2,
.contact-panel h2 { margin: 0; font-size: clamp(3.8rem, 7.25vw, 7.8rem); font-weight: 650; line-height: 0.93; letter-spacing: -0.072em; }
.hero h1 span { color: var(--ice-56); }
.hero-copy { position: relative; z-index: 2; }

.hero-lead { max-width: 610px; margin: 34px 0 0; color: var(--ice-72); font-size: clamp(1rem, 1.35vw, 1.22rem); line-height: 1.68; }

.hero-actions,
.contact-actions { margin-top: 36px; display: flex; align-items: center; gap: 30px; }

.button { min-height: 54px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 34px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; transition: transform 0.3s var(--ease), background 0.3s ease; }
.button:hover { transform: translateY(-3px); }
.button-light { color: var(--blue); background: var(--ice); }
.button-light:hover { background: var(--ice-90); }
.text-link { min-height: 44px; display: inline-flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--ice-18); color: var(--ice-72); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.06em; }
.text-link:hover { color: var(--ice); border-color: var(--ice); }

.hero-principles { margin-top: 72px; display: flex; align-items: center; gap: 16px; color: var(--ice-34); font-size: 0.58rem; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase; }
.hero-principles i { width: 40px; height: 1px; background: var(--ice-18); }

.system-stage { position: relative; z-index: 1; min-width: 0; perspective: 1200px; }

.stage-window {
  --rx: 1deg;
  --ry: -4deg;
  --lift: 0px;
  --glow-x: 50%;
  --glow-y: 50%;
  position: relative;
  min-height: 584px;
  padding: 0 28px;
  overflow: hidden;
  border: 1px solid var(--ice-18);
  border-radius: 30px;
  background: radial-gradient(circle at var(--glow-x) var(--glow-y), var(--ice-18), transparent 34%), linear-gradient(145deg, var(--ice-10), var(--ice-06));
  box-shadow: 0 45px 100px rgba(8, 59, 108, 0.42);
  backdrop-filter: blur(18px);
  transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, var(--lift), 0);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.55s var(--ease);
}
.system-stage:hover .stage-window { --lift: -5px; }
.stage-window::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 64px;
  bottom: 0;
  left: -8%;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--ice-72), transparent);
  box-shadow: 0 0 26px var(--ice-56);
  opacity: 0.32;
  animation: scan-stage 7s var(--ease) infinite;
}

.stage-bar { height: 64px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ice-10); color: var(--ice-56); font-size: 0.54rem; font-weight: 800; letter-spacing: 0.16em; }
.stage-bar div { display: flex; gap: 6px; }
.stage-bar i { width: 6px; height: 6px; border: 1px solid var(--ice-34); border-radius: 50%; }

.stage-status { padding: 30px 0 24px; display: flex; align-items: center; justify-content: space-between; }
.stage-status span { display: flex; align-items: center; gap: 9px; color: var(--ice-72); font-size: 0.65rem; }
.stage-status span i { width: 7px; height: 7px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 0 5px var(--ice-10); animation: pulse 2s ease-in-out infinite; }
.stage-status b { color: var(--ice-34); font-size: 0.5rem; letter-spacing: 0.14em; }

.ecosystem-map {
  position: relative;
  height: 304px;
  overflow: hidden;
  border: 1px solid var(--ice-10);
  border-radius: 22px;
  background: radial-gradient(circle at 50% 48%, var(--ice-10), transparent 27%);
}
.ecosystem-map::before,
.ecosystem-map::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid var(--ice-10);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-7deg);
  pointer-events: none;
}
.ecosystem-map::before { width: 79%; height: 58%; }
.ecosystem-map::after { width: 48%; height: 82%; transform: translate(-50%, -50%) rotate(24deg); }

.ecosystem-core {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 108px;
  height: 108px;
  display: grid;
  place-content: center;
  justify-items: center;
  border: 1px solid var(--ice-34);
  border-radius: 50%;
  color: var(--blue);
  background: var(--ice);
  box-shadow: 0 0 0 10px var(--ice-06), 0 18px 48px rgba(8, 59, 108, 0.34);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease), box-shadow 0.35s ease;
  animation: core-breathe 3.8s ease-in-out infinite;
}
.ecosystem-core:hover { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 16px var(--ice-10), 0 22px 54px rgba(8, 59, 108, 0.38); }
.ecosystem-core small { font-size: 0.43rem; font-weight: 900; letter-spacing: 0.16em; }
.ecosystem-core strong { font-size: 2rem; line-height: 1; }
.ecosystem-core span { color: var(--blue-62); font-size: 0.46rem; font-weight: 750; letter-spacing: 0.08em; }

.product-node {
  position: absolute;
  z-index: 4;
  min-width: 112px;
  min-height: 58px;
  padding: 9px 30px 9px 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  column-gap: 8px;
  border: 1px solid var(--ice-18);
  border-radius: 16px;
  color: var(--ice);
  background: var(--blue-95);
  box-shadow: 0 14px 34px rgba(8, 59, 108, 0.28);
  cursor: pointer;
  text-align: left;
  transition: transform 0.4s var(--ease), color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.product-node > span { grid-row: 1 / 3; align-self: center; color: var(--ice-34); font-size: 0.44rem; }
.product-node strong { font-size: 0.68rem; letter-spacing: 0.02em; }
.product-node small { color: var(--ice-56); font-size: 0.44rem; }
.product-node > i { position: absolute; right: 10px; top: 50%; font-size: 0.58rem; font-style: normal; transform: translateY(-50%); }
.product-node:hover,
.product-node:focus-visible,
.product-node.is-active { border-color: var(--ice); color: var(--blue); background: var(--ice); transform: scale(1.08); }
.product-node:hover > span,
.product-node:hover small,
.product-node:focus-visible > span,
.product-node:focus-visible small,
.product-node.is-active > span,
.product-node.is-active small { color: var(--blue-42); }
.node-biblio { left: 5%; top: 9%; animation: node-float 5.4s ease-in-out infinite; }
.node-proof { right: 4%; top: 12%; animation: node-float 5.8s ease-in-out -1.4s infinite; }
.node-journal { left: 7%; bottom: 8%; animation: node-float 5.6s ease-in-out -2.8s infinite; }
.node-demo { right: 5%; bottom: 7%; animation: node-float 6s ease-in-out -4.1s infinite; }

.network-line {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 35%;
  height: 1px;
  overflow: hidden;
  background: var(--ice-10);
  transform-origin: left;
}
.network-line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--ice), transparent); transform: translateX(-100%); animation: travel 2.8s var(--ease) infinite; }
.line-a { transform: rotate(-151deg); }
.line-b { transform: rotate(-29deg); }
.line-c { transform: rotate(150deg); }
.line-d { transform: rotate(30deg); }
.line-b::after { animation-delay: -0.7s; }
.line-c::after { animation-delay: -1.4s; }
.line-d::after { animation-delay: -2.1s; }

.stage-product-detail {
  min-height: 94px;
  padding: 17px 2px 0;
  display: grid;
  grid-template-columns: 0.65fr 1fr auto;
  align-items: center;
  gap: 18px;
  border-top: 1px solid var(--ice-10);
}
.stage-product-detail > div { display: grid; gap: 5px; }
.stage-product-detail > div span { color: var(--ice-34); font-size: 0.43rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.stage-product-detail > div strong { font-size: 1rem; }
.stage-product-detail p { margin: 0; color: var(--ice-56); font-size: 0.62rem; line-height: 1.5; }
.stage-product-detail a { min-height: 40px; padding: 0 13px; display: inline-flex; align-items: center; border: 1px solid var(--ice-18); border-radius: 999px; color: var(--blue); background: var(--ice); font-size: 0.52rem; font-weight: 850; letter-spacing: 0.05em; white-space: nowrap; transition: transform 0.3s var(--ease); }
.stage-product-detail a:hover { transform: translateY(-3px); }

.hero-navigator {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  width: min(700px, 68vw);
  min-height: 66px;
  margin: auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--ice-18);
  border-radius: 18px;
  color: var(--ice);
  background: var(--blue-95);
  backdrop-filter: blur(16px);
  cursor: pointer;
  text-align: left;
  transition: transform 0.3s var(--ease), background 0.3s ease;
}
.hero-navigator:hover { transform: translateY(-4px); background: var(--ice-10); }
.navigator-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--ice-18); border-radius: 10px; font-size: 0.8rem; }
.hero-navigator > span:nth-child(2) { font-size: 0.76rem; font-weight: 650; }
.hero-navigator small { display: block; margin-bottom: 4px; color: var(--ice-34); font-size: 0.46rem; letter-spacing: 0.14em; }
.hero-navigator b { font-size: 0.64rem; letter-spacing: 0.08em; }

.section { width: min(1440px, calc(100% - 64px)); margin: auto; padding: 144px 0; }
.platforms { border-top: 1px solid var(--blue-10); }

.platforms,
.services,
.contact { color: var(--blue); background: var(--mist); }

.platforms .section-label,
.services .section-label,
.contact .section-label { color: var(--blue-62); }

.section-heading { margin-bottom: 64px; display: grid; grid-template-columns: 1fr minmax(280px, 380px); align-items: end; gap: 60px; }
.section-heading h2,
.approach-intro h2,
.contact-panel h2 { font-size: clamp(3.1rem, 5.7vw, 6.6rem); }
.section-heading > p,
.approach-intro > p:last-child { margin: 0 0 6px; color: var(--ice-56); font-size: 1rem; line-height: 1.7; }

.platforms .section-heading > p,
.services .section-heading > p { color: var(--blue-62); }

.product-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }

.product-card {
  --card-rx: 0deg;
  --card-ry: 0deg;
  --card-lift: 0px;
  --glow-x: 50%;
  --glow-y: 50%;
  position: relative;
  min-height: 520px;
  padding: 34px;
  overflow: hidden;
  color: var(--ice);
  border: 1px solid var(--blue-10);
  border-radius: 28px;
  background: radial-gradient(circle at var(--glow-x) var(--glow-y), var(--ice-18), transparent 30%), linear-gradient(145deg, var(--blue), var(--blue-95));
  isolation: isolate;
  transform: perspective(1100px) rotateX(var(--card-rx)) rotateY(var(--card-ry)) translate3d(0, var(--card-lift), 0);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.5s var(--ease), border-color 0.3s ease, background 0.3s ease;
}
.product-card:hover { --card-lift: -10px; border-color: var(--blue-42); }
.product-card::before { content: ""; position: absolute; z-index: -1; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, var(--ice-10), transparent 70%); transition: transform 0.7s var(--ease); }
.product-card:hover::before { transform: scale(1.22); }
.product-biblio { grid-column: span 7; }
.product-proof { grid-column: span 5; }
.product-journal { grid-column: span 5; }
.product-lab { grid-column: span 7; }
.product-biblio::before { right: -120px; top: -80px; }
.product-proof::before { left: -100px; bottom: -120px; }
.product-journal::before { right: -100px; bottom: -120px; }
.product-lab::before { left: 20%; top: -160px; }

.product-copy { position: relative; z-index: 3; max-width: 360px; transition: transform 0.55s var(--ease); }
.product-card:hover .product-copy { transform: translateZ(24px); }
.product-copy > p { margin: 0 0 28px; color: var(--ice-56); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.product-copy > p span { margin-right: 10px; color: var(--ice-34); }
.product-copy h3 { margin: 0; font-size: clamp(2.3rem, 4.2vw, 4.9rem); font-weight: 650; letter-spacing: -0.055em; }
.product-copy h4 { max-width: 330px; margin: 14px 0 0; color: var(--ice-56); font-size: 0.96rem; font-weight: 450; line-height: 1.55; }
.card-link { position: absolute; top: 426px; left: 0; display: inline-flex; padding-bottom: 8px; border-bottom: 1px solid var(--ice-18); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

.product-ui { position: absolute; z-index: 2; overflow: hidden; border: 1px solid var(--ice-18); background: var(--blue-70); box-shadow: 0 30px 70px rgba(8, 59, 108, 0.35); transition: transform 0.65s var(--ease); }
.product-card:hover .product-ui { transform: translateY(-10px) rotate(0); }

.cursor-orb {
  position: fixed;
  z-index: 120;
  left: 0;
  top: 0;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  pointer-events: none;
  border: 1px solid var(--blue-20);
  border-radius: 50%;
  color: var(--blue);
  background: var(--ice-90);
  box-shadow: 0 18px 44px rgba(8, 59, 108, 0.18);
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) scale(0.45);
  transition: opacity 0.2s ease, transform 0.16s ease-out;
}
.cursor-orb span { font-size: 0.56rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.cursor-orb.is-active { opacity: 1; }

.biblio-ui { right: -42px; bottom: -36px; width: 57%; height: 330px; border-radius: 18px 0 0 0; transform: rotate(-2deg); }
.ui-top { height: 38px; padding: 0 13px; display: flex; align-items: center; gap: 5px; border-bottom: 1px solid var(--ice-10); }
.ui-top > i { width: 5px; height: 5px; border: 1px solid var(--ice-34); border-radius: 50%; }
.ui-top span { margin-left: 8px; color: var(--ice-34); font-size: 0.46rem; }
.ui-body { height: calc(100% - 38px); display: grid; grid-template-columns: 44px 1fr; }
.ui-body aside { padding-top: 14px; display: grid; justify-items: center; align-content: start; gap: 17px; border-right: 1px solid var(--ice-10); }
.ui-body aside b { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--ice-18); border-radius: 7px; font-size: 0.55rem; }
.ui-body aside i { width: 13px; height: 2px; background: var(--ice-18); }
.review-panel { padding: 22px 18px; }
.review-head { display: flex; justify-content: space-between; font-size: 0.58rem; }
.review-head b { color: var(--ice-56); }
.progress { height: 3px; margin: 12px 0 22px; background: var(--ice-10); }
.progress i { display: block; width: 64%; height: 100%; background: var(--ice-72); }
.paper-row { min-height: 53px; display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 10px; border-top: 1px solid var(--ice-10); }
.paper-row > i { width: 7px; height: 7px; border: 1px solid var(--ice-34); border-radius: 50%; }
.paper-row span { display: grid; gap: 6px; }
.paper-row span b { width: 72%; height: 3px; background: var(--ice-34); }
.paper-row span small { width: 46%; height: 2px; background: var(--ice-10); }
.paper-row em { color: var(--ice-56); font-size: 0.44rem; font-style: normal; }

.proof-ui { right: -30px; bottom: -34px; width: 62%; height: 338px; border-radius: 18px 0 0 0; transform: rotate(2deg); }
.editor-tools { height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--ice-10); color: var(--ice-56); font-size: 0.55rem; }
.editor-tools b { margin-right: auto; color: var(--ice); }
.editor-tools i { width: 11px; height: 2px; background: var(--ice-18); }
.document-page { position: relative; width: 75%; height: 270px; margin: 19px auto 0; padding: 24px; color: var(--blue); background: var(--ice); box-shadow: 0 15px 45px rgba(8, 59, 108, 0.32); }
.document-page > span { font-size: 0.42rem; letter-spacing: 0.15em; }
.document-page h5 { margin: 12px 0 19px; font-size: 1rem; line-height: 1.14; }
.document-page > i { width: 100%; height: 3px; margin-bottom: 8px; display: block; background: rgba(8, 59, 108, 0.14); }
.document-page > i:nth-of-type(3) { width: 72%; }
.document-page > i:nth-of-type(5) { width: 84%; }
.comment-dot { position: absolute; right: -10px; top: 88px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: var(--ice); background: var(--blue); font-size: 0.48rem; }

.journal-ui { right: -38px; bottom: -25px; width: 68%; min-height: 300px; padding: 18px; border-radius: 18px 0 0 0; transform: rotate(-2deg); }
.journal-brand { height: 54px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--ice-10); }
.journal-brand b { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--ice-18); border-radius: 8px; }
.journal-brand span { color: var(--ice-72); font-size: 0.55rem; }
.journal-brand i { width: 32px; height: 3px; background: var(--ice-18); }
.issue-row { min-height: 64px; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 9px; border-bottom: 1px solid var(--ice-10); }
.issue-row span { color: var(--ice-34); font-size: 0.43rem; }
.issue-row b { font-size: 0.55rem; font-weight: 550; }
.issue-row i { color: var(--ice-56); font-size: 0.6rem; font-style: normal; }

.lab-ui { right: 32px; bottom: -36px; width: 54%; height: 330px; border-radius: 18px 18px 0 0; transform: rotate(1deg); }
.lab-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 1px; background: var(--ice-10); }
.lab-grid i { position: relative; background: var(--blue); }
.lab-grid i::after { content: ""; position: absolute; inset: 18%; border: 1px solid var(--ice-18); border-radius: 10px; }
.lab-grid i:nth-child(2),
.lab-grid i:nth-child(6) { background: var(--ice-06); }
.lab-cursor { position: absolute; z-index: 2; right: 24%; top: 32%; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: var(--ice); box-shadow: 0 12px 30px rgba(8, 59, 108, 0.4); }
.lab-note { position: absolute; z-index: 2; left: 16px; bottom: 15px; padding: 8px 10px; border: 1px solid var(--ice-18); border-radius: 8px; background: var(--blue-95); color: var(--ice-56); font-size: 0.45rem; letter-spacing: 0.12em; }

.services { padding-top: 110px; }
.service-list { border-top: 1px solid var(--blue-20); }
.service-item { min-height: 174px; display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 30px; border-bottom: 1px solid var(--blue-20); transition: padding 0.45s var(--ease), background 0.3s ease; }
.service-item:hover { padding: 0 26px; background: var(--blue-06); }
.service-item > span { color: var(--blue-42); font-size: 0.58rem; }
.service-item > div { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(280px, 0.7fr); align-items: center; gap: 70px; }
.service-item h3 { margin: 0; font-size: clamp(1.8rem, 3.1vw, 3.7rem); font-weight: 600; letter-spacing: -0.045em; }
.service-item p { margin: 0; color: var(--blue-62); font-size: 0.9rem; line-height: 1.65; }
.service-item > i { font-size: 1rem; font-style: normal; transition: transform 0.35s var(--ease); }
.service-item:hover > i { transform: translate(6px, 6px); }

.approach { padding-top: 110px; display: grid; grid-template-columns: minmax(380px, 0.9fr) minmax(420px, 0.8fr); gap: clamp(80px, 10vw, 170px); color: var(--ice); background: var(--blue); border-top: 1px solid var(--ice-10); box-shadow: 0 0 0 100vmax var(--blue); clip-path: inset(0 -100vmax); }
.approach-intro { position: sticky; top: 140px; align-self: start; }
.approach-intro h2 { font-size: clamp(2.8rem, 4.8vw, 5.6rem); }
.approach-intro > p:last-child { max-width: 480px; margin-top: 32px; }
.approach-steps { border-top: 1px solid var(--ice-18); }
.approach-steps article { min-height: 220px; padding: 34px 0; display: grid; grid-template-columns: 60px 1fr; gap: 24px; border-bottom: 1px solid var(--ice-18); }
.approach-steps article > span { color: var(--ice-34); font-size: 0.58rem; }
.approach-steps h3 { margin: 0 0 18px; font-size: 1.65rem; font-weight: 600; letter-spacing: -0.025em; }
.approach-steps p { margin: 0; color: var(--ice-56); line-height: 1.72; }

.contact { padding-top: 100px; }
.contact-panel { min-height: 520px; padding: clamp(38px, 6vw, 86px); display: flex; flex-direction: column; justify-content: center; border-top: 1px solid var(--blue-20); border-bottom: 1px solid var(--blue-20); background: transparent; }
.contact-panel h2 span { color: var(--blue-62); }
.contact .button-light { color: var(--ice); background: var(--blue); }
.contact .button-light:hover { background: var(--blue-82); }
.contact .text-link { color: var(--blue-62); border-color: var(--blue-20); }
.contact .text-link:hover { color: var(--blue); border-color: var(--blue); }

.site-footer { width: min(1440px, calc(100% - 64px)); min-height: 150px; margin: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; color: var(--ice-34); background: var(--blue); border-top: 1px solid var(--ice-10); box-shadow: 0 0 0 100vmax var(--blue); clip-path: inset(0 -100vmax); font-size: 0.58rem; letter-spacing: 0.08em; }
.site-footer img { width: 150px; }
.site-footer p { margin: 0; }
.site-footer > span { justify-self: end; }

.navigator { position: fixed; z-index: 150; inset: 0; display: grid; place-items: center; padding: 24px; visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0.3s; }
.navigator.is-open { visibility: visible; opacity: 1; }
.navigator-backdrop { position: absolute; inset: 0; background: rgba(8, 59, 108, 0.82); backdrop-filter: blur(18px); }
.navigator-dialog { position: relative; width: min(760px, 96vw); padding: 30px; border: 1px solid var(--ice-18); border-radius: 24px; background: var(--blue); box-shadow: 0 45px 120px rgba(8, 59, 108, 0.55); transform: translateY(18px) scale(0.98); transition: transform 0.45s var(--ease); }
.navigator.is-open .navigator-dialog { transform: none; }
.navigator-head { display: flex; align-items: center; justify-content: space-between; }
.navigator-head > div { display: flex; align-items: center; gap: 13px; color: var(--ice-34); font-size: 0.52rem; font-weight: 800; letter-spacing: 0.14em; }
.navigator-head b { display: flex; align-items: center; gap: 7px; color: var(--ice-72); font-size: 0.46rem; }
.navigator-head b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ice); }
.navigator-head button { width: 44px; height: 44px; border: 1px solid var(--ice-18); border-radius: 50%; color: var(--ice); background: transparent; cursor: pointer; font-size: 1.3rem; }
.navigator-dialog h2 { margin: 44px 0 24px; font-size: clamp(2.1rem, 4.5vw, 4rem); font-weight: 600; letter-spacing: -0.05em; }
.navigator-search { min-height: 64px; padding: 0 16px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; border: 1px solid var(--ice-18); border-radius: 15px; background: var(--ice-06); }
.navigator-search > span { color: var(--ice-56); }
.navigator-search input { min-width: 0; border: 0; outline: 0; color: var(--ice); background: transparent; }
.navigator-search input::placeholder { color: var(--ice-34); }
.navigator-search kbd { padding: 6px 8px; border: 1px solid var(--ice-18); border-radius: 7px; color: var(--ice-34); font-size: 0.48rem; }
.navigator-results { min-height: 214px; padding-top: 18px; display: grid; align-content: start; gap: 5px; }
.navigator-result { min-height: 58px; padding: 0 14px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; border: 0; border-radius: 11px; color: var(--ice-72); background: transparent; cursor: pointer; text-align: left; }
.navigator-result:hover,
.navigator-result.is-selected { color: var(--blue); background: var(--ice); }
.navigator-result > span { color: var(--ice-34); font-size: 0.5rem; }
.navigator-result:hover > span,
.navigator-result.is-selected > span { color: rgba(8, 59, 108, 0.46); }
.navigator-result strong { font-size: 0.78rem; }
.navigator-result small { font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; }
.navigator-help { margin: 6px 0 0; color: var(--ice-34); font-size: 0.52rem; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes load { to { transform: translateX(0); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px var(--ice-06); } }
@keyframes travel { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
@keyframes node-float { 50% { translate: 0 -8px; } }
@keyframes core-breathe { 50% { box-shadow: 0 0 0 17px var(--ice-06), 0 22px 54px rgba(8, 59, 108, 0.38); } }
@keyframes scan-stage { 0%, 12% { left: -8%; opacity: 0; } 22% { opacity: 0.32; } 76% { opacity: 0.32; } 88%, 100% { left: 108%; opacity: 0; } }

@media (max-width: 1120px) {
  .experience-rail { display: none; }
  .header-inner,
  .hero,
  .section,
  .site-footer { width: min(100% - 44px, 1440px); }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(390px, 0.78fr); gap: 50px; }
  .product-card { min-height: 500px; }
  .product-biblio,
  .product-proof,
  .product-journal,
  .product-lab { grid-column: span 6; }
  .product-ui { width: 64%; }
  .service-item > div { gap: 40px; }
}

@media (max-width: 900px) {
  .desktop-nav,
  .ask-button { display: none; }
  .header-inner { grid-template-columns: 1fr auto; }
  .menu-button { display: grid; }
  .mobile-menu { position: fixed; top: 88px; left: 0; right: 0; height: calc(100svh - 88px); padding: 40px 28px; display: grid; align-content: start; background: var(--blue); visibility: hidden; opacity: 0; transform: translateY(-18px); transition: opacity 0.3s ease, transform 0.4s var(--ease), visibility 0.3s; }
  .site-header.menu-open .mobile-menu { visibility: visible; opacity: 1; transform: none; }
  .mobile-menu a,
  .mobile-menu button { min-height: 84px; padding: 0; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; border: 0; border-bottom: 1px solid var(--ice-18); color: var(--ice); background: transparent; font-size: 2rem; font-weight: 600; text-align: left; }
  .mobile-menu a span { color: var(--ice-34); font-size: 0.52rem; }
  .mobile-menu button { margin-top: 26px; padding: 0 18px; grid-template-columns: 1fr auto; border: 1px solid var(--ice-18); border-radius: 15px; font-size: 0.8rem; cursor: pointer; }
  .hero { min-height: auto; padding-top: 150px; grid-template-columns: 1fr; }
  .hero-copy { max-width: 760px; }
  .system-stage { max-width: 720px; width: 100%; margin: 20px auto 60px; }
  .stage-window { min-height: 584px; --rx: 0deg; --ry: 0deg; }
  .hero-navigator { width: min(700px, 90%); }
  .section-heading { grid-template-columns: 1fr; gap: 26px; }
  .section-heading > p { max-width: 560px; }
  .service-item > div { grid-template-columns: 1fr; gap: 14px; }
  .approach { grid-template-columns: 1fr; gap: 66px; }
  .approach-intro { position: static; }
  .site-footer { grid-template-columns: 1fr auto; }
  .site-footer p { display: none; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 78px; }
  .header-inner,
  .hero,
  .section,
  .site-footer { width: calc(100% - 36px); }
  .header-inner { min-height: 74px; }
  .brand { width: 148px; }
  .mobile-menu { top: 74px; height: calc(100svh - 74px); padding: 24px 18px; }
  .hero { padding: 126px 0 116px; }
  .section-label { margin-bottom: 20px; font-size: 0.55rem; }
  .hero h1 { font-size: clamp(3.35rem, 15vw, 5.2rem); }
  .hero-lead { margin-top: 25px; font-size: 0.94rem; }
  .hero-actions,
  .contact-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .hero-principles { margin-top: 52px; flex-wrap: wrap; row-gap: 10px; gap: 9px; font-size: 0.46rem; }
  .hero-principles i { width: 18px; }
  .system-stage { margin-top: 10px; }
  .stage-window { min-height: 604px; padding: 0 16px; border-radius: 22px; }
  .stage-bar { height: 54px; }
  .stage-status { padding: 24px 0 20px; }
  .stage-status b { display: none; }
  .ecosystem-map { height: 286px; }
  .ecosystem-core { width: 88px; height: 88px; }
  .product-node { min-width: 94px; min-height: 52px; padding: 8px 25px 8px 9px; }
  .node-biblio { left: 3%; }
  .node-proof { right: 2%; }
  .node-journal { left: 3%; }
  .node-demo { right: 2%; }
  .stage-product-detail { min-height: 132px; grid-template-columns: 1fr auto; gap: 9px 14px; }
  .stage-product-detail p { grid-column: 1 / -1; grid-row: 2; }
  .hero-navigator { bottom: 18px; width: 100%; min-height: 60px; }
  .hero-navigator > span:nth-child(2) { font-size: 0.66rem; }
  .section { padding: 96px 0; }
  .section-heading { margin-bottom: 42px; }
  .section-heading h2,
  .approach-intro h2,
  .contact-panel h2 { font-size: clamp(2.8rem, 13vw, 4.5rem); }
  .product-grid { grid-template-columns: 1fr; }
  .product-biblio,
  .product-proof,
  .product-journal,
  .product-lab { grid-column: 1; }
  .product-card { min-height: 520px; padding: 26px; border-radius: 22px; }
  .product-copy h3 { font-size: 2.8rem; }
  .card-link { top: 424px; }
  .product-ui { width: 70%; opacity: 0.92; }
  .biblio-ui { right: -50px; }
  .proof-ui { right: -34px; }
  .journal-ui { right: -54px; }
  .lab-ui { right: -24px; width: 72%; }
  .service-item { min-height: 190px; grid-template-columns: 34px 1fr auto; gap: 14px; }
  .service-item:hover { padding: 0; background: transparent; }
  .service-item > div { gap: 10px; }
  .service-item h3 { font-size: 1.75rem; }
  .service-item p { font-size: 0.78rem; }
  .approach { padding-top: 96px; }
  .approach-steps article { min-height: 190px; grid-template-columns: 38px 1fr; gap: 12px; }
  .contact { padding-top: 70px; }
  .contact-panel { min-height: 500px; padding: 32px 24px; }
  .site-footer { min-height: 132px; }
  .site-footer img { width: 132px; }
  .site-footer > span { font-size: 0.48rem; }
  .navigator { padding: 12px; }
  .navigator-dialog { padding: 20px; border-radius: 19px; }
  .navigator-dialog h2 { margin-top: 34px; }
  .navigator-search { min-height: 58px; }
  .navigator-search kbd { display: none; }
  .navigator-result { grid-template-columns: 30px 1fr; }
  .navigator-result small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-orb { display: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
/* Header refinement: full-bleed shell with content-aligned navigation. */
.site-header {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  background: linear-gradient(180deg, rgba(8, 59, 108, 0.92) 0%, rgba(8, 59, 108, 0.7) 76%, rgba(8, 59, 108, 0) 100%);
}

.site-header.is-scrolled,
.site-header.menu-open {
  background: rgba(8, 59, 108, 0.94);
  box-shadow: 0 16px 40px rgba(4, 29, 53, 0.14);
  backdrop-filter: blur(22px) saturate(1.15);
}

.site-header .header-inner {
  width: min(1440px, calc(100% - 64px));
  max-width: none !important;
  min-height: 80px;
  margin: 0 auto !important;
  padding: 0 4px;
}

.site-header .brand { width: 176px; }

.site-header .desktop-nav a {
  color: var(--ice-72);
  transition: color 0.25s ease;
}

.site-header .ask-button {
  min-width: 154px;
  color: var(--blue);
  border-color: var(--ice);
  background: var(--ice);
  box-shadow: 0 8px 24px rgba(4, 29, 53, 0.16);
  transition: transform 0.25s var(--ease), box-shadow 0.25s ease, background 0.25s ease;
}

.site-header .ask-button kbd {
  color: var(--blue);
  border-color: var(--blue-20);
  background: var(--blue-06);
}

.site-header .ask-button:hover {
  color: var(--blue);
  background: #fff;
  box-shadow: 0 12px 30px rgba(4, 29, 53, 0.22);
  transform: translateY(-1px);
}

.site-header .menu-button {
  color: var(--ice-90);
  border-color: var(--ice-34);
  background: var(--ice-10);
}

@media (max-width: 1120px) {
  .site-header .header-inner { width: min(100% - 44px, 1440px); }
}

@media (max-width: 700px) {
  .site-header .header-inner {
    width: calc(100% - 36px);
    min-height: 74px;
    padding: 0;
  }

  .site-header .brand { width: 148px; }
}

/* Open Research Lab */
.open-lab { padding-top: 110px; color: var(--blue); background: var(--mist); border-top: 1px solid var(--blue-20); }
.open-lab .section-label { color: var(--blue-62); }
.open-lab .section-heading > p { color: var(--blue-62); }
.lab-index { border-top: 1px solid var(--blue-20); }
.lab-project { min-height: 128px; display: grid; grid-template-columns: 70px minmax(250px, 0.72fr) minmax(320px, 0.8fr) auto; align-items: center; gap: 30px; border-bottom: 1px solid var(--blue-20); transition: padding 0.45s var(--ease), color 0.3s ease, background 0.3s ease; }
.lab-project:hover { padding: 0 24px; color: var(--ice); background: var(--blue); }
.lab-project > span { color: var(--blue-42); font-size: 0.58rem; }
.lab-project > div small { display: flex; align-items: center; gap: 10px; color: var(--blue-62); font-size: 0.54rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.lab-project > div small b { padding: 5px 8px; border-radius: 999px; color: var(--ice); background: var(--blue); font-size: 0.44rem; letter-spacing: 0.1em; }
.lab-project h3 { margin: 8px 0 0; font-size: clamp(1.65rem, 2.7vw, 3rem); font-weight: 620; letter-spacing: -0.04em; }
.lab-project > p { max-width: 520px; margin: 0; color: var(--blue-62); font-size: 0.84rem; line-height: 1.62; }
.lab-project > i { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--blue-20); border-radius: 50%; font-style: normal; transition: transform 0.35s var(--ease), border-color 0.3s ease; }
.lab-project:hover > span, .lab-project:hover > div small, .lab-project:hover > p { color: var(--ice-56); }
.lab-project:hover > div small b { color: var(--blue); background: var(--ice); }
.lab-project:hover > i { border-color: var(--ice-34); transform: translate(4px, -4px); }
.lab-project.is-live { background: var(--blue-06); }
.lab-project.is-live:hover { background: var(--blue); }
@media (max-width: 900px) { .lab-project { grid-template-columns: 48px minmax(220px, 0.8fr) minmax(260px, 1fr) auto; gap: 20px; } }
@media (max-width: 700px) {
  .lab-project { min-height: 142px; padding: 24px 0; grid-template-columns: 30px 1fr auto; gap: 10px 14px; }
  .lab-project:hover { padding: 24px 14px; }
  .lab-project > p { grid-column: 2 / 4; max-width: none; font-size: 0.78rem; }
  .lab-project > i { grid-column: 3; grid-row: 1; width: 36px; height: 36px; }
  .lab-project h3 { font-size: 1.8rem; }
}