:root {
      --brand: #0d6efd;
      --brand-dark: #0a58ca;
      --border: #e8eef5;
      --bg-soft: #f8fafc;
    }
    body {
      background: radial-gradient(1200px 600px at 15% -10%, #eef4ff 0%, #ffffff 55%) no-repeat;
    }
    .brand-bar {
      background: #ffffffcc;
      backdrop-filter: saturate(180%) blur(8px);
      border-bottom: 1px solid var(--border);
    }
    .brand-logo {
      font-weight: 800;
      letter-spacing: 0.3px;
      color: #111827;
        width: 280px;
    }
    .hero-card {
      border: 1px solid var(--border);
      background: #fff;
      box-shadow: 0 8px 24px rgba(13,110,253,0.08);
    }
    .lang-flag {
      width: 1.25rem;
      height: 1.25rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 2px;
      margin-right: .5rem;
    }
    .dropdown-item {
      display: flex;
      align-items: center;
      gap: .5rem;
      padding-top: .6rem;
      padding-bottom: .6rem;
    }
    .dropdown-item[aria-current="true"] {
      background-color: #e7f1ff;
      font-weight: 600;
    }
    .gradient-button {
  background: linear-gradient(135deg, #0e6871, #4dcbd8);
  border: none;
  transition: transform 120ms ease, filter 120ms ease;
  padding: 10px 20px;
}
    .gradient-button:hover { transform: translateY(-1px); filter: brightness(1.05); }
    a:focus-visible, button:focus-visible, [role="option"]:focus-visible {
      outline: 3px solid var(--brand);
      outline-offset: 2px;
    }
    @media (prefers-reduced-motion: reduce) {
      .gradient-button, .dropdown-menu { transition: none !important; }
    }
.bg-color{background: #0e6871;}
.btn-outline-primary {
  --bs-btn-color: #fff;
    --bs-btn-border-color: #0e6871;
background: #0e6871;
}
.btn-outline-primary:hover {
  --bs-btn-color: #fff;
    --bs-btn-border-color: #0e6871;
background: #0e6871;
}
.dropdown-menu {
  max-height: 50vh;
  overflow-y: auto;
}