@property --border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.navbar {
  position: fixed;
  transition: background .4s, border-color .4s, backdrop-filter .4s;
}

.navbar.nav-floating {
  background: #080a0dd9;
  backdrop-filter: blur(22px);
  border-bottom-color: #ffffff16;
}

.reading-progress {
  height: 2px;
  position: fixed;
  inset: 0 0 auto;
  z-index: 150;
  background: linear-gradient(90deg,var(--silver-dim),var(--silver) 65%,var(--silver-bright));
  transform-origin: left;
  pointer-events: none;
  box-shadow: 0 0 13px rgb(var(--silver-rgb) / .31);
}

.hero-stage {
  position: relative;
}

.hero-outro {
  display: none;
}

.hero-light {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(ellipse at var(--light-x,50%) var(--light-y,44%),#a5adb81c,transparent 51%);
}

.effects-ready .hero h1 {
  animation: intro-title 1.2s cubic-bezier(.16,1,.3,1) both;
}

.effects-ready .hero .brief-form {
  animation: intro-panel 1.1s .16s cubic-bezier(.16,1,.3,1) both;
}

.effects-ready .hero-description {
  animation: intro-panel .9s .3s both;
}

.effects-ready .hero-actions {
  animation: intro-panel .9s .4s both;
}

.effects-ready .hero .hero-thumbnails {
  z-index: 1;
}

.effects-ready .hero .floating-preview {
  animation: none;
  pointer-events: auto;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  transition: box-shadow .3s;
  /* Keep SVGs and captions eligible for re-rasterization as their scale grows. */
  will-change: auto;
}

.effects-ready .hero .floating-preview:hover {
  box-shadow: 0 0 0 1px #c6cbd280,0 20px 60px #0009;
}

.effects-ready .hero .floating-preview.is-dragging {
  cursor: grabbing;
  z-index: 8;
  box-shadow: 0 0 0 1px var(--silver-bright),0 30px 70px #000a;
}

.effects-ready .hero .floating-preview img {
  pointer-events: none;
  opacity: var(--preview-image-opacity, .85);
}

.hero-scroll>span:first-child {
  animation: scroll-cue 2s ease-in-out infinite;
}

.motion-border {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--border-angle),transparent 0deg,transparent 190deg,#929aa526 230deg,#c6cbd299 260deg,#f4f6f8c9 272deg,transparent 300deg);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: border-orbit 8s linear infinite;
  z-index: 4;
}

.workflow-screen,.about-art {
  position: relative;
}

.workflow-screen .motion-border {
  animation-duration: 13s;
}

.about-art .motion-border {
  animation-duration: 16s;
}

.button {
  overflow: visible;
}

.button-caption {
  display: inline-block;
  height: 1.3em;
  overflow: hidden;
}

.button-roll {
  display: block;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}

.button-roll>span {
  display: block;
  height: 1.3em;
  line-height: 1.3;
}

.button:hover .button-roll {
  transform: translateY(-50%);
}

.button .arrow {
  transition: transform .35s;
}

.button:hover .arrow {
  transform: rotate(45deg);
}

.effects-ready [data-magnetic] {
  transform: translate3d(var(--mx,0px),var(--my,0px),0);
  transition: transform .25s cubic-bezier(.22,1,.36,1),box-shadow .3s,background .3s;
}

.effects-ready .silver {
  animation: silver-breathe 5s ease-in-out infinite;
}

.effects-ready .silver:hover {
  animation-play-state: paused;
}

.effects-ready [data-tilt] {
  transform: perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: transform .45s cubic-bezier(.22,1,.36,1),border-color .3s;
}

.effects-ready .pricing-card:after,.effects-ready .project-card:after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .35s;
  background: radial-gradient(400px circle at var(--glow-x,50%) var(--glow-y,0%),#c6cbd210,transparent 65%);
}

.effects-ready .pricing-card:hover:after,.effects-ready .project-card:hover:after {
  opacity: 1;
}

.project-card {
  position: relative;
}

.motion-word {
  display: inline-block;
}

.effects-ready .motion-headline:not(.motion-visible) .motion-word {
  opacity: 0;
  transform: translateY(30px) rotateX(-25deg);
  filter: blur(7px);
}

.effects-ready .motion-headline.motion-visible .motion-word {
  animation: word-arrive .85s var(--word-delay,0ms) cubic-bezier(.16,1,.3,1) both;
}

