/* An extended motion layer: every scene also has a useful static state. */
[hidden] { display: none !important; }
.hero-grid { background-size: 56px 56px; background-image: linear-gradient(#74e6ff28 1px, transparent 1px), linear-gradient(90deg, #74e6ff28 1px, transparent 1px); animation-duration: 12s; }
.hero-visual, .hero-instrument, .system-visual { translate: 0 var(--scroll-shift, 0px); rotate: var(--scroll-turn, 0deg); }
.hero-visual { z-index: 1; }
.hero-visual[data-scroll-motion].is-visible { animation-name: media-enter; }
.hero-quick-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 15px; }
.hero-quick-links a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #c2dae7; font-size: 11px; text-underline-offset: 5px; text-decoration-color: #597581; }
.hero-quick-links a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.signal-field { position: absolute; z-index: -1; inset: 0; overflow: clip; pointer-events: none; }
.signal-trace { position: absolute; top: calc(43% + var(--i) * 3%); left: 17%; width: 108%; height: calc(42% + var(--i) * 8%); border: 1px solid #74e6ff16; border-top-color: #74e6ff50; border-left-color: #74e6ff33; border-radius: 50%; transform: rotate(-24deg); animation: contour-drift calc(15s + var(--i) * 1.2s) ease-in-out calc(var(--i) * -1.5s) infinite alternate; }
.signal-trace::after { content: ''; position: absolute; top: 10%; left: 16%; width: 5px; height: 5px; border-radius: 50%; background: #b1f3ff; box-shadow: 0 0 15px #74e6ffb3; }
.hero-instrument { position: absolute; z-index: -1; top: 72px; right: -50px; width: min(630px, 50vw); aspect-ratio: 1; pointer-events: none; opacity: .7; }
.instrument-ring { position: absolute; border-radius: 50%; border: 1px solid #74e6ff47; animation: instrument-turn 44s linear infinite; }
.instrument-ring::before, .instrument-ring::after { content: ''; position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: #b4f5ff; box-shadow: 0 0 20px #74e6ff88; }
.instrument-ring::after { top: auto; bottom: -3px; width: 5px; height: 5px; opacity: .65; }
.ring-a { inset: 2%; border-right-color: transparent; border-bottom-color: #74e6ff16; }
.ring-b { inset: 13%; border-style: dashed; border-color: #74e6ff3b; animation-direction: reverse; animation-duration: 68s; }
.ring-c { inset: 25%; border: 2px solid #74e6ff24; border-top-color: #74e6ff88; border-left-color: transparent; animation-duration: 36s; }
.instrument-grid { position: absolute; inset: 0; width: 100%; height: 100%; color: #74e6ff25; stroke-width: .75; }
.instrument-core { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 68px; height: 68px; translate: -50% -50%; border: 1px solid #74e6ff5b; border-radius: 50%; color: #b5ecf7; font: 500 14px/1 ui-monospace, Consolas, monospace; letter-spacing: .15em; background: #0b253280; }
.instrument-marker { position: absolute; color: #91bbc8; font: 9px/1.5 ui-monospace, Consolas, monospace; letter-spacing: .12em; }
.instrument-core + .instrument-marker { top: 7%; left: 52%; }
.instrument-marker:last-child { bottom: 16%; right: 13%; }
.hero-media { box-shadow: 0 40px 80px #0007, 0 0 70px #74e6ff0c; }
.hero-media::before { content: ''; position: absolute; z-index: 3; inset: 12px; border: 1px solid #bdefff17; border-radius: 14px 84px 14px 14px; pointer-events: none; }
.scan-line { animation-duration: 5.5s; }
.status-dot { animation: status-glow 3.5s ease-in-out infinite alternate; }

/* Three project situations, with all panels readable before enhancement. */
.tasks-section { position: relative; isolation: isolate; overflow: clip; background: radial-gradient(ellipse at 90% 10%, #174b6040, transparent 58%), #091923; }
.tasks-section::before { content: ''; position: absolute; z-index: -1; width: 650px; height: 650px; right: -260px; bottom: -390px; border: 1px solid #74e6ff2a; border-radius: 50%; box-shadow: 0 0 0 70px #74e6ff06, 0 0 0 140px #74e6ff04; }
.tasks-heading { display: grid; grid-template-columns: 1.25fr .75fr; gap: 70px; align-items: end; margin-bottom: 42px; }
.tasks-heading > p, .tasks-heading .section-intro { color: #b2c5d0; font-size: 14px; line-height: 1.9; max-width: 410px; }
.task-explorer { min-width: 0; border: 1px solid #35505f; border-radius: 16px; overflow: hidden; background: #0d2230; }
.task-tabs { display: none; }
.tasks-ready .task-tabs { display: flex; gap: 7px; padding: 12px; background: #07151e; border-bottom: 1px solid #35505f; }
.task-tab { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 62px; min-width: 0; padding: 13px 18px; border: 1px solid transparent; border-radius: 8px; color: #bad1de; background: transparent; font-size: 13px; font-weight: 600; line-height: 1.5; text-align: left; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.task-tab > span { color: #90adbe; font: 11px/1.5 ui-monospace, Consolas, monospace; }
.task-tab:hover { background: #163340; color: #f0faff; }
.task-tab[aria-selected='true'] { background: #74e6ff; border-color: #a4efff; color: #09202b; }
.task-tab[aria-selected='true'] > span { color: #1b4c5e; }
.task-panel { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px 54px; padding: 44px; }
.task-panel + .task-panel { border-top: 1px solid #35505f; }
.tasks-ready .task-panel { border-top: 0; }
.task-panel-copy { min-width: 0; }
.task-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.task-panel-copy > .task-number { margin: 0; color: #90cbdc; font: 500 11px/1.5 ui-monospace, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.task-number + h3 { margin-top: 15px; }
.task-panel-aside { min-width: 0; }
.task-focus-label { margin-bottom: 16px; color: #a5c5d5; font: 500 10px/1.5 ui-monospace, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.task-panel h3 { max-width: 600px; color: #f4faff; font-size: clamp(1.55rem, 2.4vw, 2.2rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.25; }
.task-panel-copy > p { margin-top: 19px; max-width: 580px; color: #b3cad7; font-size: 14px; line-height: 1.9; }
.task-items { display: grid; gap: 11px; margin: 26px 0 0; padding: 0; list-style: none; }
.task-items li { position: relative; padding-left: 24px; color: #d0e3ec; font-size: 13px; line-height: 1.8; }
.task-items li::before { content: '↗'; position: absolute; left: 0; top: 0; color: var(--accent); font-size: 15px; }
.task-focus { display: grid; align-content: center; gap: 12px; min-width: 0; }
.task-focus > span { position: relative; display: block; padding: 19px 22px 19px 39px; border: 1px solid #375868; border-radius: 8px; color: #d8eaf3; background: linear-gradient(110deg, #193849, #102b3a); font-size: 12px; line-height: 1.65; }
.task-focus > span::before { content: ''; position: absolute; left: 19px; top: 26px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px #74e6ff66; }
.task-note { grid-column: 1 / -1; color: #aec6d4; font-size: 11px; line-height: 1.8; padding-top: 18px; border-top: 1px solid #35505f; }
.task-panel-aside .task-note { margin-top: 18px; }
.task-link { grid-column: 1 / -1; display: inline-flex; width: fit-content; align-items: center; gap: 22px; min-height: 44px; color: #9cedff; font-size: 12px; font-weight: 600; text-decoration: none; }
.task-panel-copy .task-link { margin-top: 20px; }
.task-link:hover { color: #e2faff; }
.task-signal { display: flex; align-items: center; gap: 6px; height: 70px; margin-top: 20px; padding: 14px 21px; border: 1px solid #345c6d; border-radius: 8px; background: #081c27; }
.task-signal i { display: block; flex: 1 1 0; height: 22px; border-radius: 2px; background: #74e6ff; opacity: .8; animation: signal-wave 3.6s ease-in-out infinite alternate; }
.task-signal i:nth-child(3n + 1) { height: 35px; animation-delay: -1.4s; }
.task-signal i:nth-child(3n + 2) { height: 14px; animation-delay: -.7s; }
.task-signal i:nth-child(4n) { animation-duration: 4.4s; animation-delay: -2s; }
html.motion-ready:not(.motion-paused):not(.motion-reduced) .tasks-ready .task-panel:not([hidden]) { animation: panel-enter .48s cubic-bezier(.2,.7,.2,1) both; }
.service-body > p { font-size: 14px; min-height: 76px; }
.service-details { margin-top: 18px; border-top: 1px solid #294858; }
.service-details summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; color: #c9e1ed; font-size: 12px; cursor: pointer; list-style: none; }
.service-details summary::-webkit-details-marker { display: none; }
.service-details summary > span { color: var(--accent); font-size: 19px; transition: rotate .2s; }
.service-details[open] summary > span { rotate: 45deg; }
.service-details ul { display: grid; gap: 8px; padding-left: 17px; margin: 3px 0 16px; color: #b6cedb; font-size: 12px; line-height: 1.75; }
.service-details li::marker { color: #74e6ff; }
.service-details + .service-link { margin-top: 8px; }

/* A living diagram: paths move while the six service labels stay fixed. */
.system-section { position: relative; overflow: clip; background: radial-gradient(ellipse at 80% 55%, #15485e48, transparent 60%), #07131c; border-top: 1px solid #284451; }
.system-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.system-copy { min-width: 0; }
.system-copy > p:not(.section-kicker) { max-width: 450px; margin-top: 28px; color: #b4c9d5; font-size: 14px; line-height: 1.9; }
.system-copy .text-link { margin-top: 24px; color: #9defff; }
.system-visual { position: relative; width: 100%; min-width: 0; aspect-ratio: 1; isolation: isolate; }
.system-visual::before { content: ''; position: absolute; z-index: -1; inset: 15%; border-radius: 50%; background: radial-gradient(circle, #74e6ff18, #74e6ff06 40%, transparent 70%); animation: system-breathe 7s ease-in-out infinite alternate; }
.system-paths { position: absolute; inset: 0; width: 100%; height: 100%; color: #74e6ff61; stroke-width: 1; }
.system-paths path { stroke-dasharray: 5 10; animation: connector-flow 18s linear infinite; }
.system-orbit { position: absolute; inset: 12%; border: 1px solid #74e6ff2e; border-radius: 50%; animation: instrument-turn 55s linear infinite; }
.system-orbit::after { content: ''; position: absolute; top: 14%; left: 14%; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px #74e6ff99; }
.system-orbit.orbit-b { inset: 23%; border-style: dashed; border-color: #74e6ff36; animation-duration: 42s; animation-direction: reverse; }
.system-orbit.orbit-c { inset: 35%; border-width: 2px; border-top-color: #b5f5ff; border-left-color: transparent; animation-duration: 28s; }
.system-core { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 106px; height: 106px; translate: -50% -50%; border: 1px solid #93efffc7; border-radius: 50%; color: #d6f8ff; background: #0e3040; font-size: 27px; font-weight: 700; line-height: 1.2; letter-spacing: -.04em; box-shadow: 0 0 42px #74e6ff14, inset 0 0 28px #74e6ff10; }
.system-core > span { color: #99d5e5; font: 10px/1.5 ui-monospace, Consolas, monospace; letter-spacing: .15em; }
.system-node { position: absolute; display: flex; align-items: center; justify-content: center; gap: 11px; width: 154px; min-height: 62px; padding: 13px 15px; border: 1px solid #4b7183; border-radius: 8px; background: #0b2533f5; color: #d7eaf4; font-size: 11px; font-weight: 600; line-height: 1.6; box-shadow: 0 8px 28px #0002; }
.node-dot { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: #74e6ff; box-shadow: 0 0 11px #74e6ff7a; animation: status-glow 4s ease-in-out infinite alternate; }
.node-1 { top: 2%; left: 50%; translate: -50% 0; }
.node-2 { top: 26%; right: 0; }
.node-3 { bottom: 26%; right: 0; }
.node-4 { bottom: 2%; left: 50%; translate: -50% 0; }
.node-5 { bottom: 26%; left: 0; }
.node-6 { top: 26%; left: 0; }
.node-2 .node-dot, .node-5 .node-dot { animation-delay: -1.8s; }
.node-3 .node-dot, .node-6 .node-dot { animation-delay: -.9s; }
.tech-ribbon { overflow: hidden; padding-block: 17px; border-block: 1px solid #74e6ff2a; background: #0c2633; }
.tech-ribbon-track { display: flex; width: max-content; animation: ribbon-travel 46s linear infinite reverse; }
.tech-ribbon-track > span { display: block; flex: 0 0 auto; padding-right: 40px; white-space: nowrap; color: #b7deea; font: 11px/1.5 ui-monospace, Consolas, monospace; letter-spacing: .15em; }
.tech-ribbon-track i { padding-inline: 25px; color: #74e6ff; font-style: normal; }

/* Practical preparation and answers give the visual story depth. */
.project-prep { color-scheme: light; background: #e8eff0; color: #142833; }
.project-prep .section-kicker { color: #286876; }
.project-prep .display-title span { color: #536d79; }
.project-prep :focus-visible { outline-color: #066775; }
.project-prep .section-intro, .project-prep .section-heading > p { color: #4c6774; }
.prep-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 45px; }
.prep-card { position: relative; min-width: 0; padding: 30px 25px; border: 1px solid #acbec6; border-radius: 12px; background: #f5f8f8; }
.prep-number { display: block; margin-bottom: 30px; color: #326e7d; font: 12px/1.5 ui-monospace, Consolas, monospace; letter-spacing: .1em; }
.prep-card h3 { font-size: 18px; line-height: 1.4; font-weight: 600; letter-spacing: -.03em; }
.prep-card p { margin-top: 15px; color: #4c6572; font-size: 12px; line-height: 1.85; }
.prep-card::after { content: ''; position: absolute; top: 31px; right: 26px; width: 24px; height: 24px; border-top: 1px solid #5b9bab; border-right: 1px solid #5b9bab; }
.faq-section { background: #091923; }
.faq-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 88px; align-items: start; }
.faq-layout > div:first-child > p:not(.section-kicker), .faq-intro { max-width: 380px; margin-top: 25px; color: #b2c6d3; font-size: 14px; line-height: 1.9; }
.faq-list { min-width: 0; border-top: 1px solid #416271; }
.faq-item { border-bottom: 1px solid #416271; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 88px; padding-block: 22px; color: #dfedf5; font-size: 16px; font-weight: 500; line-height: 1.55; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: #93edff; }
.faq-icon { display: grid; place-items: center; flex: 0 0 31px; width: 31px; height: 31px; border: 1px solid #496b7b; border-radius: 50%; color: #94ebff; font-size: 22px; font-weight: 400; line-height: 1; transition: rotate .25s, border-color .25s; }
.faq-item[open] { border-bottom-color: #74e6ff; }
.faq-item[open] .faq-icon { rotate: 45deg; border-color: #74e6ff; }
.faq-item > p { padding: 0 52px 26px 0; color: #b5ccd9; font-size: 13px; line-height: 1.9; }
.footer-wordmark { color: transparent; background: linear-gradient(105deg, #18323e 20%, #376b7d 50%, #18323e 80%); background-size: 200% 100%; background-clip: text; -webkit-background-clip: text; animation: wordmark-sheen 16s ease-in-out infinite alternate; }

@keyframes contour-drift { to { translate: -4vw 34px; opacity: .55; } }
@keyframes instrument-turn { to { rotate: 360deg; } }
@keyframes status-glow { to { box-shadow: 0 0 20px #74e6ffab; opacity: .65; } }
@keyframes panel-enter { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes media-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes connector-flow { to { stroke-dashoffset: -150; } }
@keyframes system-breathe { to { scale: 1.14; opacity: .6; } }
@keyframes ribbon-travel { to { transform: translateX(-50%); } }
@keyframes wordmark-sheen { to { background-position: 100% 0; } }
@keyframes signal-wave { to { scale: 1 .4; opacity: .55; } }

@media (max-width: 1100px) {
  .hero-instrument { right: -75px; width: 560px; }
  .tasks-heading { gap: 48px; }
  .task-panel { padding: 34px; gap: 26px 34px; }
  .system-layout { grid-template-columns: .9fr 1.1fr; gap: 34px; }
  .system-node { width: 137px; padding-inline: 11px; font-size: 10px; }
  .system-core { width: 86px; height: 86px; font-size: 23px; }
  .prep-grid { gap: 15px; }
  .prep-card { padding: 25px 20px; }
  .prep-card h3 { font-size: 16px; }
  .prep-card::after { top: 26px; right: 21px; width: 20px; height: 20px; }
  .faq-layout { gap: 54px; }
}
@media (max-width: 768px) {
  .hero-instrument { top: auto; right: -8%; bottom: 45px; width: 90%; opacity: .65; }
  .signal-trace { left: -25%; top: calc(58% + var(--i) * 2%); width: 180%; height: calc(32% + var(--i) * 5%); }
  .hero-visual, .hero-instrument, .system-visual { rotate: 0deg; }
  .tasks-heading, .system-layout, .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tasks-heading > p, .tasks-heading .section-intro { max-width: 520px; font-size: 13px; }
  .task-tab { gap: 8px; padding: 12px 10px; min-height: 65px; font-size: 11px; }
  .task-panel { grid-template-columns: minmax(0, 1fr); padding: 32px; gap: 25px; }
  .task-panel h3 { font-size: 28px; }
  .task-panel-copy > p { font-size: 13px; }
  .task-focus { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .task-focus > span { padding: 30px 14px 15px; font-size: 10px; }
  .task-focus > span::before { left: 14px; top: 16px; }
  .system-copy > p:not(.section-kicker) { max-width: 550px; margin-top: 22px; font-size: 13px; }
  .system-visual { width: min(550px, 100%); margin-inline: auto; }
  .system-node { width: 154px; padding: 13px 15px; font-size: 11px; }
  .system-core { width: 104px; height: 104px; font-size: 27px; }
  .prep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; margin-top: 34px; }
  .prep-card { padding: 28px 24px; }
  .prep-card h3 { font-size: 18px; }
  .prep-card p { font-size: 13px; }
  .faq-layout { gap: 38px; }
  .faq-layout > div:first-child > p:not(.section-kicker), .faq-intro { max-width: 510px; font-size: 13px; }
  .faq-item summary { min-height: 83px; font-size: 15px; }
}
@media (max-width: 480px) {
  .service-body > p { min-height: 0; }
  .hero-quick-links { gap: 0 16px; margin-top: 10px; }
  .hero-quick-links a { font-size: 10px; }
  .hero-instrument { right: -12%; bottom: 110px; width: 105%; opacity: .55; }
  .hero-media::before { inset: 9px; border-radius: 10px 60px 10px 10px; }
  .instrument-marker { display: none; }
  .task-explorer { border-radius: 11px; }
  .tasks-ready .task-tabs { flex-direction: column; gap: 6px; padding: 9px; }
  .task-tab { flex: 0 0 auto; justify-content: flex-start; padding: 12px 15px; min-height: 47px; font-size: 12px; }
  .task-panel { padding: 26px 22px; gap: 22px; }
  .task-panel h3 { font-size: 25px; }
  .task-items li { font-size: 12px; }
  .task-focus { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .task-focus > span { padding: 14px 16px 14px 33px; font-size: 11px; }
  .task-focus > span::before { left: 15px; top: 21px; }
  .task-note { font-size: 10px; }
  .system-visual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; aspect-ratio: auto; padding: 22px 0 0; translate: 0 0; }
  .system-core { position: relative; top: auto; left: auto; grid-column: 1 / -1; justify-self: center; translate: 0 0; width: 94px; height: 94px; margin-bottom: 13px; }
  .system-node { position: relative; inset: auto; translate: 0 0; width: auto; padding: 14px 11px; min-height: 67px; font-size: 10px; gap: 8px; justify-content: flex-start; }
  .system-paths { display: none; }
  .system-orbit { inset: 0 auto auto 50%; width: 130px; height: 130px; translate: -50% 0; }
  .system-orbit.orbit-b { inset: 10px auto auto 50%; width: 110px; height: 110px; }
  .system-orbit.orbit-c { display: none; }
  .system-visual::before { inset: 0; }
  .tech-ribbon-track > span { font-size: 10px; }
  .prep-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .prep-card { padding: 25px; }
  .prep-number { margin-bottom: 21px; }
  .prep-card p { margin-top: 12px; }
  .faq-item summary { gap: 18px; padding-block: 20px; font-size: 14px; }
  .faq-icon { flex-basis: 27px; width: 27px; height: 27px; font-size: 20px; }
  .faq-item > p { padding-right: 0; font-size: 12px; }
}
html:not(.motion-ready) *, html:not(.motion-ready) *::before, html:not(.motion-ready) *::after { animation: none !important; }
html.motion-paused *, html.motion-paused *::before, html.motion-paused *::after { animation-play-state: paused !important; transition: none !important; }
html.motion-reduced *, html.motion-reduced *::before, html.motion-reduced *::after { animation: none !important; transition: none !important; }
html.motion-reduced .hero-visual, html.motion-reduced .hero-instrument, html.motion-reduced .system-visual { translate: 0 0; rotate: 0deg; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-visual, .hero-instrument, .system-visual { translate: 0 0; rotate: 0deg; }
}