#contact-section {
   width: 100%;
   min-height: auto;
   padding: clamp(56px, 7vw, 88px) 5% clamp(36px, 6vw, 72px);
   background:
      linear-gradient(180deg, rgba(0, 71, 255, 0.08), rgba(0, 71, 255, 0)),
      var(--bg);
   color: var(--main-text);
}

.contact-header {
   width: min(1120px, 100%);
   margin: 0 auto 28px;
}

.contact-kicker {
   display: inline-flex;
   align-items: center;
   min-height: 30px;
   padding: 5px 10px;
   border-radius: 999px;
   background: rgba(255, 214, 0, 0.24);
   color: var(--dark-color);
   font-size: 0.78rem;
   font-weight: 900;
   text-transform: uppercase;
}

.contact-header h2 {
   max-width: 760px;
   margin: 12px 0 0;
   color: var(--main-text);
   font-size: clamp(2rem, 4vw, 3.8rem);
   line-height: 1.02;
}

.contact-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 16px;
   width: min(1120px, 100%);
   margin: 0 auto;
}

.contact-card {
   display: grid;
   grid-template-columns: 54px 1fr;
   gap: 16px;
   align-items: start;
   min-height: 158px;
   padding: 20px;
   border: 1px solid rgba(0, 44, 153, 0.12);
   border-radius: 8px;
   background: var(--secondary-bg);
   box-shadow: 0 18px 38px rgba(0, 44, 153, 0.1);
   transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.contact-card:hover {
   transform: translateY(-3px);
   border-color: rgba(0, 71, 255, 0.28);
   box-shadow: 0 22px 48px rgba(0, 44, 153, 0.15);
}

.contact-card.is-urgent {
   border-color: rgba(212, 38, 38, 0.24);
}

.contact-icon {
   display: grid;
   place-items: center;
   width: 54px;
   height: 54px;
   border-radius: 8px;
   background: rgba(0, 71, 255, 0.1);
   color: var(--primary-color);
   font-size: 1.25rem;
}

.is-urgent .contact-icon {
   background: rgba(212, 38, 38, 0.12);
   color: #d42626;
}

.contact-info {
   min-width: 0;
}

.contact-type {
   color: var(--primary-color);
   font-size: 0.75rem;
   font-weight: 900;
   text-transform: uppercase;
}

.is-urgent .contact-type {
   color: #d42626;
}

.contact-info h3 {
   margin: 4px 0 0;
   color: var(--main-text);
   font-size: 1.2rem;
   line-height: 1.2;
}

.contact-info p {
   margin: 6px 0 0;
   color: var(--text-color);
   font-size: 0.92rem;
   line-height: 1.45;
}

.contact-phone {
   display: inline-flex;
   align-items: center;
   margin-top: 14px;
   color: var(--dark-color);
   font-size: 1.22rem;
   font-weight: 900;
   line-height: 1.15;
   text-decoration: none;
}

a.contact-phone:hover {
   color: var(--primary-color);
}

.contact-phone.muted {
   color: var(--text-color);
   font-size: 1rem;
   font-weight: 800;
}

body.dark {
   .contact-kicker {
      background: rgba(255, 214, 0, 0.18);
      color: var(--accent-color);
   }

   .contact-card {
      border-color: rgba(255, 255, 255, 0.08);
      box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
   }

   .contact-card.is-urgent {
      border-color: rgba(255, 120, 120, 0.24);
   }

   .contact-icon {
      background: rgba(255, 255, 255, 0.06);
   }

   .contact-phone {
      color: var(--text-light);
   }
}

@media (max-width: 960px) {
   .contact-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 640px) {
   #contact-section {
      padding: 30px 4%;
   }

   .contact-grid {
      grid-template-columns: 1fr;
      gap: 12px;
   }

   .contact-card {
      min-height: 0;
      padding: 16px;
   }

   .contact-phone {
      font-size: 1.12rem;
   }
}