.effects-ready .motion-reveal:not(.motion-headline):not(.motion-visible) {
  opacity: 0;
  translate: 0 30px;
}

.effects-ready .motion-reveal:not(.motion-headline).motion-visible {
  opacity: 1;
  translate: 0 0;
  transition: opacity .8s var(--item-delay,0ms),translate .8s var(--item-delay,0ms);
}

.effects-ready .service-card:not(.motion-visible) .service-card-image {
  clip-path: inset(12% 0 0 0 round 16px);
}

.effects-ready .service-card.motion-visible .service-card-image {
  clip-path: inset(0 round 16px);
  transition: clip-path 1s var(--item-delay,0ms),transform .45s;
}

.technology-list {
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  gap: 0;
  mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}

.technology-group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 0 0 100%;
  min-width: 720px;
  gap: 48px;
  padding-right: 48px;
  animation: technology-marquee 28s linear infinite;
}

.technology-list:hover .technology-group {
  animation-play-state: paused;
}

.orbit {
  animation: orbit-pulse 8s ease-in-out infinite;
}

.orbit:before {
  border-top-color: #c6cbd260;
  animation: rotate-orbit 24s linear infinite;
}

.orbit:after {
  border-right-color: #c6cbd235;
  animation: rotate-orbit 36s linear infinite reverse;
}

.orbit-tag {
  animation: tag-float 7s ease-in-out infinite;
}

.orbit-tag.b {
  animation-delay: -2s;
}

.orbit-tag.c {
  animation-delay: -4s;
}

.orbit-tag.d {
  animation-delay: -1s;
}

.workflow-section {
  position: relative;
}

.workflow-section:after {
  content: '';
  position: absolute;
  height: 1px;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg,#c6cbd27a,transparent);
  transform: scaleX(var(--workflow-progress,0));
  transform-origin: left;
}

.workflow-tab h3 {
  transition: color .3s;
}

.screen-sidebar span {
  transition: background .3s,color .3s;
}

.plan-footer:before,.screen-status:before {
  animation: status-pulse 3s ease-in-out infinite;
}

