body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      scroll-behavior: smooth;
    }
    .navbar .nav-item a {
        font-weight: 600;
    }
    .navbar-brand span {
      font-weight: 700;
      letter-spacing: 0.5px;
    }
    .navbar {
      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    }
    
    .hero {
      background-color: #020617; /* fallback color */
      /* Gradient overlay + background image */
      background-image:
        radial-gradient(circle at top left, rgba(13,110,253,0.45), transparent 55%),
        linear-gradient(135deg, rgba(2,6,23,0.96), rgba(15,23,42,0.20)),
        url('../img/hero-bg.jpg'); /* update path to your actual hero image */
      background-size: cover;
      background-position: center right;
      background-repeat: no-repeat;
      color: #fff;
      padding: 100px 0 100px;
      position: relative;
      overflow: hidden;
    }
    .hero::after {
      content: "";
      position: absolute;
      right: -120px;
      top: -80px;
      width: 420px;
      height: 420px;
      border-radius: 50%;
      background: rgba(13,110,253,0.08);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .badge-soft {
      background: rgba(13,110,253,0.12);
      color: #cfe2ff;
      border-radius: 999px;
      padding: 6px 14px;
      font-size: 0.8rem;
    }
    .hero-title {
      font-size: 2.6rem;
      font-weight: 700;
      line-height: 1.2;
    }
    .hero-subtitle {
      font-size: 1.05rem;
      color: #e2e6ea;
    }
    .hero-card {
      background: rgba(15,23,42,0.92);
      border-radius: 18px;
      border: 1px solid rgba(148,163,184,0.25);
      backdrop-filter: blur(12px);
    }
    .hero-stat {
      border-right: 1px solid rgba(148,163,184,0.35);
    }
    @media (max-width: 767.98px){
      .hero {
        padding-top: 90px;
      }
      .hero-title {
        font-size: 2rem;
      }
      .hero-stat {
        border-right: none;
        border-bottom: 1px solid rgba(148,163,184,0.35);
        margin-bottom: 1rem;
        padding-bottom: 1rem;
      }
    }
    .section-title {
      font-weight: 700;
      font-size: 1.9rem;
    }
    .section-subtitle {
      color: #6c757d;
      max-width: 620px;
    }
    .icon-circle {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(13,110,253,0.08);
      color: #0d6efd;
      font-size: 1.3rem;
    }
    .feature-card {
      border-radius: 18px;
      border: 1px solid rgba(0,0,0,0.05);
      box-shadow: 0 10px 30px rgba(15,23,42,0.06);
      transition: all 0.2s ease;
      height: 100%;
    }
    .feature-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 45px rgba(15,23,42,0.14);
      border-color: rgba(13,110,253,0.4);
    }
    .feature-card .icon-circle {
  background: radial-gradient(circle at 30% 30%, #e0f2ff, #dbeafe, #f3e8ff);
  color: #1d4ed8;
  box-shadow: 0 10px 25px rgba(15,23,42,0.15);
}
    .bg-soft {
      background: #f8fafc;
    }
    .pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      background: #e7f1ff;
      color: #0d47a1;
      font-size: 0.78rem;
      margin: 2px;
    }
    .industry-card {
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  height: 100%;
  background: #fff;
  transition: all 0.2s;
  overflow: hidden;
}
.industry-card:hover {
  border-color: #0d6efd;
  box-shadow: 0 16px 40px rgba(15,23,42,0.12);
  transform: translateY(-4px);
}
.industry-image {
  width: 100%;
  height: 190px;
  overflow: hidden;
}
.industry-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.industry-body {
  padding: 16px 18px 14px;
}
.contact-card {
      border-radius: 18px;
      border: 1px solid rgba(15,23,42,0.12);
      box-shadow: 0 16px 40px rgba(15,23,42,0.08);
      background: #fff;
    }
    .stat-pill {
      border-radius: 999px;
      padding: 8px 14px;
      background: #f1f5f9;
      font-size: 0.78rem;
      color: #475569;
    }
    .timeline {
      position: relative;
      padding-left: 24px;
    }
    .timeline::before {
      content: "";
      position: absolute;
      left: 22px;
      top: 2px;
      bottom: 2px;
      width: 2px;
      background: linear-gradient(to bottom, #0d6efd, transparent);
    }
    .timeline-step {
      position: relative;
      margin-bottom: 16px;
      padding-left: 14px;
    }
    .timeline-step::before {
      content: "";
      position: absolute;
      left: -8px;
      top: 2px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid #0d6efd;
      background: #fff;
    }
   .testimonial-card {
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15,23,42,0.08);
  transition: all 0.2s ease;
}
.testimonial-card:hover {
  box-shadow: 0 18px 45px rgba(15,23,42,0.14);
  border-color: rgba(13,110,253,0.5);
  transform: translateY(-2px);
}
.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
  flex-shrink: 0;
}
.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.testimonial-name {
  font-weight: 600;
  font-size: 0.95rem;
}
.testimonial-meta {
  font-size: 0.8rem;
  color: #6b7280;
}
.testimonial-stars {
  font-size: 0.8rem;
  color: #f59e0b;
}

    .contact-card {
      border-radius: 18px;
      border: 1px solid rgba(15,23,42,0.12);
      box-shadow: 0 16px 40px rgba(15,23,42,0.12);
    }

