*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'Spline Sans',sans-serif;line-height:1.6;position:relative;overflow-x:hidden}

.industrial-background{
  position:fixed;top:0;left:0;width:100%;height:100%;z-index:-3;
  background-color:#ffffff;
  background-image:
    linear-gradient(63deg,#e8e8e8 23%,transparent 23%) 7px 0,
    linear-gradient(63deg,transparent 74%,#e8e8e8 78%),
    linear-gradient(63deg,transparent 34%,#e8e8e8 38%,#e8e8e8 58%,transparent 62%),
    linear-gradient(to bottom,rgba(0,0,0,.03) 1px,transparent 1px),
    linear-gradient(to right,rgba(0,0,0,.03) 1px,transparent 1px);
  background-size:32px 64px,32px 64px,32px 64px,32px 32px,32px 32px;
  opacity:1
}

.metal-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;z-index:-2;
  background-image:
    radial-gradient(circle at 10% 20%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 90% 40%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 50% 80%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 30% 60%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 70% 30%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 20% 70%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 85% 75%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 15% 35%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 95% 15%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 5% 85%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 65% 55%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 35% 45%,#d0d0d0 2px,transparent 3px),
    radial-gradient(circle at 25% 25%,#c8c8c8 3px,transparent 4px),
    radial-gradient(circle at 75% 65%,#c8c8c8 3px,transparent 4px),
    radial-gradient(circle at 45% 85%,#c8c8c8 3px,transparent 4px),
    radial-gradient(circle at 85% 25%,#c8c8c8 3px,transparent 4px),
    repeating-linear-gradient(90deg,transparent,transparent 18px,rgba(180,180,180,.3) 19px,rgba(180,180,180,.3) 20px,transparent 21px),
    repeating-linear-gradient(0deg,transparent,transparent 18px,rgba(180,180,180,.3) 19px,rgba(180,180,180,.3) 20px,transparent 21px),
    radial-gradient(circle at 40% 30%,rgba(200,200,200,.6) 1px,transparent 2px),
    radial-gradient(circle at 60% 70%,rgba(200,200,200,.6) 1px,transparent 2px),
    radial-gradient(circle at 80% 50%,rgba(200,200,200,.6) 1px,transparent 2px);
  background-size:80px 80px,80px 80px,80px 80px,80px 80px,80px 80px,80px 80px,80px 80px,80px 80px,80px 80px,80px 80px,80px 80px,80px 80px,100px 100px,100px 100px,100px 100px,100px 100px,40px 40px,40px 40px,150px 150px,150px 150px,150px 150px;
  opacity:.8
}

.grid-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(180,180,180,.4) 40px,rgba(180,180,180,.4) 41px,transparent 42px),
    repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(180,180,180,.4) 40px,rgba(180,180,180,.4) 41px,transparent 42px),
    repeating-linear-gradient(0deg,transparent,transparent 9px,rgba(200,200,200,.2) 10px,transparent 11px),
    repeating-linear-gradient(90deg,transparent,transparent 9px,rgba(200,200,200,.2) 10px,transparent 11px);
  background-size:80px 80px,80px 80px,20px 20px,20px 20px;
  opacity:.7
}

.shadow-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;
  background:
    radial-gradient(ellipse at 30% 20%,rgba(0,0,0,.03) 0,transparent 50%),
    radial-gradient(ellipse at 70% 80%,rgba(0,0,0,.02) 0,transparent 50%),
    radial-gradient(circle at 10% 10%,rgba(255,255,255,.8) 0,transparent 30%),
    radial-gradient(circle at 90% 90%,rgba(255,255,255,.6) 0,transparent 40%);
  pointer-events:none;opacity:.5
}

.dark .industrial-background{
  background-color:#1a1a1a;
  background-image:
    linear-gradient(63deg,#2a2a2a 23%,transparent 23%) 7px 0,
    linear-gradient(63deg,transparent 74%,#2a2a2a 78%),
    linear-gradient(63deg,transparent 34%,#2a2a2a 38%,#2a2a2a 58%,transparent 62%),
    linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px)
}

.dark .metal-overlay{opacity:.6}
.dark .grid-overlay{opacity:.5}

.logo-circle{
  height:60px;width:60px;border-radius:50%;border:2px solid rgba(255,255,255,.25);
  display:flex;justify-content:center;align-items:center;overflow:hidden;
  backdrop-filter:blur(2px);transition:all .3s ease;flex-shrink:0;
  background:rgba(255,255,255,.1)
}

.logo-circle:hover{transform:scale(1.07)}
.logo-img{height:110%;width:auto;object-fit:cover;image-rendering:-webkit-optimize-contrast}

.service-card{
  transition:transform .35s ease,box-shadow .35s ease,all .3s ease;
  will-change:transform;backface-visibility:hidden
}

.service-card:hover{
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 10px 15px -3px rgb(0 0 0 / .1)
}

.service-card:hover .icon-wrapper{transform:rotate(6deg) scale(1.1)}
.icon-wrapper{transition:all .3s ease;will-change:transform}

.carousel-slide{
  background-size:cover;background-position:center;background-repeat:no-repeat;
  image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges
}

@keyframes fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes slide-up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

.animate-fade-in{animation:fade-in .8s ease-out both}
.animate-slide-up{animation:slide-up .6s ease-out both}

.service-card:nth-child(1){animation-delay:.1s}
.service-card:nth-child(2){animation-delay:.2s}
.service-card:nth-child(3){animation-delay:.3s}
.service-card:nth-child(4){animation-delay:.4s}
.service-card:nth-child(5){animation-delay:.5s}
.service-card:nth-child(6){animation-delay:.6s}

button:focus,a:focus{outline:2px solid #E53935;outline-offset:2px}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

@media (max-width:768px){
  .logo-circle{height:50px;width:50px}
  body{font-size:16px;text-size-adjust:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important
  }
  .service-card:hover{transform:none}
  .service-card:hover .icon-wrapper{transform:none}
}

@media (prefers-contrast:high){.service-card{border-width:2px}}