.footer-wordmark {
  background: linear-gradient(105deg,#262c34 20%,#a5adb870 47%,#20262e 72%);
  background-size: 250% 100%;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: footer-shimmer 14s ease-in-out infinite;
}

.pin-dialog[open] {
  animation: dialog-arrive .35s cubic-bezier(.16,1,.3,1);
}

.nav-dropdown[open] .dropdown-panel {
  animation: dropdown-arrive .25s cubic-bezier(.16,1,.3,1);
  transform-origin: top center;
}

.nav-menu:not([hidden]) {
  animation: dropdown-arrive .3s cubic-bezier(.16,1,.3,1);
}

@media(min-width:1001px) and (prefers-reduced-motion:no-preference) {
  .effects-ready:not(.effects-paused) .hero-stage {
    height: calc(100svh + 680px);
  }
  .effects-ready:not(.effects-paused) .hero {
    position: sticky;
    top: 0;
    min-height: 760px;
    max-height: none;
    height: 100svh;
  }
  .effects-ready:not(.effects-paused) .hero-content {
    transform: translateY(calc(var(--hero-exit,0)*-65px)) scale(calc(1 - var(--hero-exit,0)*.07));
    opacity: calc(1 - var(--hero-exit,0));
    visibility: visible;
  }
  .effects-ready:not(.effects-paused) .hero-content:focus-within {
    opacity: 1;
    transform: none;
  }
  .effects-ready:not(.effects-paused) .hero-thumbnails {
    mask-image: linear-gradient(#0000,#000 17%,#000 82%,#0000);
  }
  .effects-ready:not(.effects-paused) .hero-outro {
    display: block;
    position: absolute;
    z-index: 2;
    left: 15%;
    right: 15%;
    top: 17%;
    text-align: center;
    opacity: var(--hero-outro-opacity,0);
    transform: translateY(calc((1 - var(--hero-outro,0))*40px));
    pointer-events: none;
  }
  .hero-outro p {
    font-size: clamp(36px,4.5vw,64px);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -.055em;
  }
  .hero-outro p span {
    color: var(--silver);
  }
  .hero-outro .eyebrow {
    margin-bottom: 19px;
  }
  .effects-ready:not(.effects-paused) .hero-scroll {
    opacity: calc(1 - var(--hero-exit,0));
  }
  .effects-ready:not(.effects-paused) .workflow-stage {
    height: 230svh;
    position: relative;
  }
  .effects-ready:not(.effects-paused) .workflow-section {
    position: sticky;
    top: 80px;
    min-height: calc(100svh - 80px);
    padding-block: 65px;
    display: flex;
    align-items: center;
  }
}

@media(max-width:800px) {
  .technology-list {
    flex-wrap: nowrap;
  }
  .technology-group {
    min-width: 640px;
    gap: 35px;
    padding-right: 35px;
  }
  .hero .floating-preview {
    pointer-events: none!important;
  }
}

@media(max-height:780px) and (min-width:1001px) {
  .effects-ready:not(.effects-paused) .hero {
    min-height: 680px;
  }
  .effects-ready:not(.effects-paused) .workflow-section {
    padding-block: 35px;
  }
  .workflow-copy>.section-title {
    font-size: 45px;
  }
  .workflow-tab {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .workflow-tab:before {
    top: 18px;
  }
}

.effects-paused *, .effects-paused *:before, .effects-paused *:after {
  animation: none!important;
  transition: none!important;
}

.effects-paused .hero-content,.effects-paused .motion-reveal,.effects-paused .motion-word {
  opacity: 1!important;
  transform: none!important;
  translate: none!important;
  filter: none!important;
}

.effects-paused .hero .floating-preview {
  transform: rotate(var(--rotate))!important;
  opacity: .65!important;
}

.effects-paused [data-magnetic],.effects-paused [data-tilt] {
  transform: none!important;
}

.effects-paused .service-card-image {
  clip-path: none!important;
}

.effects-paused .button-roll {
  transform: none!important;
}

.effects-paused .technology-group[aria-hidden] {
  display: none;
}

.effects-paused .technology-list {
  mask-image: none;
}

.effects-paused .technology-group {
  min-width: 0;
  width: 100%;
  flex-wrap: wrap;
  padding: 0;
  gap: 18px 30px;
}

.page-inactive *, .page-inactive *:before, .page-inactive *:after {
  animation-play-state: paused!important;
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation: none!important;
    transition: none!important;
  }
  .effects-ready .motion-reveal,.effects-ready .motion-word {
    opacity: 1!important;
    transform: none!important;
    translate: none!important;
    filter: none!important;
  }
  .effects-ready .service-card-image {
    clip-path: none!important;
  }
}

@keyframes intro-title {
  from {
    opacity:0;
    transform:translateY(28px);
    filter:blur(12px);
  }
  to {
    opacity:1;
    transform:none;
    filter:blur(0);
  }
}

@keyframes intro-panel {
  from {
    opacity:0;
    transform:translateY(22px) scale(.98);
  }
  to {
    opacity:1;
    transform:none;
  }
}

@keyframes word-arrive {
  from {
    opacity:0;
    transform:translateY(30px) rotateX(-25deg);
    filter:blur(7px);
  }
  to {
    opacity:1;
    transform:none;
    filter:blur(0);
  }
}

@keyframes border-orbit {
  to {
    --border-angle:360deg;
  }
}

@keyframes scroll-cue {
  0%,100% {
    transform:translateY(-3px);
    opacity:.5;
  }
  50% {
    transform:translateY(4px);
    opacity:1;
  }
}

@keyframes silver-breathe {
  0%,100% {
    filter:drop-shadow(0 0 0 #c6cbd200);
  }
  50% {
    filter:drop-shadow(0 0 8px #c6cbd228);
  }
}

@keyframes technology-marquee {
  to {
    transform:translateX(-100%);
  }
}

@keyframes rotate-orbit {
  to {
    rotate:360deg;
  }
}

@keyframes orbit-pulse {
  50% {
    box-shadow:0 0 65px #c6cbd218,inset 0 0 45px #c6cbd211;
  }
}

@keyframes tag-float {
  50% {
    translate:0 -9px;
  }
}

@keyframes status-pulse {
  50% {
    box-shadow:0 0 9px #bbec6260;
    opacity:.55;
  }
}

@keyframes footer-shimmer {
  0%,100% {
    background-position:100% 50%;
  }
  50% {
    background-position:0% 50%;
  }
}

@keyframes dialog-arrive {
  from {
    opacity:0;
    transform:translateY(20px) scale(.95);
  }
  to {
    opacity:1;
    transform:none;
  }
}

@keyframes dropdown-arrive {
  from {
    opacity:0;
    transform:translateY(-8px) scaleY(.97);
  }
  to {
    opacity:1;
    transform:none;
  }
}