.hero-about {
      background-color: #020617;
    background-image: radial-gradient(circle at top left, rgba(13, 110, 253, 0.45), transparent 55%), linear-gradient(135deg, rgba(2, 6, 23, 0.96), rgba(15, 23, 42, 0.20)), url(../img/control_systems.jpg);
      color: #fff;
      background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
      padding: 110px 0 80px;
      position: relative;
      overflow: hidden;
    }
    .hero-about::after {
      content: "";
      position: absolute;
      right: -120px;
      top: -80px;
      width: 420px;
      height: 420px;
      border-radius: 50%;
      background: rgba(13,110,253,0.08);
      border: 1px solid rgba(255,255,255,0.08);
    }
.hero-kicker {
      background: rgba(13,110,253,0.16);
      color: #cfe2ff;
      border-radius: 999px;
      padding: 6px 14px;
      font-size: 0.8rem;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .hero-title {
      font-size: 2.4rem;
      font-weight: 700;
      line-height: 1.2;
    }
    .hero-subtitle {
      color: #e2e6ea;
      max-width: 640px;
    }
    .breadcrumb-custom {
      font-size: 0.85rem;
      color: #cbd5f5;
    }
    .breadcrumb-custom a {
      color: #cbd5f5;
      text-decoration: none;
    }
    .breadcrumb-custom a:hover {
      text-decoration: underline;
    }
    .team-card {
      border-radius: 18px;
      border: 1px solid #e2e8f0;
      text-align: center;
      padding: 18px;
      height: 100%;
      background: #fff;
    }
    .team-avatar {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      color: #64748b;
      margin: 0 auto 10px;
    }
    .value-card {
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      background: #fff;
      padding: 18px 18px 14px;
      height: 100%;
      transition: all 0.2s ease;
    }
    .value-card:hover {
      box-shadow: 0 16px 40px rgba(15,23,42,0.12);
      transform: translateY(-3px);
      border-color: #0d6efd;
    }
    .hero-products {
      background-color: #020617;
    background-image: radial-gradient(circle at top left, rgba(13, 110, 253, 0.45), transparent 55%), linear-gradient(135deg, rgba(2, 6, 23, 0.96), rgba(15, 23, 42, 0.20)), url(../img/hero-bg.jpg);
      color: #fff;
      background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
      padding: 110px 0 80px;
      position: relative;
      overflow: hidden;
    }
    .hero-products::after {
      content: "";
      position: absolute;
      right: -120px;
      top: -80px;
      width: 420px;
      height: 420px;
      border-radius: 50%;
      background: rgba(13,110,253,0.08);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .product-card {
      border-radius: 18px;
      border: 1px solid #e2e8f0;
      background: #fff;
      padding: 20px 20px 18px;
      height: 100%;
      transition: all 0.2s ease;
    }
    .product-card:hover {
      box-shadow: 0 18px 45px rgba(15,23,42,0.12);
      transform: translateY(-3px);
      border-color: #0d6efd;
    }
    .product-image {
  width: 100%;
  height: 220px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
}
.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-contact {
      background-color: #020617;
    background-image: radial-gradient(circle at top left, rgba(13, 110, 253, 0.45), transparent 55%), linear-gradient(135deg, rgba(2, 6, 23, 0.96), rgba(15, 23, 42, 0.20)), url(../img/hero-bg.jpg);
      color: #fff;
      background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
      padding: 110px 0 80px;
      position: relative;
      overflow: hidden;
    }
    .hero-contact::after {
      content: "";
      position: absolute;
      right: -120px;
      top: -80px;
      width: 420px;
      height: 420px;
      border-radius: 50%;
      background: rgba(13,110,253,0.08);
      border: 1px solid rgba(255,255,255,0.08);
    }
 .faq-accordion .accordion-button {
      font-size: 0.95rem;
      font-weight: 500;
    }
    .faq-accordion .accordion-body {
      font-size: 0.9rem;
    }
    .footer {
      background: #020617;
      color: #cbd5f5;
      padding: 32px 0 18px;
    }
    .footer a {
      color: #cbd5f5;
      text-decoration: none;
    }
    .footer a:hover {
      color: #fff;
    }