.material-symbols-outlined{
  font-variation-settings:'FILL'0,'wght'400,'GRAD'0,'opsz'24
}

@keyframes fade-in{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

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

body{
  font-family:'Spline Sans',sans-serif;
  scroll-behavior:smooth
}

.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,.02) 1px,transparent 1px),
    linear-gradient(to right,rgba(0,0,0,.02) 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,.2) 19px,rgba(180,180,180,.2) 20px,transparent 21px),
    repeating-linear-gradient(0deg,transparent,transparent 18px,rgba(180,180,180,.2) 19px,rgba(180,180,180,.2) 20px,transparent 21px),
    radial-gradient(circle at 40% 30%,rgba(200,200,200,.4) 1px,transparent 2px),
    radial-gradient(circle at 60% 70%,rgba(200,200,200,.4) 1px,transparent 2px),
    radial-gradient(circle at 80% 50%,rgba(200,200,200,.4) 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:.6
}

.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,.3) 40px,rgba(180,180,180,.3) 41px,transparent 42px),
    repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(180,180,180,.3) 40px,rgba(180,180,180,.3) 41px,transparent 42px),
    repeating-linear-gradient(0deg,transparent,transparent 9px,rgba(200,200,200,.15) 10px,transparent 11px),
    repeating-linear-gradient(90deg,transparent,transparent 9px,rgba(200,200,200,.15) 10px,transparent 11px);
  background-size:80px 80px,80px 80px,20px 20px,20px 20px;
  opacity:.5
}

.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,.02) 0,transparent 50%),
    radial-gradient(ellipse at 70% 80%,rgba(0,0,0,.01) 0,transparent 50%),
    radial-gradient(circle at 10% 10%,rgba(255,255,255,.6) 0,transparent 30%),
    radial-gradient(circle at 90% 90%,rgba(255,255,255,.4) 0,transparent 40%);
  pointer-events:none;
  opacity:.4
}

.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,.03) 1px,transparent 1px),
    linear-gradient(to right,rgba(255,255,255,.03) 1px,transparent 1px)
}

.dark .metal-overlay{opacity:.4}
.dark .grid-overlay{opacity:.3}

.logo-circle{
  height:48px;width:48px;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)
}

@media(min-width:640px){.logo-circle{height:60px;width:60px}}

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

.contact-card{
  transition:transform .35s ease,box-shadow .35s ease;
  border:1px solid rgba(229,57,53,.1)
}

.contact-card:hover{
  transform:translateY(-5px);
  box-shadow:0 10px 30px rgba(229,57,53,.15)
}

.form-input,.form-textarea{
  transition:all .3s ease;
  border:1px solid #d1d5db
}

.form-input:focus,.form-textarea:focus{
  border-color:#E53935;
  box-shadow:0 0 0 3px rgba(229,57,53,.15)
}

.btn-primary{
  background:#E53935;
  transition:all .3s ease
}

.btn-primary:hover{
  background:#c62828;
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(229,57,53,.3)
}

.section-title{
  position:relative;
  display:inline-block
}

.section-title::after{
  content:'';
  position:absolute;
  bottom:-4px;
  left:0;
  width:60%;
  height:2px;
  background:#E53935
}

.info-box{
  border-left:4px solid #FFC107;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.85))
}

.dark .info-box{
  background:linear-gradient(135deg,rgba(45,45,45,.95),rgba(35,35,35,.85))
}

.map-container{
  box-shadow:0 10px 40px rgba(0,0,0,.1);
  border:2px solid rgba(229,57,53,.1)
}

.form-container{
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.92))
}

.dark .form-container{
  background:linear-gradient(135deg,rgba(45,45,45,.98),rgba(35,35,35,.92))
}

.loading{
  pointer-events:none;
  opacity:.7
}

@media(max-width:768px){.logo-circle{height:50px;width:50px}}

@media(prefers-reduced-motion:reduce){
  *{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid #E53935;
  outline-offset:2px
}