/* Technology hero — calm macro of the real Speedrun routing + primary CTA. Scoped to .section_technology-header. */
@property --th-lx{syntax:'<percentage>';inherits:true;initial-value:35%}
@property --th-ly{syntax:'<percentage>';inherits:true;initial-value:40%}
.section_technology-header{overflow:hidden}
.section_technology-header>.padding-global{z-index:2}
.th-field{position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 36%,#000 72%);mask-image:linear-gradient(90deg,transparent 0,transparent 36%,#000 72%)}
.th-field::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#000 0,transparent 18%,transparent 76%,#000 100%)}
.th-img{position:absolute;right:-4%;top:50%;height:118%;aspect-ratio:1000/1050;transform:translateY(-50%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%),linear-gradient(0deg,transparent 0,#000 18%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 38%),linear-gradient(0deg,transparent 0,#000 18%);mask-composite:intersect}
.th-macro,.th-light{position:absolute;inset:0;background:url(https://cdn.prod.website-files.com/68b7918b99fa38e5185dc4e6/6ab695217ffbcb9865ed72fb_th-board-macro.webp) center/cover no-repeat;animation:th-drift 26s ease-in-out infinite alternate}
.th-macro{opacity:.17}
/* a single soft light drifting over the board: the same image, revealed through a moving radial mask */
.th-light{opacity:.9;filter:brightness(1.15) sepia(.25) hue-rotate(170deg) saturate(1.6);
  -webkit-mask-image:radial-gradient(34% 30% at var(--th-lx) var(--th-ly),#000 0,rgba(0,0,0,.35) 45%,transparent 100%);
          mask-image:radial-gradient(34% 30% at var(--th-lx) var(--th-ly),#000 0,rgba(0,0,0,.35) 45%,transparent 100%);
  animation:th-drift 26s ease-in-out infinite alternate,th-light 17s ease-in-out infinite alternate}
@keyframes th-drift{from{transform:scale(1)}to{transform:translate(0,-1.5%) scale(1.05)}}
@keyframes th-light{0%{--th-lx:30%;--th-ly:34%}35%{--th-lx:62%;--th-ly:48%}70%{--th-lx:44%;--th-ly:70%}100%{--th-lx:72%;--th-ly:28%}}


/* primary CTA: solid Quilter blue, same family as the nav's "Talk to an Engineer" */
.section_technology-header .get-started-bts-wrapper .btn-outline{background:var(--primary-color,#007bff);border-color:var(--primary-color,#007bff);color:#fff;
  padding:1.1rem 1.4rem 1.1rem 1.6rem;font-size:1.05rem;gap:.9rem;box-shadow:0 10px 34px -10px rgba(0,123,255,.65);
  transition:background-color .25s ease,box-shadow .25s ease,transform .25s ease}
.section_technology-header .get-started-bts-wrapper .btn-outline:hover{background:#1f8bff;color:#fff;transform:translateY(-1px);box-shadow:0 14px 40px -10px rgba(0,123,255,.85)}
.section_technology-header .get-started-bts-wrapper .btn-outline .secondary_btn-arrow svg{transition:transform .25s ease}
.section_technology-header .get-started-bts-wrapper .btn-outline:hover .secondary_btn-arrow svg{transform:rotate(45deg)}

@media (max-width:767px){
  /* phone: the chip sits in the open space under the CTA, fading up into the copy */
  .th-field{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 55%,#000 84%);mask-image:linear-gradient(180deg,transparent 0,transparent 55%,#000 84%)}
  .th-field::after{background:linear-gradient(180deg,transparent 90%,#000 100%)}
  .th-img{right:2%;top:auto;bottom:-20%;height:62%;transform:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 45%);mask-image:linear-gradient(90deg,transparent 0,#000 45%)}
  .th-macro{opacity:.24}
  .section_technology-header .get-started-bts-wrapper .btn-outline{width:auto}
}
@media (prefers-reduced-motion:reduce){.th-macro,.th-light{animation:none}}

/* hero paragraph: comfortable line length (~60 characters) */
.section_technology-header .hero_description{max-width:42rem;text-wrap:pretty}