:root {
  --ui-bg: #f6f8fc;
  --ui-surface: #ffffff;
  --ui-text: #111827;
  --ui-muted: #64748b;
  --ui-primary: #0f766e;
  --ui-primary-2: #0ea5a4;
  --ui-border: #e2e8f0;
  --ui-shadow: 0 10px 30px rgba(2, 8, 20, 0.08);
  --ui-radius: 14px;
}

html, body {
  background: radial-gradient(1200px 500px at 20% -10%, #e6fffb 0%, transparent 45%),
              radial-gradient(900px 400px at 95% -10%, #ecfeff 0%, transparent 40%),
              var(--ui-bg) !important;
  color: var(--ui-text);
}

body {
  font-family: "Cairo", "Segoe UI", Tahoma, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container, .container-fluid {
  max-width: 1240px;
}

.card, .service-card, .feature-card, .box, .panel {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow) !important;
}

button, .btn, a.btn {
  border-radius: 12px !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

button:hover, .btn:hover, a.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15, 118, 110, 0.18);
}

.btn-primary, .primary, .cta, a[role='button'] {
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

input, select, textarea {
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
}

h1, h2, h3 {
  letter-spacing: 0;
  line-height: 1.25;
}

p, .text-muted, small {
  color: var(--ui-muted);
}

img {
  image-rendering: auto;
}

@media (max-width: 768px) {
  .container, .container-fluid {
    padding-inline: 14px !important;
  }

  h1 { font-size: 1.8rem !important; }
  h2 { font-size: 1.45rem !important; }
}