/* Progressive enhancement: content stays visible without JavaScript. */
.hero-visual { position: relative; min-width: 0; }
.hero-art { isolation: isolate; }
.hero-art::before {
  content: "";
  position: absolute;
  inset: 15%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, #00c7ed17, #078cd008 48%, transparent 72%);
  pointer-events: none;
}
.hero-shield { filter: drop-shadow(0 22px 22px #06365c14); }
.orbit::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  left: 14%;
  top: 14%;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 5px #00c7ed14, 0 0 18px #00c7ed36;
}
.orbit-two::before { left: -4px; top: 49%; background: var(--orange); box-shadow: 0 0 0 5px #ff780a0e; }
.orbit-three::before { display: none; }
.motion-ready .hero-art { --hero-play-state: running; }
.motion-ready .orbit { animation: ditc-orbit 38s linear infinite; }
.motion-ready .orbit-two { animation-duration: 56s; animation-direction: reverse; }
.motion-ready .orbit-three { animation-duration: 100s; }
.motion-ready .hero-shield { animation: ditc-shield 7s ease-in-out infinite; }
.motion-ready .orbit-label { animation: ditc-label 8s ease-in-out infinite; }
.motion-ready .label-two { animation-delay: -2s; }
.motion-ready .label-three { animation-delay: -4s; }
.motion-ready .hero-art::before { animation: ditc-glow 9s ease-in-out infinite; }
.motion-ready .hero-art :is(.orbit, .hero-shield, .orbit-label),
.motion-ready .hero-art::before { animation-play-state: var(--hero-play-state); }
.motion-paused .hero-art :is(.orbit, .hero-shield, .orbit-label),
.motion-paused .hero-art::before { animation-play-state: paused; }
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid #dce8f1;
  border-radius: 20px;
  color: #526d81;
  background: #ffffffde;
  font-size: 10px;
  font-weight: 600;
}
.motion-toggle[hidden] { display: none; }
.hero-visual > .motion-toggle { position: absolute; bottom: 0; right: 0; }
.motion-toggle svg { width: 12px; height: 12px; }
.motion-toggle .motion-play { display: none; }
.motion-toggle[data-motion-paused="true"] .motion-pause { display: none; }
.motion-toggle[data-motion-paused="true"] .motion-play { display: block; }
header { transition: box-shadow 250ms ease, background 250ms ease; }
header.is-scrolled { background: #fffffffa; box-shadow: 0 5px 24px #08244609; }
header::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transform: scaleX(var(--reading-progress, 0));
  transform-origin: left;
  pointer-events: none;
}
.nav-inner nav a { position: relative; }
.nav-inner nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms ease;
}
.nav-inner nav a:is(:hover, :focus-visible, [aria-current="page"])::after { transform: scaleX(1); }
:is(.button, .text-link, .client-tile, .overview-card, .blog-card) svg:last-child { transition: transform 240ms ease; }
:is(.button, .text-link, .client-tile, .overview-card, .blog-card):is(:hover, :focus-visible) svg:last-child { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) {
  :is(.client-tile, .overview-card, .blog-card, .build-card, .plan, .technology) {
    transition: transform 280ms cubic-bezier(.2,.65,.25,1), box-shadow 280ms ease, border-color 280ms ease;
  }
  :is(.client-tile, .overview-card, .blog-card, .build-card, .plan, .technology):hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 35px #0824460d;
    border-color: #a9c7da;
  }
  .service-icon { transition: background 240ms ease, transform 240ms ease; }
  .service:hover .service-icon { background: #dff4fc; transform: translateY(-3px); }
  .motion-toggle:hover { background: #fff; border-color: #9dbed3; }
}
@keyframes ditc-orbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes ditc-shield {
  0%, 100% { transform: translate(-50%, -50%) translateY(4px); }
  50% { transform: translate(-50%, -50%) translateY(-5px); }
}
@keyframes ditc-label {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes ditc-glow {
  0%, 100% { transform: scale(.94); opacity: .65; }
  50% { transform: scale(1.08); opacity: 1; }
}
@media (max-width: 760px) {
  .hero-visual { width: 100%; max-width: 500px; padding-bottom: 39px; }
  .hero-visual > .motion-toggle { bottom: 12px; right: 50%; transform: translateX(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-art *, .hero-art::before { animation: none !important; }
  :is(.client-tile, .overview-card, .blog-card, .build-card, .plan, .technology, .service-icon):hover,
  :is(.button, .text-link, .client-tile, .overview-card, .blog-card):is(:hover, :focus-visible) svg:last-child { transform: none; }
  .motion-toggle { display: none; }
}