@charset "UTF-8";

/* App Immersion palette; the scene is isolated from forms and product pages. */
.hero {
  --mt-ink: #172334;
  --mt-brand: #1f477c;
  --mt-night: #0f2140;
  --mt-glow: #7fa9dc;
  background: radial-gradient(ellipse at 85% 30%, #e5edf8, transparent 55%), #f7f9fc;
  padding-top: 64px;
  overflow: hidden;
}
.hero .hero-layout { grid-template-columns: .9fr 1.1fr; gap: 44px; }
.hero h1 { color: var(--mt-ink); font-size: clamp(40px, 4vw, 58px); }
.hero h1 > span, .hero .eyebrow, .hero .hero-reassurance i { color: var(--mt-brand); }
.hero .button-primary { background: var(--mt-brand); border-color: var(--mt-brand); }
.hero .button-primary:hover { background: #17365f; }
.hero .button-light:hover { background: #e5edf8; border-color: #7fa9dc; }
.hero .hero-pills span { border-color: #e0e7f0; color: #5f6b7b; }
.hero .hero-status { border-color: #e0e7f0; margin-top: 36px; }
.hero .hero-status > i { color: var(--mt-brand); }
.mt-scene {
  position: relative; min-width: 0; isolation: isolate;
  color: #fff; background: radial-gradient(ellipse at 65% 28%, #28599670, transparent 58%), linear-gradient(145deg, #0f2140, #17365f);
  border: 1px solid #7fa9dc55; border-radius: 18px;
  box-shadow: 0 32px 70px #17365f28, inset 0 1px 0 #ffffff20;
  transform: perspective(1400px) rotateY(-3deg) rotateX(2deg);
}
.mt-scene-heading, .mt-scene-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; }
.mt-scene-heading { border-bottom: 1px solid #7fa9dc30; }
.mt-scene-heading > span { display: flex; align-items: center; gap: 9px; font-size: 10px; letter-spacing: .12em; font-weight: 700; }
.mt-scene-heading i, .mt-scene-footer i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #a3d7b2; box-shadow: 0 0 12px #a3d7b260; }
.mt-scene-stage { position: relative; height: 370px; overflow: hidden; }
.mt-scene-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mt-coordinate { position: absolute; top: 19px; left: 22px; color: #aac4e5; font-size: 9px; letter-spacing: .11em; line-height: 1.9; }
.mt-signal { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #7fa9dc60; border-radius: 12px; background: #102340ed; box-shadow: 0 10px 24px #06152840; pointer-events: none; }
.mt-signal-planning { top: 68px; right: 18px; }
.mt-signal-documents { top: 226px; left: 14px; }
.mt-signal-alert { right: 18px; bottom: 45px; background: #ffe1ca; color: #172334; border-color: #ffe1ca; }
.mt-signal-icon { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border: 1px solid #7fa9dc70; border-radius: 8px; color: #a9c9ee; font-size: 20px; }
.mt-signal small { display: block; color: #a9c9ee; font-size: 8px; letter-spacing: .09em; font-weight: 700; }
.mt-signal strong { display: block; margin-top: 3px; font-size: 11px; font-weight: 650; }
.mt-signal-detail { display: block; margin-top: 4px; color: #b7cce5; font-size: 9px; }
.mt-signal-alert small, .mt-signal-alert .mt-signal-detail, .mt-signal-alert .mt-signal-icon { color: #8c4d21; border-color: #8c4d2133; }
.mt-site-label { position: absolute; bottom: 10px; left: 22px; color: #dce8f6; font-size: 10px; display: flex; align-items: center; gap: 8px; }
.mt-site-label > span { width: 15px; height: 1px; background: #7fa9dc; }
.mt-monitor { margin: 4px 18px 0; padding: 18px; border: 1px solid #e0e7f0; border-radius: 16px; background: #f7f9fc; color: #172334; box-shadow: 0 8px 24px #06152820; }
.mt-monitor-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.mt-monitor-heading strong { font-size: 12px; }
.mt-monitor-heading > span { color: #5f6b7b; font-size: 9px; }
.mt-monitor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mt-monitor-grid > div { min-width: 0; }
.mt-monitor-grid small { display: block; font-size: 8px; color: #5f6b7b; letter-spacing: .05em; font-weight: 700; }
.mt-monitor-grid strong { display: block; margin: 6px 0 8px; font-size: 26px; line-height: 1.2; letter-spacing: -.04em; font-weight: 650; font-variant-numeric: tabular-nums; }
.mt-monitor-grid strong > span { font-size: 15px; margin-left: 3px; }
.mt-monitor-grid > div:last-child strong { font-size: 19px; margin-top: 10px; }
.mt-monitor-note { font-size: 9px; color: #5f6b7b; }
.mt-meter { height: 4px; border-radius: 4px; background: #e0e7f0; margin-top: 16px; overflow: hidden; }
.mt-meter > span { display: block; width: 68%; height: 100%; background: #1f477c; border-radius: inherit; }
.mt-monitor svg { width: 100%; height: 24px; fill: none; stroke: #316a42; stroke-width: 2; }
.mt-scene-footer { font-size: 9px; color: #b7cce5; }
.mt-scene-footer > span:first-child { display: flex; align-items: center; gap: 8px; }
.mt-scene-fallback { position: absolute; width: 140px; height: 130px; top: 90px; left: calc(50% - 70px); transform: skewY(-20deg); border: 1px solid #7fa9dc; background: repeating-linear-gradient(90deg, transparent 0 34px, #7fa9dc40 34px 35px), repeating-linear-gradient(0deg, #28599650 0 31px, #7fa9dc70 31px 32px); }
.mt-scene[data-rendered] .mt-scene-fallback { display: none; }
@media (max-width: 1100px) { .hero .hero-layout { gap: 28px; } .mt-signal { padding: 9px; gap: 7px; } .mt-signal-icon { flex-basis: 24px; width: 24px; height: 24px; } .mt-signal strong { font-size: 10px; } }
@media (max-width: 900px) { .hero .hero-layout { grid-template-columns: 1fr; gap: 36px; } .mt-scene { width: min(620px, 100%); justify-self: center; transform: none; } }
@media (max-width: 480px) {
  .hero { padding-top: 36px; }
  .mt-scene-heading, .mt-scene-footer { padding: 14px; }
  .mt-scene-heading > span { font-size: 8px; letter-spacing: .08em; }
  .mt-scene-stage { height: 350px; }
  .mt-coordinate { left: 14px; font-size: 8px; }
  .mt-signal-planning { right: 10px; top: 57px; }
  .mt-signal-documents { left: 10px; top: 208px; }
  .mt-signal-alert { right: 10px; bottom: 34px; }
  .mt-signal-detail { display: none; }
  .mt-monitor { margin-inline: 10px; padding: 14px 10px; }
  .mt-monitor-grid { gap: 8px; }
  .mt-monitor-grid small { font-size: 7px; }
  .mt-monitor-grid strong { font-size: 23px; }
  .mt-monitor-grid > div:last-child strong { font-size: 16px; }
  .mt-monitor-note { font-size: 8px; }
  .mt-scene-footer > span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mt-scene { transform: none; } }

/* Scroll-led architectural opening; native scrolling and a direct skip link. */
.mt-intro { --intro-progress: 0; --intro-reveal: 0; position: relative; height: 330svh; background: #0f2140; color: #fff; }
.mt-intro-sticky { position: sticky; top: 88px; height: calc(100svh - 88px); min-height: 600px; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 65% 65%, #28599688, transparent 60%), linear-gradient(130deg, #0f2140, #102340 55%, #1d4275); }
.mt-intro-canvas, .mt-intro-grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.mt-intro-grid { z-index: -1; opacity: .16; background-image: linear-gradient(#7fa9dc20 1px, transparent 1px), linear-gradient(90deg, #7fa9dc20 1px, transparent 1px); background-size: 80px 80px; }
.mt-intro-topline, .mt-intro-bottom { position: absolute; left: max(28px, calc((100% - 1200px) / 2)); right: max(28px, calc((100% - 1200px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.mt-intro-topline { top: 28px; font-size: 10px; letter-spacing: .1em; color: #aac4e5; opacity: var(--intro-reveal); }
.mt-intro-topline:focus-within { opacity: 1; }
.mt-intro-topline a { padding: 10px 0; color: #e5edf8; font-size: 12px; letter-spacing: 0; text-decoration: none; border-bottom: 1px solid #7fa9dc55; }
.mt-intro a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.mt-intro-copy { position: absolute; top: 50%; left: max(28px, calc((100% - 1200px) / 2)); max-width: 500px; pointer-events: none; opacity: var(--intro-reveal); transform: translateY(calc(-50% + (1 - var(--intro-reveal)) * 24px)); }
.mt-intro-sticky::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--intro-reveal); background: linear-gradient(90deg, #0f2140eb 0%, #0f21409c 28%, #0f214025 57%, transparent 78%); }
.mt-intro :is(.mt-intro-copy, .mt-intro-orbit) { z-index: 2; }
.mt-intro :is(.mt-intro-topline, .mt-intro-bottom, .mt-intro-progress) { z-index: 3; }
.mt-intro-sticky::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 60% 55%, transparent 35%, #06152855 100%); z-index: -1; }
.mt-intro-eyebrow { font-size: 10px; letter-spacing: .16em; color: #aac4e5; margin: 0 0 18px; }
.mt-intro h2 { margin: 0; font-size: clamp(38px, 4vw, 60px); font-weight: 600; letter-spacing: -.05em; line-height: 1.08; text-wrap: initial; }
.mt-intro-copy > p:last-child { margin: 24px 0 0; color: #c5d7eb; font-size: 15px; }
.mt-intro-orbit { position: absolute; padding: 20px 24px; width: 255px; border: 1px solid #7fa9dc55; border-radius: 16px; background: #102340e8; box-shadow: 0 20px 60px #06152840; opacity: 0; transform: translateY(25px); transition: opacity .5s, transform .7s; pointer-events: none; }
.mt-intro-orbit span { display: block; color: #aac4e5; font-size: 10px; letter-spacing: .08em; }
.mt-intro-orbit strong { display: block; margin: 12px 0 7px; font-size: 15px; font-weight: 600; }
.mt-intro-orbit small { color: #c5d7eb; font-size: 11px; }
.mt-intro-orbit-one { bottom: 140px; left: max(28px, calc((100% - 1200px) / 2)); }
.mt-intro-orbit-two { top: 39%; right: max(28px, calc((100% - 1200px) / 2)); }
.mt-intro-orbit-three { bottom: 115px; right: max(28px, calc((100% - 1200px) / 2)); background: #d7f2df; border-color: #d7f2df; color: #172334; }
.mt-intro-orbit-three :is(span, small) { color: #316a42; }
.mt-intro[data-chapter] .mt-intro-orbit-one, .mt-intro[data-chapter="1"] .mt-intro-orbit-two, .mt-intro[data-chapter="2"] :is(.mt-intro-orbit-two, .mt-intro-orbit-three) { opacity: 1; transform: translateY(0); }
.mt-intro-bottom { bottom: 30px; font-size: 11px; }
.mt-intro-chapters { display: flex; gap: 26px; }
.mt-intro-chapters > span { color: #aac4e5; padding-top: 12px; border-top: 1px solid #7fa9dc40; transition: color .3s, border-color .3s; }
.mt-intro-chapters > .is-current { color: #fff; border-color: #fff; }
.mt-intro-scroll { color: #c5d7eb; }
.mt-intro-scroll > span { display: inline-block; margin-left: 12px; font-size: 20px; }
.mt-intro-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #7fa9dc20; }
.mt-intro-progress > span { display: block; width: 100%; height: 100%; background: #7fa9dc; transform: scaleX(var(--intro-progress)); transform-origin: left; }
@media (max-width: 900px) { .mt-intro-sticky { top: 74px; height: calc(100svh - 74px); } .mt-intro-copy { max-width: 390px; } }
@media (max-width: 600px) {
  .mt-intro { height: 300svh; }
  .mt-intro-sticky { min-height: 550px; }
  .mt-intro-topline, .mt-intro-bottom { left: 18px; right: 18px; gap: 12px; }
  .mt-intro-topline { top: 18px; font-size: 7px; letter-spacing: .05em; }
  .mt-intro-topline a { font-size: 10px; white-space: nowrap; }
  .mt-intro-copy { left: 22px; right: 22px; top: auto; bottom: 30px; max-width: none; transform: translateY(calc((1 - var(--intro-reveal)) * 24px)); }
  .mt-intro h2 { font-size: 32px; }
  .mt-intro-eyebrow { font-size: 8px; letter-spacing: .08em; }
  .mt-intro-copy > p:last-child { font-size: 12px; margin-top: 16px; max-width: 300px; }
  .mt-intro-orbit { width: 175px; padding: 13px; }
  .mt-intro-orbit span { font-size: 8px; }
  .mt-intro-orbit strong { font-size: 11px; margin: 8px 0 0; }
  .mt-intro-orbit small { display: none; }
  .mt-intro-orbit-one { top: 39%; bottom: auto; left: 18px; }
  .mt-intro-orbit-two { top: 54%; right: 18px; }
  .mt-intro-orbit-three { bottom: 100px; right: 18px; }
  .mt-intro-bottom { bottom: 22px; align-items: flex-end; }
  .mt-intro-chapters { gap: 12px; font-size: 9px; }
  .mt-intro-scroll { max-width: 90px; font-size: 9px; text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .mt-intro { --intro-reveal: 1; height: auto; }
  .mt-intro-sticky { position: relative; top: 0; }
  .mt-intro-orbit, .mt-intro-chapters > span { transition: none; }
  .mt-intro-scroll { display: none; }
}

.mt-pulse { position: relative; height: 540px; min-width: 0; border: 1px solid #7fa9dc44; border-radius: 18px; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 50% 45%, #28599670, transparent 65%), #102340; box-shadow: inset 0 1px 0 #ffffff12, 0 24px 60px #06152830; }
.mt-pulse > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mt-pulse-heading { position: absolute; top: 22px; left: 24px; right: 24px; display: flex; align-items: center; justify-content: space-between; color: #aac4e5; font-size: 9px; letter-spacing: .12em; }
.mt-pulse-dot { width: 5px; height: 5px; border-radius: 50%; background: #d7f2df; box-shadow: 0 0 12px #d7f2df66; }
.mt-pulse-label { position: absolute; padding: 10px 12px; border: 1px solid #7fa9dc40; border-radius: 10px; background: #102340c9; }
.mt-pulse-label small { display: block; color: #aac4e5; font-size: 8px; letter-spacing: .08em; }
.mt-pulse-label strong { display: block; margin-top: 4px; color: #e5edf8; font-size: 11px; font-weight: 600; }
.mt-pulse-terrain { left: 20px; top: 95px; }
.mt-pulse-finance { right: 20px; top: 120px; }
.mt-pulse-pilotage { right: 20px; bottom: 105px; }
.mt-pulse-footer { position: absolute; bottom: 24px; left: 24px; right: 24px; padding-top: 18px; border-top: 1px solid #7fa9dc30; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mt-pulse-footer strong { color: #fff; font-size: 13px; font-weight: 600; }
.mt-pulse-footer > span { font-size: 9px; color: #aac4e5; }
.mt-pulse-fallback { position: absolute; top: 25%; left: 10%; width: 80%; fill: none; stroke: #7fa9dc; stroke-width: 1.5; }
.mt-pulse[data-webgl] .mt-pulse-fallback { display: none; }

.mt-brain { position: relative; min-width: 0; overflow: hidden; border: 1px solid #7fa9dc44; border-radius: 18px; color: #e5edf8; background: radial-gradient(ellipse at 50% 40%, #28599688, transparent 65%), #102340; box-shadow: 0 24px 60px #17365f20, inset 0 1px 0 #ffffff18; }
.mt-brain-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 22px 24px 0; color: #aac4e5; font-size: 9px; letter-spacing: .12em; }
.mt-brain-stage { position: relative; height: 340px; }
.mt-brain-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mt-brain-hint { position: absolute; bottom: 9px; left: 24px; right: 24px; text-align: center; color: #aac4e5; font-size: 10px; pointer-events: none; }
.mt-brain-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px 20px; }
.mt-brain-controls button { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 12px; min-height: 66px; border: 1px solid #7fa9dc50; border-radius: 8px; color: #e5edf8; background: #ffffff08; font: inherit; font-size: 11px; cursor: pointer; }
.mt-brain-controls button > span { color: #aac4e5; font-size: 9px; }
.mt-brain-controls button:hover { background: #ffffff12; border-color: #aac4e5; }
.mt-brain-controls button[aria-pressed="true"] { color: #d7f2df; border-color: #a3d7b2; background: #d7f2df12; }
.mt-brain-controls button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mt-brain-description { margin: 0 20px 22px; padding: 16px 4px 0; border-top: 1px solid #7fa9dc30; min-height: 78px; }
.mt-brain-description strong { display: block; color: #fff; font-size: 13px; font-weight: 600; }
.mt-brain-description p { margin: 7px 0 0; color: #c5d7eb; font-size: 11px; line-height: 1.65; }
.mt-brain-fallback { position: absolute; top: 12%; left: 15%; width: 70%; fill: #28599640; stroke: #7fa9dc; stroke-width: 2; }
.mt-brain[data-webgl] .mt-brain-fallback { display: none; }
@media (max-width: 600px) { .mt-brain-heading { padding: 18px 16px 0; font-size: 8px; } .mt-brain-stage { height: 280px; } .mt-brain-controls { gap: 6px; padding: 12px; } .mt-brain-controls button { padding: 9px 7px; font-size: 10px; } .mt-brain-description { margin: 0 12px 18px; } .mt-brain-hint { font-size: 9px; } }
@media (hover: none) { .mt-brain-hint { display: none; } }
@media (max-width: 360px) { .mt-brain-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mt-brain-controls button { flex-direction: row; align-items: center; gap: 8px; min-height: 44px; } }
@media (max-width: 600px) { .mt-pulse { height: 410px; } .mt-pulse-heading { left: 16px; right: 16px; font-size: 8px; } .mt-pulse-label { padding: 8px; } .mt-pulse-terrain { left: 12px; top: 70px; } .mt-pulse-finance { right: 12px; top: 92px; } .mt-pulse-pilotage { right: 12px; bottom: 82px; } .mt-pulse-footer { left: 16px; right: 16px; bottom: 18px; } .mt-pulse-footer strong { font-size: 11px; } .mt-pulse-footer > span { font-size: 8px; } }
