:root { --scene-top: 94px; }
.reading-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 30; pointer-events: none; }
.reading-progress span { display: block; height: 100%; background: var(--cyan); transform: scaleX(0); transform-origin: left; }
.site-header { background: rgb(248 249 255 / 92%); backdrop-filter: blur(18px); }
.connection-scene { background: var(--ink); color: var(--paper); overflow: clip; }
.connection-sticky { position: relative; padding-block: 100px; }
.connection-content { position: relative; isolation: isolate; }
.connection-content > .eyebrow { color: #82cfff; position: relative; z-index: 2; }
.connection-content h2 { position: relative; z-index: 2; margin-block: 40px; font-size: clamp(64px, 8.4vw, 124px); letter-spacing: -.065em; line-height: 1.05; }
.connection-word { display: block; width: fit-content; }
.connection-word:last-child { color: #82cfff; }
.connection-bottom { display: flex; justify-content: space-between; align-items: end; position: relative; z-index: 2; gap: 24px; }
.connection-bottom p { color: #c3d1dd; font-size: 20px; }
.scroll-cue { font: 500 9px var(--heading); letter-spacing: 2px; display: flex; align-items: center; gap: 20px; }
.scroll-cue > span { font: 400 24px var(--body); }
.connection-art { position: absolute; z-index: 0; right: -4%; top: 50%; width: min(46vw, 560px); aspect-ratio: 1; transform: translateY(-50%); opacity: .48; }
.connection-art img { width: 100%; height: auto; position: relative; }
.connection-ring { position: absolute; inset: -6%; border: 1px solid #30526b; border-radius: 50%; }
.ring-inner { inset: 12%; border-style: dashed; }
.scene-track { display: none; }
.hero-visual { transform-style: preserve-3d; }
.motion-enabled .hero-visual { transform: perspective(1100px) rotateX(calc(var(--pointer-y, 0) * -4deg)) rotateY(calc(var(--pointer-x, 0) * 5deg)) translateY(calc(var(--hero-scroll, 0) * 34px)); box-shadow: calc(var(--pointer-x, 0) * -12px) 24px 70px -45px rgb(0 101 141 / 40%); }
.motion-enabled .hero-visual .orbit { transform: translate3d(calc(var(--pointer-x, 0) * 14px), calc(var(--pointer-y, 0) * 14px), 25px); }
.motion-enabled .orbit:before { transform: scale(calc(1 + var(--hero-scroll, 0) * .2)); }
.motion-enabled .orbit img { animation: none; }
.motion-enabled .reveal { opacity: .12; transform: translateY(34px); transition: opacity 900ms cubic-bezier(.2,.65,.3,1), transform 900ms cubic-bezier(.2,.65,.3,1); transition-delay: var(--reveal-delay, 0ms); }
.motion-enabled .reveal.is-revealed, .motion-enabled .reveal:focus-within { opacity: 1; transform: translateY(0); }
.capabilities article { position: relative; transition: background 350ms; }
.capabilities article:after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 500ms cubic-bezier(.2,.65,.3,1); }
.text-link span, .button span { transition: transform 300ms; }
.text-link:hover span, .button:hover span { transform: translate(3px, -3px); }
.faq summary:after { transition: transform 300ms; }
.contact-section { position: relative; overflow: clip; isolation: isolate; }
.contact-section:before { content: ''; position: absolute; z-index: -1; width: 65vw; height: 65vw; border: 1px solid rgb(130 207 255 / 20%); border-radius: 50%; top: -20vw; right: -14vw; }
.contact-section:after { content: ''; position: absolute; z-index: -1; width: 48vw; height: 48vw; border: 1px solid rgb(130 207 255 / 20%); border-radius: 50%; top: -12vw; right: -6vw; }
@media (hover: hover) and (pointer: fine) {
  .capabilities article:hover { background: rgb(0 101 141 / 3%); }
  .capabilities article:hover:after { transform: scaleX(1); }
}
@media (min-width: 901px) and (min-height: 700px) {
  .scene-enabled .connection-scene { height: 240svh; }
  .scene-enabled .connection-sticky { position: sticky; top: var(--scene-top); height: calc(100svh - var(--scene-top)); padding-block: 0; display: flex; align-items: center; }
  .scene-enabled .connection-content { padding-block: 36px; }
  .scene-enabled .connection-content h2 { font-size: clamp(64px, 8vw, 112px); margin-block: 30px; }
  .scene-enabled .connection-word { color: #607889; background: linear-gradient(90deg, #f8f9ff 0%, #f8f9ff 50%, #607889 50%, #607889 100%); background-size: 200% 100%; background-position: calc(100% - var(--word-progress, 0) * 100%) 0; background-clip: text; -webkit-text-fill-color: transparent; transform: translateX(calc((1 - var(--word-progress, 0)) * 22px)); }
  .scene-enabled .connection-word:last-child { background-image: linear-gradient(90deg, #82cfff 0%, #82cfff 50%, #607889 50%, #607889 100%); }
  .scene-enabled .connection-art { opacity: calc(.24 + var(--connection-progress, 0) * .65); transform: translateY(-50%) scale(calc(.72 + var(--connection-progress, 0) * .28)); }
  .scene-enabled .connection-ring { transform: scale(calc(1.2 - var(--connection-progress, 0) * .2)); }
  .scene-enabled .product-section { height: 300svh; padding: 0; overflow: clip; }
  .scene-enabled .product-sticky { position: sticky; top: var(--scene-top); height: calc(100svh - var(--scene-top)); display: flex; align-items: center; overflow: clip; }
  .scene-enabled .product-sticky > .container { padding-block: 24px; }
  .scene-enabled .product-section .section-heading { max-width: none; margin-bottom: 25px; text-align: center; }
  .scene-enabled .product-section .section-heading .eyebrow { margin-bottom: 12px; }
  .scene-enabled .product-section h2 { font-size: clamp(28px, 3vw, 44px); }
  .scene-enabled .product-section .section-heading > p:last-child { font-size: 15px; max-width: none; margin-top: 12px; }
  .scene-enabled .product-gallery { position: relative; display: block; height: min(51svh, 590px); max-width: 930px; margin-inline: auto; perspective: 1600px; }
  .scene-enabled .product-gallery figure { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; transform-origin: center; }
  .scene-enabled .screenshot-frame { height: calc(100% - 46px); padding: 7px; border-radius: 10px; background: #1e3548; box-shadow: 0 20px 50px -20px #000; }
  .scene-enabled .screenshot-frame img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
  .scene-enabled .product-gallery figure:first-child { opacity: calc(1 - var(--product-swap, 0)); transform: translate3d(calc(var(--product-swap, 0) * -16%), calc((1 - var(--product-enter, 0)) * 36px), 0) rotateX(calc((1 - var(--product-enter, 0)) * 12deg)) scale(calc(.88 + var(--product-enter, 0) * .12 - var(--product-swap, 0) * .12)); }
  .scene-enabled .product-gallery figure:nth-child(2) { opacity: var(--product-swap, 0); transform: translate3d(calc((1 - var(--product-swap, 0)) * 16%), 0, 0) rotateY(calc((1 - var(--product-swap, 0)) * -8deg)) scale(calc(.9 + var(--product-swap, 0) * .1)); }
  .scene-enabled .product-gallery figcaption { flex-direction: row; justify-content: center; gap: 20px; padding-top: 14px; font-size: 13px; }
  .scene-enabled .product-gallery figcaption span { font-size: 11px; }
  .scene-enabled .scene-track { display: flex; justify-content: center; align-items: center; gap: 20px; margin: 20px auto 0; font: 400 9px var(--heading); letter-spacing: 1.5px; color: #b8ceda; }
  .scene-track > div { width: 130px; height: 2px; background: #304356; overflow: hidden; }
  .scene-track i { display: block; height: 100%; background: #82cfff; transform-origin: left; transform: scaleX(var(--product-progress, 0)); }
}
@media (max-width: 900px) {
  :root { --scene-top: 80px; }
  .connection-sticky { padding-block: 70px; }
  .connection-content h2 { font-size: clamp(64px, 11vw, 92px); }
  .connection-art { width: 55vw; right: -4%; opacity: .26; }
  .scroll-cue { display: none; }
  .motion-enabled .hero-visual { transform: none; }
  .motion-enabled .hero-visual .orbit { transform: none; }
}
@media (max-width: 620px) {
  .connection-sticky { padding-block: 60px; }
  .connection-content h2 { font-size: clamp(55px, 14vw, 86px); margin-block: 30px; }
  .connection-content > .eyebrow { font-size: 9px; letter-spacing: 1.3px; }
  .connection-bottom p { font-size: 18px; }
  .connection-art { width: 80vw; right: -22%; opacity: .18; }
  .motion-enabled .reveal { transform: translateY(20px); }
  .motion-enabled .reveal.is-revealed { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reading-progress { display: none; }
  .connection-word { color: var(--paper); }
  .connection-word:last-child { color: #82cfff; }
  .reveal { opacity: 1; transform: none; }
  .hero-visual, .hero-visual .orbit, .text-link span, .button span { transform: none; }
}