/* Brand color utilities */
:root {
  --brand: #1c71b9;
  --brand-dark: #155a96;
  --brand-light: #e8f1fb;
}

.bg-brand { background-color: var(--brand); }
.bg-brand-dark { background-color: var(--brand-dark); }
.bg-brand-light { background-color: var(--brand-light); }
.text-brand { color: var(--brand); }
.border-brand { border-color: var(--brand); }
.ring-brand { --tw-ring-color: var(--brand); }

.btn-brand {
  background-color: var(--brand);
  color: white;
  transition: background-color 0.2s ease;
}
.btn-brand:hover {
  background-color: var(--brand-dark);
}

.btn-brand-outline {
  border: 2px solid var(--brand);
  color: var(--brand);
  background: white;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-brand-outline:hover {
  background-color: var(--brand);
  color: white;
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Header shadow on scroll */
.header-scrolled { box-shadow: 0 2px 12px rgba(0,0,0,0.10); }

/* Card hover */
.service-card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.service-card:hover {
  box-shadow: 0 8px 32px rgba(28, 113, 185, 0.13);
  transform: translateY(-3px);
}

/* Step connector — faqat mobilda (vertical) */
@media (max-width: 767px) {
  .step-line::after {
    content: '';
    display: block;
    width: 2px;
    height: 40px;
    background-color: #cbd5e1;
    margin: 8px auto 0;
  }
  .step-line:last-child::after { display: none; }
}

/* Telegram green */
.btn-telegram {
  background-color: #27a7e5;
  color: white;
  transition: background-color 0.2s ease;
}
.btn-telegram:hover { background-color: #1a8bbf; }

/* Phone green */
.btn-phone {
  background-color: #22c55e;
  color: white;
  transition: background-color 0.2s ease;
}
.btn-phone:hover { background-color: #16a34a; }

/* Focus ring */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Pulse animation for CTA */
@keyframes subtlePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(28,113,185,0.3); }
  50% { box-shadow: 0 0 0 8px rgba(28,113,185,0); }
}
.cta-pulse { animation: subtlePulse 2.5s ease-in-out infinite; }

/* Section divider */
.section-divider {
  width: 56px;
  height: 4px;
  background-color: var(--brand);
  border-radius: 2px;
  margin: 12px auto 0;
}

/* Language switcher */
.lang-btn {
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: pointer;
  color: #6b7280;
  background: transparent;
  transition: background 0.15s, color 0.15s;
  line-height: 1.6;
}
.lang-btn.active {
  background-color: var(--brand);
  color: white;
  border-color: var(--brand);
}
.lang-btn:not(.active):hover {
  background-color: var(--brand-light);
  color: var(--brand);
}