/* =============================================
   Ateria IT — Gemensamma stilar
   Importeras på alla sidor via <link>
   ============================================= */

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

/* Navbar */
.glass-nav {
  background: rgba(216, 243, 220, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Förhindra FOUC — dölj navbar tills Tailwind är laddat */
.nav-hidden { visibility: hidden; }
/* Nav link underline animation */
.nav-link {
  color: #3f4942;
  transition: color 0.2s;
}
.nav-link:hover { color: #2b9e6c; }
.nav-link::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: #2b9e6c;
  transition: width 0.25s;
  margin-top: 2px;
}
.nav-link:hover::after { width: 100%; }
.nav-link.active {
  color: #2b9e6c;
}
.nav-link.active::after {
  width: 100%;
}

/* Backgrounds */
.hero-dots {
  background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 28px 28px;
}
.grid-pattern {
  background-image: radial-gradient(#2b9e6c 0.5px, transparent 0.5px);
  background-size: 24px 24px;
  opacity: 0.1;
}
.grid-pattern-white {
  background-image: radial-gradient(white 0.5px, transparent 0.5px);
  background-size: 24px 24px;
  opacity: 0.05;
}
.tech-line {
  background: linear-gradient(90deg, transparent, #2b9e6c, transparent);
  height: 1px;
  width: 100%;
  opacity: 0.2;
}

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bounceSlow {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.animate-fade-up   { animation: fadeUp  0.6s ease both; }
.animate-fade-in   { animation: fadeIn  0.6s ease both; }
.animate-bounce-slow { animation: bounceSlow 3s ease-in-out infinite; }
.delay-100 { animation-delay: 0.10s; }
.delay-200 { animation-delay: 0.22s; }
.delay-300 { animation-delay: 0.34s; }

/* Card hover lift */
.card-lift, .step-card, .include-card, .service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-lift:hover, .step-card:hover, .include-card:hover, .service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 48px -8px rgba(43,158,108,0.15);
}

/* Hero image rotation */
.hero-img-wrap {
  transition: transform 0.7s cubic-bezier(0.34,1.56,0.64,1);
}