/* ============================
   Engineers Section
   ============================ */

.engineers {
  --grid-color: rgba(114, 114, 114, 0.3);
  padding: var(--section-padding) 0;
  background-color: #191a1a;
  background-image:
    linear-gradient(0deg, transparent 24%, var(--grid-color) 25%, var(--grid-color) 26%, transparent 27%, transparent 74%, var(--grid-color) 75%, var(--grid-color) 76%, transparent 77%, transparent),
    linear-gradient(90deg, transparent 24%, var(--grid-color) 25%, var(--grid-color) 26%, transparent 27%, transparent 74%, var(--grid-color) 75%, var(--grid-color) 76%, transparent 77%, transparent);
  background-size: 15px 15px;
  color: var(--color-white);
}

.engineers__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.engineers__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

/* --- Left column --- */
.engineers__content {
  max-width: 540px;
}

.engineers__title {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  color: var(--color-white);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-md);
  text-transform: uppercase;
}

.engineers__title::before {
  content: '';
  display: inline-block;
  vertical-align: inherit;
  width: 28px;
  height: 14px;
  margin-right: 12px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 810 387'><g transform='translate(0,387) scale(0.1,-0.1)' fill='%23ffffff'><path d='M1413 3733 c-45 -114 -208 -503 -433 -1033 -43 -102 -142 -338 -220 -525 -78 -187 -180 -428 -225 -535 -45 -107 -85 -204 -88 -215 -4 -11 -36 -85 -71 -165 l-63 -145 -152 -3 -151 -3 0 -549 0 -550 967 2 968 3 258 685 c141 377 279 746 306 820 27 74 53 136 59 138 12 4 30 -34 277 -568 34 -74 85 -182 112 -240 28 -58 61 -127 73 -155 13 -27 60 -129 105 -225 46 -96 113 -238 149 -315 l66 -140 701 0 701 0 225 480 c394 843 415 888 470 1010 30 66 57 128 60 138 12 38 33 12 68 -85 21 -57 68 -184 105 -283 203 -537 247 -653 340 -905 56 -151 109 -294 117 -317 l16 -43 968 0 969 0 0 550 0 550 -154 0 -154 0 -60 143 c-127 298 -285 674 -307 727 -12 30 -54 129 -93 220 -38 91 -114 269 -167 395 -54 127 -135 318 -180 425 -46 107 -133 314 -195 460 -62 146 -124 291 -138 323 l-25 57 -899 -2 -900 -3 -135 -290 c-74 -159 -170 -366 -213 -460 -43 -93 -128 -278 -190 -410 -62 -132 -130 -277 -151 -322 l-38 -83 -44 0 -43 0 -34 73 c-19 39 -69 146 -112 236 -43 89 -78 165 -78 166 0 2 -40 88 -89 192 -49 103 -103 220 -121 258 -112 242 -248 531 -276 588 l-28 57 -901 0 -901 0 -51 -127z'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.engineers__desc {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0 0 var(--space-xl);
}

/* --- Checklist --- */
.engineers__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl);
}

.engineers__list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
}

.engineers__list-item:last-child {
  margin-bottom: 0;
}

.engineers__list-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-white);
  margin-top: 1px;
}

/* --- CTA button --- */
.engineers__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-white);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.engineers__cta:hover {
  background: var(--color-gray-50);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.engineers__cta svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.engineers__cta:hover svg {
  transform: translateX(4px);
}

/* --- Right column: feature cards --- */
.engineers__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.engineers__feature {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.engineers__feature:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.engineers__feature-icon {
  width: 40px;
  height: 40px;
  color: var(--color-white);
  margin-bottom: var(--space-sm);
  opacity: 0.9;
}

.engineers__feature-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-white);
  margin: 0 0 var(--space-xs);
}

.engineers__feature-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  margin: 0;
}

/* --- Scroll animation --- */
.engineers__animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.engineers__animate--visible {
  opacity: 1;
  transform: translateY(0);
}

.engineers__animate--delay {
  transition-delay: 150ms;
}

/* --- Responsive --- */
@media (max-width: 1023px) {
  .engineers__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .engineers__content {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .engineers {
    padding: var(--section-padding-sm) 0;
  }

  .engineers__container {
    padding: 0 var(--container-padding-mobile);
  }

  .engineers__title {
    font-size: 28px;
  }

  .engineers__features {
    grid-template-columns: 1fr;
  }
}