@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #F7F7F4;
  color: #0B0E14;
}

.font-display { font-family: 'Space Grotesk', sans-serif; }
.font-mono { font-family: 'IBM Plex Mono', monospace; }

.label-mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1E4FD8;
  font-weight: 500;
}

.bp-grid {
  background-image:
    linear-gradient(to right, #00000009 1px, transparent 1px),
    linear-gradient(to bottom, #00000009 1px, transparent 1px);
  background-size: 40px 40px;
}

.card {
  border-radius: 1rem;
  border: 1px solid rgba(11, 14, 20, 0.1);
  background: rgba(255, 255, 255, 0.6);
  padding: 1.25rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 9999px;
  padding: 0.25rem 0.65rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  border: 1px solid rgba(11, 14, 20, 0.15);
}
.badge-blueprint { border-color: rgba(30,79,216,0.3); background: rgba(30,79,216,0.1); color: #173CAA; }
.badge-signal { border-color: rgba(242,169,59,0.4); background: rgba(242,169,59,0.1); color: #C97F1B; }
.badge-green { border-color: rgba(30,158,82,0.35); background: rgba(30,158,82,0.1); color: #167A40; }
.badge-outline { color: rgba(11,14,20,0.7); }

.btn-primary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #1E4FD8; color: white;
  padding: 0.65rem 1.3rem; border-radius: 9999px;
  font-size: 0.875rem; font-weight: 500;
}
.btn-outline {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid rgba(11,14,20,0.15);
  padding: 0.65rem 1.3rem; border-radius: 9999px;
  font-size: 0.875rem; font-weight: 500;
}
.btn-green {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #1E9E52; color: white;
  padding: 0.65rem 1.3rem; border-radius: 9999px;
  font-size: 0.875rem; font-weight: 500;
}

.field-input {
  height: 2.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(11,14,20,0.15);
  background: white;
  padding: 0 0.9rem;
  font-size: 0.875rem;
  outline: none;
  width: 100%;
}
.field-input:focus { border-color: #1E4FD8; }

.mobile-menu { display: none; }
.mobile-menu.open { display: flex; }

/* ---------- Motion & brand accents ---------- */
.card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(11,14,20,0.18); border-color: rgba(30,79,216,0.3); }

.btn-primary, .btn-outline, .btn-green {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn-primary:hover, .btn-green:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(30,79,216,0.45); }
.btn-outline:hover { transform: translateY(-2px); border-color: rgba(30,79,216,0.4); }

.gradient-text {
  background: linear-gradient(90deg, #C97F1B, #F2A93B 35%, #1E4FD8 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-stage { position: relative; overflow: hidden; }
.hero-stage .hero-content { position: relative; z-index: 1; }
.hero-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(46px);
  z-index: 0;
  pointer-events: none;
}
.hero-blob-1 {
  width: 26rem; height: 26rem; top: -6rem; left: -6rem;
  background: radial-gradient(circle at 35% 35%, rgba(242,169,59,0.38), transparent 70%);
  animation: float-a 11s ease-in-out infinite;
}
.hero-blob-2 {
  width: 24rem; height: 24rem; bottom: -7rem; right: -5rem;
  background: radial-gradient(circle at 65% 65%, rgba(30,79,216,0.32), transparent 70%);
  animation: float-b 13s ease-in-out infinite;
}
.hero-blob-3 {
  width: 16rem; height: 16rem; top: 30%; right: 12%;
  background: radial-gradient(circle at 50% 50%, rgba(30,158,82,0.22), transparent 70%);
  animation: float-a 9s ease-in-out infinite reverse;
}
@keyframes float-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(22px, -18px) scale(1.07); }
}
@keyframes float-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-24px, 16px) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-blob-1, .hero-blob-2, .hero-blob-3 { animation: none; }
}

.pulse-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 9999px;
  background: #1E9E52; margin-right: 6px;
  box-shadow: 0 0 0 0 rgba(30,158,82,0.5);
  animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(30,158,82,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(30,158,82,0); }
  100% { box-shadow: 0 0 0 0 rgba(30,158,82,0); }
}

/* ---------- Bilingual toggle ---------- */
/* Default language is Azerbaijani; JS flips data-lang on <html> */
html[data-lang="az"] .lang-en { display: none !important; }
html[data-lang="en"] .lang-az { display: none !important; }

.template-box {
  white-space: pre-wrap;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  line-height: 1.6;
  background: #12161F;
  color: #E7E9EC;
  border-radius: 0.75rem;
  padding: 1.25rem;
}